@soba-so/react 0.0.13 → 0.0.15

package/dist/session.d.ts

@@ -49,6 +49,9 @@ export declare class SessionHolder {
     ensure(): Promise<string>;
     refresh(): Promise<string>;
 }
+export declare function sharedHolder(options: SessionSourceOptions): SessionHolder;
+export declare function retainHolder(holder: SessionHolder): void;
+export declare function releaseHolder(holder: SessionHolder): void;
 /**
  * A `fetch` that heals a dead session.
  *

package/dist/styles.css

@@ -12,6 +12,10 @@
   --sc-ok: #22a06b;
   --sc-warn: #b06f14;
   
+  --sc-tray: var(--sc-raised, #f6f6f7);
+  --sc-tray-card: var(--sc-sheet, #ffffff);
+  --sc-tray-sunk: var(--sc-raised, #f6f6f7);
+  
   --sc-font-size: 15px;
   --sc-fs-label: max(11px, calc(var(--sc-font-size) * 0.77));
   
@@ -239,121 +243,182 @@ a.sc-btn {
   min-width: 92px;
 }
 
-.sc-machine {
-  border-top: 1px solid var(--sc-line, #e9e9eb);
-  padding-top: 12px;
-  margin-top: 12px;
+.sc-tray {
+  display: grid;
+  gap: 8px;
+  padding: 6px;
+  border-radius: 18px;
+  background: var(--sc-tray, #f6f6f7);
 }
-.sc-machine:first-child {
-  border-top: 0;
-  padding-top: 0;
-  margin-top: 0;
+
+.sc-group {
+  min-width: 0;
 }
 
-.sc-machine-meta {
+.sc-group-cap {
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
-  gap: 3px 10px;
-  
-  margin-top: 1px;
-  font-size: var(--sc-fs-small);
-  line-height: 1.35;
-  color: var(--sc-muted, #6b6b73);
+  gap: 4px;
+  min-height: 24px;
+  padding: 0 2px 3px 12px;
 }
 
-.sc-machine-tag {
+.sc-group-title {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   font-size: var(--sc-fs-label);
-  font-weight: 600;
-  padding: 1px 6px;
-  border-radius: var(--sc-r-sm, 6px);
-  background: var(--sc-raised, #f6f6f7);
+  letter-spacing: 0;
+  color: var(--sc-muted, #6b6b73);
 }
 
-.sc-machine-state {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-size: var(--sc-fs-small);
-  color: var(--sc-muted, #6b6b73);
-  white-space: nowrap;
+.sc-group-card {
+  padding: 6px 0 6px 12px;
+  border-radius: var(--sc-r-lg, 14px);
+  background: var(--sc-tray-card, #ffffff);
+  box-shadow: var(--sc-shadow-1);
 }
 
-.sc-runtimes {
+.sc-disc {
+  flex: none;
   display: grid;
-  gap: 2px;
-  margin: 12px 0 0;
-  
-  --sc-branch: calc(var(--sc-tile, 32px) + 11px);
-  padding: 0 0 0 var(--sc-branch);
-  list-style: none;
-  font-size: var(--sc-fs-small);
+  place-items: center;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: var(--sc-tray-card, #ffffff);
+  box-shadow: var(--sc-shadow-1);
+  color: var(--sc-muted, #6b6b73);
+  cursor: pointer;
+  transition: color 120ms ease;
 }
 
-.sc-compute-act {
-  margin-top: 16px;
+.sc-disc:hover:not(:disabled) {
+  color: var(--sc-text, #1a1a1c);
 }
 
-.sc-compute-act:first-child {
-  margin-top: 0;
+.sc-disc:disabled {
+  opacity: 0.6;
+  cursor: default;
 }
 
-.sc-note + .sc-compute-act,
-.sc-error + .sc-compute-act {
-  margin-top: 9px;
+.sc-dglyph {
+  width: 13px;
+  height: 13px;
+}
+
+@keyframes sc-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.sc-spin {
+  animation: sc-spin 900ms linear infinite;
 }
 
-.sc-runtime {
+.sc-mrow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 52px;
+  padding: 4px 12px 4px 0;
+}
+
+.sc-mtile {
   position: relative;
+  flex: none;
   display: grid;
-  grid-template-columns: auto 1fr auto;
-  align-items: center;
-  gap: 9px;
-  min-height: 26px;
+  place-items: center;
+  width: 38px;
+  height: 38px;
+  border-radius: 12px;
+  background: var(--sc-tray-sunk, #f6f6f7);
+  box-shadow: inset 0 0 0 1px var(--sc-line, #e9e9eb);
+  color: var(--sc-text, #1a1a1c);
 }
 
-.sc-runtime::before {
-  content: "";
+.sc-mglyph {
+  width: 24px;
+  height: 18px;
+}
+
+.sc-mbadge {
   position: absolute;
-  left: calc(var(--sc-tile, 32px) / 2 - var(--sc-branch));
-  top: -2px;
-  bottom: -2px;
-  width: 1px;
+  right: 0;
+  bottom: 0;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  transform: translate(30%, 30%);
+  box-shadow: 0 0 0 2.5px var(--sc-tray-card, #ffffff);
+}
+
+.sc-mbadge-ok {
+  background: var(--sc-ok, #22a06b);
+}
+
+.sc-mbadge-busy {
+  background: var(--sc-warn, #b06f14);
+}
+
+.sc-mbadge-off {
   background: var(--sc-line-2, #dcdce0);
 }
 
-.sc-runtime:first-child::before {
-  top: -13px;
+.sc-mid {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-direction: column;
+  gap: 1px;
 }
 
-.sc-runtime:last-child::before {
-  bottom: auto;
-  height: calc(50% + 2px);
+.sc-mname {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--sc-fs-small);
+  font-weight: 550;
 }
 
-.sc-runtime:first-child:last-child::before {
-  height: calc(50% + 13px);
+.sc-mmeta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1px 6px;
+  font-size: var(--sc-fs-label);
+  line-height: 1.35;
+  color: var(--sc-muted, #6b6b73);
 }
 
-.sc-runtime::after {
-  content: "";
-  position: absolute;
-  left: calc(var(--sc-tile, 32px) / 2 - var(--sc-branch));
-  top: 50%;
-  width: 22px;
-  height: 1px;
-  background: var(--sc-line-2, #dcdce0);
+.sc-mmeta-sep {
+  padding-right: 6px;
+  color: var(--sc-line-2, #dcdce0);
+}
+
+.sc-arow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 30px;
+  padding-right: 12px;
 }
 
 .sc-runtime-tile {
-  width: 22px;
-  height: 22px;
   flex: none;
   display: grid;
   place-items: center;
+  width: 22px;
+  height: 22px;
   border-radius: var(--sc-r-sm, 6px);
   border: 1px solid var(--sc-line, #e9e9eb);
-  background: var(--sc-raised, #f6f6f7);
+  background: var(--sc-tray-sunk, #f6f6f7);
 }
 
 .sc-runtime-mark {
@@ -362,16 +427,200 @@ a.sc-btn {
   color: var(--sc-text-2, #3f3f46);
 }
 
-.sc-runtime-verdict {
+.sc-aname {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--sc-fs-small);
+}
+
+.sc-aversion {
+  color: var(--sc-muted, #6b6b73);
+}
+
+.sc-averdict {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
   font-size: var(--sc-fs-label);
   white-space: nowrap;
+  color: var(--sc-muted, #6b6b73);
+}
+
+.sc-orow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 34px;
+  padding-right: 12px;
+}
+
+.sc-otile {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 22px;
+  height: 22px;
+  border-radius: var(--sc-r-sm, 6px);
+  background: var(--sc-tray-sunk, #f6f6f7);
+  color: var(--sc-muted, #6b6b73);
+}
+
+.sc-otile .sc-mglyph {
+  width: 15px;
+  height: 11px;
+}
+
+.sc-oglyph,
+.sc-omark {
+  width: 13px;
+  height: 13px;
 }
 
-.sc-runtime-name {
+.sc-oname {
+  flex: 1;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  font-size: var(--sc-fs-small);
+  color: var(--sc-text-2, #3f3f46);
+}
+
+.sc-oword {
+  flex: none;
+  font-size: var(--sc-fs-label);
+  color: var(--sc-muted, #6b6b73);
+}
+
+.sc-pair {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: calc(100% + 4px);
+  min-height: 34px;
+  margin-left: -4px;
+  padding: 0 12px 0 4px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  font: inherit;
+  font-size: var(--sc-fs-small);
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 120ms ease;
+}
+
+.sc-pair:hover {
+  background: var(--sc-tray-sunk, #f6f6f7);
+}
+
+.sc-hrow {
+  padding-bottom: 2px;
+}
+
+.sc-row-note {
+  margin: 0;
+  padding: 2px 12px 4px 0;
+  font-size: var(--sc-fs-label);
+  line-height: 1.45;
+  color: var(--sc-muted, #6b6b73);
+}
+
+.sc-row-act {
+  flex: none;
+  padding: 3px 9px;
+  border: 1px solid transparent;
+  border-radius: var(--sc-r-pill, 999px);
+  background: var(--sc-tray-sunk, #f6f6f7);
+  font: inherit;
+  font-size: var(--sc-fs-label);
+  font-weight: 500;
+  color: var(--sc-text-2, #3f3f46);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.sc-row-act:hover:not(:disabled) {
+  color: var(--sc-text, #1a1a1c);
+}
+
+.sc-row-act:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.sc-tray-error {
+  margin: 0;
+  padding: 0 12px 2px;
+}
+
+.sc-pop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: auto;
+  bottom: auto;
+  z-index: 2147483000;
+  width: min(92vw, 320px);
+  max-width: min(92vw, 320px);
+  
+  max-height: calc(100vh - 24px);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 20px;
+  background: var(--sc-tray, #f6f6f7);
+  
+  box-shadow:
+    0 0 0 1px var(--sc-line, #e9e9eb),
+    var(--sc-shadow-2);
+}
+
+.sc-pop > .sc-tray {
+  background: transparent;
+  border-radius: inherit;
+}
+
+@keyframes sc-pop-in {
+  from {
+    opacity: 0;
+    transform: translateY(-6px) scale(0.98);
+  }
+}
+
+.sc-pop {
+  animation: sc-pop-in 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  transform-origin: top right;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sc-pop {
+    animation: none;
+  }
+  .sc-spin {
+    animation: none;
+  }
+  .sc-pair {
+    transition: none;
+  }
+}
+
+.sc-compute-act {
+  margin-top: 16px;
+}
+
+.sc-compute-act:first-child {
+  margin-top: 0;
+}
+
+.sc-note + .sc-compute-act,
+.sc-error + .sc-compute-act {
+  margin-top: 9px;
 }
 
 .soba-connect[data-theme="dark"],
@@ -398,6 +647,10 @@ a.sc-btn {
     --sc-ok: #4cb782;
     --sc-warn: #f2994a;
     
+    --sc-tray: var(--sc-ground, #0f0f11);
+    --sc-tray-card: var(--sc-raised, #1d1d20);
+    --sc-tray-sunk: var(--sc-sheet, #161618);
+    
     --sc-shadow-1: 0 1px 2px rgb(0 0 0 / 34%);
     --sc-shadow-2: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px -12px rgb(0 0 0 / 64%);
   }
@@ -419,6 +672,10 @@ a.sc-btn {
   --sc-ok: #4cb782;
   --sc-warn: #f2994a;
   
+  --sc-tray: var(--sc-ground, #0f0f11);
+  --sc-tray-card: var(--sc-raised, #1d1d20);
+  --sc-tray-sunk: var(--sc-sheet, #161618);
+  
   --sc-shadow-1: 0 1px 2px rgb(0 0 0 / 34%);
   --sc-shadow-2: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px -12px rgb(0 0 0 / 64%);
 }
@@ -756,22 +1013,6 @@ a.sc-btn {
   box-shadow: none;
 }
 
-.sc-modal-sheet .sc-machine {
-  border: 1px solid var(--sc-line, #e9e9eb);
-  border-radius: var(--sc-r, 10px);
-  padding: 11px 12px;
-  margin-top: 14px;
-}
-
-.sc-conns {
-  display: grid;
-  gap: 14px;
-}
-
-.sc-modal-sheet .sc-machine:first-child {
-  margin-top: 0;
-}
-
 .sc-modal-sheet .sc-title {
   font-size: 17px;
   font-weight: 600;
@@ -1011,51 +1252,6 @@ a.sc-btn {
   color: var(--sc-text, #1a1a1c);
 }
 
-.sc-conn,
-.sc-idrow {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  align-items: center;
-  gap: 12px;
-}
-
-.sc-conn {
-  padding: 10px 12px;
-  border: 1px solid var(--sc-line, #e9e9eb);
-  border-radius: var(--sc-r, 10px);
-  background: var(--sc-sheet, #ffffff);
-}
-
-.sc-conn-note {
-  grid-column: 1 / -1;
-  margin: 2px 0 0;
-  font-size: 12px;
-  line-height: 1.4;
-  color: var(--sc-muted, #6b6b73);
-}
-
-.sc-conn-action {
-  font: inherit;
-  font-size: var(--sc-fs-small);
-  font-weight: 500;
-  padding: 5px 9px;
-  border: 1px solid transparent;
-  border-radius: var(--sc-r-sm, 6px);
-  background: transparent;
-  color: var(--sc-muted, #6b6b73);
-  cursor: pointer;
-}
-
-.sc-conn-action:hover:not(:disabled) {
-  border-color: var(--sc-line-2, #dcdce0);
-  color: var(--sc-text, #1a1a1c);
-}
-
-.sc-conn-action:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-
 .sc-btn-wide {
   width: 100%;
 }
@@ -1324,7 +1520,9 @@ a.sc-btn {
 .sc-step-lead:focus-visible,
 .sc-step-links a:focus-visible,
 .sc-alt-link:focus-visible,
-.sc-conn-action:focus-visible,
+.sc-row-act:focus-visible,
+.sc-disc:focus-visible,
+.sc-pair:focus-visible,
 .sc-input:focus-visible,
 .sc-modal-close:focus-visible {
   outline: 2px solid var(--sc-accent, #18181b);
@@ -1375,7 +1573,7 @@ a.sc-btn {
   max-width: 100%;
   min-width: 0;
   
-  padding: 4px 13px 4px 4px;
+  padding: 3px 12px 3px 3px;
   border-radius: var(--sc-r-pill, 999px);
   border-color: var(--sc-line, #e9e9eb);
   
@@ -1399,14 +1597,33 @@ a.sc-btn {
   transform: translateY(0.5px);
 }
 
-.sc-btn-connected .sc-runtime-tile {
+.sc-pill-tile {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 26px;
+  height: 26px;
   border-radius: 50%;
+  background: var(--sc-raised, #f6f6f7);
+  box-shadow: inset 0 0 0 1px var(--sc-line, #e9e9eb);
+  color: var(--sc-text, #1a1a1c);
 }
 
-.sc-btn-connected:hover .sc-runtime-tile {
+.sc-btn-connected:hover .sc-pill-tile {
   background: var(--sc-sheet, #ffffff);
 }
 
+.sc-pill-mark {
+  width: 16px;
+  height: 16px;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .sc-pill-mark-busy {
+    animation: sc-spin 2400ms linear infinite;
+  }
+}
+
 .sc-btn-connected .sc-dot {
   flex: none;
   margin-left: 1px;
@@ -1538,6 +1755,36 @@ a.sc-btn {
   min-width: 0;
 }
 
+.sc-nudge {
+  position: relative;
+}
+.sc-nudge-dismiss {
+  position: absolute;
+  top: 7px;
+  right: 8px;
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: none;
+  color: var(--sc-muted, #6b6b73);
+  cursor: pointer;
+  transition:
+    background-color 0.12s,
+    color 0.12s;
+}
+.sc-nudge-dismiss:hover {
+  background: var(--sc-raised, #f6f6f7);
+  color: var(--sc-text, #1a1a1c);
+}
+.sc-nudge-x {
+  width: 14px;
+  height: 14px;
+}
+
 .sc-nudge > .sc-btn {
   grid-column: 2;
   align-self: end;
@@ -2277,6 +2524,18 @@ li.sc-plan-row.sc-plan-current {
   color: var(--sc-muted, #6b6b73);
 }
 
+.sc-run-error {
+  border-color: color-mix(in srgb, var(--sc-warn, #b06f14) 28%, var(--sc-line, #e9e9eb));
+}
+.sc-run-error-mark {
+  background: color-mix(in srgb, var(--sc-warn, #b06f14) 12%, var(--sc-raised, #f6f6f7));
+  color: var(--sc-warn, #b06f14);
+}
+
+.sc-run-error-message {
+  overflow-wrap: anywhere;
+}
+
 .sc-modal-sheet .sc-limit-head {
   flex-direction: column;
   align-items: center;
@@ -2362,13 +2621,13 @@ li.sc-plan-row.sc-plan-current {
   }
 }
 
-.sc-modal-sheet .sc-machine {
+.sc-modal-sheet .sc-tray {
   animation: sc-arrive 200ms cubic-bezier(0.2, 0.8, 0.2, 1) 60ms both;
 }
 
 @media (prefers-reduced-motion: reduce) {
   .sc-modal-sheet .sc-card,
-  .sc-modal-sheet .sc-machine {
+  .sc-modal-sheet .sc-tray {
     animation: none;
   }
   .sc-modal-sheet {