@opengeni/react 1.0.1 → 1.0.2-canary.37202341988001

package/styles/connect.css

@@ -0,0 +1,284 @@
+@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);
+  color: inherit;
+  line-height: 1.55;
+  max-width: 48rem;
+  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"]) {
+  display: grid;
+  gap: .75rem;
+  min-width: 0;
+}
+.og-connect section { padding-block: 1rem; }
+.og-connect section + section { border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
+.og-connect fieldset { border: 0; padding: 0; margin: 0; }
+.og-connect legend { font-weight: 600; padding-block-end: .5rem; }
+.og-connect label { display: grid; gap: .375rem; }
+.og-connect label:has(input[type="checkbox"], input[type="radio"]) { display: flex; align-items: center; gap: .75rem; min-height: 2.75rem; }
+.og-connect :where(button, select, input:not([type="checkbox"]):not([type="radio"])) {
+  font: inherit;
+  color: inherit;
+  background: transparent;
+  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
+  border-radius: var(--og-radius-sm, 6px);
+  min-height: 2.75rem;
+  padding: .5rem .75rem;
+  max-width: 100%;
+}
+.og-connect button { cursor: pointer; width: fit-content; text-align: start; }
+/* In settings the block spans the page like the sections around it. */
+.og-identity-link { display: grid; gap: 1rem; max-width: none; }
+/* Heading and description follow the host's section heading (16/24/600) and
+   description (12/18, muted) so the block reads like its neighbours. */
+.og-identity-link > h2 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: -0.2px; color: var(--og-color-fg); }
+.og-identity-link > h2 + p { margin: -0.75rem 0 0; font-size: 12px; line-height: 18px; color: var(--og-color-fg-muted); }
+.og-identity-link-card { margin-top: -0.25rem; padding: 0.25rem 1.25rem; border: 1px solid var(--og-color-border); border-radius: var(--og-radius-lg); background: var(--og-color-surface-1); }
+.og-identity-link-card > * { margin: 0; padding-block: 0.875rem; }
+.og-identity-link-card > * + * { border-top: 1px solid var(--og-color-border); }
+.og-identity-link-card > p { font-size: 14px; line-height: 20px; color: var(--og-color-fg-muted); }
+.og-identity-link-card > ul:empty { display: none; }
+.og-identity-link-card > ul { padding-block: 0; }
+.og-identity-link-card > ul > li { padding-block: 0.875rem; }
+.og-identity-link dl { margin: 0; display: grid; gap: .25rem; }
+.og-identity-link dt { font-weight: 600; }
+.og-identity-link dd { margin: 0 0 .75rem; overflow-wrap: anywhere; }
+.og-identity-link label:has(input[type="checkbox"]) { min-height: 2.75rem; align-items: center; gap: .75rem; }
+.og-connect button:hover:not(:disabled) { background: color-mix(in srgb, currentColor 8%, transparent); }
+.og-connect :disabled { opacity: .55; cursor: not-allowed; }
+.og-connect :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
+.og-connect :where(p, h2) { margin: 0; overflow-wrap: anywhere; }
+.og-connect ul { list-style: none; padding: 0; margin: 0; }
+.og-connect li + li { padding-block-start: .75rem; border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
+.og-connect [role="alert"] { border-inline-start: 3px solid currentColor; padding-inline-start: .75rem; }
+@media (forced-colors: active) {
+  .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); }
+.og-connection-catalog-row:focus-visible { outline: 2px solid var(--og-color-accent, currentColor); outline-offset: 2px; }
+.og-connection-catalog-logo { flex-shrink: 0; }
+.og-connection-catalog-copy { display: grid; gap: 3px; flex: 1; min-width: 0; }
+.og-connection-catalog-copy strong { font-size: 14px; font-weight: 500; }
+.og-connection-catalog-copy > span { font-size: 12px; opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.og-connection-catalog-status { font-size: 12px; opacity: .75; flex-shrink: 0; }
+.og-connection-catalog-service { border-radius:12px; min-width:0; }
+.og-connection-catalog-service[open] { background:var(--og-color-surface-1, #fff); box-shadow:inset 0 0 0 1px var(--og-color-border, #e4e6e8); }
+.og-connection-catalog-service > summary { list-style:none; }
+.og-connection-catalog-service > summary::-webkit-details-marker { display:none; }
+.og-connection-group-chevron { transition:transform 150ms ease; }
+.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-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; }
+.og-connection-option:has(.og-connection-option-chevron) { position:relative; }
+.og-connection-option:has(.og-connection-option-chevron) > button { padding-right:32px; }
+.og-connection-option:has(.og-connection-option-chevron) > .og-connection-option-action { position:absolute; right:0; pointer-events:none; }
+@media (max-width: 480px) { .og-connection-catalog-row { flex-wrap: wrap; } .og-connection-catalog-status { margin-left: auto; } }
+.og-connection-installed { margin-block: 16px; color: inherit; font-family: var(--og-font-sans, system-ui, sans-serif); }
+.og-connection-installed h2 { font-size: 13px; font-weight: 500; margin: 0 0 8px; }
+.og-connection-installed h2 span { margin-left: 4px; opacity: .55; font-weight: 400; }
+.og-connection-installed > div { display: flex; flex-wrap: wrap; gap: 8px; }
+.og-connection-installed button { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border: 0; box-shadow: none; border-radius: var(--og-radius-sm, 8px); background: transparent; color: inherit; font: inherit; font-size: 13px; cursor: pointer; }
+.og-connection-installed button:hover { background: var(--og-color-surface-2, #f3f4f5); }
+.og-connection-installed button:focus-visible { outline: 2px solid var(--og-color-accent, currentColor); outline-offset: 2px; }
+.og-connection-installed-status { font-size: 12px; color: var(--og-color-fg-muted, inherit); }
+.og-connection-type-picker { display:flex; flex-wrap:wrap; gap:4px; border:0; padding:0; margin:0 0 16px; }
+.og-connection-type-picker legend { font-size:12px; margin-bottom:8px; }
+.og-connection-type-picker label { position:relative; padding:8px 12px; font-size:13px; border-radius:8px; cursor:pointer; }
+.og-connection-type-picker label[data-selected=true] { background:var(--og-color-surface-2,#eef0f2); box-shadow:inset 0 0 0 1px var(--og-color-border,#ccc); }
+.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-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-surface-2); }
+.og-connect .og-connect-account-heading:focus-visible { outline:2px solid color-mix(in srgb, var(--og-color-accent) 55%, transparent); 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-status-idle); }
+.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; } }
+.og-connection-details-action { display:grid; place-items:center; flex-shrink:0; width:36px; height:36px; padding:0; border:0; border-radius:8px; background:transparent; color:inherit; font-size:20px; cursor:pointer; }
+.og-connection-details-action:hover { background:var(--og-color-surface-2,#eef0f2); }
+.og-connection-details-action:focus-visible { outline:2px solid var(--og-color-accent,currentColor); outline-offset:2px; }
+/* 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-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; }
+
+:where(.dark, [data-og-theme="dark"]) .og-connection-logo { --og-connection-icon-padding:2px; --og-connection-icon-background:#fafafa; --og-connection-icon-color:#34383e; }
+:where([data-og-theme="light"]) .og-connection-logo { --og-connection-icon-padding:0px; --og-connection-icon-background:transparent; --og-connection-icon-color:inherit; }
+
+.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:14px; font-weight:600; }
+.og-skill-discovery header > span, .og-skill-discovery p { font-size:14px; line-height:20px; color:var(--og-color-fg-muted,inherit); }
+.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-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; }
+.og-skill-discovery-copy > span { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:.65; }
+.og-skill-discovery-copy small { font-size:11px; opacity:.55; }
+.og-skill-discovery-action { font-size:12px; opacity:.7; flex-shrink:0; }
+.og-skill-discovery-error button { padding:9px 16px; border:1px solid var(--og-color-border,#888); border-radius:8px; background:var(--og-color-surface-1,transparent); font-size:13px; margin-top:12px; }
+.og-skill-discovery-error { display:flex; gap:12px; align-items:center; font-size:13px; }
+
+.og-skill-discovery-browse { color:inherit; font-size:13px; text-decoration:underline; text-underline-offset:3px; }
+.og-skill-discovery-browse:focus-visible { outline:2px solid var(--og-color-accent,currentColor); outline-offset:4px; border-radius:2px; }
+
+.og-skill-discovery .og-skill-discovery-search { display:inline-flex; align-items:center; padding:9px 14px; border:1px solid var(--og-color-border,#888); border-radius:8px; background:var(--og-color-surface-1,transparent); font-size:13px; font-weight:500; }
+
+
+.og-plugin-discovery { margin-block:24px; color:inherit; }
+.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:10px; background:var(--og-color-surface-2,color-mix(in srgb,currentColor 5%,transparent)); }
+.og-plugin-filters button { border:0; border-radius:7px; padding:6px 12px; background:transparent; color:var(--og-color-fg-muted,inherit); font:inherit; font-size:12px; font-weight:500; cursor:pointer; }
+.og-plugin-filters button[aria-pressed=true] { background:var(--og-color-surface-1,#ffffff); color:var(--og-color-fg,#17191d); box-shadow:0 1px 3px #00000014; opacity:1; }
+.og-plugin-discovery p, .og-skill-discovery p { font-size:14px; line-height:20px; color:var(--og-color-fg-muted,inherit); 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; }
+.og-plugin-discovery-row img { width:36px; height:36px; object-fit:contain; border-radius:8px; flex-shrink:0; }
+.og-plugin-discovery-row > span:first-of-type { flex:1; min-width:0; }
+.og-plugin-discovery-row strong { display:block; font-size:14px; line-height:20px; font-weight:500; text-transform:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.og-plugin-description { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; line-height:18px; opacity:.65; margin-top:2px; }
+.og-plugin-title { display:flex; align-items:center; gap:8px; min-width:0; }
+.og-plugin-title strong { flex:1; }
+.og-plugin-discovery-row small { flex-shrink:0; font-size:10px; opacity:.55; }
+.og-plugin-category { display:block; font-size:10px; line-height:15px; opacity:.45; text-transform:capitalize; }
+.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; }
+
+.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; }
+.og-plugin-details-overview { margin:28px 0; font-size:14px; line-height:1.8; }
+.og-plugin-details-overview p { margin:0 0 14px; }
+.og-plugin-details-excerpt { max-height:250px; overflow:hidden; mask-image:linear-gradient(#000 75%,transparent); }
+.og-plugin-details-more { border:0; background:transparent; color:inherit; padding:8px 0; font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
+.og-plugin-details-contents { padding-top:24px; border-top:1px solid color-mix(in srgb,currentColor 12%,transparent); }
+.og-plugin-details-contents h3 { margin:0 0 14px; font-size:13px; font-weight:600; }
+.og-plugin-details-contents > div { display:flex; flex-wrap:wrap; gap:8px; }
+.og-plugin-details-contents span { font-size:13px; border:1px solid color-mix(in srgb,currentColor 15%,transparent); border-radius:7px; padding:7px 11px; }
+.og-plugin-details footer { margin-top:32px; padding-top:24px; border-top:1px solid color-mix(in srgb,currentColor 12%,transparent); }
+.og-plugin-details footer a { display:flex; align-items:center; justify-content:space-between; padding:11px 14px; color:inherit; text-decoration:none; font-size:13px; font-weight:600; border-radius:8px; background:color-mix(in srgb,currentColor 7%,transparent); }
+.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: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; }
+.og-plugin-details-members ul { list-style:none; padding:0; margin:0; }
+.og-plugin-details-members li { padding:12px 0; border-bottom:1px solid color-mix(in srgb,currentColor 10%,transparent); font-size:14px; }
+.og-plugin-details-members a { display:flex; align-items:center; justify-content:space-between; gap:12px; color:inherit; text-decoration:none; }
+.og-plugin-details-members a:hover strong { text-decoration:underline; }
+.og-plugin-details-members strong { font-weight:500; overflow-wrap:anywhere; }
+.og-plugin-details-members small { display:block; margin-top:5px; opacity:.6; font-size:12px; overflow-wrap:anywhere; }
+.og-plugin-details-members p,.og-plugin-details-other { font-size:12px; opacity:.6; }
+.og-plugin-details-other { margin-top:18px; }
+.og-plugin-member-disabled { opacity:.45; }
+.og-plugin-details footer .og-plugin-install { width:100%; padding:12px 16px; margin-top:12px; border:1px solid var(--og-color-primary-border); border-radius:9px; background:var(--og-color-primary); color:var(--og-color-primary-fg); font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
+.og-plugin-details footer .og-plugin-install:disabled { opacity:.4; cursor:default; }
+.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:var(--og-color-primary-border); border-radius:8px; background:var(--og-color-primary); color:var(--og-color-primary-fg); font-size:14px; font-weight:500; }
+.og-connect-setup .og-connect-setup-primary:hover:not(:disabled) { background:var(--og-color-primary-hover); }
+.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/connect.d.ts

@@ -0,0 +1 @@
+export {};

package/styles/effective-tokens.css

@@ -12,6 +12,7 @@
   --_og-duration-stream: var(--og-duration-stream);
   --_og-duration-markdown-crystallize: var(--og-duration-markdown-crystallize);
   --_og-color-accent-soft: var(--og-color-accent-soft);
+  --_og-color-primary-hover: var(--og-color-primary-hover);
   --_og-color-diff-add-bg: var(--og-color-diff-add-bg);
   --_og-color-diff-del-bg: var(--og-color-diff-del-bg);
   --_og-shadow-glow: var(--og-shadow-glow);

package/styles/index.css

@@ -16,6 +16,100 @@
 
 @import "./tokens.css";
 @import "./effective-tokens.css";
+@import "./session-capability.css";
+
+/* Full-surface preview preparation. The ripple keeps its private ink and glow
+   (read by the canvas effect as literal colors), tuned to the app's teal glow
+   on a neutral ground; the steady label uses the host's typography and text
+   tokens. */
+.og-preview-loading {
+  --_og-preview-ink: #9fdccd;
+  --_og-preview-glow: #5fb8a3;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border-radius: 10px;
+  background: #1b1b1b;
+  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: #5f8f84;
+  --_og-preview-glow: #9fe3d3;
+  background: #f9f9f9;
+}
+.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.
+   :where keeps controls at the same specificity as component utilities. */
+@layer base {
+  .og-root :where([hidden]:not([hidden="until-found"])) {
+    display: none !important;
+  }
+  .og-root :where(button, input, textarea, select) {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+    border-radius: 0;
+    background-color: transparent;
+    color: inherit;
+    font: inherit;
+    letter-spacing: inherit;
+  }
+  .og-root :where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
+    appearance: button;
+  }
+  /* Host global element styles (`ul { list-style: disc; margin }`,
+     `p { line-height: 1.8 }`, `li { margin-top }`) must not reach SDK markup.
+     The root class gives one class of specificity: above host element
+     selectors, but tied with (and emitted before) component utilities, which
+     therefore still win. */
+  .og-root :where(ul, ol, menu) {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .og-root :where(li, p, blockquote, figure, dl, dd, pre, h1, h2, h3, h4, h5, h6) {
+    margin: 0;
+    padding: 0;
+    font-size: inherit;
+    line-height: inherit;
+  }
+  .og-root :where(h1, h2, h3, h4, h5, h6) {
+    font-weight: inherit;
+  }
+  .og-root,
+  .og-root :where(*, ::before, ::after) {
+    box-sizing: border-box;
+  }
+}
 
 @theme inline {
   --font-og-sans: var(--og-font-sans);
@@ -50,12 +144,16 @@
   --text-2xs--line-height: 1rem;
 
   --color-og-bg: var(--og-color-bg);
+  --color-og-canvas: var(--og-color-canvas);
+  --color-og-selection: var(--og-color-selection);
+  --color-og-hover: var(--og-color-hover);
   --color-og-surface-1: var(--og-color-surface-1);
   --color-og-surface-2: var(--og-color-surface-2);
   --color-og-surface-3: var(--og-color-surface-3);
   --color-og-border: var(--og-color-border);
   --color-og-border-strong: var(--og-color-border-strong);
   --color-og-fg: var(--og-color-fg);
+  --color-og-fg-label: var(--og-color-fg-label);
   --color-og-fg-muted: var(--og-color-fg-muted);
   --color-og-fg-subtle: var(--og-color-fg-subtle);
 
@@ -65,6 +163,13 @@
   --color-og-accent-fg: var(--og-color-accent-fg);
   --color-og-accent-soft: var(--og-color-accent-soft);
 
+  --color-og-primary: var(--og-color-primary);
+  --color-og-primary-fg: var(--og-color-primary-fg);
+  --color-og-primary-border: var(--og-color-primary-border);
+  --color-og-primary-hover: var(--og-color-primary-hover);
+  --color-og-switch-track: var(--og-color-switch-track);
+  --color-og-switch-thumb: var(--og-color-switch-thumb);
+
   --color-og-status-queued: var(--og-color-status-queued);
   --color-og-status-running: var(--og-color-status-running);
   --color-og-status-idle: var(--og-color-status-idle);
@@ -72,14 +177,20 @@
   --color-og-status-failed: var(--og-color-status-failed);
   --color-og-status-cancelled: var(--og-color-status-cancelled);
   --color-og-danger: var(--og-color-danger);
+  --color-og-danger-fill: var(--og-color-danger-fill);
+  --color-og-danger-fg: var(--og-color-danger-fg);
 
   --color-bg: var(--og-color-bg);
+  --color-canvas: var(--og-color-canvas);
+  --color-selection: var(--og-color-selection);
+  --color-hover: var(--og-color-hover);
   --color-surface: var(--og-color-surface-1);
   --color-surface-2: var(--og-color-surface-2);
   --color-surface-3: var(--og-color-surface-3);
   --color-border: var(--og-color-border);
   --color-border-strong: var(--og-color-border-strong);
   --color-fg: var(--og-color-fg);
+  --color-fg-label: var(--og-color-fg-label);
   --color-fg-muted: var(--og-color-fg-muted);
   --color-fg-subtle: var(--og-color-fg-subtle);
   --color-brand: var(--og-color-accent);
@@ -98,25 +209,27 @@
   --color-foreground: var(--color-fg);
   --color-card: var(--color-surface);
   --color-card-foreground: var(--color-fg);
-  --color-popover: var(--color-surface-3);
+  --color-popover: var(--color-surface);
   --color-popover-foreground: var(--color-fg);
-  --color-primary: var(--color-brand-strong);
-  --color-primary-foreground: var(--color-brand-fg);
-  --color-secondary: var(--color-surface-2);
-  --color-secondary-foreground: var(--color-fg);
+  --color-primary: var(--og-color-primary);
+  --color-primary-foreground: var(--og-color-primary-fg);
+  --color-primary-border: var(--og-color-primary-border);
+  --color-primary-hover: var(--og-color-primary-hover);
+  --color-secondary: var(--og-color-selection);
+  --color-secondary-foreground: var(--og-color-fg-muted);
   --color-muted: var(--color-surface-2);
   --color-muted-foreground: var(--color-fg-muted);
   --color-accent: var(--color-surface-2);
   --color-accent-foreground: var(--color-fg);
   --color-destructive: var(--og-color-danger);
-  --color-destructive-filled: color-mix(in oklch, var(--og-color-danger) 70%, black);
-  --color-destructive-foreground: var(--og-color-accent-fg);
+  --color-destructive-filled: var(--og-color-danger-fill);
+  --color-destructive-foreground: var(--og-color-danger-fg);
   --color-input: var(--color-surface-2);
   --color-ring: var(--color-brand);
   --color-sidebar: var(--color-surface);
   --color-sidebar-foreground: var(--color-fg);
-  --color-sidebar-primary: var(--color-brand-strong);
-  --color-sidebar-primary-foreground: var(--color-brand-fg);
+  --color-sidebar-primary: var(--og-color-primary);
+  --color-sidebar-primary-foreground: var(--og-color-primary-fg);
   --color-sidebar-accent: var(--color-surface-2);
   --color-sidebar-accent-foreground: var(--color-fg);
   --color-sidebar-border: var(--color-border);
@@ -556,3 +669,82 @@
   pointer-events: none !important;
   z-index: -1 !important;
 }
+
+/* The upstream ThinkingOrb owns motion, visibility pausing, and reduced motion. */
+/* CodeMirror (SDK code editor). The stock light and one-dark themes bring
+   their own chrome (one-dark is blue-grey with a blue cursor); pin the ground,
+   gutters, cursor, active line and selection to the og palette. Syntax colors
+   stay with the theme. */
+.og-cm-editor .cm-editor { background-color: var(--og-cm-bg, var(--og-color-bg)); color: var(--og-color-fg); }
+.og-cm-editor .cm-editor .cm-gutters { background-color: var(--og-cm-bg, var(--og-color-bg)); border-right-color: var(--og-color-border); color: var(--og-color-fg-subtle); }
+.og-cm-editor .cm-editor .cm-activeLine { background-color: color-mix(in srgb, var(--og-color-fg) 4%, transparent); }
+.og-cm-editor .cm-editor .cm-activeLineGutter { background-color: color-mix(in srgb, var(--og-color-fg) 6%, transparent); color: var(--og-color-fg-muted); }
+.og-cm-editor .cm-editor .cm-cursor,
+.og-cm-editor .cm-editor .cm-dropCursor { border-left-color: var(--og-color-fg); }
+.og-cm-editor .cm-editor .cm-selectionLayer .cm-selectionBackground,
+.og-cm-editor .cm-editor.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground { background-color: color-mix(in srgb, var(--og-color-accent) 30%, transparent); }
+.og-cm-editor .cm-editor .cm-selectionMatch { background-color: color-mix(in srgb, var(--og-color-accent) 18%, transparent); }
+.og-cm-editor .cm-editor .cm-panels { background-color: var(--og-color-surface-2); color: var(--og-color-fg); }
+
+.og-genie-loading { display: flex; align-items: center; gap: 14px; min-height: 88px; padding: 12px 0; }
+.og-genie-orb { width: 64px; height: 64px; flex: 0 0 64px; }
+.og-genie-orb canvas { display: block; }
+.og-genie-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
+.og-genie-phrase { color: var(--og-color-fg-muted); font-size: var(--og-font-size-sm); line-height: 1.5; animation: og-genie-phrase-in .65s ease-out both; }
+.og-genie-details { color: var(--og-color-fg-subtle); font-size: var(--og-font-size-xs); min-height: 28px; cursor: pointer; border-radius: 4px; text-align: left; transition: color .2s; }
+.og-genie-details:hover { color: var(--og-color-fg); }
+.og-genie-details:focus-visible { outline: 2px solid color-mix(in srgb, var(--og-color-accent) 55%, transparent); outline-offset: 4px; }
+@keyframes og-genie-phrase-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
+@media (pointer: coarse) { .og-genie-details { min-height: 44px; } }
+@media (prefers-reduced-motion: reduce) {
+  .og-genie-phrase { animation: none; }
+}
+
+/* A single softly lit reel: motion stays inside the header's fixed footprint. */
+.og-rolling-status { display:flex; align-items:center; gap:12px; min-width:0; width:100%; }
+.og-rolling-window { position:relative; display:block; flex:1; min-width:0; height:24px; overflow:hidden;  }
+.og-rolling-face { position:absolute; inset:0; display:flex; align-items:center;  }
+.og-rolling-label { display:flex; align-items:center; gap:8px; min-width:0; width:100%; font-size:13px; font-weight:450; line-height:20px; color:var(--og-color-fg-muted); }
+.og-rolling-label > svg { flex-shrink:0; }
+.og-rolling-count { flex-shrink:0; font-size:11px; color:var(--og-color-fg-subtle); font-variant-numeric:tabular-nums; }
+
+/* The complete text line rolls as one surface, without moving its layout box. */
+.og-command-reel { display:flex; flex:1; align-items:center; gap:8px; min-width:0; transform-origin:50% 50%; }
+/* Render reasoning Markdown as one clipped preview; full formatting lives inside. */
+.og-reasoning-preview,
+.og-reasoning-preview :is(div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,blockquote,pre) {
+  display: inline;
+  margin: 0;
+  padding: 0;
+  font-size: inherit;
+  line-height: inherit;
+}
+.og-reasoning-preview br { display: none; }
+.og-reasoning-preview :is(p,li,h1,h2,h3,h4)::after { content: " "; }
+
+/* Details consume leftover width; they never push the activity name away. */
+.og-reel-title { flex:0 0 auto; min-width:0; max-width:75%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.og-reel-title:only-child { max-width:100%; }
+.og-reel-preview { flex:1 1 0%; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+
+/* Focused beam: one shared light source clipped to the entire text row. */
+.og-command-reel-running,
+.og-rolling-status[data-running="true"] .og-command-reel {
+  background-image:linear-gradient(90deg, light-dark(#8a8a8a,#6b6b6b) 42%, light-dark(#f2f2f2,#fff) 50%, light-dark(#8a8a8a,#6b6b6b) 58%);
+  background-size:300% 100%;
+  background-position:100% 0;
+  background-clip:text;
+  -webkit-background-clip:text;
+  -webkit-text-fill-color:transparent;
+  animation:og-activity-sweep 3.6s linear infinite;
+}
+@keyframes og-activity-sweep {
+  from { background-position:100% 0; }
+  to { background-position:0% 0; }
+}
+@media (prefers-reduced-motion:reduce), (forced-colors:active) {
+ .og-command-reel-running,
+ .og-rolling-status[data-running="true"] .og-command-reel {
+   animation:none; background:none; -webkit-text-fill-color:currentColor;
+ }
+}

package/styles/responsive.css

@@ -192,7 +192,7 @@
   width: min(
     var(--og-model-picker-menu-width),
     calc(var(--og-portal-source-inline-size, 100vw) - 1rem),
-    var(--radix-dropdown-menu-content-available-width, 100vw)
+    var(--radix-popover-content-available-width, 100vw)
   );
   max-width: calc(100vw - 1rem);
 }
@@ -206,3 +206,29 @@
   );
   max-width: calc(100vw - 1rem);
 }
+
+/* OpenGeniChat: the chat list is a sidebar when the component is wide and a
+   drawer behind a menu button when it is narrow. Container-based so it adapts
+   inside host panels, not only to the viewport. */
+.og-chat {
+  container: og-chat / inline-size;
+}
+
+.og-chat .og-chat-sidebar {
+  display: none;
+}
+
+.og-chat .og-chat-menu {
+  display: flex;
+}
+
+@container og-chat (min-width: 44rem) {
+  .og-chat .og-chat-sidebar {
+    display: flex;
+  }
+
+  .og-chat .og-chat-menu,
+  .og-chat .og-chat-drawer {
+    display: none;
+  }
+}