@kitlangton/knobs 0.2.0 → 0.3.0

package/dist/ui-react.js

@@ -1126,7 +1126,7 @@ var open = springEasing(2 * Math.PI / 0.22, 1);
 var activityCss = `
 :where(.knobs-activity,.knobs-activity *){box-sizing:border-box}
 :where(.knobs-activity){color-scheme:dark}
-.knobs-ui.knobs-activity{position:relative;display:block;height:100%;overflow:auto;overflow-anchor:none;outline:none;scrollbar-width:thin;overscroll-behavior:contain;user-select:none;-webkit-user-select:none;
+.knobs-ui.knobs-activity{position:relative;display:block;height:100%;overflow:auto;overflow-anchor:none;outline:none;scrollbar-width:none;overscroll-behavior:contain;user-select:none;-webkit-user-select:none;
   font:var(--ku-font-weight) var(--ku-font-size)/1.35 var(--ku-font);color:var(--ku-text);text-align:left;letter-spacing:normal;-webkit-font-smoothing:antialiased;
   --ka-gutter:var(--k-activity-gutter,28px);--ka-row:var(--k-activity-row,var(--ku-row));--ka-row-child:var(--k-activity-row-child,calc(var(--ka-row) - 6px));
   --ka-line:var(--k-activity-line,var(--ku-line-hi));--ka-select:var(--k-activity-select,var(--ku-wash-hi));--ka-hover:var(--k-activity-hover,var(--ku-wash));
@@ -1477,6 +1477,121 @@ var readoutCss = `
 @media(prefers-reduced-motion:reduce){.knobs-rd :where(*){transition:none!important}}
 `;
 
+// src/core/keys.ts
+var MODS = ["Ctrl", "Alt", "Shift", "Meta"];
+var ALIASES = {
+  ctrl: "Ctrl",
+  control: "Ctrl",
+  "⌃": "Ctrl",
+  alt: "Alt",
+  option: "Alt",
+  opt: "Alt",
+  "⌥": "Alt",
+  shift: "Shift",
+  "⇧": "Shift",
+  meta: "Meta",
+  cmd: "Meta",
+  command: "Meta",
+  "⌘": "Meta",
+  mod: "Mod"
+};
+var NAMED = {
+  " ": "Space",
+  space: "Space",
+  spacebar: "Space",
+  esc: "Escape",
+  escape: "Escape",
+  enter: "Enter",
+  return: "Enter",
+  tab: "Tab",
+  backspace: "Backspace",
+  delete: "Delete",
+  del: "Delete",
+  up: "ArrowUp",
+  down: "ArrowDown",
+  left: "ArrowLeft",
+  right: "ArrowRight",
+  arrowup: "ArrowUp",
+  arrowdown: "ArrowDown",
+  arrowleft: "ArrowLeft",
+  arrowright: "ArrowRight",
+  home: "Home",
+  end: "End",
+  pageup: "PageUp",
+  pagedown: "PageDown"
+};
+var isApple = () => typeof navigator !== "undefined" && /mac|iphone|ipad|ipod/i.test(navigator.userAgentData?.platform ?? navigator.platform ?? "");
+var keyName = (raw) => {
+  if (!raw)
+    return "";
+  const named = NAMED[raw.toLowerCase()];
+  if (named)
+    return named;
+  if (raw.length === 1)
+    return raw.toUpperCase();
+  if (/^f\d{1,2}$/i.test(raw))
+    return raw.toUpperCase();
+  return raw.charAt(0).toUpperCase() + raw.slice(1);
+};
+function normalizeCombo(combo) {
+  const trimmed = combo.trim();
+  if (!trimmed)
+    return "";
+  const parts = trimmed === "+" ? ["+"] : trimmed.replace(/\+\+$/, "+plus").split("+");
+  const mods = new Set;
+  let key = "";
+  for (const part of parts) {
+    const alias = ALIASES[part.trim().toLowerCase()] ?? ALIASES[part.trim()];
+    if (alias === "Mod")
+      mods.add(isApple() ? "Meta" : "Ctrl");
+    else if (alias)
+      mods.add(alias);
+    else
+      key = part === "plus" ? "+" : keyName(part.trim() || part);
+  }
+  if (!key)
+    return "";
+  return [...MODS.filter((m) => mods.has(m)), key].join("+");
+}
+var GLYPHS = { Ctrl: "⌃", Alt: "⌥", Shift: "⇧", Meta: "⌘" };
+var WORDS = { Ctrl: "Ctrl", Alt: "Alt", Shift: "Shift", Meta: "Meta" };
+var KEY_GLYPHS = {
+  ArrowUp: "↑",
+  ArrowDown: "↓",
+  ArrowLeft: "←",
+  ArrowRight: "→",
+  Backspace: "⌫",
+  Delete: "⌦",
+  Enter: "↩",
+  Escape: "Esc",
+  Tab: "⇥",
+  PageUp: "PgUp",
+  PageDown: "PgDn"
+};
+function comboParts(combo, apple = isApple()) {
+  const norm = normalizeCombo(combo);
+  if (!norm)
+    return [];
+  const parts = norm === "+" ? ["+"] : norm.split("+");
+  if (norm.endsWith("++"))
+    parts.splice(-2, 2, "+");
+  const key = parts.pop();
+  const mods = parts;
+  const shown = KEY_GLYPHS[key] ?? key;
+  return apple ? [...mods.map((m) => GLYPHS[m]), shown] : [...mods.map((m) => WORDS[m]), shown];
+}
+function isTypingTarget(target) {
+  const el = target;
+  if (!el || typeof el.tagName !== "string")
+    return false;
+  const tag = el.tagName;
+  if (tag === "SELECT" || el.isContentEditable)
+    return true;
+  if (tag === "TEXTAREA")
+    return !el.readOnly;
+  return tag === "INPUT" && !el.readOnly && !["range", "checkbox", "radio", "button", "submit", "reset", "color"].includes(el.type);
+}
+
 // src/ui/look.ts
 var ease = springEasing(26, 1);
 var TOKENS = {
@@ -1594,6 +1709,17 @@ var css = `
 }
 @supports not (animation-timeline:scroll()){.knobs-scroll-fade-x{text-overflow:ellipsis}}
 
+/* Overlay scrollbars (trees, activity rails): a thin thumb over the content, so the rows never
+   give up width to a scrollbar as they start or stop overflowing. It shows while the content
+   scrolls or the pointer is over it. */
+:is(.knobs-tree,.knobs-activity)::-webkit-scrollbar{display:none}
+.knobs-scrollbar{position:sticky;top:0;z-index:3;height:0;pointer-events:none}
+.knobs-scrollbar[hidden]{display:none}
+.knobs-scrollbar-thumb{position:absolute;top:0;right:2px;width:5px;border-radius:3px;background:color-mix(in srgb,var(--ku-text) 30%,transparent);opacity:0;
+  transition:opacity .3s ease-out,background .15s}
+:hover>.knobs-scrollbar>.knobs-scrollbar-thumb,.knobs-scrollbar:is([data-active],[data-dragging])>.knobs-scrollbar-thumb{opacity:1;pointer-events:auto;transition-duration:.12s,.15s}
+.knobs-scrollbar-thumb:hover,.knobs-scrollbar[data-dragging]>.knobs-scrollbar-thumb{background:color-mix(in srgb,var(--ku-text) 48%,transparent)}
+
 /* Split: panes along a row or column, hairline dividers with a wider grip. */
 .knobs-split{position:relative;display:flex;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden}
 .knobs-split[data-direction="column"]{flex-direction:column}
@@ -1630,7 +1756,11 @@ var css = `
 .knobs-split[data-direction="column"]>.knobs-pane[data-edge="start"]>.knobs-pane-rail{bottom:0}
 .knobs-split[data-direction="column"]>.knobs-pane[data-edge="end"]>.knobs-pane-rail{top:0}
 .knobs-pane[data-collapsed]>.knobs-pane-rail{pointer-events:auto}
-.knobs-ui .knobs-pane[data-collapsed]>.knobs-pane-rail:is(:hover,:focus-visible){background-image:linear-gradient(var(--ku-wash),var(--ku-wash));color:var(--ku-text)}
+/* Its hover wash fades, rather than going in one frame as a click opens the pane. */
+.knobs-ui .knobs-pane-rail::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--ku-wash);opacity:0;transition:opacity .15s;pointer-events:none}
+.knobs-pane-rail>*{position:relative}
+.knobs-ui .knobs-pane[data-collapsed]>.knobs-pane-rail:is(:hover,:focus-visible){color:var(--ku-text)}
+.knobs-ui .knobs-pane[data-collapsed]>.knobs-pane-rail:is(:hover,:focus-visible)::before{opacity:1}
 .knobs-pane-rail-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .knobs-pane-chevron{display:flex;flex:none;width:11px;height:11px;writing-mode:horizontal-tb;color:var(--ku-dim)}
 .knobs-pane-turn{display:flex;width:100%;height:100%;transform-origin:50% 50%}
@@ -1667,7 +1797,7 @@ var css = `
 :root[data-knobs-resizing] :is(iframe,canvas:not(.knobs-gpu-canvas)){pointer-events:none}
 
 /* Tree: one scroller, rows placed by transform, only those near the view in the DOM. */
-.knobs-tree{position:relative;overflow:auto;height:100%;outline:none;scrollbar-width:thin;overscroll-behavior:contain;user-select:none;-webkit-user-select:none}
+.knobs-tree{position:relative;overflow:auto;height:100%;outline:none;scrollbar-width:none;overscroll-behavior:contain;user-select:none;-webkit-user-select:none}
 .knobs-tree-space{position:relative;width:100%;pointer-events:none}
 .knobs-tree-row{position:absolute;left:var(--ku-row-x);right:var(--ku-row-x);top:0;display:flex;align-items:center;height:var(--ku-row);padding-right:calc(var(--ku-inset) - 4px);
   color:var(--ku-text);white-space:nowrap;cursor:default;will-change:transform;contain:layout style}
@@ -1819,7 +1949,6 @@ var tune = (s, m) => {
   s.zeta = m.zeta;
   return s;
 };
-var isTypingTarget = (t) => t instanceof HTMLElement && (t.isContentEditable || t instanceof HTMLSelectElement || t instanceof HTMLTextAreaElement || t instanceof HTMLInputElement && !t.readOnly && !["range", "checkbox", "radio", "button"].includes(t.type));
 function notifyLayout(doc) {
   doc.dispatchEvent(new Event("knobs-layout"));
 }
@@ -1859,6 +1988,79 @@ var ICONS = {
   unlock: svg('<rect x="3.5" y="7" width="9" height="6.5" rx="1.2"/><path d="M5.5 7V5a2.5 2.5 0 0 1 4.8-1"/>')
 };
 
+// src/ui/scrollbar.ts
+function overlayScrollbar(scroller, content) {
+  const doc = scroller.ownerDocument;
+  const win = doc.defaultView;
+  const track = doc.createElement("div");
+  track.className = "knobs-scrollbar";
+  track.setAttribute("aria-hidden", "true");
+  const thumb = doc.createElement("div");
+  thumb.className = "knobs-scrollbar-thumb";
+  track.append(thumb);
+  scroller.prepend(track);
+  let size = 0;
+  const update = () => {
+    const view = scroller.clientHeight;
+    const over = scroller.scrollHeight - view;
+    const shown = over > 1 && view > 0;
+    track.hidden = !shown;
+    if (!shown)
+      return;
+    size = Math.max(20, view * view / (view + over));
+    const y = Math.min(over, Math.max(0, scroller.scrollTop)) / over * (view - size);
+    thumb.style.height = `${size.toFixed(1)}px`;
+    thumb.style.transform = `translate3d(0,${y.toFixed(1)}px,0)`;
+  };
+  let idle = 0;
+  const onScroll = () => {
+    update();
+    track.dataset.active = "";
+    win.clearTimeout(idle);
+    idle = win.setTimeout(() => delete track.dataset.active, 800);
+  };
+  scroller.addEventListener("scroll", onScroll, { passive: true });
+  let drag;
+  thumb.addEventListener("pointerdown", (e) => {
+    if (e.button !== 0)
+      return;
+    e.preventDefault();
+    e.stopPropagation();
+    drag = { y: e.clientY, top: scroller.scrollTop, pointer: e.pointerId };
+    thumb.setPointerCapture(e.pointerId);
+    track.dataset.dragging = "";
+  });
+  thumb.addEventListener("pointermove", (e) => {
+    if (!drag || e.pointerId !== drag.pointer)
+      return;
+    const view = scroller.clientHeight;
+    const over = scroller.scrollHeight - view;
+    scroller.scrollTop = drag.top + (e.clientY - drag.y) * over / Math.max(1, view - size);
+  });
+  const end = (e) => {
+    if (!drag || e.pointerId !== drag.pointer)
+      return;
+    drag = undefined;
+    delete track.dataset.dragging;
+  };
+  thumb.addEventListener("pointerup", end);
+  thumb.addEventListener("pointercancel", end);
+  thumb.addEventListener("lostpointercapture", end);
+  const ro = new ResizeObserver(update);
+  ro.observe(scroller);
+  ro.observe(content);
+  update();
+  return {
+    update,
+    dispose() {
+      ro.disconnect();
+      win.clearTimeout(idle);
+      scroller.removeEventListener("scroll", onScroll);
+      track.remove();
+    }
+  };
+}
+
 // src/ui/activity.ts
 var ACTIVITY_ICONS = {
   you: svg('<circle cx="8" cy="5.5" r="2.5"/><path d="M3.2 13.5c.8-2.4 2.6-3.8 4.8-3.8s4 1.4 4.8 3.8"/>'),
@@ -1871,7 +2073,7 @@ var ACTIVITY_ICONS = {
   shipped: svg('<circle cx="8" cy="8" r="5.8"/><path d="m5.6 8.2 1.7 1.7 3.2-3.6"/>')
 };
 var PLAY = '<svg viewBox="0 0 8 8" aria-hidden="true"><path d="M1.5 1v6l5.2-3Z" fill="currentColor"/></svg>';
-var REFLOW = springMotion({ duration: 0.4, bounce: 0 });
+var REFLOW = springMotion({ duration: 0.3, bounce: 0 });
 var OPEN = springMotion({ duration: 0.22, bounce: 0 });
 var CLOSE = springMotion({ duration: 0.18, bounce: 0 });
 var BLOOM = springMotion({ duration: 0.3, bounce: 0 });
@@ -1914,6 +2116,7 @@ function activity(container, options) {
   space.append(hl, line);
   root.append(empty, space);
   container.append(root);
+  const scrollbar = overlayScrollbar(root, space);
   let heights = [32, 26];
   const measure = () => {
     syncFrame(root);
@@ -2537,6 +2740,7 @@ function activity(container, options) {
     destroy() {
       loop.stop();
       ro.disconnect();
+      scrollbar.dispose();
       if (keysFrom === "page") {
         win.removeEventListener("keydown", onKey);
         win.removeEventListener("pointerdown", onPointer, true);
@@ -2883,11 +3087,7 @@ var SLIDE_BY = 0.12;
 var EXIT_BLUR = 3;
 var px = (x) => new Spring(x, LAYOUT.omega, LAYOUT.zeta, 0.05);
 var unit = (x) => new Spring(x, ENTER.omega, ENTER.zeta, 0.0005);
-var drive = (s, m, target) => {
-  s.omega = m.omega;
-  s.zeta = m.zeta;
-  return s.set(target);
-};
+var drive = (s, m, target) => tune(s, m).set(target);
 var probed = new Map;
 var smallest = (srcset) => {
   let best;
@@ -3648,7 +3848,7 @@ function bento(container, options) {
     }
     zoomIn(t.id);
   };
-  const typing = (target) => target instanceof HTMLElement && target !== root && (target.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName));
+  const typing = (target) => target !== root && isTypingTarget(target);
   const reveal = (id) => {
     const r = rectOf(id);
     if (!r)
@@ -4637,15 +4837,7 @@ function claimsHintKey(doc, key) {
   const holder = doc;
   return key === PAGE_HINT_KEY && Boolean(holder[KEY]?.listening);
 }
-var isTyping = (target) => {
-  const el = target;
-  if (!el || typeof el.tagName !== "string")
-    return false;
-  const tag = el.tagName;
-  if (tag === "TEXTAREA" || tag === "SELECT" || el.isContentEditable)
-    return true;
-  return tag === "INPUT" && !["range", "checkbox", "radio", "button", "submit", "reset", "color"].includes(el.type);
-};
+var isTyping = isTypingTarget;
 var PRESSABLE = "button,a[href],summary,[role=button],[role=tab],[role=radio],[role=switch],[role=checkbox],[role=menuitem],[role=option]";
 function activateElement(el) {
   const pressable = el.matches(PRESSABLE) || el.tabIndex < 0 && !el.matches("input,select,textarea");
@@ -5025,110 +5217,6 @@ function layerPainter(doc, groups) {
   };
 }
 
-// src/core/keys.ts
-var MODS = ["Ctrl", "Alt", "Shift", "Meta"];
-var ALIASES = {
-  ctrl: "Ctrl",
-  control: "Ctrl",
-  "⌃": "Ctrl",
-  alt: "Alt",
-  option: "Alt",
-  opt: "Alt",
-  "⌥": "Alt",
-  shift: "Shift",
-  "⇧": "Shift",
-  meta: "Meta",
-  cmd: "Meta",
-  command: "Meta",
-  "⌘": "Meta",
-  mod: "Mod"
-};
-var NAMED = {
-  " ": "Space",
-  space: "Space",
-  spacebar: "Space",
-  esc: "Escape",
-  escape: "Escape",
-  enter: "Enter",
-  return: "Enter",
-  tab: "Tab",
-  backspace: "Backspace",
-  delete: "Delete",
-  del: "Delete",
-  up: "ArrowUp",
-  down: "ArrowDown",
-  left: "ArrowLeft",
-  right: "ArrowRight",
-  arrowup: "ArrowUp",
-  arrowdown: "ArrowDown",
-  arrowleft: "ArrowLeft",
-  arrowright: "ArrowRight",
-  home: "Home",
-  end: "End",
-  pageup: "PageUp",
-  pagedown: "PageDown"
-};
-var isApple = () => typeof navigator !== "undefined" && /mac|iphone|ipad|ipod/i.test(navigator.userAgentData?.platform ?? navigator.platform ?? "");
-var keyName = (raw) => {
-  if (!raw)
-    return "";
-  const named = NAMED[raw.toLowerCase()];
-  if (named)
-    return named;
-  if (raw.length === 1)
-    return raw.toUpperCase();
-  if (/^f\d{1,2}$/i.test(raw))
-    return raw.toUpperCase();
-  return raw.charAt(0).toUpperCase() + raw.slice(1);
-};
-function normalizeCombo(combo) {
-  const trimmed = combo.trim();
-  if (!trimmed)
-    return "";
-  const parts = trimmed === "+" ? ["+"] : trimmed.replace(/\+\+$/, "+plus").split("+");
-  const mods = new Set;
-  let key = "";
-  for (const part of parts) {
-    const alias = ALIASES[part.trim().toLowerCase()] ?? ALIASES[part.trim()];
-    if (alias === "Mod")
-      mods.add(isApple() ? "Meta" : "Ctrl");
-    else if (alias)
-      mods.add(alias);
-    else
-      key = part === "plus" ? "+" : keyName(part.trim() || part);
-  }
-  if (!key)
-    return "";
-  return [...MODS.filter((m) => mods.has(m)), key].join("+");
-}
-var GLYPHS = { Ctrl: "⌃", Alt: "⌥", Shift: "⇧", Meta: "⌘" };
-var WORDS = { Ctrl: "Ctrl", Alt: "Alt", Shift: "Shift", Meta: "Meta" };
-var KEY_GLYPHS = {
-  ArrowUp: "↑",
-  ArrowDown: "↓",
-  ArrowLeft: "←",
-  ArrowRight: "→",
-  Backspace: "⌫",
-  Delete: "⌦",
-  Enter: "↩",
-  Escape: "Esc",
-  Tab: "⇥",
-  PageUp: "PgUp",
-  PageDown: "PgDn"
-};
-function comboParts(combo, apple = isApple()) {
-  const norm = normalizeCombo(combo);
-  if (!norm)
-    return [];
-  const parts = norm === "+" ? ["+"] : norm.split("+");
-  if (norm.endsWith("++"))
-    parts.splice(-2, 2, "+");
-  const key = parts.pop();
-  const mods = parts;
-  const shown = KEY_GLYPHS[key] ?? key;
-  return apple ? [...mods.map((m) => GLYPHS[m]), shown] : [...mods.map((m) => WORDS[m]), shown];
-}
-
 // src/ui/layer.ts
 var lookOf = (look) => ({ ...lookDefaults.current, ...look });
 var roots = new WeakMap;
@@ -5701,10 +5789,10 @@ function foldFaces(prev, p) {
 function chevronTurn(p, edge) {
   return (edge === "start" ? 180 : -180) * (1 - clamp01(p));
 }
-function chevronFlip(f) {
-  return 2 * clamp01(f) - 1;
+function chevronFlip(f, edge) {
+  return chevronTurn(f, edge);
 }
-var FOLD_STYLE = { chevron: "flip", title: "travel", duration: 0.3 };
+var FOLD_STYLE = { chevron: "flip", title: "travel", duration: 0.25 };
 function foldStyle(options = {}) {
   const duration = options.duration;
   return {
@@ -5745,10 +5833,12 @@ function serializeLayout(layout) {
 }
 
 // src/ui/split.ts
-var FLIP = springMotion({ duration: 0.18, bounce: 0 });
+var FLIP = springMotion({ duration: 0.25, bounce: 0 });
+var FLIP_DEPTH = 28;
 var SETTLE = springMotion({ duration: 0.3, bounce: 0 });
 var CONTENT_BLUR = 3;
 var LABEL_BLUR = 2;
+var COUNT_CLEAR = 0.12;
 var put = (el, prop, value) => {
   if (el.style.getPropertyValue(prop) !== value)
     el.style.setProperty(prop, value);
@@ -5885,7 +5975,12 @@ function split(container, options) {
         if (!row) {
           head.dataset.toggles = "";
           head.addEventListener("click", () => setCollapsed(spec.id, !collapsed[spec.id]));
-        }
+        } else
+          head.addEventListener("dblclick", (e) => {
+            if (e.target.closest(".knobs-pane-btn"))
+              return;
+            setCollapsed(spec.id, true);
+          });
       }
       inner.append(head);
       view.head = head;
@@ -6054,6 +6149,8 @@ function split(container, options) {
     const label = v.railLabel;
     const travel = morph && style.title === "travel" && Boolean(v.titleEl) && label.textContent === v.titleEl.textContent;
     v.el.toggleAttribute("data-travel", travel && folding);
+    if (v.countEl)
+      put(v.countEl, "opacity", travel && folding && p > 0 ? Math.max(0, 1 - p / COUNT_CLEAR).toFixed(3) : "");
     const k = 1 - p;
     if (travel && !folding) {
       put(label, "opacity", "0");
@@ -6081,8 +6178,9 @@ function split(container, options) {
       if (style.chevron === "turn")
         put(v.turn, "transform", k === 0 ? "" : `${move} rotate(${chevronTurn(p, v.edge).toFixed(2)}deg) ${size}`);
       else {
-        const w = chevronFlip(v.flip.x);
-        put(v.turn, "transform", k === 0 && w === 1 ? "" : `${move} ${size} scaleX(${w.toFixed(4)})`);
+        const turn = chevronFlip(v.flip.x, v.edge);
+        const over = v.flip.resting ? turn === 0 ? "" : "scaleX(-1)" : `perspective(${FLIP_DEPTH}px) rotateY(${turn.toFixed(2)}deg)`;
+        put(v.turn, "transform", k === 0 && !over ? "" : `${move} ${size} ${over}`);
       }
     } else {
       const a = v.faces.rail;
@@ -8086,7 +8184,7 @@ function virtualWindow(scrollTop, height, rowHeight, count, overscan = 6) {
 }
 
 // src/ui/tree.ts
-var MOVE = springMotion({ duration: 0.34, bounce: 0.02 });
+var MOVE = springMotion({ duration: 0.3, bounce: 0 });
 var EDGE = 28;
 function tree(container, options) {
   const doc = container.ownerDocument;
@@ -8125,6 +8223,7 @@ function tree(container, options) {
   empty.hidden = true;
   root.append(space, line, empty);
   container.append(root);
+  const scrollbar = overlayScrollbar(root, space);
   let h = 26;
   let indent = 14;
   let inset = 8;
@@ -8974,6 +9073,7 @@ function tree(container, options) {
       loop.stop();
       autoScroll.stop();
       ro.disconnect();
+      scrollbar.dispose();
       dragging?.ghost.remove();
       root.remove();
     }