@hkonda/loco-translate 1.0.4 → 1.0.6

package/README.md

@@ -58,15 +58,24 @@ Copy the `<script>` tags from the terminal output and paste them into any HTML p
 
 ### Configuration
 
-Set these environment variables to customise Loco's behaviour:
+Run `loco --help` to see all options:
 
-| Variable | Default | Description |
-|---|---|---|
-| `PORT` | `6101` | Server port |
-| `LOCO_DATA_DIR` | `.loco/` in cwd | Directory where `loco.db` is stored |
-| `BASE_PATH` | _(empty)_ | URL prefix for reverse-proxy deployments |
-| `BLUEHIVE_API_KEY` | _(none)_ | BlueHive key for AI translations |
-| `PUBLIC_URL` | _(auto)_ | Override the printed public URL |
+```
+Options:
+  -p, --port <number>      Port to listen on (default: 6101)
+  -d, --data-dir <path>    Directory for loco.db (default: .loco/ in cwd)
+  -h, --help               Show this help message
+```
+
+Or set environment variables (in a `.env` file or your shell):
+
+| Variable | Flag equivalent | Default | Description |
+|---|---|---|---|
+| `PORT` | `-p, --port` | `6101` | Server port |
+| `LOCO_DATA_DIR` | `-d, --data-dir` | `.loco/` in cwd | Directory where `loco.db` is stored |
+| `BASE_PATH` | — | _(empty)_ | URL prefix for reverse-proxy deployments |
+| `BLUEHIVE_API_KEY` | — | _(none)_ | BlueHive key for AI translations |
+| `PUBLIC_URL` | — | _(auto)_ | Override the printed public URL |
 
 Create a `.env` file in your working directory to set these:
 

package/assets/animated/ai-translating.svg

@@ -0,0 +1,39 @@
+<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+  <title>AI Translating</title>
+  <defs>
+    <style>
+      @keyframes textFade { 0%,20%{opacity:1} 40%,60%{opacity:0} 80%,100%{opacity:1} }
+      @keyframes textAppear { 0%,40%{opacity:0} 60%,100%{opacity:1} }
+      @keyframes sparkSpin { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
+      @keyframes sparkPulse { 0%,100%{opacity:0.3;r:2} 50%{opacity:1;r:3.5} }
+      #src-text { animation: textFade 3s ease-in-out infinite; }
+      #tgt-text { animation: textAppear 3s ease-in-out infinite; }
+      #spark-ring { animation: sparkSpin 3s linear infinite; transform-origin: 60px 60px; }
+      .sp { animation: sparkPulse 1.5s ease-in-out infinite; }
+      .sp2 { animation: sparkPulse 1.5s ease-in-out 0.3s infinite; }
+      .sp3 { animation: sparkPulse 1.5s ease-in-out 0.6s infinite; }
+      .sp4 { animation: sparkPulse 1.5s ease-in-out 0.9s infinite; }
+    </style>
+  </defs>
+
+  <!-- background circle -->
+  <circle cx="60" cy="60" r="50" fill="#1a1f2e"/>
+
+  <!-- rotating sparkle ring -->
+  <g id="spark-ring">
+    <circle class="sp" cx="60" cy="14" r="2.5" fill="#FFB833"/>
+    <circle class="sp2" cx="106" cy="60" r="2.5" fill="#2ECC88"/>
+    <circle class="sp3" cx="60" cy="106" r="2.5" fill="#3A8FE0"/>
+    <circle class="sp4" cx="14" cy="60" r="2.5" fill="#F07040"/>
+  </g>
+
+  <!-- source text fading out -->
+  <g id="src-text">
+    <text x="60" y="55" text-anchor="middle" font-family="system-ui,sans-serif" font-size="14" font-weight="600" fill="#E6F1FB">Hello</text>
+  </g>
+
+  <!-- target text fading in -->
+  <g id="tgt-text">
+    <text x="60" y="75" text-anchor="middle" font-family="system-ui,sans-serif" font-size="14" font-weight="600" fill="#2ECC88">Bonjour</text>
+  </g>
+</svg>

package/assets/animated/backup.svg

@@ -0,0 +1,36 @@
+<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+  <title>Backup in progress</title>
+  <defs>
+    <style>
+      @keyframes diskSpin { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
+      @keyframes fileFly1 { 0%{transform:translate(0,0);opacity:1} 100%{transform:translate(20px,-20px);opacity:0} }
+      @keyframes fileFly2 { 0%{transform:translate(0,0);opacity:1} 100%{transform:translate(20px,-15px);opacity:0} }
+      @keyframes fileFly3 { 0%{transform:translate(0,0);opacity:1} 100%{transform:translate(18px,-22px);opacity:0} }
+      @keyframes shieldPulse { 0%,100%{opacity:0.8;transform:scale(1)} 50%{opacity:1;transform:scale(1.05)} }
+      #disk-ring { animation: diskSpin 3s linear infinite; transform-origin: 72px 52px; }
+      .fly1 { animation: fileFly1 2s ease-out infinite; }
+      .fly2 { animation: fileFly2 2s ease-out 0.5s infinite; }
+      .fly3 { animation: fileFly3 2s ease-out 1s infinite; }
+      #shield { animation: shieldPulse 2s ease-in-out infinite; transform-origin: 72px 52px; }
+    </style>
+  </defs>
+
+  <!-- source database -->
+  <ellipse cx="42" cy="50" rx="20" ry="8" fill="#3A8FE0"/>
+  <rect x="22" y="50" width="40" height="20" fill="#3A8FE0"/>
+  <ellipse cx="42" cy="70" rx="20" ry="8" fill="#2a6ab8"/>
+  <ellipse cx="42" cy="60" rx="20" ry="8" fill="none" stroke="#2a6ab8" stroke-width="1"/>
+
+  <!-- flying files -->
+  <rect class="fly1" x="52" y="44" width="8" height="10" rx="1" fill="#2ECC88"/>
+  <rect class="fly2" x="50" y="52" width="8" height="10" rx="1" fill="#FFB833"/>
+  <rect class="fly3" x="54" y="48" width="8" height="10" rx="1" fill="#F07040"/>
+
+  <!-- target disk/shield -->
+  <g id="shield">
+    <path d="M72 35 L88 40 L88 58 Q88 70 72 75 Q56 70 56 58 L56 40 Z" fill="#1a1f2e" stroke="#2ECC88" stroke-width="2"/>
+    <polyline points="64,54 70,60 80,48" fill="none" stroke="#2ECC88" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+  </g>
+
+  <text x="60" y="100" text-anchor="middle" font-family="system-ui,sans-serif" font-size="10" fill="#888">Backing up...</text>
+</svg>

package/assets/animated/batch-progress.svg

@@ -0,0 +1,52 @@
+<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+  <title>Processing batch</title>
+  <defs>
+    <style>
+      @keyframes barGrow1 { 0%{width:0} 40%{width:44px} 100%{width:44px} }
+      @keyframes barGrow2 { 0%,20%{width:0} 60%{width:36px} 100%{width:36px} }
+      @keyframes barGrow3 { 0%,40%{width:0} 80%{width:40px} 100%{width:40px} }
+      @keyframes barGrow4 { 0%,60%{width:0} 100%{width:28px} }
+      @keyframes countUp { 0%{opacity:0} 10%{opacity:1} }
+      @keyframes checkPop { 0%{transform:scale(0);opacity:0} 100%{transform:scale(1);opacity:1} }
+      #bar1 { animation: barGrow1 3s ease-out infinite; }
+      #bar2 { animation: barGrow2 3s ease-out infinite; }
+      #bar3 { animation: barGrow3 3s ease-out infinite; }
+      #bar4 { animation: barGrow4 3s ease-out infinite; }
+      #c1 { animation: checkPop 0.3s ease 1.2s both; transform-origin: 88px 35px; }
+      #c2 { animation: checkPop 0.3s ease 1.8s both; transform-origin: 88px 50px; }
+      #c3 { animation: checkPop 0.3s ease 2.4s both; transform-origin: 88px 65px; }
+      #c4 { animation: checkPop 0.3s ease 3s both; transform-origin: 88px 80px; }
+      #pct { animation: countUp 3s ease infinite; }
+    </style>
+  </defs>
+
+  <!-- background -->
+  <rect x="10" y="15" width="100" height="90" rx="8" fill="#1a1f2e"/>
+
+  <!-- row labels -->
+  <text x="22" y="38" font-family="system-ui,sans-serif" font-size="9" fill="#888">fr</text>
+  <text x="22" y="53" font-family="system-ui,sans-serif" font-size="9" fill="#888">es</text>
+  <text x="22" y="68" font-family="system-ui,sans-serif" font-size="9" fill="#888">ja</text>
+  <text x="22" y="83" font-family="system-ui,sans-serif" font-size="9" fill="#888">de</text>
+
+  <!-- progress bars background -->
+  <rect x="36" y="30" width="44" height="8" rx="4" fill="#2a3040"/>
+  <rect x="36" y="45" width="44" height="8" rx="4" fill="#2a3040"/>
+  <rect x="36" y="60" width="44" height="8" rx="4" fill="#2a3040"/>
+  <rect x="36" y="75" width="44" height="8" rx="4" fill="#2a3040"/>
+
+  <!-- animated progress bars -->
+  <rect id="bar1" x="36" y="30" width="0" height="8" rx="4" fill="#2ECC88"/>
+  <rect id="bar2" x="36" y="45" width="0" height="8" rx="4" fill="#3A8FE0"/>
+  <rect id="bar3" x="36" y="60" width="0" height="8" rx="4" fill="#FFB833"/>
+  <rect id="bar4" x="36" y="75" width="0" height="8" rx="4" fill="#F07040"/>
+
+  <!-- checkmarks appearing -->
+  <g id="c1"><polyline points="84,35 87,38 92,32" fill="none" stroke="#2ECC88" stroke-width="2" stroke-linecap="round"/></g>
+  <g id="c2"><polyline points="84,50 87,53 92,47" fill="none" stroke="#3A8FE0" stroke-width="2" stroke-linecap="round"/></g>
+  <g id="c3"><polyline points="84,65 87,68 92,62" fill="none" stroke="#FFB833" stroke-width="2" stroke-linecap="round"/></g>
+  <g id="c4"><polyline points="84,80 87,83 92,77" fill="none" stroke="#F07040" stroke-width="2" stroke-linecap="round"/></g>
+
+  <!-- percentage counter -->
+  <text id="pct" x="60" y="104" text-anchor="middle" font-family="system-ui,sans-serif" font-size="10" font-weight="600" fill="#2ECC88">Translating...</text>
+</svg>

package/assets/animated/connected.svg

@@ -0,0 +1,33 @@
+<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+  <title>Connected</title>
+  <defs>
+    <style>
+      @keyframes pulseGlow {
+        0%,100% { r: 8; opacity: 1; }
+        50% { r: 12; opacity: 0.6; }
+      }
+      @keyframes signalWave1 { 0%{opacity:0;transform:scale(0.5)} 50%{opacity:0.8} 100%{opacity:0;transform:scale(1.5)} }
+      @keyframes signalWave2 { 0%{opacity:0;transform:scale(0.5)} 50%{opacity:0.6} 100%{opacity:0;transform:scale(2)} }
+      @keyframes checkBounce { 0%{transform:scale(0)} 60%{transform:scale(1.2)} 100%{transform:scale(1)} }
+      #green-dot { animation: pulseGlow 2s ease-in-out infinite; }
+      #wave1 { animation: signalWave1 2s ease-out infinite; transform-origin: 60px 55px; }
+      #wave2 { animation: signalWave2 2s ease-out 0.5s infinite; transform-origin: 60px 55px; }
+      #conn-check { animation: checkBounce 0.5s ease 0.3s both; transform-origin: 60px 80px; }
+    </style>
+  </defs>
+
+  <!-- signal waves -->
+  <circle id="wave1" cx="60" cy="55" r="20" fill="none" stroke="#2ECC88" stroke-width="2"/>
+  <circle id="wave2" cx="60" cy="55" r="20" fill="none" stroke="#2ECC88" stroke-width="1.5"/>
+
+  <!-- server icon -->
+  <rect x="45" y="35" width="30" height="40" rx="4" fill="#1a1f2e" stroke="#2ECC88" stroke-width="1.5"/>
+  <circle id="green-dot" cx="60" cy="48" r="8" fill="#2ECC88"/>
+  <rect x="52" y="58" width="16" height="3" rx="1.5" fill="#333"/>
+  <rect x="52" y="64" width="16" height="3" rx="1.5" fill="#333"/>
+
+  <!-- connection status -->
+  <g id="conn-check">
+    <text x="60" y="100" text-anchor="middle" font-family="system-ui,sans-serif" font-size="10" font-weight="600" fill="#2ECC88">Connected</text>
+  </g>
+</svg>

package/assets/animated/disconnected.svg

@@ -0,0 +1,29 @@
+<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+  <title>Disconnected</title>
+  <defs>
+    <style>
+      @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
+      @keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-2px)} 75%{transform:translateX(2px)} }
+      #red-dot { animation: blink 1.5s ease-in-out infinite; }
+      #disc-icon { animation: shake 2s ease-in-out infinite; transform-origin: 60px 50px; }
+    </style>
+  </defs>
+
+  <g id="disc-icon">
+    <!-- server icon -->
+    <rect x="45" y="35" width="30" height="40" rx="4" fill="#1a1f2e" stroke="#E24B4A" stroke-width="1.5"/>
+    <circle id="red-dot" cx="60" cy="48" r="8" fill="#E24B4A"/>
+    <rect x="52" y="58" width="16" height="3" rx="1.5" fill="#333"/>
+    <rect x="52" y="64" width="16" height="3" rx="1.5" fill="#333"/>
+
+    <!-- broken connection lines -->
+    <line x1="35" y1="42" x2="25" y2="35" stroke="#E24B4A" stroke-width="2" stroke-linecap="round" stroke-dasharray="3 3"/>
+    <line x1="85" y1="42" x2="95" y2="35" stroke="#E24B4A" stroke-width="2" stroke-linecap="round" stroke-dasharray="3 3"/>
+
+    <!-- X overlay -->
+    <line x1="50" y1="42" x2="70" y2="58" stroke="#E24B4A" stroke-width="2.5" stroke-linecap="round" opacity="0.6"/>
+    <line x1="70" y1="42" x2="50" y2="58" stroke="#E24B4A" stroke-width="2.5" stroke-linecap="round" opacity="0.6"/>
+  </g>
+
+  <text x="60" y="100" text-anchor="middle" font-family="system-ui,sans-serif" font-size="10" font-weight="600" fill="#E24B4A">Disconnected</text>
+</svg>

package/assets/animated/discovering-phrases.svg

@@ -0,0 +1,44 @@
+<svg width="160" height="120" viewBox="0 0 160 120" xmlns="http://www.w3.org/2000/svg">
+  <title>Discovering phrases</title>
+  <defs>
+    <style>
+      @keyframes highlight1 { 0%,100%{fill:#e0e0e0} 30%,70%{fill:#2ECC88} }
+      @keyframes highlight2 { 0%,100%{fill:#e0e0e0} 40%,80%{fill:#3A8FE0} }
+      @keyframes highlight3 { 0%,100%{fill:#e0e0e0} 50%,90%{fill:#FFB833} }
+      @keyframes cursorBlink { 0%,100%{opacity:1} 50%{opacity:0} }
+      @keyframes slideRight { 0%{transform:translateX(-5px);opacity:0} 50%{opacity:1} 100%{transform:translateX(5px);opacity:0} }
+      .hl1 { animation: highlight1 3s ease-in-out infinite; }
+      .hl2 { animation: highlight2 3s ease-in-out 0.5s infinite; }
+      .hl3 { animation: highlight3 3s ease-in-out 1s infinite; }
+      #cursor { animation: cursorBlink 0.8s step-end infinite; }
+      .tag { animation: slideRight 2s ease-in-out infinite; }
+      .tag2 { animation: slideRight 2s ease-in-out 0.7s infinite; }
+      .tag3 { animation: slideRight 2s ease-in-out 1.4s infinite; }
+    </style>
+  </defs>
+
+  <!-- browser window frame -->
+  <rect x="10" y="10" width="140" height="100" rx="6" fill="#fff" stroke="#ddd" stroke-width="1.5"/>
+  <rect x="10" y="10" width="140" height="18" rx="6" fill="#f5f5f5"/>
+  <circle cx="22" cy="19" r="3" fill="#E24B4A"/>
+  <circle cx="32" cy="19" r="3" fill="#FFB833"/>
+  <circle cx="42" cy="19" r="3" fill="#2ECC88"/>
+  <!-- url bar -->
+  <rect x="52" y="14" width="88" height="10" rx="3" fill="#eee"/>
+
+  <!-- page content with highlighting text -->
+  <rect class="hl1" x="20" y="36" width="50" height="6" rx="3"/>
+  <rect x="74" y="36" width="30" height="6" rx="3" fill="#e0e0e0"/>
+  <rect x="20" y="48" width="35" height="6" rx="3" fill="#e0e0e0"/>
+  <rect class="hl2" x="59" y="48" width="42" height="6" rx="3"/>
+  <rect x="20" y="60" width="60" height="6" rx="3" fill="#e0e0e0"/>
+  <rect class="hl3" x="20" y="72" width="38" height="6" rx="3"/>
+  <rect x="62" y="72" width="44" height="6" rx="3" fill="#e0e0e0"/>
+  <rect x="20" y="84" width="50" height="6" rx="3" fill="#e0e0e0"/>
+  <rect x="74" y="84" width="28" height="6" rx="3" fill="#e0e0e0"/>
+
+  <!-- floating tags being collected -->
+  <rect class="tag" x="115" y="40" width="20" height="10" rx="3" fill="#2ECC88" opacity="0.7"/>
+  <rect class="tag2" x="118" y="55" width="18" height="10" rx="3" fill="#3A8FE0" opacity="0.7"/>
+  <rect class="tag3" x="116" y="70" width="22" height="10" rx="3" fill="#FFB833" opacity="0.7"/>
+</svg>

package/assets/animated/language-switch.svg

@@ -0,0 +1,35 @@
+<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+  <title>Language switching</title>
+  <defs>
+    <style>
+      @keyframes flipOut { 0%{transform:scaleX(1);opacity:1} 50%{transform:scaleX(0);opacity:0} 100%{transform:scaleX(0);opacity:0} }
+      @keyframes flipIn { 0%{transform:scaleX(0);opacity:0} 50%{transform:scaleX(0);opacity:0} 100%{transform:scaleX(1);opacity:1} }
+      @keyframes arrowSpin { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
+      #lang-en { animation: flipOut 2.5s ease-in-out infinite alternate; transform-origin: 60px 50px; }
+      #lang-fr { animation: flipIn 2.5s ease-in-out infinite alternate; transform-origin: 60px 50px; }
+      #swap-arrows { animation: arrowSpin 2.5s ease-in-out infinite; transform-origin: 60px 50px; }
+    </style>
+  </defs>
+
+  <!-- swap arrows circle -->
+  <g id="swap-arrows">
+    <path d="M60 25 A25 25 0 0 1 85 50" fill="none" stroke="#3A8FE0" stroke-width="2.5" stroke-linecap="round"/>
+    <polygon points="85,45 85,55 78,50" fill="#3A8FE0"/>
+    <path d="M60 75 A25 25 0 0 1 35 50" fill="none" stroke="#2ECC88" stroke-width="2.5" stroke-linecap="round"/>
+    <polygon points="35,55 35,45 42,50" fill="#2ECC88"/>
+  </g>
+
+  <!-- english label -->
+  <g id="lang-en">
+    <rect x="40" y="40" width="40" height="20" rx="6" fill="#E6F1FB" stroke="#3A8FE0" stroke-width="1.2"/>
+    <text x="60" y="54" text-anchor="middle" font-family="system-ui,sans-serif" font-size="11" font-weight="600" fill="#185FA5">EN</text>
+  </g>
+
+  <!-- french label -->
+  <g id="lang-fr">
+    <rect x="40" y="40" width="40" height="20" rx="6" fill="#E1F5EE" stroke="#2ECC88" stroke-width="1.2"/>
+    <text x="60" y="54" text-anchor="middle" font-family="system-ui,sans-serif" font-size="11" font-weight="600" fill="#085041">FR</text>
+  </g>
+
+  <text x="60" y="100" text-anchor="middle" font-family="system-ui,sans-serif" font-size="9" fill="#888">Switching language</text>
+</svg>

package/assets/animated/parrot-typing.svg

@@ -0,0 +1,53 @@
+<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+  <title>Parrot typing / processing</title>
+  <defs>
+    <style>
+      @keyframes headBob { 0%,100%{transform:translateY(0) rotate(0deg)} 25%{transform:translateY(-2px) rotate(-3deg)} 75%{transform:translateY(-2px) rotate(3deg)} }
+      @keyframes typeDot1 { 0%,60%,100%{opacity:0.3;r:3} 30%{opacity:1;r:4} }
+      @keyframes typeDot2 { 0%,60%,100%{opacity:0.3;r:3} 30%{opacity:1;r:4} }
+      @keyframes typeDot3 { 0%,60%,100%{opacity:0.3;r:3} 30%{opacity:1;r:4} }
+      @keyframes eyeShift { 0%,100%{transform:translateX(0)} 50%{transform:translateX(1.5px)} }
+      #typing-parrot { animation: headBob 1.5s ease-in-out infinite; transform-origin: 60px 45px; }
+      #td1 { animation: typeDot1 1.4s ease-in-out infinite; }
+      #td2 { animation: typeDot2 1.4s ease-in-out 0.2s infinite; }
+      #td3 { animation: typeDot3 1.4s ease-in-out 0.4s infinite; }
+      .peye { animation: eyeShift 2s ease-in-out infinite; }
+    </style>
+  </defs>
+
+  <!-- parrot head -->
+  <g id="typing-parrot">
+    <!-- head -->
+    <circle cx="60" cy="45" r="24" fill="#2ECC88"/>
+    <!-- forehead -->
+    <ellipse cx="60" cy="33" rx="14" ry="8" fill="#FFB833"/>
+    <!-- eyes -->
+    <g class="peye">
+      <circle cx="52" cy="43" r="6.5" fill="white"/>
+      <circle cx="53" cy="44" r="4" fill="#2C2C2A"/>
+      <circle cx="54.5" cy="42" r="1.5" fill="white"/>
+      <circle cx="68" cy="43" r="6.5" fill="white"/>
+      <circle cx="67" cy="44" r="4" fill="#2C2C2A"/>
+      <circle cx="68.5" cy="42" r="1.5" fill="white"/>
+    </g>
+    <!-- beak -->
+    <path d="M56 52 Q60 48 64 52 Q64 57 60 59 Q56 57 56 52Z" fill="#E8A020"/>
+    <!-- cheeks -->
+    <ellipse cx="46" cy="48" rx="5" ry="3.5" fill="#F07040" opacity="0.6"/>
+    <ellipse cx="74" cy="48" rx="5" ry="3.5" fill="#F07040" opacity="0.6"/>
+    <!-- crest -->
+    <line x1="55" y1="23" x2="52" y2="16" stroke="#FFB833" stroke-width="2.5" stroke-linecap="round"/>
+    <line x1="60" y1="22" x2="60" y2="14" stroke="#7BC74A" stroke-width="2.5" stroke-linecap="round"/>
+    <line x1="65" y1="23" x2="68" y2="16" stroke="#F07040" stroke-width="2.5" stroke-linecap="round"/>
+    <circle cx="52" cy="15" r="3" fill="#FFB833"/>
+    <circle cx="60" cy="13" r="3" fill="#7BC74A"/>
+    <circle cx="68" cy="15" r="3" fill="#F07040"/>
+  </g>
+
+  <!-- speech bubble with typing dots -->
+  <rect x="35" y="78" width="50" height="24" rx="12" fill="#f0f0f0" stroke="#ddd" stroke-width="1"/>
+  <polygon points="55,78 50,72 62,78" fill="#f0f0f0" stroke="#ddd" stroke-width="1"/>
+  <circle id="td1" cx="48" cy="90" r="3" fill="#2ECC88"/>
+  <circle id="td2" cx="60" cy="90" r="3" fill="#3A8FE0"/>
+  <circle id="td3" cx="72" cy="90" r="3" fill="#FFB833"/>
+</svg>

package/assets/animated/scanning-page.svg

@@ -0,0 +1,43 @@
+<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+  <title>Scanning page</title>
+  <defs>
+    <style>
+      @keyframes scanLine {
+        0% { transform: translateY(-30px); opacity: 0; }
+        10% { opacity: 1; }
+        90% { opacity: 1; }
+        100% { transform: translateY(30px); opacity: 0; }
+      }
+      @keyframes textHighlight {
+        0%,30% { fill: #555; }
+        50% { fill: #2ECC88; }
+        70%,100% { fill: #555; }
+      }
+      @keyframes docPulse {
+        0%,100% { transform: scale(1); }
+        50% { transform: scale(1.02); }
+      }
+      #scan-line { animation: scanLine 2s ease-in-out infinite; }
+      #doc { animation: docPulse 2s ease-in-out infinite; transform-origin: 60px 60px; }
+      .txt1 { animation: textHighlight 2s ease-in-out infinite; }
+      .txt2 { animation: textHighlight 2s ease-in-out 0.3s infinite; }
+      .txt3 { animation: textHighlight 2s ease-in-out 0.6s infinite; }
+      .txt4 { animation: textHighlight 2s ease-in-out 0.9s infinite; }
+    </style>
+  </defs>
+
+  <!-- page document -->
+  <g id="doc">
+    <rect x="30" y="20" width="60" height="80" rx="4" fill="#f8f8f8" stroke="#ddd" stroke-width="1.5"/>
+    <!-- text lines -->
+    <rect class="txt1" x="38" y="32" width="44" height="4" rx="2" fill="#555"/>
+    <rect class="txt2" x="38" y="42" width="36" height="4" rx="2" fill="#555"/>
+    <rect class="txt3" x="38" y="52" width="40" height="4" rx="2" fill="#555"/>
+    <rect class="txt4" x="38" y="62" width="30" height="4" rx="2" fill="#555"/>
+    <rect x="38" y="72" width="38" height="4" rx="2" fill="#ddd"/>
+    <rect x="38" y="82" width="28" height="4" rx="2" fill="#ddd"/>
+  </g>
+
+  <!-- scanning beam -->
+  <rect id="scan-line" x="28" y="58" width="64" height="3" rx="1.5" fill="#2ECC88" opacity="0.7"/>
+</svg>

package/assets/animated/syncing.svg

@@ -0,0 +1,34 @@
+<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+  <title>Syncing</title>
+  <defs>
+    <style>
+      @keyframes syncSpin { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
+      @keyframes arrowPulse { 0%,100%{opacity:0.6} 50%{opacity:1} }
+      @keyframes dotTravel {
+        0%{transform:translate(0,0);opacity:0}
+        10%{opacity:1}
+        90%{opacity:1}
+        100%{transform:translate(0,-30px);opacity:0}
+      }
+      #sync-arrows { animation: syncSpin 2s linear infinite; transform-origin: 60px 60px; }
+      .sync-dot1 { animation: dotTravel 1.5s ease-in-out infinite; }
+      .sync-dot2 { animation: dotTravel 1.5s ease-in-out 0.5s infinite; }
+      .sync-dot3 { animation: dotTravel 1.5s ease-in-out 1s infinite; }
+    </style>
+  </defs>
+
+  <circle cx="60" cy="60" r="50" fill="#1a1f2e"/>
+
+  <!-- spinning arrows -->
+  <g id="sync-arrows">
+    <path d="M60 25 A30 30 0 0 1 85 50" fill="none" stroke="#2ECC88" stroke-width="3.5" stroke-linecap="round"/>
+    <polygon points="87,44 87,56 79,50" fill="#2ECC88"/>
+    <path d="M60 95 A30 30 0 0 1 35 70" fill="none" stroke="#3A8FE0" stroke-width="3.5" stroke-linecap="round"/>
+    <polygon points="33,76 33,64 41,70" fill="#3A8FE0"/>
+  </g>
+
+  <!-- traveling dots -->
+  <circle class="sync-dot1" cx="48" cy="75" r="2.5" fill="#FFB833"/>
+  <circle class="sync-dot2" cx="60" cy="75" r="2.5" fill="#2ECC88"/>
+  <circle class="sync-dot3" cx="72" cy="75" r="2.5" fill="#F07040"/>
+</svg>

package/assets/animated/uploading.svg

@@ -0,0 +1,32 @@
+<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+  <title>Uploading/Exporting</title>
+  <defs>
+    <style>
+      @keyframes arrowUp {
+        0% { transform: translateY(8px); opacity: 0; }
+        50% { opacity: 1; }
+        100% { transform: translateY(-8px); opacity: 0; }
+      }
+      @keyframes cloudBob {
+        0%,100% { transform: translateY(0); }
+        50% { transform: translateY(-3px); }
+      }
+      #up-arrow1 { animation: arrowUp 1.5s ease-in-out infinite; }
+      #up-arrow2 { animation: arrowUp 1.5s ease-in-out 0.3s infinite; }
+      #up-arrow3 { animation: arrowUp 1.5s ease-in-out 0.6s infinite; }
+      #cloud { animation: cloudBob 3s ease-in-out infinite; transform-origin: 60px 40px; }
+    </style>
+  </defs>
+
+  <!-- cloud -->
+  <g id="cloud">
+    <path d="M35 55 Q35 40 48 38 Q50 28 62 28 Q75 28 77 40 Q88 40 88 52 Q88 60 80 60 L40 60 Q35 60 35 55Z" fill="#3A8FE0" opacity="0.9"/>
+  </g>
+
+  <!-- uploading arrows -->
+  <path id="up-arrow1" d="M50 85 L50 70 M45 75 L50 70 L55 75" fill="none" stroke="#2ECC88" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path id="up-arrow2" d="M60 85 L60 70 M55 75 L60 70 L65 75" fill="none" stroke="#FFB833" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path id="up-arrow3" d="M70 85 L70 70 M65 75 L70 70 L75 75" fill="none" stroke="#F07040" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+
+  <text x="60" y="105" text-anchor="middle" font-family="system-ui,sans-serif" font-size="10" fill="#888">Exporting...</text>
+</svg>

package/assets/connecting.svg

@@ -0,0 +1,43 @@
+<svg width="80" height="80" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
+  <title>Connecting</title>
+  <defs>
+    <style>
+      @keyframes wave1 { 0% { r: 10; opacity: 0.8; } 100% { r: 34; opacity: 0; } }
+      @keyframes wave2 { 0% { r: 10; opacity: 0.8; } 100% { r: 34; opacity: 0; } }
+      @keyframes wave3 { 0% { r: 10; opacity: 0.8; } 100% { r: 34; opacity: 0; } }
+      @keyframes headBob {
+        0%, 100% { transform: translateY(0); }
+        50% { transform: translateY(-2px); }
+      }
+      #wave-1 { animation: wave1 2s ease-out infinite; }
+      #wave-2 { animation: wave2 2s ease-out 0.66s infinite; }
+      #wave-3 { animation: wave3 2s ease-out 1.33s infinite; }
+      #connect-parrot { animation: headBob 1.5s ease-in-out infinite; transform-origin: 40px 40px; }
+    </style>
+  </defs>
+
+  <!-- expanding waves -->
+  <circle id="wave-1" cx="40" cy="40" r="10" fill="none" stroke="#2ECC88" stroke-width="2"/>
+  <circle id="wave-2" cx="40" cy="40" r="10" fill="none" stroke="#3A8FE0" stroke-width="2"/>
+  <circle id="wave-3" cx="40" cy="40" r="10" fill="none" stroke="#FFB833" stroke-width="2"/>
+
+  <!-- parrot head center -->
+  <g id="connect-parrot">
+    <circle cx="40" cy="40" r="14" fill="#1a1f2e"/>
+    <circle cx="40" cy="39" r="9" fill="#2ECC88"/>
+    <!-- eyes -->
+    <circle cx="37" cy="38" r="2.2" fill="white"/>
+    <circle cx="37.4" cy="38.3" r="1.3" fill="#2C2C2A"/>
+    <circle cx="43" cy="38" r="2.2" fill="white"/>
+    <circle cx="42.6" cy="38.3" r="1.3" fill="#2C2C2A"/>
+    <!-- beak -->
+    <path d="M38.5 42 Q40 40.5 41.5 42 Q41.5 44 40 44.5 Q38.5 44 38.5 42Z" fill="#E8A020"/>
+    <!-- crest -->
+    <line x1="38" y1="32" x2="36.5" y2="28" stroke="#FFB833" stroke-width="1.3" stroke-linecap="round"/>
+    <line x1="40" y1="31" x2="40" y2="27" stroke="#7BC74A" stroke-width="1.3" stroke-linecap="round"/>
+    <line x1="42" y1="32" x2="43.5" y2="28" stroke="#F07040" stroke-width="1.3" stroke-linecap="round"/>
+    <circle cx="36.5" cy="27.5" r="1.3" fill="#FFB833"/>
+    <circle cx="40" cy="26.5" r="1.3" fill="#7BC74A"/>
+    <circle cx="43.5" cy="27.5" r="1.3" fill="#F07040"/>
+  </g>
+</svg>

package/assets/empty-state.svg

@@ -0,0 +1,75 @@
+<svg width="200" height="160" viewBox="0 0 200 160" xmlns="http://www.w3.org/2000/svg">
+  <title>No translations yet</title>
+  <defs>
+    <style>
+      @keyframes parrotWait {
+        0%, 100% { transform: rotate(-2deg); }
+        50% { transform: rotate(2deg); }
+      }
+      @keyframes questionFloat {
+        0%, 100% { transform: translateY(0); opacity: 0.7; }
+        50% { transform: translateY(-5px); opacity: 1; }
+      }
+      @keyframes blinkSlow {
+        0%, 90%, 100% { transform: scaleY(1); }
+        94% { transform: scaleY(0.1); }
+      }
+      #empty-parrot { animation: parrotWait 3s ease-in-out infinite; transform-origin: 100px 90px; }
+      #q1 { animation: questionFloat 2.5s ease-in-out infinite; transform-origin: center; }
+      #q2 { animation: questionFloat 2.5s ease-in-out 0.8s infinite; transform-origin: center; }
+      #q3 { animation: questionFloat 2.5s ease-in-out 1.6s infinite; transform-origin: center; }
+      #empty-eyes { animation: blinkSlow 4s ease-in-out infinite; transform-origin: 100px 62px; }
+    </style>
+  </defs>
+
+  <!-- empty speech bubble outline (dashed) -->
+  <rect x="120" y="20" width="70" height="36" rx="10" fill="none" stroke="#ccc" stroke-width="1.5" stroke-dasharray="4 3"/>
+  <polygon points="130,56 125,65 140,56" fill="none" stroke="#ccc" stroke-width="1.5" stroke-dasharray="4 3"/>
+
+  <!-- question marks floating -->
+  <text id="q1" x="138" y="38" font-family="system-ui,sans-serif" font-size="12" fill="#bbb">?</text>
+  <text id="q2" x="152" y="42" font-family="system-ui,sans-serif" font-size="14" fill="#aaa">?</text>
+  <text id="q3" x="170" y="36" font-family="system-ui,sans-serif" font-size="10" fill="#ccc">?</text>
+
+  <!-- confused parrot -->
+  <g id="empty-parrot">
+    <!-- body -->
+    <ellipse cx="100" cy="100" rx="22" ry="30" fill="#2ECC88"/>
+    <ellipse cx="100" cy="106" rx="13" ry="20" fill="#D4F4B0"/>
+
+    <!-- wings -->
+    <path d="M78 94 Q68 86 70 108 Q76 116 82 113 Q78 104 78 94Z" fill="#3A8FE0"/>
+    <path d="M122 94 Q132 86 130 108 Q124 116 118 113 Q122 104 122 94Z" fill="#3A8FE0"/>
+
+    <!-- head -->
+    <circle cx="100" cy="68" r="20" fill="#2ECC88"/>
+    <ellipse cx="100" cy="58" rx="11" ry="7" fill="#FFB833"/>
+
+    <!-- eyes -->
+    <g id="empty-eyes">
+      <circle cx="93" cy="66" r="5.5" fill="white"/>
+      <circle cx="94" cy="67" r="3.5" fill="#2C2C2A"/>
+      <circle cx="95" cy="65" r="1.5" fill="white"/>
+      <circle cx="107" cy="66" r="5.5" fill="white"/>
+      <circle cx="106" cy="67" r="3.5" fill="#2C2C2A"/>
+      <circle cx="107" cy="65" r="1.5" fill="white"/>
+    </g>
+
+    <!-- beak (slightly tilted, confused) -->
+    <path d="M96 74 Q100 71 104 74 Q104 79 100 81 Q96 79 96 74Z" fill="#E8A020"/>
+
+    <!-- crest -->
+    <line x1="96" y1="50" x2="93" y2="44" stroke="#FFB833" stroke-width="2" stroke-linecap="round"/>
+    <line x1="100" y1="49" x2="100" y2="42" stroke="#7BC74A" stroke-width="2" stroke-linecap="round"/>
+    <line x1="104" y1="50" x2="107" y2="44" stroke="#F07040" stroke-width="2" stroke-linecap="round"/>
+    <circle cx="93" cy="43" r="2.5" fill="#FFB833"/>
+    <circle cx="100" cy="41" r="2.5" fill="#7BC74A"/>
+    <circle cx="107" cy="43" r="2.5" fill="#F07040"/>
+
+    <!-- perch -->
+    <rect x="80" y="128" width="40" height="4" rx="2" fill="#8B5E20"/>
+  </g>
+
+  <!-- label -->
+  <text x="100" y="152" text-anchor="middle" font-family="system-ui,sans-serif" font-size="11" fill="#999">No translations yet</text>
+</svg>

package/assets/error.svg

@@ -0,0 +1,28 @@
+<svg width="80" height="80" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
+  <title>Error</title>
+  <defs>
+    <style>
+      @keyframes shake {
+        0%, 100% { transform: translateX(0); }
+        10%, 50%, 90% { transform: translateX(-2px); }
+        30%, 70% { transform: translateX(2px); }
+      }
+      @keyframes fadeIn {
+        0% { opacity: 0; transform: scale(0.8); }
+        100% { opacity: 1; transform: scale(1); }
+      }
+      #error-circle { animation: shake 0.6s ease-in-out infinite 1s; transform-origin: 40px 40px; }
+      #error-bg { animation: fadeIn 0.3s ease both; transform-origin: 40px 40px; }
+    </style>
+  </defs>
+
+  <g id="error-bg">
+    <circle cx="40" cy="40" r="30" fill="#E24B4A"/>
+  </g>
+
+  <g id="error-circle">
+    <!-- X mark -->
+    <line x1="28" y1="28" x2="52" y2="52" stroke="white" stroke-width="5" stroke-linecap="round"/>
+    <line x1="52" y1="28" x2="28" y2="52" stroke="white" stroke-width="5" stroke-linecap="round"/>
+  </g>
+</svg>