@opengeni/react 0.44.3 → 0.44.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/README.md +42 -0
  2. package/dist/chunk-22KP6LR5.js +31 -0
  3. package/dist/{chunk-TK7G6XLT.js.map → chunk-22KP6LR5.js.map} +1 -1
  4. package/dist/{chunk-SXIQK54Z.js → chunk-6EDV6YFE.js} +8 -8
  5. package/dist/{chunk-SXIQK54Z.js.map → chunk-6EDV6YFE.js.map} +1 -1
  6. package/dist/{chunk-U6K24XQD.js → chunk-EHSYZ4KP.js} +37 -16
  7. package/dist/chunk-EHSYZ4KP.js.map +1 -0
  8. package/dist/chunk-JB5725BI.js +48 -0
  9. package/dist/chunk-JB5725BI.js.map +1 -0
  10. package/dist/{chunk-QQRM3DO3.js → chunk-L3EWO3UK.js} +6 -6
  11. package/dist/{chunk-QQRM3DO3.js.map → chunk-L3EWO3UK.js.map} +1 -1
  12. package/dist/{chunk-YNYIAYXQ.js → chunk-LYRJUU5V.js} +23 -23
  13. package/dist/chunk-LYRJUU5V.js.map +1 -0
  14. package/dist/{chunk-ATSTR5P3.js → chunk-U3CSCMWA.js} +5 -49
  15. package/dist/chunk-U3CSCMWA.js.map +1 -0
  16. package/dist/{chunk-YDNWMKXO.js → chunk-VCBFUSUZ.js} +4 -4
  17. package/dist/chunk-VCBFUSUZ.js.map +1 -0
  18. package/dist/components/model-policy-picker.d.ts +10 -1
  19. package/dist/composer.js +5 -4
  20. package/dist/index.js +11 -9
  21. package/dist/index.js.map +1 -1
  22. package/dist/machines.js +2 -2
  23. package/dist/{queue-surface-implementation-THPAKGMD.js → queue-surface-implementation-J4XJFKRW.js} +41 -26
  24. package/dist/queue-surface-implementation-J4XJFKRW.js.map +1 -0
  25. package/dist/realtime/dropdown-menu.d.ts +4 -4
  26. package/dist/realtime.js +58 -20
  27. package/dist/realtime.js.map +1 -1
  28. package/dist/session-ui.js +5 -4
  29. package/package.json +1 -1
  30. package/src/components/composer.tsx +3 -3
  31. package/src/components/enrollment-device-flow.tsx +2 -2
  32. package/src/components/message-timeline.tsx +15 -15
  33. package/src/components/model-policy-picker.tsx +47 -14
  34. package/src/components/queue-surface-implementation.tsx +28 -18
  35. package/src/components/queue-surface-state.tsx +3 -3
  36. package/src/components/queue-surface.tsx +2 -2
  37. package/src/components/session-status.tsx +1 -1
  38. package/src/lib/cn.ts +14 -1
  39. package/src/lib/use-portal-token-style.ts +1 -1
  40. package/src/provider.tsx +4 -4
  41. package/src/realtime/dropdown-menu.tsx +51 -8
  42. package/src/realtime/realtime-control.tsx +2 -2
  43. package/styles/index.css +91 -11
  44. package/styles/tokens.css +61 -0
  45. package/dist/chunk-ATSTR5P3.js.map +0 -1
  46. package/dist/chunk-TK7G6XLT.js +0 -18
  47. package/dist/chunk-U6K24XQD.js.map +0 -1
  48. package/dist/chunk-YDNWMKXO.js.map +0 -1
  49. package/dist/chunk-YNYIAYXQ.js.map +0 -1
  50. package/dist/queue-surface-implementation-THPAKGMD.js.map +0 -1
package/README.md CHANGED
@@ -66,6 +66,48 @@ entry CSS:
66
66
  Consuming only the tokens without Tailwind? Import
67
67
  `@opengeni/react/tokens.css` and use the `--og-*` variables directly.)
68
68
 
69
+ ### Product-compatible theming and density
70
+
71
+ The default typography and control geometry are the same values used by
72
+ `apps/web`. Put theme overrides on one ancestor; SDK popovers and dropdowns
73
+ copy the effective `--og-*` values from their trigger across the portal
74
+ boundary, so a menu mounted under `<body>` still matches the embedded panel.
75
+ SDK type utilities are also scoped against ordinary host resets such as
76
+ `.app button { font: inherit }`; customize their public tokens instead of
77
+ adding selector-specific overrides.
78
+
79
+ For a narrow product sidebar, opt into the supported compact preset:
80
+
81
+ ```tsx
82
+ <aside data-og-theme="light" data-og-density="compact">
83
+ <MessageTimeline {...timelineProps} />
84
+ <ChatComposer {...composerProps} />
85
+ </aside>
86
+ ```
87
+
88
+ The preset is only a starting point. Override individual runtime tokens on the
89
+ same ancestor without rebuilding Tailwind:
90
+
91
+ ```css
92
+ .my-agent {
93
+ --og-font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
94
+ --og-font-size-menu: 12px;
95
+ --og-line-height-menu: 18px;
96
+ --og-font-size-composer-wide: 13px;
97
+ --og-line-height-composer-wide: 20px;
98
+ --og-model-picker-menu-width: 15rem;
99
+ --og-color-accent: oklch(0.58 0.19 288);
100
+ }
101
+ ```
102
+
103
+ The type ramp is `--og-font-size-{xs,sm,base,md}` with matching
104
+ `--og-line-height-*` tokens. Interactive chrome uses the semantic `control`,
105
+ `menu`, `composer`, and `composer-wide` pairs. Model picker height, width,
106
+ padding, and row-density tokens are grouped under `--og-model-picker-*` in
107
+ `styles/tokens.css`. `ModelPolicyPicker` also exposes `contentClassName` and
108
+ `contentStyle` for exceptional surface-level customization; tokens are the
109
+ recommended path.
110
+
69
111
  ## Quick start
70
112
 
71
113
  ```tsx
package/dist/chunk-22KP6LR5.js ADDED
@@ -0,0 +1,31 @@
1
+ // src/lib/cn.ts
2
+ import { clsx } from "clsx";
3
+ import { extendTailwindMerge } from "tailwind-merge";
4
+ var twMerge = extendTailwindMerge({
5
+ extend: {
6
+ classGroups: {
7
+ "font-size": [
8
+ {
9
+ text: [
10
+ "og-xs",
11
+ "og-sm",
12
+ "og-base",
13
+ "og-md",
14
+ "og-control",
15
+ "og-menu",
16
+ "og-composer",
17
+ "og-composer-wide"
18
+ ]
19
+ }
20
+ ]
21
+ }
22
+ }
23
+ });
24
+ function cn(...inputs) {
25
+ return twMerge(clsx(inputs));
26
+ }
27
+
28
+ export {
29
+ cn
30
+ };
31
+ //# sourceMappingURL=chunk-22KP6LR5.js.map
package/dist/{chunk-TK7G6XLT.js.map → chunk-22KP6LR5.js.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/lib/cn.ts"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\n/* ----------------------------------------------------------------------------\n tailwind-merge, taught our design tokens.\n\n Our type scale and color ramp share the `og-` prefix: `text-og-base` is a\n FONT SIZE, `text-og-fg-muted` is a COLOR. Stock tailwind-merge can't tell\n them apart — it lumps every `text-og-*` into one `font-size` group and, when\n two land in the same class list, drops the earlier one. That silently ate the\n size off rows like `text-og-base text-og-fg-muted`, leaving titles at the\n browser-default 16px. Register the custom font-size scale so the size and the\n color live in different conflict groups and both survive a merge.\n -------------------------------------------------------------------------- */\nconst twMerge = extendTailwindMerge({\n extend: {\n classGroups: {\n \"font-size\": [{ text: [\"og-xs\", \"og-sm\", \"og-base\", \"og-md\"] }],\n },\n },\n});\n\n/** Merge class names with Tailwind-aware conflict resolution. */\nexport function cn(...inputs: ClassValue[]): string {\n return twMerge(clsx(inputs));\n}\n"],"mappings":";AAAA,SAAS,YAA6B;AACtC,SAAS,2BAA2B;AAapC,IAAM,UAAU,oBAAoB;AAAA,EAClC,QAAQ;AAAA,IACN,aAAa;AAAA,MACX,aAAa,CAAC,EAAE,MAAM,CAAC,SAAS,SAAS,WAAW,OAAO,EAAE,CAAC;AAAA,IAChE;AAAA,EACF;AACF,CAAC;AAGM,SAAS,MAAM,QAA8B;AAClD,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;","names":[]}
1
+ {"version":3,"sources":["../src/lib/cn.ts"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\n/* ----------------------------------------------------------------------------\n tailwind-merge, taught our design tokens.\n\n Our type scale and color ramp share the `og-` prefix: `text-og-base` is a\n FONT SIZE, `text-og-fg-muted` is a COLOR. Stock tailwind-merge can't tell\n them apart — it lumps every `text-og-*` into one `font-size` group and, when\n two land in the same class list, drops the earlier one. That silently ate the\n size off rows like `text-og-base text-og-fg-muted`, leaving titles at the\n browser-default 16px. Register the custom font-size scale so the size and the\n color live in different conflict groups and both survive a merge.\n -------------------------------------------------------------------------- */\nconst twMerge = extendTailwindMerge({\n extend: {\n classGroups: {\n \"font-size\": [\n {\n text: [\n \"og-xs\",\n \"og-sm\",\n \"og-base\",\n \"og-md\",\n \"og-control\",\n \"og-menu\",\n \"og-composer\",\n \"og-composer-wide\",\n ],\n },\n ],\n },\n },\n});\n\n/** Merge class names with Tailwind-aware conflict resolution. */\nexport function cn(...inputs: ClassValue[]): string {\n return twMerge(clsx(inputs));\n}\n"],"mappings":";AAAA,SAAS,YAA6B;AACtC,SAAS,2BAA2B;AAapC,IAAM,UAAU,oBAAoB;AAAA,EAClC,QAAQ;AAAA,IACN,aAAa;AAAA,MACX,aAAa;AAAA,QACX;AAAA,UACE,MAAM;AAAA,YACJ;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAGM,SAAS,MAAM,QAA8B;AAClD,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;","names":[]}
package/dist/{chunk-SXIQK54Z.js → chunk-6EDV6YFE.js} RENAMED
@@ -12,7 +12,7 @@ import {
12
12
  } from "./chunk-LAKLF4PA.js";
13
13
  import {
14
14
  cn
15
- } from "./chunk-TK7G6XLT.js";
15
+ } from "./chunk-22KP6LR5.js";
16
16
 
17
17
  // src/types/machines.ts
18
18
  function connectionStatusForState(state) {
@@ -1386,7 +1386,7 @@ function EnrollmentDeviceFlow({
1386
1386
  /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between gap-3", children: [
1387
1387
  /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
1388
1388
  /* @__PURE__ */ jsx10("span", { className: "flex size-7 items-center justify-center rounded-full bg-og-surface-2 text-og-fg-muted", children: /* @__PURE__ */ jsx10(LaptopIcon5, { className: "size-4", "aria-hidden": true }) }),
1389
- /* @__PURE__ */ jsx10("h2", { className: "text-sm font-semibold text-og-fg", children: "Connect a machine" })
1389
+ /* @__PURE__ */ jsx10("h2", { className: "text-og-menu font-semibold text-og-fg", children: "Connect a machine" })
1390
1390
  ] }),
1391
1391
  /* @__PURE__ */ jsx10(
1392
1392
  ConnectionStatusPill,
@@ -1450,7 +1450,7 @@ function EnrollmentDeviceFlow({
1450
1450
  target: "_blank",
1451
1451
  rel: "noreferrer",
1452
1452
  onClick: onOpenVerification,
1453
- className: "inline-flex items-center justify-center gap-1.5 rounded-og-sm bg-og-accent px-3 py-2 text-sm font-medium text-og-accent-fg transition-colors hover:bg-og-accent-strong",
1453
+ className: "inline-flex items-center justify-center gap-1.5 rounded-og-sm bg-og-accent px-3 py-2 text-og-menu font-medium text-og-accent-fg transition-colors hover:bg-og-accent-strong",
1454
1454
  children: [
1455
1455
  "Open approval page",
1456
1456
  /* @__PURE__ */ jsx10(ExternalLinkIcon, { className: "size-3.5", "aria-hidden": true })
@@ -1825,9 +1825,9 @@ function ApiContractMismatchScreen({ mismatch }) {
1825
1825
  "aria-live": "assertive",
1826
1826
  "data-opengeni-api-contract-mismatch": true,
1827
1827
  children: /* @__PURE__ */ jsxs12("div", { className: "w-full max-w-md rounded-xl border border-og-border bg-og-surface p-6 shadow-2xl", children: [
1828
- /* @__PURE__ */ jsx12("p", { className: "text-sm font-semibold text-og-fg", children: "OpenGeni updated" }),
1829
- /* @__PURE__ */ jsx12("p", { className: "mt-2 text-sm leading-6 text-og-muted", children: "This tab cannot safely continue with the new server version. Reload it before sending or controlling work." }),
1830
- /* @__PURE__ */ jsxs12("p", { className: "mt-3 font-mono text-xs text-og-subtle", children: [
1828
+ /* @__PURE__ */ jsx12("p", { className: "text-og-menu font-semibold text-og-fg", children: "OpenGeni updated" }),
1829
+ /* @__PURE__ */ jsx12("p", { className: "mt-2 text-og-menu leading-6 text-og-muted", children: "This tab cannot safely continue with the new server version. Reload it before sending or controlling work." }),
1830
+ /* @__PURE__ */ jsxs12("p", { className: "mt-3 font-mono text-og-control text-og-subtle", children: [
1831
1831
  "Client ",
1832
1832
  mismatch.expected,
1833
1833
  " \xB7 API ",
@@ -1837,7 +1837,7 @@ function ApiContractMismatchScreen({ mismatch }) {
1837
1837
  "button",
1838
1838
  {
1839
1839
  type: "button",
1840
- className: "mt-5 inline-flex h-9 items-center rounded-md bg-og-fg px-3 text-sm font-medium text-og-bg",
1840
+ className: "mt-5 inline-flex h-9 items-center rounded-md bg-og-fg px-3 text-og-menu font-medium text-og-bg",
1841
1841
  onClick: () => window.location.reload(),
1842
1842
  children: "Reload now"
1843
1843
  }
@@ -1957,4 +1957,4 @@ export {
1957
1957
  OpenGeniProvider,
1958
1958
  useMachines
1959
1959
  };
1960
- //# sourceMappingURL=chunk-SXIQK54Z.js.map
1960
+ //# sourceMappingURL=chunk-6EDV6YFE.js.map