@co0ontty/wand 1.43.0 → 1.43.2

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

@@ -15678,110 +15678,219 @@
       font-weight: 700;
     }
 
-    .qc-drag-wrap {
+    /* ================================================================
+       Quick-Git magnetic dock
+       Layout:  [  free field with Commit/Tag/Push chips  ] [ ▶ pad ]
+         - Selected chips snap into one cluster (always Commit → Tag → Push).
+         - Unselected chips rest on a lower tray row.
+         - Drag a chip onto the cluster to add it, away to remove it, tap to toggle.
+         - Fling any chip into the ▶ pad (or tap it) to fire compose(selected).
+         Commit is always included. Empty message / tag → auto-generated on submit.
+       ================================================================ */
+    .qc-dock-wrap {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
       padding-top: 2px;
     }
-    .qc-drag-track {
-      --qc-progress: 0%;
-      --qc-knob-x: 0px;
+    .qc-dock-wrap[data-disabled="1"] { opacity: 0.55; pointer-events: none; }
+
+    /* Busy panel (replaces the dock while a request is in flight) */
+    .qc-dock-busy {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      align-self: flex-start;
+      padding: 10px 14px;
+      border-radius: 12px;
+      background: rgba(197, 101, 61, 0.10);
+      border: 1px solid rgba(197, 101, 61, 0.20);
+      color: var(--accent);
+      font-size: 0.82rem;
+      font-weight: 700;
+    }
+    .qc-dock-busy-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: var(--accent);
+      animation: qc-dock-busy-pulse 1.2s ease-in-out infinite;
+    }
+    @keyframes qc-dock-busy-pulse {
+      0%, 100% { opacity: 0.4; transform: scale(0.85); }
+      50%      { opacity: 1;   transform: scale(1.15); }
+    }
+
+    /* Stage = free-drag field on the left + launch pad on the right.
+       --qc-tone follows the composed action so the whole stage echoes the combo color. */
+    .qc-dock-stage {
+      --qc-tone: var(--accent);
+      --qc-tone-soft: rgba(197, 101, 61, 0.20);
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) 96px;
+      gap: 10px;
+      height: 150px;
+      padding: 8px;
+      border-radius: 16px;
+      border: 1px solid rgba(125, 91, 57, 0.16);
+      background:
+        radial-gradient(120% 120% at 30% 30%, rgba(255, 255, 255, 0.55), rgba(255, 245, 235, 0.16)),
+        linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(255, 245, 235, 0.22));
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 3px rgba(89, 58, 32, 0.05);
+      user-select: none;
+    }
+    .qc-dock-stage[data-action="commit-tag"]      { --qc-tone: #4a6fa5; --qc-tone-soft: rgba(74, 111, 165, 0.22); }
+    .qc-dock-stage[data-action="commit-push"]     { --qc-tone: #4f7a58; --qc-tone-soft: rgba(79, 122, 88, 0.22); }
+    .qc-dock-stage[data-action="commit-tag-push"] { --qc-tone: #7c5aa8; --qc-tone-soft: rgba(124, 90, 168, 0.24); }
+
+    .qc-dock-field {
       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);
-      overflow: hidden;
+      min-width: 0;
+      border-radius: 12px;
+      background: repeating-linear-gradient(45deg, rgba(125, 91, 57, 0.035) 0 8px, transparent 8px 16px);
       touch-action: none;
-      user-select: none;
+      overflow: hidden;
     }
-    .qc-drag-progress {
+
+    /* Cluster backdrop — the tray that selected chips snap onto. JS sizes/positions it. */
+    .qc-dock-cluster {
       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;
+      left: 0;
+      top: 0;
+      border-radius: 14px;
+      background: color-mix(in srgb, var(--qc-tone) 10%, transparent);
+      border: 1.5px dashed color-mix(in srgb, var(--qc-tone) 38%, transparent);
+      box-shadow: 0 4px 14px var(--qc-tone-soft);
       pointer-events: none;
+      z-index: 0;
+      opacity: 0;
+      transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
+                  width 0.22s cubic-bezier(0.22, 1, 0.36, 1),
+                  height 0.22s cubic-bezier(0.22, 1, 0.36, 1),
+                  opacity 0.18s ease, background 0.2s ease, border-color 0.2s ease;
     }
-    .qc-drag-track.is-dragging .qc-drag-progress {
-      transition: none;
-    }
-    .qc-drag-stages {
+    /* Only visible while two or more chips are travelling together. */
+    .qc-dock-cluster.is-active { opacity: 1; }
+
+    /* Chips — absolutely positioned; JS sets transform. */
+    .qc-chip {
       position: absolute;
-      inset: 7px 10px;
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
+      left: 0;
+      top: 0;
+      display: inline-flex;
       align-items: center;
-      pointer-events: none;
+      gap: 7px;
+      height: 38px;
+      padding: 0 14px;
+      border: 1px solid rgba(125, 91, 57, 0.22);
+      border-radius: 999px;
+      background: rgba(255, 255, 255, 0.92);
+      color: var(--text-secondary);
+      font-family: var(--font-sans);
+      font-size: 0.82rem;
+      font-weight: 700;
+      letter-spacing: 0.01em;
+      white-space: nowrap;
+      cursor: grab;
+      touch-action: none;
+      box-shadow: 0 2px 6px rgba(89, 58, 32, 0.08);
+      z-index: 2;
+      transition: box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
     }
-    .qc-drag-stage {
-      position: relative;
-      z-index: 1;
-      justify-self: center;
-      font-size: 0.7rem;
-      font-weight: 800;
-      color: var(--text-muted);
-      letter-spacing: 0.03em;
-      text-transform: uppercase;
+    /* Only animate position while settling, so live drag stays glued to the pointer. */
+    .qc-chip.qc-chip--anim {
+      transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
+                  box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
     }
-    .qc-drag-stage::before {
-      content: "";
-      display: block;
-      width: 7px;
-      height: 7px;
-      margin: 0 auto 5px;
-      border-radius: 50%;
-      background: rgba(125, 91, 57, 0.22);
-      box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.75);
+    .qc-chip.is-grabbing {
+      cursor: grabbing;
+      z-index: 5;
+      box-shadow: 0 12px 26px rgba(89, 58, 32, 0.22);
     }
-    .qc-drag-stage.is-passed {
-      color: var(--accent);
+    .qc-chip:disabled { cursor: not-allowed; }
+    .qc-chip:not(:disabled):hover { border-color: var(--qc-tone); }
+
+    .qc-chip-dot {
+      width: 9px;
+      height: 9px;
+      border-radius: 50%;
+      background: rgba(125, 91, 57, 0.30);
+      box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6);
+      transition: background 0.18s ease, transform 0.18s ease;
     }
-    .qc-drag-stage.is-passed::before {
-      background: var(--accent);
+    .qc-chip--commit .qc-chip-dot { background: var(--accent); }
+    .qc-chip--tag    .qc-chip-dot { background: #4a6fa5; }
+    .qc-chip--push   .qc-chip-dot { background: #4f7a58; }
+
+    /* Each chip carries its own identity tint at rest. */
+    .qc-chip--commit { border-color: color-mix(in srgb, var(--accent) 30%, rgba(125, 91, 57, 0.2)); }
+    .qc-chip--tag    { border-color: color-mix(in srgb, #4a6fa5 30%, rgba(125, 91, 57, 0.2)); }
+    .qc-chip--push   { border-color: color-mix(in srgb, #4f7a58 30%, rgba(125, 91, 57, 0.2)); }
+
+    /* Grabbed or magnetically attached → lifts and lights up in its own color. */
+    .qc-chip.is-grabbing, .qc-chip.is-attached {
+      color: var(--text-primary);
+      box-shadow: 0 12px 26px var(--qc-tone-soft);
+      z-index: 5;
     }
-    .qc-drag-action {
-      position: absolute;
-      left: 7px;
-      top: 7px;
-      z-index: 2;
-      width: 42%;
-      min-width: 132px;
-      max-width: 220px;
-      height: 44px;
-      border: 0;
-      border-radius: 8px;
-      background: var(--accent);
-      color: white;
-      font-family: var(--font-sans);
-      font-size: 0.84rem;
-      font-weight: 800;
-      display: inline-flex;
+    .qc-chip.is-grabbing .qc-chip-dot, .qc-chip.is-attached .qc-chip-dot { transform: scale(1.1); }
+    .qc-chip--commit.is-grabbing, .qc-chip--commit.is-attached { background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--accent) 16%, #fff)); border-color: color-mix(in srgb, var(--accent) 46%, transparent); }
+    .qc-chip--tag.is-grabbing, .qc-chip--tag.is-attached       { background: linear-gradient(180deg, #fff, color-mix(in srgb, #4a6fa5 16%, #fff)); border-color: color-mix(in srgb, #4a6fa5 46%, transparent); }
+    .qc-chip--push.is-grabbing, .qc-chip--push.is-attached     { background: linear-gradient(180deg, #fff, color-mix(in srgb, #4f7a58 16%, #fff)); border-color: color-mix(in srgb, #4f7a58 46%, transparent); }
+
+    /* Launch pad — drop target on the right; also tappable. */
+    .qc-dock-launch {
+      display: flex;
+      flex-direction: column;
       align-items: center;
       justify-content: center;
-      gap: 8px;
-      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;
+      gap: 4px;
+      border-radius: 14px;
+      border: 1.5px dashed rgba(125, 91, 57, 0.32);
+      background: rgba(255, 255, 255, 0.4);
+      color: var(--text-muted);
+      cursor: pointer;
       touch-action: none;
+      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease,
+                  transform 0.2s ease, box-shadow 0.2s ease;
     }
-    .qc-drag-track.is-dragging .qc-drag-action {
-      cursor: grabbing;
-      transition: background 0.16s ease, box-shadow 0.16s ease;
+    .qc-dock-launch:not(:disabled):hover {
+      border-color: var(--qc-tone);
+      color: var(--qc-tone);
+      background: color-mix(in srgb, var(--qc-tone) 8%, rgba(255, 255, 255, 0.5));
     }
-    .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-dock-launch:disabled { cursor: not-allowed; }
+    .qc-dock-launch-arrow { display: inline-flex; transition: transform 0.2s ease; }
+    .qc-dock-launch-label {
+      font-size: 0.72rem;
+      font-weight: 800;
+      letter-spacing: 0.04em;
     }
-    .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);
+    /* Hot = a chip is hovering over the pad; release to fire. */
+    .qc-dock-stage[data-hot="1"] .qc-dock-launch {
+      border-style: solid;
+      border-color: var(--qc-tone);
+      background: var(--qc-tone);
+      color: #fff;
+      transform: scale(1.04);
+      box-shadow: 0 8px 22px var(--qc-tone-soft), 0 0 0 5px color-mix(in srgb, var(--qc-tone) 18%, transparent);
     }
-    .qc-drag-action:disabled {
-      opacity: 0.55;
-      cursor: not-allowed;
-      box-shadow: none;
+    .qc-dock-stage[data-hot="1"] .qc-dock-launch-arrow { transform: translateX(3px); }
+
+    .qc-dock-hint {
+      min-height: 1em;
+      font-size: 0.7rem;
+      color: var(--text-muted);
+      text-align: center;
+      letter-spacing: 0.02em;
+      opacity: 0.8;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .qc-chip, .qc-chip--anim, .qc-dock-cluster, .qc-dock-launch, .qc-dock-busy-dot {
+        animation: none !important;
+        transition: none !important;
+      }
     }
 
     @media (max-width: 720px) {
@@ -15800,10 +15909,17 @@
         grid-template-columns: 1fr 18px 1fr;
         gap: 6px;
       }
-      .qc-drag-action {
-        width: 48%;
-        min-width: 118px;
+      .qc-dock-stage {
+        height: 160px;
+        grid-template-columns: minmax(0, 1fr) 82px;
+        gap: 8px;
+      }
+      .qc-chip {
+        height: 36px;
+        padding: 0 12px;
+        font-size: 0.8rem;
       }
+      .qc-dock-launch-label { font-size: 0.68rem; }
     }
 
     /* ============================================================ */

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 = "88a2b1bfc9fa";
 export declare const EMBEDDED_WEB_ASSETS: {
     readonly scriptsJs: string;
     readonly stylesCss: string;