dsh-remote-vs 0.8.8 → 0.9.0

package/src/client/vsc/vsc.css

@@ -2065,6 +2065,241 @@ body:not([data-ds-dark-theme]) .rvs-undo-affordance:focus-visible {
   font-size: 11px;
 }
 
+/* ---------------------------------------------------- floating editor window */
+
+/**
+ * The floating editor lives in the host's frame-wide overlay layer
+ * (`position: absolute; inset: 0; z-index: 20`, click-through, children opt
+ * back into pointer events). It is placed with viewport coordinates, so it
+ * floats above every column without joining any of their stacking contexts.
+ *
+ * `.rvs-root` carries the whole design-system token set and is row-flex by
+ * default; this frame overrides the direction to a column and takes its size
+ * from the inline rect the component keeps.
+ */
+.rvs-float-window {
+  position: fixed;
+  flex-direction: column;
+  /* The rect maths (clamp/persist) is in border-box terms; without this the
+     painted border would sit one pixel outside the computed rectangle. */
+  box-sizing: border-box;
+  min-width: 360px;
+  min-height: 220px;
+  overflow: hidden;
+  border: 1px solid var(--rvs-border2);
+  border-radius: 10px;
+  background: var(--rvs-code-bg);
+  color: var(--rvs-code-fg);
+  box-shadow: 0 18px 60px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .28);
+  z-index: 30;
+  /* The overlay layer itself is click-through; the window opts back in even if
+     the host wraps each overlay entry in its own element. */
+  pointer-events: auto;
+}
+
+/* Minimized: the frame IS the ball (see `.rvs-float-mini`); the body stays
+   mounted but hidden, and it must not impose a minimum height. */
+.rvs-float-window[data-rvs-float="collapsed"] {
+  min-height: 0;
+}
+
+/**
+ * Minimized window = floating ball.
+ *
+ * A full-width 34px bar was too long: it read as a broken window and covered a
+ * whole strip. The ball is a small circle at the window's own corner, draggable
+ * anywhere, restored by a click (or Enter/Space). It keeps the dirty dot, so
+ * "the editor is out and has unsaved edits" is still one glance away.
+ */
+.rvs-float-window.rvs-float-mini {
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  cursor: move;
+  touch-action: none;
+}
+
+.rvs-float-ball {
+  flex: 1;
+  /* Stretch to the circle: the frame is a COLUMN flex box with centred items,
+     so without this the hit area (and the absolutely positioned dot) would be
+     sized by the 16px glyph instead of the 44px ball. */
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  border-radius: 50%;
+  color: var(--rvs-brand);
+  font-size: 16px;
+  line-height: 1;
+  cursor: move;
+  outline: none;
+}
+
+.rvs-float-ball:hover,
+.rvs-float-ball:focus-visible {
+  background: var(--rvs-hover);
+}
+
+.rvs-float-ball-glyph {
+  pointer-events: none;
+}
+
+/* Unsaved edits stay visible while minimized. */
+.rvs-float-ball-dot {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--rvs-git-m);
+  box-shadow: 0 0 0 2px var(--rvs-code-bg);
+  pointer-events: none;
+}
+
+/* While a drag/resize gesture runs the pointer must not select editor text. */
+.rvs-float-window.dragging {
+  user-select: none;
+}
+
+.rvs-float-titlebar {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  height: 34px;
+  padding: 0 6px 0 10px;
+  border-bottom: 1px solid var(--rvs-border);
+  background: var(--rvs-layer3);
+  cursor: move;
+  user-select: none;
+  touch-action: none;
+}
+
+.rvs-float-glyph {
+  color: var(--rvs-brand);
+  font-size: 11px;
+}
+
+.rvs-float-title {
+  flex: none;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--rvs-fg2);
+}
+
+.rvs-float-file {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11.5px;
+  color: var(--rvs-fg3);
+  direction: rtl;
+  unicode-bidi: plaintext;
+  text-align: left;
+}
+
+.rvs-float-spacer {
+  flex: 1;
+}
+
+.rvs-float-btn {
+  flex: none;
+  width: 22px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--rvs-fg3);
+  font: inherit;
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.rvs-float-btn:hover {
+  background: var(--rvs-hover);
+  color: var(--rvs-fg);
+}
+
+.rvs-float-close:hover {
+  background: rgba(241, 76, 76, .18);
+  color: var(--rvs-danger);
+}
+
+.rvs-float-body {
+  flex: 1 1 0;
+  min-height: 0;
+  min-width: 0;
+  display: flex;
+  overflow: hidden;
+  background: var(--rvs-code-bg);
+}
+
+/* Keep the height chain pinned: the editor pane grows inside this box. */
+.rvs-float-body > .rvs-pane {
+  flex: 1 1 0;
+  min-height: 0;
+  min-width: 0;
+}
+
+/* Eight grips, placed INSIDE the border box: the window clips overflow (rounded
+   corners), so grips hanging outside would lose half their hit area. Corners
+   are larger so they can actually be hit. */
+.rvs-float-resize {
+  position: absolute;
+  z-index: 3;
+}
+
+.rvs-float-resize-n { top: 0; left: 10px; right: 10px; height: 6px; cursor: ns-resize; }
+.rvs-float-resize-s { bottom: 0; left: 10px; right: 10px; height: 6px; cursor: ns-resize; }
+.rvs-float-resize-e { top: 10px; bottom: 10px; right: 0; width: 6px; cursor: ew-resize; }
+.rvs-float-resize-w { top: 10px; bottom: 10px; left: 0; width: 6px; cursor: ew-resize; }
+.rvs-float-resize-ne { top: 0; right: 0; width: 12px; height: 12px; cursor: nesw-resize; }
+.rvs-float-resize-nw { top: 0; left: 0; width: 12px; height: 12px; cursor: nwse-resize; }
+.rvs-float-resize-se { bottom: 0; right: 0; width: 12px; height: 12px; cursor: nwse-resize; }
+.rvs-float-resize-sw { bottom: 0; left: 0; width: 12px; height: 12px; cursor: nesw-resize; }
+
+/* Shown by whichever surface the single editor left behind (centre tab or the
+   sidebar's editor panel). */
+.rvs-float-placeholder {
+  flex: 1;
+  min-height: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 24px;
+  text-align: center;
+  color: var(--rvs-fg3);
+  font-size: 12.5px;
+}
+
+.rvs-float-placeholder-title {
+  color: var(--rvs-fg2);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.rvs-float-placeholder-text {
+  max-width: 360px;
+  line-height: 1.6;
+}
+
 /* --------------------------------------------------------- context menu */
 
 .rvs-portal {