@opengeni/react 0.57.0 → 1.0.2-canary.37191796234001

package/src/components/tip-follow.ts

@@ -1,19 +1,22 @@
 /* ----------------------------------------------------------------------------
    Tip-follow camera (pure)
 
-   DOM truth is immediate; the camera eases down toward the layout tip.
+   DOM truth is immediate; while pinned, the viewport tracks new layout growth
+   immediately so already-rendered content is never hidden behind the camera.
+   Any debt that existed before the growth still closes through the camera.
    No React, no DOM — the shell reads metrics, calls step, writes scrollTop.
 
-   One law while pinned — second-order camera (no hard first bite):
+   One law for pre-existing debt — second-order camera:
 
      desiredVel = debt / τ
      scrollVel  → exponential approach to desiredVel (accel τ = k·τ)
      scrollTop += scrollVel · dt   (clamp: no overshoot past tip)
 
-   - Debt jumps with layout; velocity cannot — so motion eases in, then as
-     debt falls desiredVel→0 and velocity eases out (soft settle).
+   - Layout growth advances cameraTop by the same amount, preserving rather
+     than increasing existing debt. This keeps the visible stream truthful.
+   - Existing debt eases out as desiredVel→0 (soft settle).
    - τ still adapts (calm / catch-up / line / idle settle).
-   - maxStep is a speed ceiling only, never a one-frame glue.
+   - maxStep is a speed ceiling for catch-up, never a source of stream lag.
    - Shrink is separate: compensate Δh so collapse doesn't fight the ease
    - Snap only for first paint / reduced motion / cold oversized jumps
    -------------------------------------------------------------------------- */
@@ -197,6 +200,11 @@ export function tipFollowNoteGrowth(
   if (previous <= 0) {
     return { ...state, lastHeight: height };
   }
+  if (height < previous && previous - height <= TIP_FOLLOW_SHRINK_EPS_PX) {
+    // Match viewport-shrink deadband memory: the shell retains the paired
+    // pre-shrink scrollTop and this state retains the corresponding height.
+    return state;
+  }
   if (height <= previous) {
     return { ...state, lastHeight: height };
   }
@@ -310,7 +318,7 @@ export function tipFollowMaxStepPx(
     TIP_FOLLOW_CALM_MAX_PX_S +
     (TIP_FOLLOW_BURST_MAX_PX_S - TIP_FOLLOW_CALM_MAX_PX_S) * blend * blend;
   if (hot && frameGrowthPx > 0 && dtMs > 0) {
-    // Allow tracking this frame's growth rate (growthTrack uses a fraction).
+    // Allow pre-existing debt to close without falling behind current growth.
     maxPxS = Math.max(maxPxS, (frameGrowthPx / dtMs) * 1000);
   }
   if (hot && growthVelocityPxPerSec > TIP_FOLLOW_CALM_MAX_PX_S) {
@@ -438,6 +446,53 @@ export function tipFollowCompensateShrink(
   return Math.max(0, Math.min(maxScroll, scrollTop - delta));
 }
 
+export type TipFollowContentShrinkBaseline = {
+  scrollHeight: number;
+  scrollTop: number;
+};
+
+export type TipFollowContentShrinkObservation = {
+  baseline: TipFollowContentShrinkBaseline | null;
+  compensatedScrollTop: number | null;
+};
+
+/**
+ * Retain the geometry from the first sub-epsilon content-shrink frame until
+ * the cumulative collapse crosses the deadband. Browsers may clamp scrollTop
+ * after every tiny frame, so compensating from the latest DOM top would count
+ * those already-applied clamps twice and make the result animation-cadence
+ * dependent.
+ */
+export function tipFollowObserveContentShrink(
+  baseline: TipFollowContentShrinkBaseline | null,
+  previousHeight: number,
+  previousScrollTop: number,
+  nextHeight: number,
+  clientHeight: number,
+  epsPx: number = TIP_FOLLOW_SHRINK_EPS_PX,
+): TipFollowContentShrinkObservation {
+  if (previousHeight <= 0 || nextHeight >= previousHeight) {
+    return { baseline: null, compensatedScrollTop: null };
+  }
+  const retained = baseline ?? {
+    scrollHeight: previousHeight,
+    scrollTop: previousScrollTop,
+  };
+  if (retained.scrollHeight - nextHeight <= epsPx) {
+    return { baseline: retained, compensatedScrollTop: null };
+  }
+  return {
+    baseline: null,
+    compensatedScrollTop: tipFollowCompensateShrink(
+      retained.scrollTop,
+      retained.scrollHeight,
+      nextHeight,
+      clientHeight,
+      epsPx,
+    ),
+  };
+}
+
 /**
  * Viewport shrank (SessionChrome / composer / window). maxScroll rises by ≈Δc;
  * keep the same tip distance: scrollTop += Δc. Without this, pinned follow only
@@ -502,6 +557,14 @@ export function tipFollowStep(
     );
   }
   const target = targetScrollTop(scrollHeight, clientHeight);
+  if (pinned && frameGrowth > 0) {
+    // Preserve the distance that existed before this layout growth instead of
+    // manufacturing new visual debt. The content is already in the DOM; while
+    // pinned, hiding it behind an eased scroll makes frontend streaming appear
+    // slower than the provider and leaves a visible catch-up tail after the
+    // final token. Existing debt still goes through the camera below.
+    cameraTop = Math.min(target, cameraTop + frameGrowth);
+  }
   const debt = target - cameraTop;
   const hot = now < noted.hotUntil;
   const settling = !hot && Math.abs(debt) < TIP_FOLLOW_CATCHUP_DEBT_PX;
@@ -550,7 +613,7 @@ export function tipFollowStep(
   const dtSec = dt / 1000;
   const tauSec = Math.max(tau / 1000, 1e-3);
   // P-gain: held desiredVel would close debt in ~τ. Velocity cannot jump —
-  // it eases toward desiredVel, so a new line accelerates in then settles out.
+  // pre-existing debt accelerates toward desiredVel and then settles out.
   const desiredVel = debt / tauSec;
   const accelTauSec = Math.max(tauSec * TIP_FOLLOW_ACCEL_TAU_FRAC, 0.02);
   const velAlpha = 1 - Math.exp(-dtSec / accelTauSec);

package/src/components/tooltip.tsx

@@ -8,10 +8,19 @@
  * tips and look like a blank white bubble.
  */
 import { Tooltip as TooltipPrimitive } from "radix-ui";
-import { createContext, useContext, type ComponentProps, type CSSProperties } from "react";
+import {
+  createContext,
+  useContext,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentProps,
+  type CSSProperties,
+} from "react";
 
 import { cn } from "../lib/cn";
-import { usePortalTokenSource, usePortalTokenStyle } from "../lib/use-portal-token-style";
+import { usePortalTokenStyle } from "../lib/use-portal-token-style";
 
 type TooltipSourceContextValue = {
   source: HTMLElement | null;
@@ -28,10 +37,34 @@ function TooltipProvider({
 }
 
 function Tooltip({ children, ...props }: ComponentProps<typeof TooltipPrimitive.Root>) {
-  const source = usePortalTokenSource<HTMLElement>();
+  const { onOpenChange, ...rootProps } = props;
+  const sourceRef = useRef<HTMLElement | null>(null);
+  const sourcePublishedRef = useRef(false);
+  const [source, setSource] = useState<HTMLElement | null>(null);
+  const ref = useRef((node: HTMLElement | null) => {
+    sourceRef.current = node;
+    if (sourcePublishedRef.current) setSource(node);
+  }).current;
+  useLayoutEffect(() => {
+    if (rootProps.open === true || rootProps.defaultOpen === true) {
+      sourcePublishedRef.current = true;
+      setSource(sourceRef.current);
+    }
+  }, [rootProps.defaultOpen, rootProps.open]);
+  const sourceContext = useMemo(() => ({ source, ref }), [ref, source]);
   return (
-    <TooltipSourceContext.Provider value={source}>
-      <TooltipPrimitive.Root data-slot="tooltip" {...props}>
+    <TooltipSourceContext.Provider value={sourceContext}>
+      <TooltipPrimitive.Root
+        data-slot="tooltip"
+        onOpenChange={(open) => {
+          if (open) {
+            sourcePublishedRef.current = true;
+            setSource(sourceRef.current);
+          }
+          onOpenChange?.(open);
+        }}
+        {...rootProps}
+      >
         {children}
       </TooltipPrimitive.Root>
     </TooltipSourceContext.Provider>

package/src/components/usage-limit-notice.tsx

@@ -0,0 +1,179 @@
+import type { UsageAllowancePeriod, WorkspaceUsageResponse } from "@opengeni/sdk/usage-allowances";
+import { GaugeIcon, XIcon } from "lucide-react";
+import { useEffect, useState, type ReactNode } from "react";
+
+import { useUsage, type UsageClientLike } from "../hooks/use-usage";
+import { cn } from "../lib/cn";
+import {
+  allowanceLabels,
+  allowanceResetSentence,
+  formatAllowanceInstant,
+  type AllowanceLabels,
+} from "../usage/allowance-copy";
+import { summarizeUsage, usagePercentLabel, type UsageSummary } from "../usage/summary";
+
+export type UsageLimitNoticeLabels = AllowanceLabels & {
+  /** "You've used 85% of your usage limit." */
+  memberWarning: (percent: string) => string;
+  /** "This workspace has used 85% of its usage budget." */
+  workspaceWarning: (percent: string) => string;
+  memberExhausted: string;
+  workspaceExhausted: string;
+  dismiss: string;
+};
+
+export const DEFAULT_USAGE_LIMIT_NOTICE_LABELS: UsageLimitNoticeLabels = {
+  ...allowanceLabels(),
+  memberWarning: (percent) => `You've used ${percent}% of your usage limit.`,
+  workspaceWarning: (percent) => `This workspace has used ${percent}% of its usage budget.`,
+  memberExhausted: "You've reached your usage limit.",
+  workspaceExhausted: "This workspace has reached its usage limit.",
+  dismiss: "Dismiss",
+};
+
+type NoticeBaseProps = {
+  labels?: Partial<UsageLimitNoticeLabels> | undefined;
+  /**
+   * Your own next step beside the message, for example an "Upgrade" or
+   * "Request more" button. Receives the summary so it can differ by scope.
+   */
+  action?: ((summary: UsageSummary) => ReactNode) | undefined;
+  /**
+   * Remember a dismissed warning for this browser tab. The key should name the
+   * workspace; the period and scope are added for you, so a new warning (or a
+   * new period) shows again. Reaching the limit is never dismissible.
+   */
+  dismissStorageKey?: string | undefined;
+  className?: string | undefined;
+};
+
+export type UsageLimitNoticeProps = NoticeBaseProps & {
+  /** A usage response you already loaded; omit it to read `/usage/me`. */
+  usage?: WorkspaceUsageResponse | null | undefined;
+  client?: UsageClientLike | undefined;
+  workspaceId?: string | undefined;
+  period?: UsageAllowancePeriod | undefined;
+  refreshKey?: unknown;
+};
+
+/**
+ * A calm line for the composer when a member is close to, or at, a usage
+ * limit: what happened, who can raise it, and when it resets. Renders nothing
+ * while usage is comfortable, unlimited, loading, or unreadable.
+ */
+export function UsageLimitNotice({
+  usage,
+  client,
+  workspaceId,
+  period,
+  refreshKey,
+  ...view
+}: UsageLimitNoticeProps) {
+  if (usage !== undefined) {
+    return <UsageLimitNoticeView {...view} summary={usage ? summarizeUsage(usage) : null} />;
+  }
+  return (
+    <LoadingNotice
+      {...view}
+      client={client}
+      workspaceId={workspaceId}
+      period={period}
+      refreshKey={refreshKey}
+    />
+  );
+}
+
+function LoadingNotice({
+  client,
+  workspaceId,
+  period,
+  refreshKey,
+  ...view
+}: NoticeBaseProps &
+  Pick<UsageLimitNoticeProps, "client" | "workspaceId" | "period" | "refreshKey">) {
+  const { summary } = useUsage({ client, workspaceId, period, refreshKey });
+  return <UsageLimitNoticeView {...view} summary={summary} />;
+}
+
+function readDismissed(key: string | null): boolean {
+  if (!key || typeof sessionStorage === "undefined") return false;
+  try {
+    return sessionStorage.getItem(key) === "1";
+  } catch {
+    return false;
+  }
+}
+
+/** Presentational notice for a summary you computed (`summarizeUsage`). */
+export function UsageLimitNoticeView({
+  summary,
+  labels: overrides,
+  action,
+  dismissStorageKey,
+  className,
+}: NoticeBaseProps & { summary: UsageSummary | null }) {
+  const labels = { ...DEFAULT_USAGE_LIMIT_NOTICE_LABELS, ...overrides };
+  const binding = summary?.binding ?? null;
+  const state = summary?.state;
+  const key =
+    dismissStorageKey && binding && state === "warning"
+      ? `${dismissStorageKey}:warning:${binding.scope}:${binding.resetsAt ?? "none"}`
+      : null;
+  const [dismissed, setDismissed] = useState(() => readDismissed(key));
+  useEffect(() => setDismissed(readDismissed(key)), [key]);
+  if (!summary || !binding || (state !== "warning" && state !== "exhausted")) return null;
+  if (state === "warning" && dismissed) return null;
+  const workspace = binding.scope === "workspace";
+  const exhausted = state === "exhausted";
+  const headline = exhausted
+    ? workspace
+      ? labels.workspaceExhausted
+      : labels.memberExhausted
+    : workspace
+      ? labels.workspaceWarning(usagePercentLabel(binding.fraction))
+      : labels.memberWarning(usagePercentLabel(binding.fraction));
+  const reset = allowanceResetSentence(labels, binding.resetsAt);
+  const dismiss = () => {
+    setDismissed(true);
+    if (!key) return;
+    try {
+      sessionStorage.setItem(key, "1");
+    } catch {
+      // Storage can be unavailable (privacy mode); the in-memory dismissal holds.
+    }
+  };
+  return (
+    <div
+      role="status"
+      data-og-usage-notice={exhausted ? "exhausted" : "warning"}
+      data-og-usage-scope={binding.scope}
+      className={cn(
+        "og-root flex min-w-0 items-start gap-2 px-3.5 pt-2.5 text-og-sm md:px-4",
+        className,
+      )}
+    >
+      <GaugeIcon aria-hidden className="mt-0.5 size-3.5 shrink-0 text-og-status-waiting" />
+      <p className="min-w-0 flex-1 text-og-fg-muted">
+        <span className={cn(exhausted && "font-medium text-og-fg")}>{headline}</span>{" "}
+        {exhausted ? <>{workspace ? labels.workspaceRemedy : labels.memberRemedy} </> : null}
+        <span
+          className="whitespace-nowrap"
+          title={binding.resetsAt ? formatAllowanceInstant(binding.resetsAt) : undefined}
+        >
+          {reset}
+        </span>
+      </p>
+      {action ? <div className="shrink-0">{action(summary)}</div> : null}
+      {!exhausted ? (
+        <button
+          type="button"
+          aria-label={labels.dismiss}
+          onClick={dismiss}
+          className="-mt-0.5 -mr-1 grid size-6 shrink-0 place-items-center rounded-og-sm text-og-fg-subtle transition hover:bg-og-surface-2 hover:text-og-fg focus-visible:outline-2 focus-visible:outline-og-accent pointer-coarse:size-9"
+        >
+          <XIcon aria-hidden className="size-3.5" />
+        </button>
+      ) : null}
+    </div>
+  );
+}