@opengeni/react 6.1.0 → 7.0.0-canary.35625901699001

package/styles/compiled.css

@@ -455,6 +455,8 @@
     --container-2xl: 42rem;
     --container-3xl: 48rem;
     --container-5xl: 64rem;
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
     --text-lg: 1.125rem;
     --text-lg--line-height: calc(1.75 / 1.125);
     --text-xl: 1.25rem;
@@ -608,6 +610,306 @@
   --_og-session-chrome-ease: var(--og-session-chrome-ease, var(--og-ease-out));
   --_og-session-chrome-row-hover: var(--og-session-chrome-row-hover, var(--og-color-surface-3));
 }
+:where(.og-root).og-session-capability,:where(.og-root) .og-session-capability {
+  width: 100%;
+  max-width: 540px;
+  color: var(--og-color-fg);
+  font-family: var(--og-font-sans,inherit);
+}
+:where(.og-root).og-session-capability-shell,:where(.og-root) .og-session-capability-shell {
+  border: 1px solid var(--og-color-border);
+  border-radius: 12px;
+  background: var(--og-color-surface-1);
+  overflow: hidden;
+}
+:where(.og-root).og-session-capability-header,:where(.og-root) .og-session-capability-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 18px 19px 12px;
+}
+:where(.og-root).og-session-capability-logo,:where(.og-root) .og-session-capability-logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 41px;
+  height: 41px;
+  flex-shrink: 0;
+  border: 1px solid var(--og-color-border);
+  border-radius: 10px;
+  background: var(--og-color-surface-2);
+  font-size: 13px;
+  font-weight: 600;
+  overflow: hidden;
+}
+:where(.og-root).og-session-capability-logo img,:where(.og-root) .og-session-capability-logo img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  padding: 6px;
+  box-sizing: border-box;
+}
+:where(.og-root).og-session-capability-identity,:where(.og-root) .og-session-capability-identity {
+  flex: 1;
+  min-width: 0;
+  display: grid;
+  gap: 4px;
+  overflow-wrap: anywhere;
+}
+:where(.og-root).og-session-capability-identity h3,:where(.og-root) .og-session-capability-identity h3 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+}
+:where(.og-root).og-session-capability-identity span,:where(.og-root) .og-session-capability-identity span {
+  font-size: 11px;
+  color: var(--og-color-fg-muted);
+}
+:where(.og-root).og-session-capability-type,:where(.og-root) .og-session-capability-type {
+  flex-shrink: 0;
+  padding: 4px 7px;
+  border-radius: 5px;
+  background: var(--og-color-surface-2);
+  font-size: 10px;
+}
+:where(.og-root).og-session-capability-copy,:where(.og-root) .og-session-capability-copy {
+  margin: 0;
+  padding: 0 19px 12px;
+  font-size: 12px;
+  line-height: 1.7;
+  color: var(--og-color-fg-muted);
+  overflow-wrap: anywhere;
+}
+:where(.og-root).og-session-capability-actions,:where(.og-root) .og-session-capability-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 0 19px 14px;
+}
+:where(.og-root).og-session-capability-actions > span,:where(.og-root) .og-session-capability-actions > span {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+  color: var(--og-color-fg-muted);
+}
+:where(.og-root).og-session-capability-actions button,:where(.og-root) .og-session-capability-actions button {
+  margin-left: auto;
+  min-height: 35px;
+  border: 0;
+  padding: 8px 13px;
+  border-radius: 7px;
+  color: var(--og-color-accent-fg,#fff);
+  background: var(--og-color-accent-deep,#006cdb);
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+:where(.og-root).og-session-capability-note,:where(.og-root) .og-session-capability-note {
+  margin: 10px 0 0;
+  font-size: 10px;
+  line-height: 1.6;
+  color: var(--og-color-fg-muted);
+}
+:where(.og-root).og-session-capability :focus-visible,:where(.og-root) .og-session-capability :focus-visible,:where(.og-root) .og-session-capability-dialog :focus-visible,:where(.og-root)  .og-session-capability-dialog :focus-visible {
+  outline: 2px solid var(--og-color-accent);
+  outline-offset: 3px;
+}
+:where(.og-root).og-session-capability-overlay,:where(.og-root) .og-session-capability-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: rgb(0 0 0 / .4);
+}
+:where(.og-root).og-session-capability-dialog,:where(.og-root) .og-session-capability-dialog {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+  z-index: 1001;
+  width: min(42rem,calc(100vw - 32px));
+  max-height: calc(100dvh - 32px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid var(--og-color-border);
+  border-radius: 16px;
+  background: var(--og-color-surface-1);
+  color: var(--og-color-fg);
+  font-family: var(--og-font-sans,inherit);
+  box-shadow: 0 16px 48px rgb(0 0 0 / .2);
+}
+:where(.og-root).og-session-capability-dialog-header,:where(.og-root) .og-session-capability-dialog-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 24px;
+  border-bottom: 1px solid var(--og-color-border);
+}
+:where(.og-root).og-session-capability-dialog-header > div,:where(.og-root) .og-session-capability-dialog-header > div {
+  flex: 1;
+  min-width: 0;
+}
+:where(.og-root).og-session-capability-dialog-header h2,:where(.og-root) .og-session-capability-dialog-header h2 {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+:where(.og-root).og-session-capability-dialog-header p,:where(.og-root) .og-session-capability-dialog-header p {
+  margin: 4px 0 0;
+  color: var(--og-color-fg-muted);
+  font-size: 12px;
+}
+:where(.og-root).og-session-capability-dialog-header > button,:where(.og-root) .og-session-capability-dialog-header > button {
+  border: 0;
+  background: transparent;
+  color: inherit;
+  padding: 8px;
+  cursor: pointer;
+}
+:where(.og-root).og-session-capability-dialog-body,:where(.og-root) .og-session-capability-dialog-body {
+  min-height: 0;
+  overflow-y: auto;
+}
+:where(.og-root).og-session-capability-dialog:has(.og-session-capability-setup),:where(.og-root) .og-session-capability-dialog:has(.og-session-capability-setup) {
+  width: min(32rem,calc(100vw - 32px));
+}
+:where(.og-root).og-session-capability-setup,:where(.og-root) .og-session-capability-setup {
+  padding: 24px;
+  display: grid;
+  gap: 16px;
+  font-size: 13px;
+}
+:where(.og-root).og-session-capability-setup > p,:where(.og-root) .og-session-capability-setup > p {
+  margin: 0;
+  line-height: 1.6;
+}
+:where(.og-root).og-session-capability-setup label,:where(.og-root) .og-session-capability-setup label {
+  display: flex;
+  align-items: start;
+  gap: 8px;
+  line-height: 1.6;
+}
+:where(.og-root).og-session-capability-setup button,:where(.og-root) .og-session-capability-setup button {
+  font: inherit;
+  padding: 9px 12px;
+  border-radius: 7px;
+  border: 1px solid var(--og-color-border);
+  background: var(--og-color-surface-2);
+  color: inherit;
+  cursor: pointer;
+}
+:where(.og-root).og-session-capability-setup button:disabled,:where(.og-root) .og-session-capability-setup button:disabled {
+  opacity: .55;
+  cursor: not-allowed;
+}
+:where(.og-root).og-session-capability-setup [role=alert],:where(.og-root) .og-session-capability-setup [role=alert] {
+  color: var(--og-color-danger,#b42318);
+}
+:where(.og-root).og-session-capability-shell[data-state="complete"],:where(.og-root) .og-session-capability-shell[data-state="complete"] {
+  border-color: var(--og-color-status-success,#16804a);
+  @supports (color: color-mix(in lab, red, red)) {
+    border-color: color-mix(in srgb,var(--og-color-status-success,#16804a) 35%,var(--og-color-border));
+  }
+}
+:where(.og-root).og-session-capability-shell[data-state="complete"] .og-session-capability-header > svg,:where(.og-root) .og-session-capability-shell[data-state="complete"] .og-session-capability-header > svg,:where(.og-root) .og-session-capability-shell[data-state="complete"] .og-session-capability-copy,:where(.og-root)  .og-session-capability-shell[data-state="complete"] .og-session-capability-copy {
+  color: var(--og-color-status-success,#16804a);
+}
+:where(.og-root).og-session-capability-shell[data-state="complete"] .og-session-capability-copy,:where(.og-root) .og-session-capability-shell[data-state="complete"] .og-session-capability-copy {
+  font-weight: 500;
+}
+:where(.og-root).og-session-capability-setup fieldset,:where(.og-root) .og-session-capability-setup fieldset {
+  display: grid;
+  gap: 10px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-width: 0;
+}
+:where(.og-root).og-session-capability-setup legend,:where(.og-root) .og-session-capability-setup legend {
+  padding: 0 0 10px;
+  font-weight: 600;
+}
+:where(.og-root).og-session-capability-setup input,:where(.og-root) .og-session-capability-setup input {
+  margin-top: 4px;
+  accent-color: var(--og-color-accent-deep,#006cdb);
+}
+:where(.og-root).og-session-capability-setup .og-session-capability-scope,:where(.og-root) .og-session-capability-setup .og-session-capability-scope {
+  color: var(--og-color-fg-muted);
+  font-size: 12px;
+}
+:where(.og-root).og-session-capability-setup .og-session-capability-primary,:where(.og-root) .og-session-capability-setup .og-session-capability-primary {
+  justify-self: end;
+  min-height: 40px;
+  padding: 10px 16px;
+  border: 0;
+  background: var(--og-color-accent-deep,#006cdb);
+  color: var(--og-color-accent-fg,#fff);
+  font-weight: 500;
+}
+:where(.og-root).og-session-capability-setup .og-session-capability-primary:hover:not(:disabled),:where(.og-root) .og-session-capability-setup .og-session-capability-primary:hover:not(:disabled) {
+  filter: brightness(.94);
+}
+:where(.og-root).og-session-capability-progress,:where(.og-root) .og-session-capability-progress {
+  color: var(--og-color-fg-muted);
+  padding-block: 8px;
+}
+@media (pointer:coarse) {
+  :where(.og-root).og-session-capability-actions button,:where(.og-root) .og-session-capability-actions button,:where(.og-root).og-session-capability-setup button,:where(.og-root) .og-session-capability-setup button {
+    min-height: 44px;
+  }
+}
+:where(.og-root).og-preview-loading,:where(.og-root) .og-preview-loading {
+  --_og-preview-ink: #bca3ef;
+  --_og-preview-glow: #8f6ccc;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border-radius: 10px;
+  background: #17161d;
+  container: og-preview / inline-size;
+}
+:where(.og-root):is([data-og-theme="light"], .og-light) .og-preview-loading, :is([data-og-theme="light"], .og-light) :where(.og-root) .og-preview-loading,:where(.og-root) :is([data-og-theme="light"], .og-light) .og-preview-loading {
+  --_og-preview-ink: #76629c;
+  --_og-preview-glow: #ba8ee0;
+  background: #faf9fd;
+}
+:where(.og-root).og-preview-loading canvas,:where(.og-root) .og-preview-loading canvas {
+  display: block;
+  width: 100%;
+  height: 320px;
+  background-image: radial-gradient(circle, var(--_og-preview-ink) 1px, transparent 1px);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-image: radial-gradient(circle, color-mix(in srgb, var(--_og-preview-ink) 30%, transparent) 1px, transparent 1px);
+  }
+  background-size: 18px 18px;
+}
+:where(.og-root).og-preview-loading canvas[data-painted="true"],:where(.og-root) .og-preview-loading canvas[data-painted="true"] {
+  background-image: none;
+}
+:where(.og-root).og-preview-loading-label,:where(.og-root) .og-preview-loading-label {
+  position: absolute;
+  left: 16px;
+  bottom: 14px;
+  color: var(--og-color-fg-muted);
+  font-family: var(--og-font-sans);
+  font-size: var(--og-font-size-xs);
+  line-height: var(--og-line-height-xs);
+  font-weight: 400;
+}
+@container og-preview (max-width: 500px) {
+  :where(.og-root).og-preview-loading canvas,:where(.og-root) .og-preview-loading canvas {
+    height: 260px;
+  }
+}
+@media (max-width: 500px) {
+  :where(.og-root).og-preview-loading canvas,:where(.og-root) .og-preview-loading canvas {
+    height: 260px;
+  }
+}
 .og-root :where([hidden]:not([hidden="until-found"])) {
     display: none !important;
   }
@@ -1743,9 +2045,6 @@
 :where(.og-root).max-w-64,:where(.og-root) .max-w-64 {
     max-width: calc(var(--spacing) * 64);
   }
-:where(.og-root).max-w-\[8\.5rem\],:where(.og-root) .max-w-\[8\.5rem\] {
-    max-width: 8.5rem;
-  }
 :where(.og-root).max-w-\[11rem\],:where(.og-root) .max-w-\[11rem\] {
     max-width: 11rem;
   }
@@ -3224,6 +3523,10 @@
     font-size: var(--text-xl);
     line-height: var(--tw-leading, var(--text-xl--line-height));
   }
+:where(.og-root).text-xs,:where(.og-root) .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
 :where(.og-root).text-\[10px\],:where(.og-root) .text-\[10px\] {
     font-size: 10px;
   }
@@ -3389,12 +3692,6 @@
 :where(.og-root).text-og-fg-subtle,:where(.og-root) .text-og-fg-subtle {
     color: var(--og-color-fg-subtle);
   }
-:where(.og-root).text-og-fg-subtle\/60,:where(.og-root) .text-og-fg-subtle\/60 {
-    color: var(--og-color-fg-subtle);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--og-color-fg-subtle) 60%, transparent);
-    }
-  }
 :where(.og-root).text-og-fg-subtle\/70,:where(.og-root) .text-og-fg-subtle\/70 {
     color: var(--og-color-fg-subtle);
     @supports (color: color-mix(in lab, red, red)) {
@@ -3458,6 +3755,9 @@
 :where(.og-root).capitalize,:where(.og-root) .capitalize {
     text-transform: capitalize;
   }
+:where(.og-root).lowercase,:where(.og-root) .lowercase {
+    text-transform: lowercase;
+  }
 :where(.og-root).normal-case,:where(.og-root) .normal-case {
     text-transform: none;
   }
@@ -3900,13 +4200,6 @@
       }
     }
   }
-:where(.og-root).group-hover\:text-og-fg,:where(.og-root) .group-hover\:text-og-fg {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        color: var(--og-color-fg);
-      }
-    }
-  }
 :where(.og-root).group-hover\:opacity-100,:where(.og-root) .group-hover\:opacity-100 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -4176,6 +4469,11 @@
       padding-top: calc(var(--spacing) * 0);
     }
   }
+:where(.og-root).first\:pt-1,:where(.og-root) .first\:pt-1 {
+    &:first-child {
+      padding-top: calc(var(--spacing) * 1);
+    }
+  }
 :where(.og-root).first\:pl-0,:where(.og-root) .first\:pl-0 {
     &:first-child {
       padding-left: calc(var(--spacing) * 0);
@@ -5232,11 +5530,6 @@
       width: auto;
     }
   }
-:where(.og-root).sm\:max-w-\[12rem\],:where(.og-root) .sm\:max-w-\[12rem\] {
-    @media (width >= 40rem) {
-      max-width: 12rem;
-    }
-  }
 :where(.og-root).sm\:max-w-\[32rem\],:where(.og-root) .sm\:max-w-\[32rem\] {
     @media (width >= 40rem) {
       max-width: 32rem;
@@ -5418,12 +5711,6 @@
       margin-inline: calc(19px * -1);
     }
   }
-:where(.og-root).pointer-coarse\:size-5,:where(.og-root) .pointer-coarse\:size-5 {
-    @media (pointer: coarse) {
-      width: calc(var(--spacing) * 5);
-      height: calc(var(--spacing) * 5);
-    }
-  }
 :where(.og-root).pointer-coarse\:size-9,:where(.og-root) .pointer-coarse\:size-9 {
     @media (pointer: coarse) {
       width: calc(var(--spacing) * 9);
@@ -5547,6 +5834,17 @@
       color: var(--color-fg-muted);
     }
   }
+:where(.og-root).\[\&\+section\]\:border-t,:where(.og-root) .\[\&\+section\]\:border-t {
+    &+section {
+      border-top-style: var(--tw-border-style);
+      border-top-width: 1px;
+    }
+  }
+:where(.og-root).\[\&\+section\]\:border-og-border,:where(.og-root) .\[\&\+section\]\:border-og-border {
+    &+section {
+      border-color: var(--og-color-border);
+    }
+  }
 :where(.og-root).\[\&\:\:-webkit-details-marker\]\:hidden,:where(.og-root) .\[\&\:\:-webkit-details-marker\]\:hidden {
     &::-webkit-details-marker {
       display: none;

package/styles/connect.css

@@ -1,3 +1,4 @@
+@import "./session-capability.css";
 /* Opt-in, scoped styles. No document-level resets or Tailwind dependency. */
 .og-connect {
   font-family: var(--og-font-sans, system-ui, sans-serif);
@@ -7,6 +8,7 @@
   min-width: 0;
 }
 .og-connect :where(*, *::before, *::after) { box-sizing: border-box; }
+.og-connect [hidden] { display:none !important; }
 .og-connect :where(select, input, label) { min-width: 0; }
 .og-connect select { width: 100%; }
 .og-connect :where(section, form, fieldset, ul, li, [role="group"]) {
@@ -47,6 +49,24 @@
   .og-connect :where(button, select, input, section, li) { border-color: ButtonText; }
 }
 /* Host-independent catalogue: override --og-* tokens or the scoped classes. */
+.og-capability-catalog-row { display:flex; align-items:center; gap:12px; width:100%; min-width:0; min-height:76px; padding:14px 12px; border:0; border-radius:var(--og-radius-lg,14px); background:transparent; color:var(--og-color-fg,inherit); text-align:left; cursor:pointer; font-family:var(--og-font-sans,system-ui,sans-serif); font-size:14px; line-height:1.5; box-sizing:border-box; }
+.og-capability-catalog-row:hover:not(:disabled) { background:var(--og-color-surface-2,color-mix(in srgb,currentColor 7%,transparent)); }
+.og-capability-catalog-row:focus-visible { outline:2px solid var(--og-color-accent,currentColor); outline-offset:2px; }
+.og-capability-catalog-row:disabled { cursor:not-allowed; }
+.og-capability-catalog-icon { display:grid; place-items:center; flex-shrink:0; width:40px; height:40px; border-radius:var(--og-radius-md,10px); }
+.og-capability-catalog-icon > svg { width:24px; height:24px; color:var(--og-color-fg-muted,inherit); }
+.og-capability-catalog-copy { display:grid; gap:3px; flex:1; min-width:0; }
+.og-capability-catalog-copy strong { font-size:14px; font-weight:500; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
+.og-capability-catalog-copy > span { color:var(--og-color-fg-muted,inherit); font-size:12px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; }
+.og-capability-catalog-indicator { display:flex; align-items:center; justify-content:flex-end; gap:6px; flex-shrink:0; color:var(--og-color-fg-muted,inherit); }
+.og-capability-catalog-indicator > svg { width:18px; height:18px; flex-shrink:0; }
+.og-capability-catalog-indicator[data-status="attention"], .og-capability-catalog-indicator[data-status="unavailable"] { color:var(--og-color-status-waiting,var(--og-color-fg-muted,inherit)); }
+.og-capability-catalog-notice { font-size:12px; max-width:10rem; overflow-wrap:anywhere; }
+.og-capability-catalog-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
+.og-capability-catalog-indicator[data-status="loading"] > svg { animation:og-catalog-spin 1s linear infinite; }
+@keyframes og-catalog-spin { to { transform:rotate(360deg); } }
+@media(prefers-reduced-motion:reduce) { .og-capability-catalog-indicator[data-status="loading"] > svg { animation:none; } }
+@media(max-width:480px) { .og-capability-catalog-notice { max-width:6rem; } }
 .og-connection-catalog { display: grid; gap: 4px; color: var(--og-color-fg, inherit); font-family: var(--og-font-sans, system-ui, sans-serif); }
 .og-connection-catalog-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 12px; border: 0; border-radius: var(--og-radius-sm, 8px); background: transparent; color: inherit; text-align: left; cursor: pointer; font: inherit; }
 .og-connection-catalog-row:hover { background: var(--og-color-surface-2, #f3f4f5); }
@@ -64,8 +84,8 @@
 .og-connection-catalog-service[open] .og-connection-group-chevron { transform:rotate(180deg); }
 .og-connection-catalog-options { margin:0 12px 8px 60px; border-top:1px solid var(--og-color-border, #e4e6e8); padding-top:4px; }
 .og-connection-option + .og-connection-option { border-top:1px solid var(--og-color-border, #e4e6e8); }
-.og-connection-option .og-connection-catalog-row { min-height:48px; padding:8px 0; gap:8px; }
-.og-connection-option .og-connection-catalog-copy strong { font-size:13px; }
+.og-connection-option .og-capability-catalog-row { min-height:56px; padding:8px 0; gap:8px; }
+.og-connection-option .og-capability-catalog-copy strong { font-size:13px; }
 .og-connection-option .og-connection-catalog-status { font-size:11px; }
 .og-connection-option-action { display:grid; place-items:center; width:32px; flex-shrink:0; }
 .og-connection-option-chevron { opacity:.5; font-size:20px; pointer-events:none; }
@@ -87,10 +107,42 @@
 .og-connection-type-picker input { position:absolute; opacity:0; width:1px; height:1px; }
 .og-connection-type-picker label:focus-within { outline:2px solid var(--og-color-accent,currentColor); outline-offset:2px; }
 .og-connection-catalog-action-row { display:flex; align-items:center; gap:8px; min-width:0; }
-.og-connection-catalog-action-row > .og-connection-catalog-row { flex:1; min-width:0; }
+.og-connection-catalog-action-row > .og-capability-catalog-row { flex:1; min-width:0; }
 .og-connect [hidden] { display:none !important; }
 .og-connect .og-connection-catalog-row { width:100%; border:0; border-radius:var(--og-radius-sm,8px); }
 .og-connect .og-connection-catalog-copy > span { white-space:normal; }
+.og-connect { font-size:14px; }
+.og-connect h3 { margin:0; font-size:13px; font-weight:600; }
+.og-connect .og-capability-catalog-row { width:100%; border:0; box-shadow:none; min-height:60px; padding:10px; }
+.og-connect .og-connection-logo { background:var(--og-color-surface-2,#f1f3f5); color:var(--og-color-fg-muted,#545b66); border:1px solid var(--og-color-border,#e5e7eb); }
+.og-connect .og-connect-secondary { border-top:1px solid var(--og-color-border,#e5e7eb); padding-top:12px; }
+.og-connect .og-connect-secondary > summary { cursor:pointer; font-size:13px; padding:8px 0; }
+.og-connect .og-connect-secondary > summary > span { margin-left:8px; opacity:.5; font-size:12px; }
+.og-connect .og-connect-account { padding:0; border:0; gap:0; }
+.og-connect .og-connect-account + .og-connect-account { padding-top:0; border-top:1px solid var(--og-color-border,#e5e7eb); }
+.og-connect .og-connect-account-details { width:100%; }
+.og-connect .og-connect-account-heading { display:flex; align-items:center; gap:12px; min-width:0; min-height:68px; padding:12px 8px; cursor:pointer; border-radius:8px; list-style:none; }
+.og-connect .og-connect-account-heading::-webkit-details-marker { display:none; }
+.og-connect .og-connect-account-heading:hover { background:var(--og-color-bg-muted,#f5f5f5); }
+.og-connect .og-connect-account-heading:focus-visible { outline:2px solid var(--og-color-primary,#0066ff); outline-offset:2px; }
+.og-connect .og-connect-account-chevron { flex:none; transition:transform .15s; }
+.og-connect .og-connect-account-details[open] .og-connect-account-chevron { transform:rotate(90deg); }
+@media(prefers-reduced-motion:reduce) { .og-connect .og-connect-account-chevron { transition:none; } }
+.og-connect .og-connect-account-heading > div { flex:1; min-width:0; }
+.og-connect .og-connect-account-heading strong { display:block; font-size:14px; font-weight:500; overflow-wrap:anywhere; }
+.og-connect .og-connect-account-heading small { display:block; font-size:12px; opacity:.65; margin-top:3px; }
+.og-connect .og-connect-account-status { font-size:12px; }
+.og-connect .og-connect-account-status[data-status="connected"] { color:var(--og-color-success,#17804a); }
+.og-connect .og-connect-account-actions { display:flex; flex-wrap:wrap; gap:8px; padding:0 8px 12px 60px; }
+.og-connect .og-connect-account-actions [role="group"] { width:100%; }
+.og-connect .og-connection-discovery-results { height:360px; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
+.og-connection-skeleton-row { display:flex; align-items:center; gap:12px; height:68px; padding:10px; box-sizing:border-box; }
+.og-connection-skeleton-mark { display:block; width:40px; height:40px; flex:none; border-radius:9px; background:var(--og-color-surface-2,#edf0f3); }
+.og-connection-skeleton-copy { display:grid; gap:8px; flex:1; }
+.og-connection-skeleton-copy > span { display:block; height:10px; width:70%; border-radius:3px; background:var(--og-color-surface-2,#edf0f3); }
+.og-connection-skeleton-copy > span:first-child { width:28%; height:12px; }
+.og-connect .og-connection-discovery-results .og-capability-catalog-row { min-height:68px; }
+.og-connect .og-connection-discovery > label input { width:100%; }
 .og-connection-logo { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; box-sizing:border-box; padding:var(--og-connection-icon-padding, 0px); overflow:hidden; border-radius:var(--og-connection-icon-radius, 9px); background:var(--og-connection-icon-background, transparent); color:var(--og-connection-icon-color, inherit); font-size:14px; font-weight:600; }
 .og-connection-logo img { width:100%; height:100%; object-fit:contain; padding:0; border:0; border-radius:calc(var(--og-connection-icon-radius, 9px) - var(--og-connection-icon-padding, 0px)); background:transparent; }
 @media (min-width: 720px) { .og-connection-catalog[data-columns="2"] { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:24px; align-items:start; } }
@@ -100,7 +152,7 @@
 /* Highlight each complete option, including its trailing action. */
 .og-connection-option { border-radius:8px; gap:4px; padding-inline:8px; }
 .og-connection-option:hover { background:var(--og-color-surface-2,#f3f4f5); }
-.og-connection-option > .og-connection-catalog-row:hover,
+.og-connection-option > .og-capability-catalog-row:hover,
 .og-connection-option .og-connection-details-action:hover { background:transparent; }
 .og-connection-option + .og-connection-option { border-top:0; margin-top:2px; }
 .og-connection-catalog-options { margin:0 12px 8px 52px; padding-top:6px; }
@@ -110,13 +162,12 @@
 
 .og-skill-discovery { margin-block:24px; color:inherit; font-family:var(--og-font-sans,system-ui,sans-serif); }
 .og-skill-discovery header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
-.og-skill-discovery h3 { margin:0; font-size:15px; font-weight:600; }
+.og-skill-discovery h3 { margin:0; font-size:14px; font-weight:600; }
 .og-skill-discovery header > span, .og-skill-discovery p { font-size:13px; opacity:.65; }
 .og-skill-discovery button { font:inherit; color:inherit; cursor:pointer; border:0; box-shadow:none; }
 .og-skill-discovery button:focus-visible { outline:2px solid var(--og-color-accent,currentColor); outline-offset:2px; }
 .og-skill-discovery button:disabled { cursor:default; opacity:.6; }
 .og-skill-discovery button:hover:not(:disabled) { background:var(--og-color-surface-2,#eeeeee); }
-.og-skill-discovery-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:4px 24px; }
 .og-skill-discovery-item { display:flex; align-items:center; justify-content:space-between; min-width:0; gap:16px; padding:12px; border-radius:10px; background:transparent; text-align:left; }
 .og-skill-discovery-copy { display:grid; gap:4px; min-width:0; }
 .og-skill-discovery-copy strong { font-size:14px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@@ -133,13 +184,12 @@
 
 
 .og-plugin-discovery { margin-block:24px; color:inherit; }
-.og-plugin-discovery header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:4px; }
+.og-plugin-discovery header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
 .og-plugin-discovery h3 { margin:0; font-size:14px; font-weight:600; }
 .og-plugin-filters { display:flex; gap:3px; padding:3px; border-radius:9px; background:color-mix(in srgb,currentColor 5%,transparent); }
 .og-plugin-filters button { border:0; border-radius:6px; padding:6px 12px; background:transparent; color:inherit; font:inherit; font-size:12px; cursor:pointer; opacity:.65; }
 .og-plugin-filters button[aria-pressed=true] { background:var(--og-color-surface,#ffffff); color:var(--og-color-text,#17191d); box-shadow:0 1px 3px #00000014; opacity:1; }
-.og-plugin-discovery p { font-size:12px; opacity:.65; margin:10px 0 8px; }
-.og-plugin-discovery-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 24px; }
+.og-plugin-discovery p, .og-skill-discovery p { font-size:13px; opacity:.65; margin:0 0 12px; }
 .og-plugin-discovery-row { display:flex; align-items:center; gap:12px; width:100%; min-width:0; min-height:64px; padding:10px 12px; text-align:left; color:inherit; background:transparent; border:0; border-radius:8px; font:inherit; cursor:pointer; }
 .og-plugin-discovery-row:hover { background:color-mix(in srgb,currentColor 4%,transparent); }
 .og-plugin-discovery button:focus-visible { outline:2px solid var(--og-color-accent,currentColor); outline-offset:2px; }
@@ -154,12 +204,11 @@
 .og-plugin-open { font-size:18px; opacity:.45; transition:opacity .15s; }
 .og-plugin-discovery-row:hover .og-plugin-open, .og-plugin-discovery-row:focus-visible .og-plugin-open { opacity:.65; }
 .og-plugin-more { display:block; margin:20px auto; padding:10px 18px; border:1px solid #8886; border-radius:8px; color:inherit; background:transparent; cursor:pointer; }
-@media(max-width:640px) { .og-plugin-discovery-grid { grid-template-columns:1fr; } }
 
-.og-plugin-details { padding:40px 32px 28px; color:inherit; }
-.og-plugin-details-header { display:flex; align-items:center; gap:16px; padding-right:20px; }
-.og-plugin-details-header img { width:56px; height:56px; object-fit:contain; border-radius:12px; flex-shrink:0; }
-.og-plugin-details-header h2 { margin:0; font-size:25px; line-height:1.25; font-weight:650; letter-spacing:-.6px; overflow-wrap:anywhere; }
+.og-plugin-details { padding:20px 24px; color:inherit; }
+.og-plugin-details-header { display:flex; align-items:center; gap:12px; padding-right:24px; }
+.og-plugin-details-header > div { min-width:0; }
+.og-plugin-details-header h2 { margin:0; font-size:20px; line-height:1.4; font-weight:600; letter-spacing:-.5px; overflow-wrap:anywhere; }
 .og-plugin-details-header p { margin:7px 0 0; font-size:13px; opacity:.6; }
 .og-plugin-details-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; font-size:11px; }
 .og-plugin-details-meta span { padding:4px 8px; border-radius:5px; background:color-mix(in srgb,currentColor 5%,transparent); text-transform:capitalize; }
@@ -176,7 +225,7 @@
 .og-plugin-details footer a:hover { background:color-mix(in srgb,currentColor 11%,transparent); }
 .og-plugin-details footer p { font-size:12px; opacity:.55; margin:12px 0 0; }
 .og-plugin-details a:focus-visible,.og-plugin-details button:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
-@media(max-width:640px) { .og-plugin-details { padding:36px 24px 24px; } }
+@media(max-width:640px) { .og-plugin-details { padding:20px 24px; } }
 .og-plugin-details-members { margin:28px 0; }
 .og-plugin-details-members h3 { display:flex; gap:8px; align-items:center; margin:24px 0 10px; font-size:13px; font-weight:600; }
 .og-plugin-details-members h3 span { opacity:.5; font-weight:400; }
@@ -194,3 +243,29 @@
 .og-plugin-details footer p[role=alert] { opacity:1; color:var(--og-color-danger,#c33); }
 .og-plugin-server-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
 .og-plugin-server-heading button { border:1px solid color-mix(in srgb,currentColor 18%,transparent); background:transparent; color:inherit; border-radius:7px; padding:6px 12px; font:inherit; font-size:12px; cursor:pointer; }
+
+/* Keep every catalog on the same columns and spacing, including installed Skills. */
+.og-capability-catalog-grid, .og-skill-discovery-grid, .og-plugin-discovery-grid {
+  display:grid; grid-template-columns:minmax(0,1fr); gap:4px 24px;
+}
+@media (min-width:720px) {
+  .og-capability-catalog-grid, .og-skill-discovery-grid, .og-plugin-discovery-grid {
+    grid-template-columns:repeat(2,minmax(0,1fr));
+  }
+}
+.og-skill-discovery .og-capability-catalog-row { font-size:14px; line-height:1.5; }
+
+/* Shared setup presentation, including OAuth, credentials and recovery. */
+.og-connect.og-connect-setup { display:grid; gap:20px; font-size:14px; }
+.og-connect-setup .og-connect-setup-summary { display:grid; gap:6px; }
+.og-connect-setup .og-connect-setup-scope { color:var(--og-color-fg-muted,inherit); font-size:12px; }
+.og-connect-setup .og-connect-setup-status { font-size:15px; font-weight:600; }
+.og-connect-setup .og-connect-setup-description { color:var(--og-color-fg-muted,inherit); font-size:13px; }
+.og-connect-setup .og-connect-setup-primary { width:100%; text-align:center; border-color:transparent; border-radius:8px; background:var(--og-color-accent-deep,#006cdb); color:var(--og-color-accent-fg,#fff); font-size:14px; font-weight:500; }
+.og-connect-setup .og-connect-setup-primary:hover:not(:disabled) { background:color-mix(in srgb,var(--og-color-accent-deep,#006cdb) 90%,transparent); }
+.og-connect-setup .og-connect-setup-secondary { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; }
+.og-connect-setup .og-connect-setup-secondary button { border:0; min-height:36px; padding:6px 8px; color:var(--og-color-fg-muted,inherit); font-size:12px; }
+
+.og-catalog-more, .og-skill-discovery .og-catalog-more { margin-top:12px; min-height:36px; padding:8px 12px; border:1px solid var(--og-color-border,#888); border-radius:8px; background:var(--og-color-surface-1,transparent); color:inherit; font:inherit; font-size:13px; cursor:pointer; }
+.og-catalog-more:focus-visible { outline:2px solid var(--og-color-accent,currentColor); outline-offset:2px; }
+.og-plugin-discovery.og-catalog-overview { border-top:1px solid var(--og-color-border,#888); margin-top:24px; padding-top:24px; }

package/styles/index.css

@@ -16,6 +16,52 @@
 
 @import "./tokens.css";
 @import "./effective-tokens.css";
+@import "./session-capability.css";
+
+/* Full-surface preview preparation. Private palette preserves the accepted
+   ripple study; the steady label uses the host's typography and text tokens. */
+.og-preview-loading {
+  --_og-preview-ink: #bca3ef;
+  --_og-preview-glow: #8f6ccc;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border-radius: 10px;
+  background: #17161d;
+  container: og-preview / inline-size;
+}
+.og-root:is([data-og-theme="light"], .og-light) .og-preview-loading,
+:is([data-og-theme="light"], .og-light) .og-root .og-preview-loading,
+.og-root :is([data-og-theme="light"], .og-light) .og-preview-loading {
+  --_og-preview-ink: #76629c;
+  --_og-preview-glow: #ba8ee0;
+  background: #faf9fd;
+}
+.og-preview-loading canvas {
+  display: block;
+  width: 100%;
+  height: 320px;
+  /* Non-canvas / pre-effect fallback, removed only after a successful paint. */
+  background-image: radial-gradient(circle, color-mix(in srgb, var(--_og-preview-ink) 30%, transparent) 1px, transparent 1px);
+  background-size: 18px 18px;
+}
+.og-preview-loading canvas[data-painted="true"] { background-image: none; }
+.og-preview-loading-label {
+  position: absolute;
+  left: 16px;
+  bottom: 14px;
+  color: var(--og-color-fg-muted);
+  font-family: var(--og-font-sans);
+  font-size: var(--og-font-size-xs);
+  line-height: var(--og-line-height-xs);
+  font-weight: 400;
+}
+@container og-preview (max-width: 500px) {
+  .og-preview-loading canvas { height: 260px; }
+}
+@media (max-width: 500px) {
+  .og-preview-loading canvas { height: 260px; }
+}
 
 /* Standalone embeds do not necessarily load Tailwind Preflight. Keep the
    control reset inside SDK roots, before utilities, without resetting the host.