@opengeni/react 3.1.0 → 3.1.3-canary.38890816741001

package/dist/chunk-XDA5QJE7.js

@@ -0,0 +1,402 @@
+"use client";
+import {
+  MENU_CHEVRON_CLASS
+} from "./chunk-PMV53IMM.js";
+import {
+  usePortalTokenSource,
+  usePortalTokenStyle
+} from "./chunk-XEA5BCMA.js";
+import {
+  CHATGPT_MARK_PATH,
+  CLAUDE_MARK_PATH,
+  GROK_MARK_PATH
+} from "./chunk-N7S72EXK.js";
+import {
+  billingClassForMissingSelection,
+  defaultModelPolicyPickerMessages,
+  effectiveRows,
+  groupPresentationFor
+} from "./chunk-ZOZAPAUO.js";
+import {
+  findPickerRow,
+  labelReasoningEffort,
+  modelOffersEffortChoice
+} from "./chunk-KF33GTWN.js";
+import {
+  cn
+} from "./chunk-TXS65BB2.js";
+
+// src/components/claude-mark.tsx
+import { jsx } from "react/jsx-runtime";
+function ClaudeMark(props) {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", ...props, children: /* @__PURE__ */ jsx("path", { d: CLAUDE_MARK_PATH }) });
+}
+
+// src/components/grok-mark.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function GrokMark(props) {
+  return /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", ...props, children: /* @__PURE__ */ jsx2("path", { d: GROK_MARK_PATH }) });
+}
+
+// src/components/model-mark.tsx
+import {
+  modelDisplayName,
+  modelLogoUrl,
+  modelVendor
+} from "@opengeni/sdk/model-display";
+import { SparklesIcon } from "lucide-react";
+import { useState } from "react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function ChatGptMark(props) {
+  return /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", ...props, children: /* @__PURE__ */ jsx3("path", { d: CHATGPT_MARK_PATH }) });
+}
+var MARKED_VENDORS = /* @__PURE__ */ new Set(["openai", "anthropic", "xai"]);
+function modelHasMark(model) {
+  const vendor = modelVendor(model);
+  return modelLogoUrl(model) !== null || vendor !== null && MARKED_VENDORS.has(vendor);
+}
+function ModelMark(props) {
+  const logoUrl = modelLogoUrl(props.model);
+  const [failedUrl, setFailedUrl] = useState(null);
+  const vendor = modelVendor(props.model);
+  const className = cn("size-3.5 shrink-0", props.className);
+  const label = props["aria-label"];
+  const a11y = label ? { role: "img", "aria-label": label } : { "aria-hidden": true };
+  const mark = logoUrl && logoUrl !== failedUrl ? /* @__PURE__ */ jsx3(
+    "img",
+    {
+      src: logoUrl,
+      alt: "",
+      className: "size-full object-contain",
+      referrerPolicy: "no-referrer",
+      onError: () => setFailedUrl(logoUrl)
+    }
+  ) : vendor === "openai" ? /* @__PURE__ */ jsx3(ChatGptMark, { className: "size-full" }) : vendor === "anthropic" ? /* @__PURE__ */ jsx3(ClaudeMark, { className: "size-full" }) : vendor === "xai" ? /* @__PURE__ */ jsx3(GrokMark, { className: "size-full" }) : props.fallback !== void 0 ? props.fallback : /* @__PURE__ */ jsx3(SparklesIcon, { className: "size-full", "aria-hidden": true });
+  if (mark === null) return null;
+  return /* @__PURE__ */ jsx3(
+    "span",
+    {
+      className: cn("inline-flex items-center justify-center [&>svg]:size-full", className),
+      "data-model-vendor": vendor ?? "unknown",
+      ...a11y,
+      children: mark
+    }
+  );
+}
+function ModelName(props) {
+  const name = modelDisplayName(props.model);
+  return /* @__PURE__ */ jsxs("span", { className: cn("inline-flex min-w-0 items-center gap-1.5", props.className), title: name, children: [
+    props.mark === false ? null : /* @__PURE__ */ jsx3(ModelMark, { model: props.model, className: props.markClassName }),
+    /* @__PURE__ */ jsx3("span", { className: "min-w-0 truncate", children: name })
+  ] });
+}
+
+// src/components/model-policy-picker.tsx
+import { modelDisplayName as modelDisplayName2, modelLogoUrl as modelLogoUrl2 } from "@opengeni/sdk/model-display";
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  Globe2Icon,
+  KeyRoundIcon,
+  SparklesIcon as SparklesIcon2,
+  ZapIcon
+} from "lucide-react";
+import { motion, useReducedMotion } from "motion/react";
+import {
+  Suspense,
+  lazy,
+  useMemo,
+  useId,
+  useState as useState2
+} from "react";
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var LazyModelPolicyPickerMenu = lazy(
+  () => import("./model-policy-picker-menu-7GJ5URPR.js").then(({ ModelPolicyPickerPopover }) => ({
+    default: ModelPolicyPickerPopover
+  }))
+);
+var SLIDE_EASE = [0.22, 1, 0.36, 1];
+function BillingClassMark(props) {
+  const labels = {
+    opengeni_credits: "Models",
+    external: "External provider",
+    codex_subscription: "Codex",
+    supergrok_subscription: "SuperGrok",
+    claude_subscription: "Claude",
+    byok: "API key",
+    organization_byok: "API key"
+  };
+  if (props.presentation?.icon === null) return null;
+  const label = props["aria-label"] ?? props.presentation?.label ?? labels[props.billingClass];
+  const accessibility = label.length === 0 ? { "aria-hidden": true } : { role: "img", "aria-label": label };
+  const shell = cn(
+    "inline-flex size-3.5 shrink-0 items-center justify-center overflow-hidden text-og-fg-subtle [&>svg]:size-full [&>img]:size-full",
+    props.className
+  );
+  const mark = "size-3.5";
+  return /* @__PURE__ */ jsx4(
+    "span",
+    {
+      className: shell,
+      "data-testid": `billing-class-icon-${props.billingClass}`,
+      ...accessibility,
+      children: props.presentation?.icon !== void 0 ? props.presentation.icon : props.billingClass === "opengeni_credits" ? /* @__PURE__ */ jsx4(SparklesIcon2, { className: mark, "aria-hidden": true }) : props.billingClass === "external" ? /* @__PURE__ */ jsx4(Globe2Icon, { className: mark, "aria-hidden": true }) : props.billingClass === "codex_subscription" ? /* @__PURE__ */ jsx4(ChatGptMark, { className: mark }) : props.billingClass === "claude_subscription" ? /* @__PURE__ */ jsx4(ClaudeMark, { className: mark }) : props.billingClass === "supergrok_subscription" ? /* @__PURE__ */ jsx4(GrokMark, { className: mark }) : /* @__PURE__ */ jsx4(KeyRoundIcon, { className: mark, "aria-hidden": true })
+    }
+  );
+}
+function SelectedModelMark(input) {
+  const billingClass = input.selected?.billingClass ?? billingClassForMissingSelection(input.props.model);
+  const presentation = groupPresentationFor(input.props, billingClass);
+  const model = input.selected?.catalog ?? input.props.model;
+  if (input.props.collapseScopes === false) {
+    return /* @__PURE__ */ jsx4(
+      BillingClassMark,
+      {
+        billingClass,
+        presentation,
+        "aria-label": presentation?.label ?? SCOPED_MARK_LABELS[billingClass],
+        className: "text-og-fg"
+      }
+    );
+  }
+  if (modelLogoUrl2(model)) {
+    return /* @__PURE__ */ jsx4(ModelMark, { model, className: "text-og-fg" });
+  }
+  if (presentation?.icon !== void 0 || BRANDED_BILLING_CLASSES.has(billingClass) || !modelHasMark(model)) {
+    return /* @__PURE__ */ jsx4(
+      BillingClassMark,
+      {
+        billingClass,
+        presentation,
+        className: "text-og-fg"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx4(ModelMark, { model, className: "text-og-fg" });
+}
+var SCOPED_MARK_LABELS = {
+  byok: "Workspace provider account",
+  organization_byok: "Organization provider account"
+};
+function fallbackName(props) {
+  return props.collapseScopes === false ? props.model : modelDisplayName2(props.model);
+}
+var BRANDED_BILLING_CLASSES = /* @__PURE__ */ new Set([
+  "codex_subscription",
+  "claude_subscription",
+  "supergrok_subscription"
+]);
+function effectiveRows2(props) {
+  return effectiveRows(props);
+}
+function PickerNavRow(props) {
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      type: "button",
+      disabled: props.disabled,
+      title: props.title,
+      "aria-description": props.description,
+      onClick: props.onClick,
+      "data-testid": props.testId,
+      className: cn(
+        // The one menu row (lib/menu-styles.ts), with density tokens for embedders.
+        "flex min-h-8 w-full cursor-pointer items-center gap-2.5 rounded-og-md px-[var(--og-model-picker-row-padding-x)] py-[var(--og-model-picker-row-padding-y)] text-left text-og-fg outline-hidden transition-colors duration-[120ms] hover:bg-og-hover focus-visible:bg-og-hover focus-visible:outline-2 focus-visible:-outline-offset-2! focus-visible:outline-og-accent/55 pointer-coarse:min-h-11",
+        props.disabled && "cursor-not-allowed opacity-50"
+      ),
+      children: [
+        props.icon,
+        /* @__PURE__ */ jsxs2("span", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx4("span", { className: "block truncate text-og-menu", children: props.label }),
+          props.hint ? /* @__PURE__ */ jsx4("span", { className: "mt-0.5 block truncate text-og-sm text-og-fg-muted", children: props.hint }) : null
+        ] }),
+        props.trailing ? /* @__PURE__ */ jsx4("span", { className: "ml-auto shrink-0", children: props.trailing }) : null,
+        props.showChevron === false ? null : /* @__PURE__ */ jsx4(ChevronRightIcon, { className: MENU_CHEVRON_CLASS })
+      ]
+    }
+  );
+}
+function PickerBackHeader(props) {
+  return /* @__PURE__ */ jsxs2("div", { className: "mb-1.5 flex min-h-9 items-center gap-1 border-b border-og-border pb-1.5", children: [
+    /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        type: "button",
+        onClick: props.onBack,
+        "data-testid": "model-picker-back",
+        className: "flex min-h-8 min-w-0 flex-1 cursor-pointer items-center gap-1 rounded-og-md pr-2.5 text-left text-og-fg outline-hidden transition-colors duration-[120ms] hover:bg-og-hover focus-visible:outline-2 focus-visible:-outline-offset-2! focus-visible:outline-og-accent/55 pointer-coarse:min-h-11",
+        children: [
+          /* @__PURE__ */ jsx4("span", { className: "flex size-8 shrink-0 items-center justify-center text-og-fg-muted", children: /* @__PURE__ */ jsx4(ChevronLeftIcon, { className: "size-4" }) }),
+          props.icon,
+          /* @__PURE__ */ jsx4("span", { className: "min-w-0 flex-1 truncate text-og-menu font-medium", children: props.label })
+        ]
+      }
+    ),
+    props.trailing ? /* @__PURE__ */ jsx4("div", { className: "relative z-10 shrink-0", children: props.trailing }) : null
+  ] });
+}
+function PickerAnimatedPage(props) {
+  const reduceMotion = useReducedMotion();
+  return /* @__PURE__ */ jsx4(
+    motion.div,
+    {
+      initial: reduceMotion ? false : { x: props.direction * 14, opacity: 0 },
+      animate: { x: 0, opacity: 1 },
+      transition: { duration: reduceMotion ? 0 : 0.18, ease: SLIDE_EASE },
+      className: "w-full",
+      children: props.children
+    },
+    props.pageKey
+  );
+}
+function useModelPolicyPickerState(props) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState2(props.defaultOpen ?? false);
+  const open = props.open ?? uncontrolledOpen;
+  const setOpen = (next) => {
+    if (props.open === void 0) setUncontrolledOpen(next);
+    props.onOpenChange?.(next);
+  };
+  return { open, setOpen, rows: effectiveRows2(props) };
+}
+function ModelPolicyPicker(props) {
+  const contentId = useId();
+  const trigger = usePortalTokenSource();
+  const portalStyle = usePortalTokenStyle(trigger.source);
+  const messages = useMemo(
+    () => ({ ...defaultModelPolicyPickerMessages, ...props.messages }),
+    [props.messages]
+  );
+  const { open, setOpen, rows } = useModelPolicyPickerState(props);
+  const selected = findPickerRow(rows, props.model);
+  const needsModel = !rows.some((row) => row.selectable) && (rows.length > 0 || Boolean(props.connectModelsHref));
+  const selectedDescription = needsModel ? messages.connectTitle : [selected?.label ?? fallbackName(props), labelReasoningEffort(props.effort)].join(" \xB7 ");
+  if (props.loading) {
+    return /* @__PURE__ */ jsx4(
+      "span",
+      {
+        className: cn(
+          "og-root inline-flex h-8 w-40 shrink-0 animate-pulse rounded-full bg-og-surface-2",
+          props.triggerStyle === "field" && "w-[180px] rounded-og-md",
+          props.className
+        ),
+        "aria-label": messages.loading,
+        "data-testid": "model-picker-loading"
+      }
+    );
+  }
+  if (props.triggerStyle === "field") {
+    return /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsxs2(
+        "button",
+        {
+          ref: trigger.ref,
+          type: "button",
+          "aria-haspopup": "dialog",
+          "aria-expanded": open,
+          "aria-controls": open ? contentId : void 0,
+          "data-state": open ? "open" : "closed",
+          "data-trigger-style": "field",
+          onClick: () => setOpen(!open),
+          disabled: props.disabled,
+          "aria-label": messages.label,
+          "aria-description": selectedDescription,
+          className: cn(
+            "og-root inline-flex h-8 min-w-[180px] max-w-full items-center gap-2 rounded-og-md border border-og-border bg-og-surface px-2.5 text-sm text-og-fg outline-hidden transition-colors hover:bg-og-surface-2 focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:cursor-not-allowed disabled:opacity-50",
+            props.className
+          ),
+          children: [
+            needsModel ? /* @__PURE__ */ jsx4(SparklesIcon2, { className: "size-3.5 shrink-0", "aria-hidden": true }) : /* @__PURE__ */ jsx4(SelectedModelMark, { props, selected }),
+            /* @__PURE__ */ jsx4("span", { className: "min-w-0 truncate font-medium", children: needsModel ? messages.connectTitle : selected?.label ?? fallbackName(props) }),
+            props.triggerMeta && !needsModel ? /* @__PURE__ */ jsx4("span", { className: "min-w-0 shrink-[9999] truncate text-og-fg-muted", children: props.triggerMeta }) : null,
+            /* @__PURE__ */ jsx4(ChevronDownIcon, { className: "ml-auto size-3.5 shrink-0 text-og-fg-muted" })
+          ]
+        }
+      ),
+      open ? /* @__PURE__ */ jsx4(Suspense, { fallback: null, children: /* @__PURE__ */ jsx4(
+        LazyModelPolicyPickerMenu,
+        {
+          ...props,
+          anchor: trigger.currentRef,
+          contentId,
+          portalStyle,
+          onOpenChange: setOpen
+        }
+      ) }) : null
+    ] });
+  }
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        ref: trigger.ref,
+        type: "button",
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        "aria-controls": open ? contentId : void 0,
+        "data-state": open ? "open" : "closed",
+        onClick: () => setOpen(!open),
+        disabled: props.disabled,
+        "aria-label": messages.label,
+        "aria-description": selectedDescription,
+        className: cn(
+          // Phone: the composer row also carries attach, dictate, voice, pause
+          // and send, so the pill drops its chevron and tightens its padding
+          // to keep the model's short name readable.
+          "og-root og-model-policy-trigger inline-flex h-[var(--og-model-picker-trigger-height)] min-w-0 max-w-64 items-center gap-1 rounded-full border px-2.5 text-og-control outline-hidden transition-colors focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:cursor-not-allowed disabled:opacity-50 max-sm:h-11 max-sm:max-w-[7.5rem] max-sm:gap-0.5 max-sm:px-1.5",
+          // With no usable model the pill is the one thing that unblocks the
+          // composer, so it takes the primary wash.
+          needsModel ? "border-og-primary-border bg-og-primary text-og-primary-fg hover:bg-og-primary-hover" : "border-transparent text-og-fg-muted hover:border-og-border hover:bg-og-surface-2 hover:text-og-fg",
+          props.className
+        ),
+        children: [
+          needsModel ? /* @__PURE__ */ jsx4(SparklesIcon2, { className: "size-3.5 shrink-0", "aria-hidden": true }) : /* @__PURE__ */ jsx4(SelectedModelMark, { props, selected }),
+          /* @__PURE__ */ jsx4("span", { className: "og-model-policy-label-full min-w-0 truncate font-medium text-og-fg max-sm:hidden @max-[20rem]/model-controls:hidden", children: needsModel ? messages.connectTitle : selected?.label ?? fallbackName(props) }),
+          /* @__PURE__ */ jsx4("span", { className: "og-model-policy-label-short min-w-0 truncate font-medium text-og-fg sm:hidden @max-[20rem]/model-controls:block", children: needsModel ? messages.connectTitle : selected?.shortLabel ?? selected?.label ?? fallbackName(props) }),
+          selected && !needsModel && modelOffersEffortChoice(selected.catalog) ? /* @__PURE__ */ jsx4(
+            "span",
+            {
+              className: "og-model-policy-effort min-w-0 shrink-[9999] truncate",
+              title: labelReasoningEffort(props.effort),
+              children: labelReasoningEffort(props.effort)
+            }
+          ) : null,
+          props.latencyMode === "fast" && !needsModel ? /* @__PURE__ */ jsx4(
+            ZapIcon,
+            {
+              className: "size-3.5 shrink-0 fill-current stroke-current text-og-fg",
+              "aria-label": messages.fast,
+              "data-testid": "model-picker-fast-icon"
+            }
+          ) : null,
+          /* @__PURE__ */ jsx4(ChevronDownIcon, { className: "og-model-policy-chevron size-3 shrink-0 max-sm:hidden" })
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsx4(Suspense, { fallback: null, children: /* @__PURE__ */ jsx4(
+      LazyModelPolicyPickerMenu,
+      {
+        ...props,
+        anchor: trigger.currentRef,
+        contentId,
+        portalStyle,
+        onOpenChange: setOpen
+      }
+    ) }) : null
+  ] });
+}
+
+export {
+  ClaudeMark,
+  GrokMark,
+  ChatGptMark,
+  modelHasMark,
+  ModelMark,
+  ModelName,
+  BillingClassMark,
+  PickerNavRow,
+  PickerBackHeader,
+  PickerAnimatedPage,
+  ModelPolicyPicker
+};
+//# sourceMappingURL=chunk-XDA5QJE7.js.map

package/dist/chunk-XDA5QJE7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/claude-mark.tsx","../src/components/grok-mark.tsx","../src/components/model-mark.tsx","../src/components/model-policy-picker.tsx"],"sourcesContent":["import { CLAUDE_MARK_PATH } from \"../model-mark-paths\";\nimport type { SVGProps } from \"react\";\n\n/** ClaudeMark: Simple Icons, CC0; https://github.com/simple-icons/simple-icons */\nexport function ClaudeMark(props: SVGProps<SVGSVGElement>) {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\" {...props}>\n      <path d={CLAUDE_MARK_PATH} />\n    </svg>\n  );\n}\n","import { GROK_MARK_PATH } from \"../model-mark-paths\";\nimport type { SVGProps } from \"react\";\n\n/**\n * MIT License\n *\n * Copyright (c) 2023 LobeHub\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * Source: https://raw.githubusercontent.com/lobehub/lobe-icons/master/src/Grok/components/Mono.tsx\n */\nexport function GrokMark(props: SVGProps<SVGSVGElement>) {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\" {...props}>\n      <path d={GROK_MARK_PATH} />\n    </svg>\n  );\n}\n","import { CHATGPT_MARK_PATH } from \"../model-mark-paths\";\nimport {\n  modelDisplayName,\n  modelLogoUrl,\n  modelVendor,\n  type ModelDisplayInput,\n  type ModelVendor,\n} from \"@opengeni/sdk/model-display\";\nimport { SparklesIcon } from \"lucide-react\";\nimport { useState, type ReactNode, type SVGProps } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { ClaudeMark } from \"./claude-mark\";\nimport { GrokMark } from \"./grok-mark\";\n\n/** ChatGPT / OpenAI mark (Simple Icons path), currentColor like the other marks. */\nexport function ChatGptMark(props: SVGProps<SVGSVGElement>) {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\" {...props}>\n      <path d={CHATGPT_MARK_PATH} />\n    </svg>\n  );\n}\n\nconst MARKED_VENDORS: ReadonlySet<ModelVendor> = new Set([\"openai\", \"anthropic\", \"xai\"]);\n\n/** True when `ModelMark` has a real maker logo for this model (not the neutral fallback). */\nexport function modelHasMark(model: ModelDisplayInput): boolean {\n  const vendor = modelVendor(model);\n  return modelLogoUrl(model) !== null || (vendor !== null && MARKED_VENDORS.has(vendor));\n}\n\n/**\n * The catalog's maker logo, with bundled maker logos and a neutral fallback.\n * Makers without a configured or bundled logo get a neutral mark, so an org- and\n * a workspace-connected copy of one model always look the same.\n */\nexport function ModelMark(props: {\n  model: ModelDisplayInput;\n  className?: string | undefined;\n  /** Shown when the maker has no bundled logo. Defaults to a neutral sparkle. */\n  fallback?: ReactNode;\n  \"aria-label\"?: string | undefined;\n}) {\n  const logoUrl = modelLogoUrl(props.model);\n  const [failedUrl, setFailedUrl] = useState<string | null>(null);\n  const vendor = modelVendor(props.model);\n  const className = cn(\"size-3.5 shrink-0\", props.className);\n  const label = props[\"aria-label\"];\n  const a11y = label ? { role: \"img\" as const, \"aria-label\": label } : { \"aria-hidden\": true };\n  const mark =\n    logoUrl && logoUrl !== failedUrl ? (\n      <img\n        src={logoUrl}\n        alt=\"\"\n        className=\"size-full object-contain\"\n        referrerPolicy=\"no-referrer\"\n        onError={() => setFailedUrl(logoUrl)}\n      />\n    ) : vendor === \"openai\" ? (\n      <ChatGptMark className=\"size-full\" />\n    ) : vendor === \"anthropic\" ? (\n      <ClaudeMark className=\"size-full\" />\n    ) : vendor === \"xai\" ? (\n      <GrokMark className=\"size-full\" />\n    ) : props.fallback !== undefined ? (\n      props.fallback\n    ) : (\n      <SparklesIcon className=\"size-full\" aria-hidden />\n    );\n  if (mark === null) return null;\n  return (\n    <span\n      className={cn(\"inline-flex items-center justify-center [&>svg]:size-full\", className)}\n      data-model-vendor={vendor ?? \"unknown\"}\n      {...a11y}\n    >\n      {mark}\n    </span>\n  );\n}\n\n/**\n * A model as people should see it outside model settings: the maker's mark and\n * the clean display name. Never a routing prefix, connection id or scope.\n */\nexport function ModelName(props: {\n  model: ModelDisplayInput;\n  /** Hide the maker mark for dense text-only contexts. */\n  mark?: boolean | undefined;\n  className?: string | undefined;\n  markClassName?: string | undefined;\n}) {\n  const name = modelDisplayName(props.model);\n  return (\n    <span className={cn(\"inline-flex min-w-0 items-center gap-1.5\", props.className)} title={name}>\n      {props.mark === false ? null : (\n        <ModelMark model={props.model} className={props.markClassName} />\n      )}\n      <span className=\"min-w-0 truncate\">{name}</span>\n    </span>\n  );\n}\n","import { ClaudeMark } from \"./claude-mark\";\nimport { GrokMark } from \"./grok-mark\";\nimport { ChatGptMark, ModelMark, modelHasMark } from \"./model-mark\";\nimport { modelDisplayName, modelLogoUrl } from \"@opengeni/sdk/model-display\";\nimport type { ClientModel, LatencyMode, ReasoningEffort } from \"@opengeni/sdk\";\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  Globe2Icon,\n  KeyRoundIcon,\n  SparklesIcon,\n  ZapIcon,\n} from \"lucide-react\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport {\n  Suspense,\n  lazy,\n  useMemo,\n  useId,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\nimport { cn } from \"../lib/cn\";\nimport {\n  billingClassForMissingSelection,\n  defaultModelPolicyPickerMessages,\n  effectiveRows as sharedEffectiveRows,\n  groupPresentationFor,\n  SCOPED_BILLING_HINTS,\n  type ModelPickerGroupPresentation,\n  type ModelPolicyPickerMessages,\n} from \"../model-picker-model\";\nimport { MENU_CHEVRON_CLASS } from \"../lib/menu-styles\";\nimport { usePortalTokenSource, usePortalTokenStyle } from \"../lib/use-portal-token-style\";\nimport {\n  findPickerRow,\n  labelReasoningEffort,\n  modelOffersEffortChoice,\n  type PickerBillingClass,\n  type PickerModelRow,\n} from \"../model-policy\";\n\nconst LazyModelPolicyPickerMenu = lazy(() =>\n  import(\"./model-policy-picker-menu\").then(({ ModelPolicyPickerPopover }) => ({\n    default: ModelPolicyPickerPopover,\n  })),\n);\n\ntype ClientPickerModelRow = PickerModelRow<ClientModel>;\n\n/** Presentation only; never changes model identity, billing or availability. */\nexport type ModelPolicyPickerGroupPresentation = ModelPickerGroupPresentation<ReactNode>;\n\nexport { defaultModelPolicyPickerMessages, groupPresentationFor, SCOPED_BILLING_HINTS };\nexport type { ModelPolicyPickerMessages };\n\nexport type ModelPolicyPickerProps = {\n  /** Host branding for payment-source groups, shared by menu and trigger. */\n  groupPresentation?: ModelPolicyPickerGroupPresentation | undefined;\n  /** Lightweight deployment models. Catalog rows take precedence when supplied. */\n  models?: ClientModel[] | undefined;\n  /** Warn only when the draft actually contains images this model cannot view. */\n  hasImageAttachments?: boolean | undefined;\n  /** Catalog-backed rows with availability and billing-class truth. */\n  rows?: PickerModelRow[] | undefined;\n  model: string;\n  effort: ReasoningEffort;\n  latencyMode: LatencyMode;\n  disabled?: boolean | undefined;\n  loading?: boolean | undefined;\n  error?: string | null | undefined;\n  /** Controlled menu state. Omit for the built-in uncontrolled behavior. */\n  open?: boolean | undefined;\n  /** Initial menu state when `open` is uncontrolled. */\n  defaultOpen?: boolean | undefined;\n  onOpenChange?: ((open: boolean) => void) | undefined;\n  /** Non-Codex models stay visible but cannot be selected. */\n  codexOnly?: boolean | undefined;\n  /** Identity of the current session scope. */\n  sessionKey?: string | undefined;\n  /** Prefer bottom on new-chat surfaces and top for bottom-docked composers. */\n  menuSide?: \"top\" | \"bottom\" | undefined;\n  /**\n   * Default true: show models the way people choose them, with clean names,\n   * maker marks, one \"API keys\" group for organization- and workspace-connected\n   * keys, and one row for identical copies. Models settings passes false to\n   * keep its scope-aware presentation (raw catalog labels, scoped groups).\n   */\n  collapseScopes?: boolean | undefined;\n  /** Hide latency controls on surfaces whose saved policy does not include latency. */\n  allowLatencyMode?: boolean | undefined;\n  /** Hide effort and latency controls when the saved policy chooses only a model identity. */\n  allowModelOptions?: boolean | undefined;\n  /** Settings → Models. Shown when the catalog has no model that can run. */\n  connectModelsHref?: string | undefined;\n  /** Classes for the portalled menu surface. Prefer --og-* tokens for theming. */\n  contentClassName?: string | undefined;\n  /** Inline styles for the portalled menu, applied after inherited --og-* tokens. */\n  contentStyle?: CSSProperties | undefined;\n  className?: string | undefined;\n  /**\n   * \"pill\" (default) is the composer's quiet rounded trigger with the effort.\n   * \"field\" is a settings control: a bordered rectangle with the model name\n   * and `triggerMeta` (for example the payer) in muted text. The effort stays\n   * in the menu.\n   */\n  triggerStyle?: \"pill\" | \"field\" | undefined;\n  /** Muted text after the model name in the \"field\" trigger. */\n  triggerMeta?: ReactNode;\n  messages?: Partial<ModelPolicyPickerMessages> | undefined;\n  onModelChange: (modelId: string) => void;\n  onEffortChange: (effort: ReasoningEffort) => void;\n  onLatencyModeChange: (latencyMode: LatencyMode) => void;\n};\n\nconst SLIDE_EASE = [0.22, 1, 0.36, 1] as const;\n\nexport function BillingClassMark(props: {\n  billingClass: PickerBillingClass;\n  presentation?: ModelPolicyPickerGroupPresentation[PickerBillingClass] | undefined;\n  className?: string | undefined;\n  \"aria-label\"?: string | undefined;\n}) {\n  const labels: Record<PickerBillingClass, string> = {\n    opengeni_credits: \"Models\",\n    external: \"External provider\",\n    codex_subscription: \"Codex\",\n    supergrok_subscription: \"SuperGrok\",\n    claude_subscription: \"Claude\",\n    byok: \"API key\",\n    organization_byok: \"API key\",\n  };\n  if (props.presentation?.icon === null) return null;\n  const label = props[\"aria-label\"] ?? props.presentation?.label ?? labels[props.billingClass];\n  const accessibility =\n    label.length === 0\n      ? { \"aria-hidden\": true as const }\n      : { role: \"img\" as const, \"aria-label\": label };\n  const shell = cn(\n    \"inline-flex size-3.5 shrink-0 items-center justify-center overflow-hidden text-og-fg-subtle [&>svg]:size-full [&>img]:size-full\",\n    props.className,\n  );\n  const mark = \"size-3.5\";\n  return (\n    <span\n      className={shell}\n      data-testid={`billing-class-icon-${props.billingClass}`}\n      {...accessibility}\n    >\n      {props.presentation?.icon !== undefined ? (\n        props.presentation.icon\n      ) : props.billingClass === \"opengeni_credits\" ? (\n        <SparklesIcon className={mark} aria-hidden />\n      ) : props.billingClass === \"external\" ? (\n        <Globe2Icon className={mark} aria-hidden />\n      ) : props.billingClass === \"codex_subscription\" ? (\n        <ChatGptMark className={mark} />\n      ) : props.billingClass === \"claude_subscription\" ? (\n        <ClaudeMark className={mark} />\n      ) : props.billingClass === \"supergrok_subscription\" ? (\n        <GrokMark className={mark} />\n      ) : (\n        <KeyRoundIcon className={mark} aria-hidden />\n      )}\n    </span>\n  );\n}\n\n/**\n * The trigger shows who makes the chosen model. Subscription rails already\n * carry their maker's mark (ChatGPT, Claude, Grok). Configured catalog logos win\n * in collapsed model presentation; otherwise explicit host branding wins and models show\n * the maker's logo instead of a generic key, falling back to the group mark.\n */\nfunction SelectedModelMark(input: {\n  props: ModelPolicyPickerProps;\n  selected: ClientPickerModelRow | null;\n}) {\n  const billingClass =\n    input.selected?.billingClass ?? billingClassForMissingSelection(input.props.model);\n  const presentation = groupPresentationFor(input.props, billingClass);\n  const model = input.selected?.catalog ?? input.props.model;\n  if (input.props.collapseScopes === false) {\n    return (\n      <BillingClassMark\n        billingClass={billingClass}\n        presentation={presentation}\n        aria-label={presentation?.label ?? SCOPED_MARK_LABELS[billingClass]}\n        className=\"text-og-fg\"\n      />\n    );\n  }\n  if (modelLogoUrl(model)) {\n    return <ModelMark model={model} className=\"text-og-fg\" />;\n  }\n  if (\n    presentation?.icon !== undefined ||\n    BRANDED_BILLING_CLASSES.has(billingClass) ||\n    !modelHasMark(model)\n  ) {\n    return (\n      <BillingClassMark\n        billingClass={billingClass}\n        presentation={presentation}\n        className=\"text-og-fg\"\n      />\n    );\n  }\n  return <ModelMark model={model} className=\"text-og-fg\" />;\n}\n\nconst SCOPED_MARK_LABELS: Partial<Record<PickerBillingClass, string>> = {\n  byok: \"Workspace provider account\",\n  organization_byok: \"Organization provider account\",\n};\n\n/** A selection the catalog no longer lists: its clean name (settings keep the id). */\nfunction fallbackName(props: ModelPolicyPickerProps): string {\n  return props.collapseScopes === false ? props.model : modelDisplayName(props.model);\n}\n\nconst BRANDED_BILLING_CLASSES: ReadonlySet<PickerBillingClass> = new Set([\n  \"codex_subscription\",\n  \"claude_subscription\",\n  \"supergrok_subscription\",\n]);\n\nexport function effectiveRows(props: ModelPolicyPickerProps): ClientPickerModelRow[] {\n  return sharedEffectiveRows(props);\n}\n\nexport function PickerNavRow(props: {\n  label: string;\n  hint?: string | undefined;\n  icon?: ReactNode;\n  trailing?: ReactNode;\n  showChevron?: boolean | undefined;\n  disabled?: boolean | undefined;\n  title?: string | undefined;\n  description?: string | undefined;\n  active?: boolean | undefined;\n  testId?: string | undefined;\n  onClick: () => void;\n}) {\n  return (\n    <button\n      type=\"button\"\n      disabled={props.disabled}\n      title={props.title}\n      aria-description={props.description}\n      onClick={props.onClick}\n      data-testid={props.testId}\n      className={cn(\n        // The one menu row (lib/menu-styles.ts), with density tokens for embedders.\n        \"flex min-h-8 w-full cursor-pointer items-center gap-2.5 rounded-og-md px-[var(--og-model-picker-row-padding-x)] py-[var(--og-model-picker-row-padding-y)] text-left text-og-fg outline-hidden transition-colors duration-[120ms] hover:bg-og-hover focus-visible:bg-og-hover focus-visible:outline-2 focus-visible:-outline-offset-2! focus-visible:outline-og-accent/55 pointer-coarse:min-h-11\",\n        props.disabled && \"cursor-not-allowed opacity-50\",\n      )}\n    >\n      {props.icon}\n      <span className=\"min-w-0 flex-1\">\n        <span className=\"block truncate text-og-menu\">{props.label}</span>\n        {props.hint ? (\n          <span className=\"mt-0.5 block truncate text-og-sm text-og-fg-muted\">{props.hint}</span>\n        ) : null}\n      </span>\n      {props.trailing ? <span className=\"ml-auto shrink-0\">{props.trailing}</span> : null}\n      {props.showChevron === false ? null : <ChevronRightIcon className={MENU_CHEVRON_CLASS} />}\n    </button>\n  );\n}\n\nexport function PickerBackHeader(props: {\n  label: string;\n  icon?: ReactNode;\n  onBack: () => void;\n  trailing?: ReactNode;\n}) {\n  return (\n    <div className=\"mb-1.5 flex min-h-9 items-center gap-1 border-b border-og-border pb-1.5\">\n      <button\n        type=\"button\"\n        onClick={props.onBack}\n        data-testid=\"model-picker-back\"\n        className=\"flex min-h-8 min-w-0 flex-1 cursor-pointer items-center gap-1 rounded-og-md pr-2.5 text-left text-og-fg outline-hidden transition-colors duration-[120ms] hover:bg-og-hover focus-visible:outline-2 focus-visible:-outline-offset-2! focus-visible:outline-og-accent/55 pointer-coarse:min-h-11\"\n      >\n        <span className=\"flex size-8 shrink-0 items-center justify-center text-og-fg-muted\">\n          <ChevronLeftIcon className=\"size-4\" />\n        </span>\n        {props.icon}\n        <span className=\"min-w-0 flex-1 truncate text-og-menu font-medium\">{props.label}</span>\n      </button>\n      {props.trailing ? <div className=\"relative z-10 shrink-0\">{props.trailing}</div> : null}\n    </div>\n  );\n}\n\nexport function PickerAnimatedPage(props: {\n  pageKey: string;\n  direction: 1 | -1;\n  children: ReactNode;\n}) {\n  const reduceMotion = useReducedMotion();\n  return (\n    <motion.div\n      key={props.pageKey}\n      initial={reduceMotion ? false : { x: props.direction * 14, opacity: 0 }}\n      animate={{ x: 0, opacity: 1 }}\n      transition={{ duration: reduceMotion ? 0 : 0.18, ease: SLIDE_EASE }}\n      className=\"w-full\"\n    >\n      {props.children}\n    </motion.div>\n  );\n}\n\n/** @internal Shared controlled/uncontrolled state seam. */\nexport function useModelPolicyPickerState(props: ModelPolicyPickerProps) {\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(props.defaultOpen ?? false);\n  const open = props.open ?? uncontrolledOpen;\n  const setOpen = (next: boolean) => {\n    if (props.open === undefined) setUncontrolledOpen(next);\n    props.onOpenChange?.(next);\n  };\n  return { open, setOpen, rows: effectiveRows(props) };\n}\n\nexport function ModelPolicyPicker(props: ModelPolicyPickerProps) {\n  const contentId = useId();\n  const trigger = usePortalTokenSource<HTMLButtonElement>();\n  const portalStyle = usePortalTokenStyle(trigger.source);\n  const messages = useMemo(\n    () => ({ ...defaultModelPolicyPickerMessages, ...props.messages }),\n    [props.messages],\n  );\n  const { open, setOpen, rows } = useModelPolicyPickerState(props);\n  const selected = findPickerRow(rows, props.model);\n  const needsModel =\n    !rows.some((row) => row.selectable) && (rows.length > 0 || Boolean(props.connectModelsHref));\n  const selectedDescription = needsModel\n    ? messages.connectTitle\n    : [selected?.label ?? fallbackName(props), labelReasoningEffort(props.effort)].join(\" · \");\n\n  if (props.loading) {\n    return (\n      <span\n        className={cn(\n          \"og-root inline-flex h-8 w-40 shrink-0 animate-pulse rounded-full bg-og-surface-2\",\n          props.triggerStyle === \"field\" && \"w-[180px] rounded-og-md\",\n          props.className,\n        )}\n        aria-label={messages.loading}\n        data-testid=\"model-picker-loading\"\n      />\n    );\n  }\n  if (props.triggerStyle === \"field\") {\n    return (\n      <>\n        <button\n          ref={trigger.ref}\n          type=\"button\"\n          aria-haspopup=\"dialog\"\n          aria-expanded={open}\n          aria-controls={open ? contentId : undefined}\n          data-state={open ? \"open\" : \"closed\"}\n          data-trigger-style=\"field\"\n          onClick={() => setOpen(!open)}\n          disabled={props.disabled}\n          aria-label={messages.label}\n          aria-description={selectedDescription}\n          className={cn(\n            \"og-root inline-flex h-8 min-w-[180px] max-w-full items-center gap-2 rounded-og-md border border-og-border bg-og-surface px-2.5 text-sm text-og-fg outline-hidden transition-colors hover:bg-og-surface-2 focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:cursor-not-allowed disabled:opacity-50\",\n            props.className,\n          )}\n        >\n          {needsModel ? (\n            <SparklesIcon className=\"size-3.5 shrink-0\" aria-hidden />\n          ) : (\n            <SelectedModelMark props={props} selected={selected} />\n          )}\n          <span className=\"min-w-0 truncate font-medium\">\n            {needsModel ? messages.connectTitle : (selected?.label ?? fallbackName(props))}\n          </span>\n          {props.triggerMeta && !needsModel ? (\n            <span className=\"min-w-0 shrink-[9999] truncate text-og-fg-muted\">\n              {props.triggerMeta}\n            </span>\n          ) : null}\n          <ChevronDownIcon className=\"ml-auto size-3.5 shrink-0 text-og-fg-muted\" />\n        </button>\n        {open ? (\n          <Suspense fallback={null}>\n            <LazyModelPolicyPickerMenu\n              {...props}\n              anchor={trigger.currentRef}\n              contentId={contentId}\n              portalStyle={portalStyle}\n              onOpenChange={setOpen}\n            />\n          </Suspense>\n        ) : null}\n      </>\n    );\n  }\n  return (\n    <>\n      <button\n        ref={trigger.ref}\n        type=\"button\"\n        aria-haspopup=\"dialog\"\n        aria-expanded={open}\n        aria-controls={open ? contentId : undefined}\n        data-state={open ? \"open\" : \"closed\"}\n        onClick={() => setOpen(!open)}\n        disabled={props.disabled}\n        aria-label={messages.label}\n        aria-description={selectedDescription}\n        className={cn(\n          // Phone: the composer row also carries attach, dictate, voice, pause\n          // and send, so the pill drops its chevron and tightens its padding\n          // to keep the model's short name readable.\n          \"og-root og-model-policy-trigger inline-flex h-[var(--og-model-picker-trigger-height)] min-w-0 max-w-64 items-center gap-1 rounded-full border px-2.5 text-og-control outline-hidden transition-colors focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:cursor-not-allowed disabled:opacity-50 max-sm:h-11 max-sm:max-w-[7.5rem] max-sm:gap-0.5 max-sm:px-1.5\",\n          // With no usable model the pill is the one thing that unblocks the\n          // composer, so it takes the primary wash.\n          needsModel\n            ? \"border-og-primary-border bg-og-primary text-og-primary-fg hover:bg-og-primary-hover\"\n            : \"border-transparent text-og-fg-muted hover:border-og-border hover:bg-og-surface-2 hover:text-og-fg\",\n          props.className,\n        )}\n      >\n        {needsModel ? (\n          <SparklesIcon className=\"size-3.5 shrink-0\" aria-hidden />\n        ) : (\n          <SelectedModelMark props={props} selected={selected} />\n        )}\n        <span className=\"og-model-policy-label-full min-w-0 truncate font-medium text-og-fg max-sm:hidden @max-[20rem]/model-controls:hidden\">\n          {needsModel ? messages.connectTitle : (selected?.label ?? fallbackName(props))}\n        </span>\n        <span className=\"og-model-policy-label-short min-w-0 truncate font-medium text-og-fg sm:hidden @max-[20rem]/model-controls:block\">\n          {needsModel\n            ? messages.connectTitle\n            : (selected?.shortLabel ?? selected?.label ?? fallbackName(props))}\n        </span>\n        {selected && !needsModel && modelOffersEffortChoice(selected.catalog) ? (\n          <span\n            className=\"og-model-policy-effort min-w-0 shrink-[9999] truncate\"\n            title={labelReasoningEffort(props.effort)}\n          >\n            {labelReasoningEffort(props.effort)}\n          </span>\n        ) : null}\n        {props.latencyMode === \"fast\" && !needsModel ? (\n          <ZapIcon\n            className=\"size-3.5 shrink-0 fill-current stroke-current text-og-fg\"\n            aria-label={messages.fast}\n            data-testid=\"model-picker-fast-icon\"\n          />\n        ) : null}\n        <ChevronDownIcon className=\"og-model-policy-chevron size-3 shrink-0 max-sm:hidden\" />\n      </button>\n\n      {open ? (\n        <Suspense fallback={null}>\n          <LazyModelPolicyPickerMenu\n            {...props}\n            anchor={trigger.currentRef}\n            contentId={contentId}\n            portalStyle={portalStyle}\n            onOpenChange={setOpen}\n          />\n        </Suspense>\n      ) : null}\n    </>\n  );\n}\n"],"mappings":"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","names":["jsx","jsx","modelDisplayName","modelLogoUrl","SparklesIcon","useState","jsx","jsxs","jsx","SparklesIcon","modelLogoUrl","modelDisplayName","effectiveRows","jsxs","useState"]}

package/dist/{chunk-VZTQ73XT.js → chunk-XEA5BCMA.js}

@@ -1,3 +1,5 @@
+"use client";
+
 // src/lib/use-portal-token-style.ts
 import {
   useCallback,
@@ -83,4 +85,4 @@ export {
   usePortalTokenSource,
   usePortalTokenStyle
 };
-//# sourceMappingURL=chunk-VZTQ73XT.js.map
+//# sourceMappingURL=chunk-XEA5BCMA.js.map

package/dist/{chunk-VZTQ73XT.js.map → chunk-XEA5BCMA.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/lib/use-portal-token-style.ts","../src/lib/composer-responsive-context.ts"],"sourcesContent":["import {\n  type CSSProperties,\n  type RefCallback,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useComposerResponsiveContext } from \"./composer-responsive-context\";\n\nexport type PortalTokenStyle = Pick<CSSProperties, \"colorScheme\"> &\n  Partial<Record<`--${string}`, string>>;\n\nexport const PORTAL_SOURCE_INLINE_SIZE = \"--og-portal-source-inline-size\";\n\n/**\n * A callback ref that publishes the currently mounted source element through\n * React state. Unlike a bare mutable ref, late mounts and replacements cause\n * consumers to render and restart their observers without polling.\n */\nexport function usePortalTokenSource<T extends HTMLElement>(): {\n  source: T | null;\n  currentRef: RefObject<T | null>;\n  ref: RefCallback<T>;\n} {\n  const currentRef = useRef<T | null>(null);\n  const [source, setSource] = useState<T | null>(null);\n  const ref = useCallback<RefCallback<T>>((node) => {\n    currentRef.current = node;\n    setSource((current) => (current === node ? current : node));\n  }, []);\n  return { source, currentRef, ref };\n}\n\n/**\n * Copy the effective SDK tokens across a portal boundary. A locally themed or\n * rebranded embed cannot rely on CSS inheritance once a portal mounts under\n * `<body>`. Ancestor theme/class/style mutations and OS color-scheme changes\n * keep the copied values live.\n */\nexport function usePortalTokenStyle(source: HTMLElement | null): PortalTokenStyle {\n  const responsiveContext = useComposerResponsiveContext();\n  const [style, setStyle] = useState<PortalTokenStyle>({});\n  useEffect(() => {\n    if (!source || typeof window === \"undefined\") return;\n    const layoutSource =\n      responsiveContext?.responsiveBasis === \"container\" ? responsiveContext.rootRef.current : null;\n    let signature = \"\";\n    const sync = () => {\n      const computed = getComputedStyle(source);\n      const next: PortalTokenStyle = { colorScheme: computed.colorScheme };\n      for (let index = 0; index < computed.length; index += 1) {\n        const property = computed.item(index);\n        if (!property.startsWith(\"--og-\")) continue;\n        next[property as `--${string}`] = computed.getPropertyValue(property);\n      }\n      if (layoutSource) {\n        const inlineSize = layoutSource.clientWidth || layoutSource.getBoundingClientRect().width;\n        if (inlineSize > 0) {\n          next[PORTAL_SOURCE_INLINE_SIZE] = `${Math.round(inlineSize * 1000) / 1000}px`;\n        }\n      }\n      const nextSignature = JSON.stringify(next);\n      if (nextSignature !== signature) {\n        signature = nextSignature;\n        setStyle(next);\n      }\n    };\n    const observers: MutationObserver[] = [];\n    if (typeof MutationObserver !== \"undefined\") {\n      let ancestor: HTMLElement | null = source;\n      while (ancestor) {\n        const observer = new MutationObserver(sync);\n        observer.observe(ancestor, {\n          attributes: true,\n          attributeFilter: [\"class\", \"data-og-density\", \"data-og-theme\", \"style\"],\n        });\n        observers.push(observer);\n        ancestor = ancestor.parentElement;\n      }\n    }\n    const resizeObserver =\n      layoutSource && typeof ResizeObserver !== \"undefined\" ? new ResizeObserver(sync) : null;\n    if (layoutSource) resizeObserver?.observe(layoutSource);\n    const colorScheme = window.matchMedia?.(\"(prefers-color-scheme: dark)\");\n    colorScheme?.addEventListener?.(\"change\", sync);\n    sync();\n    return () => {\n      for (const observer of observers) observer.disconnect();\n      resizeObserver?.disconnect();\n      colorScheme?.removeEventListener?.(\"change\", sync);\n    };\n  }, [responsiveContext?.responsiveBasis, responsiveContext?.rootRef, source]);\n  return style;\n}\n","import { createContext, useContext, type RefObject } from \"react\";\n\n/** The measurement surface used by responsive composer chrome. */\nexport type ResponsiveBasis = \"viewport\" | \"container\";\n\nexport type ComposerResponsiveContextValue = {\n  responsiveBasis: ResponsiveBasis;\n  rootRef: RefObject<HTMLDivElement | null>;\n};\n\nexport const ComposerResponsiveContext = createContext<ComposerResponsiveContextValue | null>(null);\n\nexport function useComposerResponsiveContext(): ComposerResponsiveContextValue | null {\n  return useContext(ComposerResponsiveContext);\n}\n"],"mappings":";AAAA;AAAA,EAIE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;;;ACRP,SAAS,eAAe,kBAAkC;AAUnD,IAAM,4BAA4B,cAAqD,IAAI;AAE3F,SAAS,+BAAsE;AACpF,SAAO,WAAW,yBAAyB;AAC7C;;;ADAO,IAAM,4BAA4B;AAOlC,SAAS,uBAId;AACA,QAAM,aAAa,OAAiB,IAAI;AACxC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAmB,IAAI;AACnD,QAAM,MAAM,YAA4B,CAAC,SAAS;AAChD,eAAW,UAAU;AACrB,cAAU,CAAC,YAAa,YAAY,OAAO,UAAU,IAAK;AAAA,EAC5D,GAAG,CAAC,CAAC;AACL,SAAO,EAAE,QAAQ,YAAY,IAAI;AACnC;AAQO,SAAS,oBAAoB,QAA8C;AAChF,QAAM,oBAAoB,6BAA6B;AACvD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAA2B,CAAC,CAAC;AACvD,YAAU,MAAM;AACd,QAAI,CAAC,UAAU,OAAO,WAAW,YAAa;AAC9C,UAAM,eACJ,mBAAmB,oBAAoB,cAAc,kBAAkB,QAAQ,UAAU;AAC3F,QAAI,YAAY;AAChB,UAAM,OAAO,MAAM;AACjB,YAAM,WAAW,iBAAiB,MAAM;AACxC,YAAM,OAAyB,EAAE,aAAa,SAAS,YAAY;AACnE,eAAS,QAAQ,GAAG,QAAQ,SAAS,QAAQ,SAAS,GAAG;AACvD,cAAM,WAAW,SAAS,KAAK,KAAK;AACpC,YAAI,CAAC,SAAS,WAAW,OAAO,EAAG;AACnC,aAAK,QAAyB,IAAI,SAAS,iBAAiB,QAAQ;AAAA,MACtE;AACA,UAAI,cAAc;AAChB,cAAM,aAAa,aAAa,eAAe,aAAa,sBAAsB,EAAE;AACpF,YAAI,aAAa,GAAG;AAClB,eAAK,yBAAyB,IAAI,GAAG,KAAK,MAAM,aAAa,GAAI,IAAI,GAAI;AAAA,QAC3E;AAAA,MACF;AACA,YAAM,gBAAgB,KAAK,UAAU,IAAI;AACzC,UAAI,kBAAkB,WAAW;AAC/B,oBAAY;AACZ,iBAAS,IAAI;AAAA,MACf;AAAA,IACF;AACA,UAAM,YAAgC,CAAC;AACvC,QAAI,OAAO,qBAAqB,aAAa;AAC3C,UAAI,WAA+B;AACnC,aAAO,UAAU;AACf,cAAM,WAAW,IAAI,iBAAiB,IAAI;AAC1C,iBAAS,QAAQ,UAAU;AAAA,UACzB,YAAY;AAAA,UACZ,iBAAiB,CAAC,SAAS,mBAAmB,iBAAiB,OAAO;AAAA,QACxE,CAAC;AACD,kBAAU,KAAK,QAAQ;AACvB,mBAAW,SAAS;AAAA,MACtB;AAAA,IACF;AACA,UAAM,iBACJ,gBAAgB,OAAO,mBAAmB,cAAc,IAAI,eAAe,IAAI,IAAI;AACrF,QAAI,aAAc,iBAAgB,QAAQ,YAAY;AACtD,UAAM,cAAc,OAAO,aAAa,8BAA8B;AACtE,iBAAa,mBAAmB,UAAU,IAAI;AAC9C,SAAK;AACL,WAAO,MAAM;AACX,iBAAW,YAAY,UAAW,UAAS,WAAW;AACtD,sBAAgB,WAAW;AAC3B,mBAAa,sBAAsB,UAAU,IAAI;AAAA,IACnD;AAAA,EACF,GAAG,CAAC,mBAAmB,iBAAiB,mBAAmB,SAAS,MAAM,CAAC;AAC3E,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../src/lib/use-portal-token-style.ts","../src/lib/composer-responsive-context.ts"],"sourcesContent":["import {\n  type CSSProperties,\n  type RefCallback,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useComposerResponsiveContext } from \"./composer-responsive-context\";\n\nexport type PortalTokenStyle = Pick<CSSProperties, \"colorScheme\"> &\n  Partial<Record<`--${string}`, string>>;\n\nexport const PORTAL_SOURCE_INLINE_SIZE = \"--og-portal-source-inline-size\";\n\n/**\n * A callback ref that publishes the currently mounted source element through\n * React state. Unlike a bare mutable ref, late mounts and replacements cause\n * consumers to render and restart their observers without polling.\n */\nexport function usePortalTokenSource<T extends HTMLElement>(): {\n  source: T | null;\n  currentRef: RefObject<T | null>;\n  ref: RefCallback<T>;\n} {\n  const currentRef = useRef<T | null>(null);\n  const [source, setSource] = useState<T | null>(null);\n  const ref = useCallback<RefCallback<T>>((node) => {\n    currentRef.current = node;\n    setSource((current) => (current === node ? current : node));\n  }, []);\n  return { source, currentRef, ref };\n}\n\n/**\n * Copy the effective SDK tokens across a portal boundary. A locally themed or\n * rebranded embed cannot rely on CSS inheritance once a portal mounts under\n * `<body>`. Ancestor theme/class/style mutations and OS color-scheme changes\n * keep the copied values live.\n */\nexport function usePortalTokenStyle(source: HTMLElement | null): PortalTokenStyle {\n  const responsiveContext = useComposerResponsiveContext();\n  const [style, setStyle] = useState<PortalTokenStyle>({});\n  useEffect(() => {\n    if (!source || typeof window === \"undefined\") return;\n    const layoutSource =\n      responsiveContext?.responsiveBasis === \"container\" ? responsiveContext.rootRef.current : null;\n    let signature = \"\";\n    const sync = () => {\n      const computed = getComputedStyle(source);\n      const next: PortalTokenStyle = { colorScheme: computed.colorScheme };\n      for (let index = 0; index < computed.length; index += 1) {\n        const property = computed.item(index);\n        if (!property.startsWith(\"--og-\")) continue;\n        next[property as `--${string}`] = computed.getPropertyValue(property);\n      }\n      if (layoutSource) {\n        const inlineSize = layoutSource.clientWidth || layoutSource.getBoundingClientRect().width;\n        if (inlineSize > 0) {\n          next[PORTAL_SOURCE_INLINE_SIZE] = `${Math.round(inlineSize * 1000) / 1000}px`;\n        }\n      }\n      const nextSignature = JSON.stringify(next);\n      if (nextSignature !== signature) {\n        signature = nextSignature;\n        setStyle(next);\n      }\n    };\n    const observers: MutationObserver[] = [];\n    if (typeof MutationObserver !== \"undefined\") {\n      let ancestor: HTMLElement | null = source;\n      while (ancestor) {\n        const observer = new MutationObserver(sync);\n        observer.observe(ancestor, {\n          attributes: true,\n          attributeFilter: [\"class\", \"data-og-density\", \"data-og-theme\", \"style\"],\n        });\n        observers.push(observer);\n        ancestor = ancestor.parentElement;\n      }\n    }\n    const resizeObserver =\n      layoutSource && typeof ResizeObserver !== \"undefined\" ? new ResizeObserver(sync) : null;\n    if (layoutSource) resizeObserver?.observe(layoutSource);\n    const colorScheme = window.matchMedia?.(\"(prefers-color-scheme: dark)\");\n    colorScheme?.addEventListener?.(\"change\", sync);\n    sync();\n    return () => {\n      for (const observer of observers) observer.disconnect();\n      resizeObserver?.disconnect();\n      colorScheme?.removeEventListener?.(\"change\", sync);\n    };\n  }, [responsiveContext?.responsiveBasis, responsiveContext?.rootRef, source]);\n  return style;\n}\n","import { createContext, useContext, type RefObject } from \"react\";\n\n/** The measurement surface used by responsive composer chrome. */\nexport type ResponsiveBasis = \"viewport\" | \"container\";\n\nexport type ComposerResponsiveContextValue = {\n  responsiveBasis: ResponsiveBasis;\n  rootRef: RefObject<HTMLDivElement | null>;\n};\n\nexport const ComposerResponsiveContext = createContext<ComposerResponsiveContextValue | null>(null);\n\nexport function useComposerResponsiveContext(): ComposerResponsiveContextValue | null {\n  return useContext(ComposerResponsiveContext);\n}\n"],"mappings":";;;AAAA;AAAA,EAIE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;;;ACRP,SAAS,eAAe,kBAAkC;AAUnD,IAAM,4BAA4B,cAAqD,IAAI;AAE3F,SAAS,+BAAsE;AACpF,SAAO,WAAW,yBAAyB;AAC7C;;;ADAO,IAAM,4BAA4B;AAOlC,SAAS,uBAId;AACA,QAAM,aAAa,OAAiB,IAAI;AACxC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAmB,IAAI;AACnD,QAAM,MAAM,YAA4B,CAAC,SAAS;AAChD,eAAW,UAAU;AACrB,cAAU,CAAC,YAAa,YAAY,OAAO,UAAU,IAAK;AAAA,EAC5D,GAAG,CAAC,CAAC;AACL,SAAO,EAAE,QAAQ,YAAY,IAAI;AACnC;AAQO,SAAS,oBAAoB,QAA8C;AAChF,QAAM,oBAAoB,6BAA6B;AACvD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAA2B,CAAC,CAAC;AACvD,YAAU,MAAM;AACd,QAAI,CAAC,UAAU,OAAO,WAAW,YAAa;AAC9C,UAAM,eACJ,mBAAmB,oBAAoB,cAAc,kBAAkB,QAAQ,UAAU;AAC3F,QAAI,YAAY;AAChB,UAAM,OAAO,MAAM;AACjB,YAAM,WAAW,iBAAiB,MAAM;AACxC,YAAM,OAAyB,EAAE,aAAa,SAAS,YAAY;AACnE,eAAS,QAAQ,GAAG,QAAQ,SAAS,QAAQ,SAAS,GAAG;AACvD,cAAM,WAAW,SAAS,KAAK,KAAK;AACpC,YAAI,CAAC,SAAS,WAAW,OAAO,EAAG;AACnC,aAAK,QAAyB,IAAI,SAAS,iBAAiB,QAAQ;AAAA,MACtE;AACA,UAAI,cAAc;AAChB,cAAM,aAAa,aAAa,eAAe,aAAa,sBAAsB,EAAE;AACpF,YAAI,aAAa,GAAG;AAClB,eAAK,yBAAyB,IAAI,GAAG,KAAK,MAAM,aAAa,GAAI,IAAI,GAAI;AAAA,QAC3E;AAAA,MACF;AACA,YAAM,gBAAgB,KAAK,UAAU,IAAI;AACzC,UAAI,kBAAkB,WAAW;AAC/B,oBAAY;AACZ,iBAAS,IAAI;AAAA,MACf;AAAA,IACF;AACA,UAAM,YAAgC,CAAC;AACvC,QAAI,OAAO,qBAAqB,aAAa;AAC3C,UAAI,WAA+B;AACnC,aAAO,UAAU;AACf,cAAM,WAAW,IAAI,iBAAiB,IAAI;AAC1C,iBAAS,QAAQ,UAAU;AAAA,UACzB,YAAY;AAAA,UACZ,iBAAiB,CAAC,SAAS,mBAAmB,iBAAiB,OAAO;AAAA,QACxE,CAAC;AACD,kBAAU,KAAK,QAAQ;AACvB,mBAAW,SAAS;AAAA,MACtB;AAAA,IACF;AACA,UAAM,iBACJ,gBAAgB,OAAO,mBAAmB,cAAc,IAAI,eAAe,IAAI,IAAI;AACrF,QAAI,aAAc,iBAAgB,QAAQ,YAAY;AACtD,UAAM,cAAc,OAAO,aAAa,8BAA8B;AACtE,iBAAa,mBAAmB,UAAU,IAAI;AAC9C,SAAK;AACL,WAAO,MAAM;AACX,iBAAW,YAAY,UAAW,UAAS,WAAW;AACtD,sBAAgB,WAAW;AAC3B,mBAAa,sBAAsB,UAAU,IAAI;AAAA,IACnD;AAAA,EACF,GAAG,CAAC,mBAAmB,iBAAiB,mBAAmB,SAAS,MAAM,CAAC;AAC3E,SAAO;AACT;","names":[]}