@co0ontty/wand 1.43.0 → 1.43.1

package/dist/web-ui/content/styles.css

@@ -15678,110 +15678,296 @@
       font-weight: 700;
     }
 
+    /* ================================================================
+       Quick-Git drag slider — v2
+       Layout: [ 🔘 Commit ] ────→ [ Tag ] ────→ [ Push ]
+         - Tap (no drag)             → Commit
+         - Drag straight to Push     → Commit + Push (skipped Tag — fast through)
+         - Drag to Tag, dwell ~600ms → Tag latch arms
+         - Released at Tag (armed)   → Commit + Tag
+         - Continue armed → Push     → Commit + Tag + Push
+       Empty commit message / tag    → auto-generated by the backend on submit
+       ================================================================ */
     .qc-drag-wrap {
-      padding-top: 2px;
+      padding-top: 4px;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
     }
     .qc-drag-track {
       --qc-progress: 0%;
-      --qc-knob-x: 0px;
+      --qc-knob-x: 6px;
+      --qc-tone: var(--accent);
+      --qc-tone-soft: rgba(197, 101, 61, 0.20);
+      /* Keep in sync with QUICK_COMMIT_TAG_DWELL_MS in scripts.js */
+      --qc-dwell-ms: 1100ms;
       position: relative;
-      min-height: 58px;
-      padding: 7px;
-      border-radius: 8px;
-      border: 1px solid rgba(125, 91, 57, 0.14);
-      background: rgba(255, 255, 255, 0.52);
+      height: 76px;
+      padding: 10px 12px;
+      border-radius: 14px;
+      border: 1px solid rgba(125, 91, 57, 0.18);
+      background:
+        radial-gradient(120% 100% at 50% 50%, rgba(255, 255, 255, 0.58), rgba(255, 245, 235, 0.20)),
+        linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 245, 235, 0.24));
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 1px 3px rgba(89, 58, 32, 0.05);
       overflow: hidden;
       touch-action: none;
       user-select: none;
+      transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    }
+    .qc-drag-track:hover {
+      border-color: rgba(125, 91, 57, 0.30);
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 2px 8px rgba(89, 58, 32, 0.08);
     }
-    .qc-drag-progress {
+    /* Track tone shifts per current action so the whole panel echoes the knob color. */
+    .qc-drag-track[data-action="commit-tag"]      { --qc-tone: #4a6fa5; --qc-tone-soft: rgba(74, 111, 165, 0.20); }
+    .qc-drag-track[data-action="commit-push"]     { --qc-tone: #4f7a58; --qc-tone-soft: rgba(79, 122, 88, 0.22); }
+    .qc-drag-track[data-action="commit-tag-push"] { --qc-tone: #7c5aa8; --qc-tone-soft: rgba(124, 90, 168, 0.24); }
+
+    /* Baseline rail — Commit → Tag → Push. Segments brighten as the knob crosses them. */
+    .qc-drag-baseline {
       position: absolute;
-      inset: 0 auto 0 0;
-      width: calc(var(--qc-progress) + 78px);
-      max-width: 100%;
-      background: linear-gradient(90deg, rgba(197, 101, 61, 0.18), rgba(60, 130, 200, 0.18));
-      transition: width 0.16s ease;
+      inset: 0 14px;
+      width: calc(100% - 28px);
+      height: 100%;
       pointer-events: none;
     }
-    .qc-drag-track.is-dragging .qc-drag-progress {
-      transition: none;
+    .qc-baseline-rail {
+      stroke: rgba(125, 91, 57, 0.16);
+      stroke-width: 2;
+      stroke-linecap: round;
     }
+    .qc-baseline-seg {
+      stroke: var(--qc-tone);
+      stroke-width: 2;
+      stroke-linecap: round;
+      opacity: 0;
+      transition: opacity 0.2s ease, stroke 0.2s ease;
+    }
+    .qc-drag-track[data-zone="tag"]  .qc-baseline-seg--left,
+    .qc-drag-track[data-zone="push"] .qc-baseline-seg--left  { opacity: 0.85; }
+    .qc-drag-track[data-zone="push"] .qc-baseline-seg--right { opacity: 0.85; }
+
+    /* Three marching chevrons → drag this way */
+    .qc-chevrons {
+      position: absolute;
+      top: 50%;
+      right: 16px;
+      transform: translateY(-50%);
+      display: flex;
+      align-items: center;
+      gap: 3px;
+      pointer-events: none;
+      color: rgba(125, 91, 57, 0.42);
+      z-index: 1;
+    }
+    .qc-chevron {
+      opacity: 0.16;
+      animation: qc-chevron-march 1.3s ease-in-out infinite;
+    }
+    .qc-chevron:nth-child(1) { animation-delay: 0s;    }
+    .qc-chevron:nth-child(2) { animation-delay: 0.16s; }
+    .qc-chevron:nth-child(3) { animation-delay: 0.32s; }
+    .qc-drag-track[data-zone="tag"]   .qc-chevrons { color: var(--qc-tone); }
+    .qc-drag-track[data-zone="push"]  .qc-chevrons { opacity: 0.25; }
+    .qc-drag-track[data-tag-dwell="armed"] .qc-chevrons { color: var(--qc-tone); }
+    .qc-drag-track[data-tag-dwell="armed"] .qc-chevron { animation-duration: 0.8s; }
+    .qc-drag-track.is-dragging .qc-chevron { animation-play-state: paused; opacity: 0.55; }
+    @keyframes qc-chevron-march {
+      0%, 100% { opacity: 0.10; transform: translateX(-4px); }
+      45%      { opacity: 0.95; transform: translateX(0); }
+      75%      { opacity: 0.45; transform: translateX(3px); }
+    }
+
+    /* Stage labels along the rail */
     .qc-drag-stages {
       position: absolute;
-      inset: 7px 10px;
+      inset: 12px 18px;
       display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      align-items: center;
+      grid-template-columns: 1fr 1fr 1fr;
+      align-items: end;
       pointer-events: none;
+      z-index: 2;
     }
     .qc-drag-stage {
-      position: relative;
-      z-index: 1;
-      justify-self: center;
-      font-size: 0.7rem;
+      align-self: end;
+      padding-bottom: 6px;
+      font-size: 0.68rem;
       font-weight: 800;
       color: var(--text-muted);
-      letter-spacing: 0.03em;
+      letter-spacing: 0.06em;
       text-transform: uppercase;
-    }
-    .qc-drag-stage::before {
+      transition: color 0.18s ease, transform 0.18s ease;
+    }
+    .qc-stage-commit { justify-self: start;  padding-left: 4px; }
+    .qc-stage-tag    { justify-self: center; }
+    .qc-stage-push   { justify-self: end;    padding-right: 4px; }
+    .qc-drag-stage.is-passed { color: var(--qc-tone); }
+    .qc-drag-stage.is-active { transform: translateY(-1px); }
+    /* Tag stage gets a little dot indicator that pulses while user dwells. */
+    .qc-stage-tag::before {
       content: "";
       display: block;
-      width: 7px;
-      height: 7px;
-      margin: 0 auto 5px;
+      width: 6px;
+      height: 6px;
+      margin: 0 auto 4px;
       border-radius: 50%;
-      background: rgba(125, 91, 57, 0.22);
-      box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.75);
+      background: rgba(125, 91, 57, 0.30);
+      transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
     }
-    .qc-drag-stage.is-passed {
-      color: var(--accent);
+    .qc-drag-stage.qc-stage-tag.is-passed::before {
+      background: var(--qc-tone);
+      box-shadow: 0 0 0 4px color-mix(in srgb, var(--qc-tone) 22%, transparent);
     }
-    .qc-drag-stage.is-passed::before {
-      background: var(--accent);
+    .qc-drag-track[data-tag-dwell="active"] .qc-stage-tag::before {
+      background: var(--qc-tone);
+      animation: qc-tag-dot-pulse var(--qc-dwell-ms) ease-out forwards;
     }
+    .qc-drag-track[data-tag-dwell="armed"] .qc-stage-tag::before {
+      background: var(--qc-tone);
+      transform: scale(1.4);
+      box-shadow: 0 0 0 6px color-mix(in srgb, var(--qc-tone) 22%, transparent);
+    }
+    @keyframes qc-tag-dot-pulse {
+      0%   { transform: scale(1); }
+      100% { transform: scale(1.35); box-shadow: 0 0 0 6px color-mix(in srgb, var(--qc-tone) 18%, transparent); }
+    }
+
+    /* The draggable knob — starts at left, breathes when idle, snaps colors per zone. */
     .qc-drag-action {
       position: absolute;
-      left: 7px;
-      top: 7px;
-      z-index: 2;
+      left: var(--qc-knob-x, 6px);
+      top: 50%;
+      z-index: 3;
       width: 42%;
-      min-width: 132px;
-      max-width: 220px;
-      height: 44px;
+      min-width: 138px;
+      max-width: 200px;
+      height: 56px;
+      padding: 0 16px;
       border: 0;
-      border-radius: 8px;
-      background: var(--accent);
+      border-radius: 12px;
+      background: linear-gradient(180deg, var(--qc-tone), color-mix(in srgb, var(--qc-tone) 84%, black));
       color: white;
       font-family: var(--font-sans);
-      font-size: 0.84rem;
+      font-size: 0.86rem;
       font-weight: 800;
+      letter-spacing: 0.01em;
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      gap: 8px;
+      gap: 10px;
       cursor: grab;
-      box-shadow: 0 8px 22px rgba(197, 101, 61, 0.26);
-      transform: translateX(var(--qc-knob-x));
-      transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
+      box-shadow:
+        0 8px 22px var(--qc-tone-soft),
+        inset 0 1px 0 rgba(255, 255, 255, 0.35);
+      transform: translateY(-50%);
+      transition: left 0.22s cubic-bezier(0.4, 0.0, 0.2, 1),
+                  background 0.18s ease,
+                  box-shadow 0.18s ease;
       touch-action: none;
+      overflow: hidden;
+      animation: qc-knob-breathe 2.4s ease-in-out infinite;
     }
     .qc-drag-track.is-dragging .qc-drag-action {
       cursor: grabbing;
-      transition: background 0.16s ease, box-shadow 0.16s ease;
+      transition: background 0.12s ease, box-shadow 0.12s ease;
+      animation: none;
     }
-    .qc-drag-track[data-action="commit-tag"] .qc-drag-action {
-      background: rgba(96, 110, 185, 0.96);
-      box-shadow: 0 8px 22px rgba(96, 110, 185, 0.24);
+    .qc-drag-grip {
+      display: inline-flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 2px;
+      margin-right: 2px;
+      opacity: 0.7;
+      flex: 0 0 auto;
     }
-    .qc-drag-track[data-action="commit-tag-push"] .qc-drag-action {
-      background: rgba(40, 130, 88, 0.96);
-      box-shadow: 0 8px 22px rgba(40, 130, 88, 0.24);
+    .qc-drag-grip i {
+      display: block;
+      width: 12px;
+      height: 1.5px;
+      border-radius: 1px;
+      background: rgba(255, 255, 255, 0.85);
+    }
+    .qc-drag-label {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
     .qc-drag-action:disabled {
-      opacity: 0.55;
+      opacity: 0.5;
       cursor: not-allowed;
       box-shadow: none;
+      animation: none;
+    }
+    /* Dwell progress bar — bottom of the knob, fills left→right over DWELL_MS */
+    .qc-drag-dwell-bar {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 3px;
+      background: rgba(255, 255, 255, 0.78);
+      transform: scaleX(0);
+      transform-origin: left center;
+      border-radius: 0 0 12px 12px;
+      pointer-events: none;
+      transition: opacity 0.2s ease;
+      opacity: 0;
+    }
+    .qc-drag-track[data-tag-dwell="active"] .qc-drag-dwell-bar {
+      opacity: 1;
+      animation: qc-dwell-fill var(--qc-dwell-ms) linear forwards;
+    }
+    .qc-drag-track[data-tag-dwell="armed"] .qc-drag-dwell-bar {
+      opacity: 0.55;
+      transform: scaleX(1);
+    }
+    @keyframes qc-dwell-fill {
+      from { transform: scaleX(0); }
+      to   { transform: scaleX(1); }
+    }
+    @keyframes qc-knob-breathe {
+      0%, 100% { box-shadow: 0 6px 18px var(--qc-tone-soft), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
+      50%      { box-shadow: 0 10px 28px var(--qc-tone-soft),
+                             0 0 0 4px color-mix(in srgb, var(--qc-tone) 22%, transparent),
+                             inset 0 1px 0 rgba(255, 255, 255, 0.4); }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .qc-drag-action,
+      .qc-chevron,
+      .qc-drag-dwell-bar { animation: none !important; transition: none !important; }
+    }
+
+    /* Cancel mode — user has ventured past Commit, then dragged back. Release here = no-op. */
+    .qc-drag-track[data-cancel-mode="1"] {
+      --qc-tone: #8c735f;
+      --qc-tone-soft: rgba(125, 91, 57, 0.16);
+    }
+    .qc-drag-track[data-cancel-mode="1"] .qc-drag-action {
+      background: linear-gradient(180deg, #a3897a, #7a604c);
+      box-shadow: 0 4px 12px rgba(125, 91, 57, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.25);
+      animation: none;
+    }
+    .qc-drag-track[data-cancel-mode="1"] .qc-drag-dwell-bar,
+    .qc-drag-track[data-cancel-mode="1"] .qc-baseline-seg,
+    .qc-drag-track[data-cancel-mode="1"] .qc-chevrons { opacity: 0.25 !important; }
+    .qc-drag-track[data-cancel-mode="1"] .qc-drag-label {
+      animation: qc-cancel-shake 0.6s ease-in-out infinite;
+    }
+    @keyframes qc-cancel-shake {
+      0%, 100% { transform: translateX(0); }
+      25%      { transform: translateX(-1.5px); }
+      75%      { transform: translateX(1.5px); }
+    }
+
+    .qc-drag-help {
+      font-size: 0.7rem;
+      color: var(--text-muted);
+      text-align: center;
+      letter-spacing: 0.02em;
+      opacity: 0.78;
     }
 
     @media (max-width: 720px) {
@@ -15800,10 +15986,13 @@
         grid-template-columns: 1fr 18px 1fr;
         gap: 6px;
       }
+      .qc-drag-track { height: 80px; }
       .qc-drag-action {
-        width: 48%;
-        min-width: 118px;
+        width: 46%;
+        min-width: 122px;
+        height: 54px;
       }
+      .qc-chevrons { right: 10px; }
     }
 
     /* ============================================================ */

package/dist/web-ui/embedded-assets.d.ts

@@ -1,4 +1,4 @@
-export declare const EMBEDDED_WEB_ASSET_VERSION = "427bbfce9c57";
+export declare const EMBEDDED_WEB_ASSET_VERSION = "57b36c48d8a4";
 export declare const EMBEDDED_WEB_ASSETS: {
     readonly scriptsJs: string;
     readonly stylesCss: string;