@opengeni/react 0.46.1 → 0.52.1

package/styles/compiled.d.ts

@@ -0,0 +1,2 @@
+declare const stylesheet: string;
+export default stylesheet;

package/styles/effective-tokens.css

@@ -0,0 +1,27 @@
+/* Generated by scripts/build-compiled-css.ts; do not edit directly. */
+.og-root,
+[data-og-density="compact"],
+.og-density-compact,
+[data-og-theme="light"],
+.og-light {
+  --_og-duration-fast: var(--og-duration-fast);
+  --_og-duration-base: var(--og-duration-base);
+  --_og-duration-slow: var(--og-duration-slow);
+  --_og-duration-disclose: var(--og-duration-disclose);
+  --_og-duration-disclose-settle: var(--og-duration-disclose-settle);
+  --_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-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);
+  --_og-session-chrome-surface: var(--og-session-chrome-surface);
+  --_og-session-chrome-surface-open: var(--og-session-chrome-surface-open);
+  --_og-session-chrome-border: var(--og-session-chrome-border);
+  --_og-session-chrome-border-open: var(--og-session-chrome-border-open);
+  --_og-session-chrome-highlight: var(--og-session-chrome-highlight);
+  --_og-session-chrome-highlight-ring: var(--og-session-chrome-highlight-ring);
+  --_og-session-chrome-radius: var(--og-session-chrome-radius);
+  --_og-session-chrome-ease: var(--og-session-chrome-ease);
+  --_og-session-chrome-row-hover: var(--og-session-chrome-row-hover);
+}

package/styles/index.css

@@ -15,6 +15,7 @@
    -------------------------------------------------------------------------- */
 
 @import "./tokens.css";
+@import "./effective-tokens.css";
 
 @theme inline {
   --font-og-sans: var(--og-font-sans);
@@ -145,6 +146,8 @@
   --animate-og-blink: og-blink 1s steps(2, start) infinite;
   --animate-og-shimmer: og-shimmer 2.2s linear infinite;
   --animate-og-spin: og-spin 0.9s linear infinite;
+  --animate-spin: og-spin 1s linear infinite;
+  --animate-pulse: og-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   --animate-og-waveform: og-waveform 1.15s var(--og-ease-in-out) infinite;
   /* Manual disclose — snappy. Auto settle-collapse is the slow path below. */
   --animate-og-expand: og-expand var(--og-duration-disclose) var(--og-ease-in-out);
@@ -472,6 +475,21 @@
   }
 }
 
+/* A phone footer cannot fit capture chrome beside model, realtime, Pause, and
+   Send controls. While voice input owns the microphone, reserve the row for its
+   Cancel/Stop actions so unrelated Pause chrome cannot masquerade as Stop. */
+@media (max-width: 39.999rem) {
+  .og-composer-footer:has([data-transcription-capturing])
+    .og-composer-controls
+    > :not([data-transcription-capturing]) {
+    display: none;
+  }
+
+  .og-composer-footer:has([data-transcription-capturing]) .og-composer-actions {
+    display: none;
+  }
+}
+
 @media (forced-colors: active) {
   /* Forced-colors can replace a painted background with Canvas while custom
      properties retain their authored dark/light values. That combination is

package/styles/responsive.css

@@ -0,0 +1,208 @@
+/* Composer responsiveness is viewport-based unless the public Root opts into
+   its own inline-size container. The semantic hooks below intentionally keep
+   information density separate from pointer target sizing. */
+.og-composer[data-og-responsive-basis="container"] {
+  container: og-composer / inline-size;
+  --_og-c-input-x: 1rem;
+  --_og-c-input-size: var(--og-font-size-composer-wide);
+  --_og-c-input-leading: var(--og-line-height-composer-wide);
+  --_og-c-gap: 0.375rem;
+  --_og-c-footer-x: 0.625rem;
+  --_og-c-footer-b: 0.625rem;
+  --_og-c-controls-wrap: wrap;
+  --_og-c-hint-display: inline;
+  --_og-c-model-max: 16rem;
+  --_og-c-model-x: 0.625rem;
+  --_og-c-native-max: 180px;
+  --_og-c-recovered-max: 11rem;
+  --_og-c-error-max: 10rem;
+  --og-model-policy-label-full-display: inline;
+  --og-model-policy-label-short-display: none;
+  --og-model-policy-effort-display: inline;
+}
+
+[data-og-responsive-basis="container"] .og-composer-input {
+  padding-inline: var(--_og-c-input-x);
+  font-size: var(--_og-c-input-size);
+  line-height: var(--_og-c-input-leading);
+}
+
+[data-og-responsive-basis="container"] .og-composer-footer {
+  gap: var(--_og-c-gap);
+  padding-inline: var(--_og-c-footer-x);
+  padding-bottom: var(--_og-c-footer-b);
+}
+
+[data-og-responsive-basis="container"] .og-composer-footer[data-og-stack-actions] {
+  flex-wrap: wrap;
+}
+
+[data-og-responsive-basis="container"] .og-composer-controls {
+  flex-wrap: var(--_og-c-controls-wrap);
+}
+
+[data-og-responsive-basis="container"]
+  :is(.og-composer-controls, .og-composer-actions) {
+  gap: var(--_og-c-gap);
+}
+
+[data-og-responsive-basis="container"]
+  :is(.og-composer-hint, .og-command-description) {
+  display: var(--_og-c-hint-display);
+}
+
+[data-og-responsive-basis="container"] .og-model-policy-trigger {
+  height: var(--og-model-picker-trigger-height);
+  max-width: var(--_og-c-model-max);
+  padding-inline: var(--_og-c-model-x);
+}
+
+[data-og-responsive-basis="container"] .og-model-policy-label-full {
+  display: var(--og-model-policy-label-full-display);
+}
+
+[data-og-responsive-basis="container"] .og-model-policy-label-short {
+  display: var(--og-model-policy-label-short-display);
+}
+
+[data-og-responsive-basis="container"] .og-model-policy-effort {
+  display: var(--og-model-policy-effort-display);
+}
+
+[data-og-responsive-basis="container"] .og-model-picker-native {
+  max-width: var(--_og-c-native-max);
+}
+
+[data-og-responsive-basis="container"] .og-transcription-recovered-label {
+  max-width: var(--_og-c-recovered-max);
+}
+
+[data-og-responsive-basis="container"] .og-transcription-error-label {
+  max-width: var(--_og-c-error-max);
+}
+
+[data-og-responsive-basis="container"]
+  :is(.og-realtime-primary, .og-realtime-model-trigger) {
+  height: 2rem;
+}
+
+[data-og-responsive-basis="container"] .og-realtime-primary {
+  width: 2rem;
+}
+
+[data-og-responsive-basis="container"] .og-realtime-model-trigger {
+  display: inline-flex;
+  width: 1.5rem;
+}
+
+[data-og-responsive-basis="container"]
+  .og-realtime-control[data-model-menu="split-desktop"]
+  .og-realtime-primary {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+@container og-composer (max-width: 47.999rem) {
+  [data-og-responsive-basis="container"] :where(*) {
+    --_og-c-input-x: 0.875rem;
+    --_og-c-input-size: var(--og-font-size-composer);
+    --_og-c-input-leading: var(--og-line-height-composer);
+  }
+}
+
+@container og-composer (max-width: 39.999rem) {
+  [data-og-responsive-basis="container"] :where(*) {
+    --_og-c-gap: 0.25rem;
+    --_og-c-footer-x: 0.5rem;
+    --_og-c-footer-b: 0.5rem;
+    --_og-c-controls-wrap: nowrap;
+    --_og-c-hint-display: none;
+    --_og-c-model-max: 7.5rem;
+    --_og-c-model-x: 0.5rem;
+    --_og-c-native-max: 7.5rem;
+    --_og-c-recovered-max: 7rem;
+    --_og-c-error-max: 6rem;
+    --og-model-policy-label-full-display: none;
+    --og-model-policy-label-short-display: inline;
+    --og-model-policy-effort-display: none;
+  }
+
+  [data-og-responsive-basis="container"] .og-composer-footer {
+    flex-wrap: nowrap;
+    align-items: center;
+  }
+
+  [data-og-responsive-basis="container"] .og-composer-actions {
+    flex-wrap: nowrap;
+  }
+
+  [data-og-responsive-basis="container"]
+    .og-realtime-control[data-model-menu="split-desktop"]
+    .og-realtime-primary {
+    border-radius: var(--og-radius-md);
+  }
+
+  [data-og-responsive-basis="container"]
+    .og-realtime-control[data-model-menu="split-desktop"]
+    .og-realtime-model-trigger {
+    display: none;
+  }
+
+  [data-og-responsive-basis="container"]
+    .og-composer-footer:has([data-transcription-capturing])
+    .og-composer-controls
+    > :not([data-transcription-capturing]) {
+    display: none;
+  }
+
+  [data-og-responsive-basis="container"]
+    .og-composer-footer:has([data-transcription-capturing])
+    .og-composer-actions {
+    display: none;
+  }
+}
+
+@container og-composer (max-width: 24.999rem) {
+  .og-composer[data-og-responsive-basis="container"] .og-composer-resume-label-long {
+    display: none;
+  }
+
+  .og-composer[data-og-responsive-basis="container"] .og-composer-resume-label-short {
+    display: inline;
+  }
+}
+
+@media (pointer: coarse) {
+  [data-og-responsive-basis="container"] .og-model-policy-trigger,
+  [data-og-responsive-basis="container"] .og-realtime-primary,
+  [data-og-responsive-basis="container"] .og-realtime-model-trigger {
+    height: 2.75rem;
+  }
+
+  [data-og-responsive-basis="container"] .og-realtime-primary,
+  [data-og-responsive-basis="container"] .og-realtime-model-trigger {
+    width: 2.75rem;
+  }
+}
+
+/* Portalled menus retain theme/density tokens from their trigger and, in
+   container mode, the live composer width supplied by ResizeObserver. */
+.og-model-policy-menu {
+  box-sizing: border-box;
+  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)
+  );
+  max-width: calc(100vw - 1rem);
+}
+
+.og-realtime-menu {
+  box-sizing: border-box;
+  width: min(
+    var(--og-realtime-menu-width),
+    calc(var(--og-portal-source-inline-size, 100vw) - 1rem),
+    var(--radix-dropdown-menu-content-available-width, 100vw)
+  );
+  max-width: calc(100vw - 1rem);
+}

package/styles/responsive.d.ts

@@ -0,0 +1,2 @@
+declare const stylesheet: string;
+export default stylesheet;

package/styles/tokens.css

@@ -50,6 +50,7 @@
   --og-model-picker-row-padding-x: 0.625rem;
   --og-model-picker-row-padding-y: 0.5rem;
   --og-model-picker-effort-height: 2rem;
+  --og-realtime-menu-width: 18rem;
 
   /* Radius ----------------------------------------------------------------- */
   --og-radius-xs: 4px;
@@ -96,7 +97,9 @@
      token. Keep the blue dark enough to preserve WCAG AA contrast. */
   --og-color-accent-deep: oklch(0.54 0.18 255);
   --og-color-accent-fg: oklch(0.985 0.005 260);
-  --og-color-accent-soft: color-mix(in oklch, var(--og-color-accent) 16%, transparent);
+  /* Legacy color-mix fallbacks stay in the base rule; supported values are
+     grouped below so processors do not repeat this selector for every token. */
+  --og-color-accent-soft: var(--og-color-accent);
 
   /* Status — muted so they inform without alarming --------------------------- */
   --og-color-status-queued: oklch(0.62 0.03 260);
@@ -106,8 +109,8 @@
   --og-color-status-failed: oklch(0.7 0.16 22);
   --og-color-status-cancelled: oklch(0.6 0.035 260);
   --og-color-danger: oklch(0.66 0.18 22);
-  --og-color-diff-add-bg: color-mix(in oklch, var(--og-color-status-idle) 14%, transparent);
-  --og-color-diff-del-bg: color-mix(in oklch, var(--og-color-status-failed) 14%, transparent);
+  --og-color-diff-add-bg: var(--og-color-status-idle);
+  --og-color-diff-del-bg: var(--og-color-status-failed);
 
   /* Elevation ----------------------------------------------------------------
      Dark surfaces barely cast shadows; elevation reads mostly from the
@@ -120,17 +123,17 @@
      brand edge via `focus-within:border-og-accent/60`; the old `0 0 0 1px`
      ring sat flush against that border and read as a doubled hairline, so the
      glow is now purely the diffuse outer halo. */
-  --og-shadow-glow: 0 0 24px color-mix(in oklch, var(--og-color-accent) 18%, transparent);
+  --og-shadow-glow: 0 0 24px var(--og-color-accent);
 
   /* Session chrome — override on `.og-session-chrome` (or an ancestor) to rebrand.
      Defaults stay quiet: soft surface, short motion, no gold shout. */
-  --og-session-chrome-surface: color-mix(in oklch, var(--og-color-surface-2) 82%, transparent);
-  --og-session-chrome-surface-open: color-mix(in oklch, var(--og-color-surface-2) 92%, transparent);
-  --og-session-chrome-border: color-mix(in oklch, var(--og-color-border) 85%, transparent);
+  --og-session-chrome-surface: var(--og-color-surface-2);
+  --og-session-chrome-surface-open: var(--og-color-surface-2);
+  --og-session-chrome-border: var(--og-color-border);
   --og-session-chrome-border-open: var(--og-color-border);
   /* Selected chip: solid lift vs open dock surface (not a faint wash). */
   --og-session-chrome-highlight: var(--og-color-surface-3);
-  --og-session-chrome-highlight-ring: color-mix(in oklch, var(--og-color-fg) 16%, transparent);
+  --og-session-chrome-highlight-ring: var(--og-color-fg);
   --og-session-chrome-shadow: 0 6px 22px -14px oklch(0 0 0 / 0.42);
   --og-session-chrome-shadow-open: 0 10px 28px -16px oklch(0 0 0 / 0.5);
   --og-session-chrome-radius: var(--og-radius-lg);
@@ -145,11 +148,25 @@
   --og-session-chrome-duration: 220ms;
   --og-session-chrome-crossfade-duration: 180ms;
   --og-session-chrome-ease: var(--og-ease-out);
-  --og-session-chrome-row-hover: color-mix(in oklch, var(--og-color-surface-3) 55%, transparent);
+  --og-session-chrome-row-hover: var(--og-color-surface-3);
 
   color-scheme: dark;
 }
 
+@supports (color: color-mix(in lab, red, red)) {
+  :root {
+    --og-color-accent-soft: color-mix(in oklch, var(--og-color-accent) 16%, transparent);
+    --og-color-diff-add-bg: color-mix(in oklch, var(--og-color-status-idle) 14%, transparent);
+    --og-color-diff-del-bg: color-mix(in oklch, var(--og-color-status-failed) 14%, transparent);
+    --og-shadow-glow: 0 0 24px color-mix(in oklch, var(--og-color-accent) 18%, transparent);
+    --og-session-chrome-surface: color-mix(in oklch, var(--og-color-surface-2) 82%, transparent);
+    --og-session-chrome-surface-open: color-mix(in oklch, var(--og-color-surface-2) 92%, transparent);
+    --og-session-chrome-border: color-mix(in oklch, var(--og-color-border) 85%, transparent);
+    --og-session-chrome-highlight-ring: color-mix(in oklch, var(--og-color-fg) 16%, transparent);
+    --og-session-chrome-row-hover: color-mix(in oklch, var(--og-color-surface-3) 55%, transparent);
+  }
+}
+
 /* One supported dense preset for embedded product panels. It changes only
    typography and model-picker density; colors, radii, and brand tokens remain
    independently customizable. Apply either form to an SDK ancestor. */
@@ -178,6 +195,7 @@
   --og-model-picker-row-padding-x: 0.5rem;
   --og-model-picker-row-padding-y: 0.375rem;
   --og-model-picker-effort-height: 1.75rem;
+  --og-realtime-menu-width: 15rem;
 }
 
 /* Light theme — explicit opt-in, themable per subtree ----------------------- */
@@ -197,7 +215,8 @@
   --og-color-accent-strong: oklch(0.48 0.19 255);
   --og-color-accent-deep: oklch(0.44 0.19 255);
   --og-color-accent-fg: oklch(0.985 0.005 260);
-  --og-color-accent-soft: color-mix(in oklch, var(--og-color-accent) 11%, transparent);
+  /* Match the dark-token fallback strategy without duplicating support rules. */
+  --og-color-accent-soft: var(--og-color-accent);
 
   --og-color-status-queued: oklch(0.55 0.03 260);
   /* Status letters are ordinary 11 px text, including over selected rows. */
@@ -209,23 +228,37 @@
   --og-color-status-failed: oklch(0.5 0.19 22);
   --og-color-status-cancelled: oklch(0.55 0.025 260);
   --og-color-danger: oklch(0.55 0.2 22);
-  --og-color-diff-add-bg: color-mix(in oklch, var(--og-color-status-idle) 12%, transparent);
-  --og-color-diff-del-bg: color-mix(in oklch, var(--og-color-status-failed) 12%, transparent);
+  --og-color-diff-add-bg: var(--og-color-status-idle);
+  --og-color-diff-del-bg: var(--og-color-status-failed);
 
   --og-shadow-sm: 0 1px 2px oklch(0.2 0.02 260 / 0.07);
   --og-shadow-md: 0 2px 8px oklch(0.2 0.02 260 / 0.09), 0 1px 2px oklch(0.2 0.02 260 / 0.06);
   --og-shadow-lg: 0 8px 28px oklch(0.2 0.02 260 / 0.13), 0 2px 8px oklch(0.2 0.02 260 / 0.07);
-  --og-shadow-glow: 0 0 20px color-mix(in oklch, var(--og-color-accent) 14%, transparent);
+  --og-shadow-glow: 0 0 20px var(--og-color-accent);
 
-  --og-session-chrome-surface: color-mix(in oklch, var(--og-color-surface-2) 88%, transparent);
+  --og-session-chrome-surface: var(--og-color-surface-2);
   --og-session-chrome-surface-open: var(--og-color-surface-2);
-  --og-session-chrome-border: color-mix(in oklch, var(--og-color-border) 90%, transparent);
+  --og-session-chrome-border: var(--og-color-border);
   --og-session-chrome-border-open: var(--og-color-border);
   --og-session-chrome-highlight: var(--og-color-surface-3);
-  --og-session-chrome-highlight-ring: color-mix(in oklch, var(--og-color-fg) 12%, transparent);
+  --og-session-chrome-highlight-ring: var(--og-color-fg);
   --og-session-chrome-shadow: 0 4px 16px -10px oklch(0.2 0.02 260 / 0.14);
   --og-session-chrome-shadow-open: 0 8px 22px -12px oklch(0.2 0.02 260 / 0.18);
-  --og-session-chrome-row-hover: color-mix(in oklch, var(--og-color-surface-3) 70%, transparent);
+  --og-session-chrome-row-hover: var(--og-color-surface-3);
 
   color-scheme: light;
 }
+
+@supports (color: color-mix(in lab, red, red)) {
+  [data-og-theme="light"],
+  .og-light {
+    --og-color-accent-soft: color-mix(in oklch, var(--og-color-accent) 11%, transparent);
+    --og-color-diff-add-bg: color-mix(in oklch, var(--og-color-status-idle) 12%, transparent);
+    --og-color-diff-del-bg: color-mix(in oklch, var(--og-color-status-failed) 12%, transparent);
+    --og-shadow-glow: 0 0 20px color-mix(in oklch, var(--og-color-accent) 14%, transparent);
+    --og-session-chrome-surface: color-mix(in oklch, var(--og-color-surface-2) 88%, transparent);
+    --og-session-chrome-border: color-mix(in oklch, var(--og-color-border) 90%, transparent);
+    --og-session-chrome-highlight-ring: color-mix(in oklch, var(--og-color-fg) 12%, transparent);
+    --og-session-chrome-row-hover: color-mix(in oklch, var(--og-color-surface-3) 70%, transparent);
+  }
+}