@noya-app/noya-designsystem 0.1.54 → 0.1.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.54",
+  "version": "0.1.55",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -25,7 +25,7 @@
     "@noya-app/noya-colorpicker": "0.1.21",
     "@noya-app/noya-utils": "0.1.5",
     "@noya-app/noya-geometry": "0.1.11",
-    "@noya-app/noya-icons": "0.1.8",
+    "@noya-app/noya-icons": "0.1.9",
     "@noya-app/noya-keymap": "0.1.3",
     "@noya-app/noya-tailwind-config": "0.1.3",
     "@radix-ui/primitive": "^1.0.0",

package/src/components/Button.tsx

@@ -7,7 +7,10 @@ import React, {
   useMemo,
 } from "react";
 import { cx, mergeConflictingClassNames } from "../utils/classNames";
+import { renderIcon } from "./Icons";
+import { Spacer } from "./Spacer";
 import { Tooltip } from "./Tooltip";
+import type { MenuItemIcon } from "./internal/Menu";
 
 type ButtonVariant =
   | "normal"
@@ -48,6 +51,8 @@ export interface ButtonRootProps {
   className?: string;
   style?: CSSProperties;
   tabIndex?: number;
+  icon?: MenuItemIcon;
+  iconRight?: MenuItemIcon;
   children: ReactNode;
   active?: boolean;
   disabled?: boolean;
@@ -71,6 +76,8 @@ export const Button = forwardRef(function Button(
     className,
     style,
     tabIndex,
+    icon,
+    iconRight,
     tooltip,
     active = false,
     disabled = false,
@@ -128,7 +135,13 @@ export const Button = forwardRef(function Button(
         className="min-h-[19px] flex items-center flex-1 justify-center leading-[15px]"
         style={contentStyle}
       >
+        {icon && renderIcon(icon)}
+        {icon && children && <Spacer.Horizontal inline size={6} />}
         {children}
+        {iconRight && (icon || children) && (
+          <Spacer.Horizontal inline size={6} />
+        )}
+        {iconRight && renderIcon(iconRight)}
       </span>
     </Component>
   );

package/src/components/Dialog.tsx

@@ -30,9 +30,8 @@ const StyledContent = forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cx(
-        `
-      fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 
-      w-[90vw] max-w-[450px] max-h-[85vh] p-dialog-padding rounded-[2px] 
+        `fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 
+      w-[90vw] max-w-[550px] max-h-[85vh] p-dialog-padding rounded-[2px] 
       font-sans text-heading5 font-normal leading-[19px] text-text-muted 
       bg-popover-background pointer-events-all z-[1000] focus:outline-none 
       shadow-dialog-shadow
@@ -54,7 +53,7 @@ const StyledTitle = forwardRef<
   <DialogPrimitive.Title
     ref={ref}
     className={cx(
-      `m-0 font-sans text-base font-normal leading-[1.4] text-text `,
+      `m-0 font-sans text-heading3 font-medium leading-[1.4] text-text `,
       className
     )}
     {...props}
@@ -152,7 +151,6 @@ export const Dialog = forwardRef(function Dialog(
         )}
         {description && (
           <>
-            <Spacer.Vertical size={10} />
             <StyledDescription>{description}</StyledDescription>
             <Spacer.Vertical size={20} />
           </>

package/src/components/Grid.tsx

@@ -235,7 +235,9 @@ export const Grid = memoGeneric(
                         <span
                           {...props}
                           className={cx(
-                            isSelected && "text-selected-list-item-text",
+                            isSelected
+                              ? "text-selected-list-item-text"
+                              : "text-text",
                             "truncate select-none"
                           )}
                         />

package/src/components/GridView.tsx

@@ -194,6 +194,7 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
         <>
           <Spacer.Vertical size={8} />
           <ItemTitle>{title || " "}</ItemTitle>
+          <Spacer.Vertical size={2} />
           <ItemDescription>{subtitle || " "}</ItemDescription>
         </>
       )}

package/src/components/InputField.tsx

@@ -239,7 +239,7 @@ const InputElement = forwardRef(
         : size === "large"
           ? "py-2.5 text-heading5"
           : size === "medium"
-            ? "py-1  text-heading5"
+            ? "py-1 text-heading5"
             : $variant === "bare" && "py-1 -m-1",
       className
     );
@@ -488,7 +488,9 @@ interface InputFieldRootProps {
   id?: string;
   children?: ReactNode;
   start?: ReactNode;
+  startClassName?: string;
   end?: ReactNode;
+  endClassName?: string;
   label?: ReactNode;
   width?: number;
   startWidth?: number;
@@ -520,6 +522,8 @@ function InputFieldRoot({
   className,
   start,
   end,
+  startClassName,
+  endClassName,
   label: labelProp,
 }: InputFieldRootProps) {
   const randomId = useId();
@@ -577,12 +581,15 @@ function InputFieldRoot({
     <RootContainer $width={width} style={style} className={className}>
       {children}
       {start && (
-        <span ref={startRef} className={startBaseStyles}>
+        <span ref={startRef} className={cx(startBaseStyles, startClassName)}>
           {start}
         </span>
       )}
       {(end || label) && (
-        <span ref={endRef} className={cx(endStyles, label && end && "gap-1.5")}>
+        <span
+          ref={endRef}
+          className={cx(endStyles, label && end && "gap-1.5", endClassName)}
+        >
           {labelProp
             ? insetLabel
             : label && labelPosition === "inset" && insetLabel}

package/src/components/Popover.tsx

@@ -1,5 +1,7 @@
+import { useControlledOrUncontrolled } from "@noya-app/react-utils";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import React, { ComponentProps } from "react";
+import React, { ComponentProps, useEffect, useId, useRef } from "react";
+import { useOpenPortalsControls } from "../contexts/OpenPortalsContext";
 import {
   portalScopeProps,
   usePortalScopeId,
@@ -34,6 +36,7 @@ interface Props
   onClickClose?: () => void;
   showArrow?: boolean;
   className?: string;
+  portalContainer?: HTMLElement | null;
 }
 
 export const popoverStyle = {
@@ -59,15 +62,36 @@ export function Popover({
   onFocusOutside,
   onClickClose,
   className,
+  portalContainer,
 }: Props) {
+  const defaultId = useId();
   const portalScopeId = usePortalScopeId();
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useControlledOrUncontrolled({
+    value: open,
+    onChange: onOpenChange,
+    defaultValue: false,
+  });
+
+  const { addOpenPortal, removeOpenPortal } = useOpenPortalsControls();
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    addOpenPortal(portalScopeId || defaultId);
+
+    return () => {
+      removeOpenPortal(portalScopeId || defaultId);
+    };
+  }, [addOpenPortal, isOpen, portalScopeId, removeOpenPortal, defaultId]);
 
   return (
-    <PopoverPrimitive.Root open={open} onOpenChange={onOpenChange}>
+    <PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>
       <PopoverPrimitive.Trigger asChild>{trigger}</PopoverPrimitive.Trigger>
-      <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Portal container={portalContainer}>
         <PopoverPrimitive.Content
           {...portalScopeProps(portalScopeId)}
+          ref={contentRef}
           className={cx(
             popoverStyle.base,
             variant === "large" && popoverStyle.large,
@@ -81,7 +105,18 @@ export function Popover({
           onCloseAutoFocus={onCloseAutoFocus}
           onInteractOutside={onInteractOutside}
           onFocusOutside={onFocusOutside}
-          onPointerDownOutside={onPointerDownOutside}
+          onPointerDownOutside={(event) => {
+            if (
+              isEventInsideElement(
+                event.detail.originalEvent,
+                contentRef.current
+              )
+            ) {
+              event.preventDefault();
+            }
+
+            onPointerDownOutside?.(event);
+          }}
           collisionPadding={8}
           arrowPadding={2}
           // Don't propagate pointer down events to the canvas
@@ -109,3 +144,32 @@ export function Popover({
     </PopoverPrimitive.Root>
   );
 }
+
+/**
+ * Radix ignores pointer-events on the body when a popover is open.
+ * This function checks if an event is inside an element by temporarily
+ * setting pointer-events to auto and then restoring it afterward.
+ */
+function isEventInsideElement(
+  event: PointerEvent,
+  element: HTMLElement | null
+) {
+  if (!element) return false;
+
+  const body = document.body;
+  const originalPointerEvents = body.style.pointerEvents;
+  body.style.pointerEvents = "auto";
+
+  // Get all elements at the point
+  const elementsAtPoint = document.elementsFromPoint(
+    event.clientX,
+    event.clientY
+  );
+
+  // Restore original pointer-events
+  body.style.pointerEvents = originalPointerEvents;
+
+  const target = elementsAtPoint.at(0);
+
+  return target && element.contains(target);
+}

package/src/components/SegmentedControl.tsx

@@ -15,6 +15,7 @@ import { SelectableMenuItem } from "./internal/Menu";
 import { Tooltip } from "./Tooltip";
 
 type SegmentedControlColorScheme = "primary" | "secondary";
+type SegmentedControlVariant = "default" | "tabs";
 
 type SegmentedControlContextValue = {
   /** @default primary */
@@ -35,6 +36,7 @@ export interface SegmentedControlProps<T extends string> {
   items: SegmentedControlItemProps<T>[];
   className?: string;
   style?: React.CSSProperties;
+  variant?: SegmentedControlVariant;
 }
 
 export type SegmentedControlItemProps<T extends string> = {
@@ -42,6 +44,7 @@ export type SegmentedControlItemProps<T extends string> = {
   className?: string;
   style?: React.CSSProperties;
   tooltip?: ReactNode;
+  variant?: SegmentedControlVariant;
 } & Pick<
   SelectableMenuItem<T>,
   "value" | "disabled" | "icon" | "role" | "title"
@@ -57,6 +60,7 @@ const SegmentedControlItem = forwardRef(function SegmentedControlItem<
     disabled = false,
     icon,
     className,
+    variant = "default",
     ...props
   }: SegmentedControlItemProps<T>,
   forwardedRef: React.ForwardedRef<HTMLButtonElement>
@@ -69,27 +73,42 @@ const SegmentedControlItem = forwardRef(function SegmentedControlItem<
       value={(value ?? "").toString()}
       disabled={disabled}
       className={cx(
-        "font-sans text-button font-normal relative flex-1 appearance-none text-segmented-control-item rounded inline-flex gap-1.5 items-center justify-center align-middle text-center focus:outline-none transition-colors",
-        colorScheme === "secondary"
-          ? "focus:ring-2 focus:ring-secondary focus:ring-offset-1"
-          : "focus:ring-2 focus:ring-primary focus:ring-offset-1",
-        colorScheme === "secondary"
-          ? "aria-checked:bg-secondary aria-checked:text-white"
-          : colorScheme === "primary"
-            ? "aria-checked:bg-primary aria-checked:text-white"
-            : "aria-checked:bg-background aria-checked:text-text",
+        "group",
+        "flex items-center justify-center",
+        "font-sans text-button relative flex-1 appearance-none text-segmented-control-item focus:outline-none transition-colors",
+        variant === "tabs" ? "font-semibold" : "font-normal",
+        variant === "tabs"
+          ? ""
+          : colorScheme === "secondary"
+            ? "focus:ring-2 focus:ring-secondary focus:ring-offset-1"
+            : "focus:ring-2 focus:ring-primary focus:ring-offset-1",
+        variant === "tabs"
+          ? "aria-checked:text-primary"
+          : colorScheme === "secondary"
+            ? "aria-checked:bg-secondary aria-checked:text-white"
+            : colorScheme === "primary"
+              ? "aria-checked:bg-primary aria-checked:text-white"
+              : "aria-checked:bg-background aria-checked:text-text",
         "focus:z-interactable",
-        "aria-checked:shadow-segment",
-        "whitespace-pre px-1",
-        "border-r border-divider last:border-r-0",
-        "aria-checked:border-r-transparent",
-        "[&:has(+[aria-checked=true])]:border-r-transparent",
+        variant === "default"
+          ? "px-1 rounded aria-checked:shadow-segment"
+          : "px-1.5 border-y-2 border-y-transparent aria-checked:border-b-primary",
+        variant === "default" &&
+          "border-r border-divider last:border-r-0 aria-checked:border-r-transparent [&:has(+[aria-checked=true])]:border-r-transparent",
         className
       )}
       {...props}
     >
-      {icon && renderIcon(icon)}
-      {title}
+      <span
+        className={cx(
+          "inline-flex whitespace-pre flex-nowrap gap-1.5 items-center justify-center align-middle text-center",
+          variant === "tabs" &&
+            "group-focus:ring-2 group-focus:ring-primary-pastel group-focus:ring-offset-2"
+        )}
+      >
+        {icon && renderIcon(icon)}
+        {title}
+      </span>
     </ToggleGroupPrimitive.Item>
   );
 
@@ -109,6 +128,7 @@ export const SegmentedControl = memoGeneric(function SegmentedControl<
   colorScheme,
   allowEmpty,
   items,
+  variant = "default",
   className,
   style,
 }: SegmentedControlProps<T>) {
@@ -131,7 +151,10 @@ export const SegmentedControl = memoGeneric(function SegmentedControl<
         value={value}
         onValueChange={handleValueChange}
         className={cx(
-          `grid appearance-none relative outline-none min-h-input-height rounded bg-input-background py-0.5 px-0.5`,
+          `appearance-none relative outline-none`,
+          variant === "default" &&
+            "grid min-h-input-height bg-input-background rounded py-0.5 px-0.5",
+          variant === "tabs" && "flex gap-1.5 min-h-[33px]",
           className
         )}
         style={{
@@ -140,7 +163,7 @@ export const SegmentedControl = memoGeneric(function SegmentedControl<
         }}
       >
         {items.map((item, index) => (
-          <SegmentedControlItem key={index} {...item} />
+          <SegmentedControlItem key={index} {...item} variant={variant} />
         ))}
       </ToggleGroupPrimitive.Root>
     </SegmentedControlContext.Provider>

package/src/components/SelectionToolbar.tsx

@@ -7,6 +7,7 @@ import { useSize } from "@noya-app/react-utils";
 import * as PopperPrimitive from "@radix-ui/react-popper";
 import type { MeasurableElement } from "@radix-ui/utils";
 import React, { CSSProperties, memo, useMemo } from "react";
+import { createPortal } from "react-dom";
 
 // Create a Measurable from a Rect
 const createVirtualElement = (rect: Rect): MeasurableElement => ({
@@ -26,12 +27,14 @@ const createVirtualElement = (rect: Rect): MeasurableElement => ({
 type SelectionToolbarContainerProps = {
   rect: Rect;
   children: React.ReactNode;
+  portalContainer?: HTMLElement | null;
 };
 
 export const SelectionToolbarContainer = memo(
   function SelectionToolbarContainer({
     rect,
     children,
+    portalContainer,
   }: SelectionToolbarContainerProps) {
     const portalScopeId = usePortalScopeId();
     const containerRef = React.useRef<HTMLDivElement>(null);
@@ -45,31 +48,41 @@ export const SelectionToolbarContainer = memo(
       [rect]
     );
 
+    const popperContent = (
+      <PopperPrimitive.Content
+        {...portalScopeProps(portalScopeId)}
+        side="top"
+        sideOffset={10}
+        align="center"
+        avoidCollisions
+        collisionPadding={10}
+        contentEditable={false}
+        style={{
+          zIndex: 1000,
+          opacity: size ? 1 : 0,
+          transition: "opacity 0.2s ease-in-out",
+          ["--n-input-background" as keyof CSSProperties]: "transparent",
+        }}
+      >
+        <div
+          ref={containerRef}
+          className="flex gap-1 bg-popover-background rounded shadow-popover p-1"
+          onClick={(e) => e.stopPropagation()}
+          onMouseDown={(e) => e.stopPropagation()}
+          onPointerDown={(e) => e.stopPropagation()}
+          onWheel={(e) => e.stopPropagation()}
+        >
+          {children}
+        </div>
+      </PopperPrimitive.Content>
+    );
+
     return (
       <PopperPrimitive.Root>
         <PopperPrimitive.Anchor virtualRef={virtualRef} />
-        <PopperPrimitive.Content
-          {...portalScopeProps(portalScopeId)}
-          side="top"
-          sideOffset={10}
-          align="center"
-          avoidCollisions
-          collisionPadding={10}
-          contentEditable={false}
-          style={{
-            zIndex: 1000,
-            opacity: size ? 1 : 0,
-            transition: "opacity 0.2s ease-in-out",
-            ["--n-input-background" as keyof CSSProperties]: "transparent",
-          }}
-        >
-          <div
-            ref={containerRef}
-            className="flex gap-1 bg-popover-background rounded shadow-popover p-1"
-          >
-            {children}
-          </div>
-        </PopperPrimitive.Content>
+        {portalContainer
+          ? createPortal(popperContent, portalContainer)
+          : popperContent}
       </PopperPrimitive.Root>
     );
   }

package/src/components/Toolbar.tsx

@@ -1,4 +1,3 @@
-import { DropdownChevronIcon } from "@noya-app/noya-icons";
 import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
 import React from "react";
 
@@ -7,7 +6,6 @@ import { BaseToolbar } from "./BaseToolbar";
 import { Button } from "./Button";
 import { DividerVertical } from "./Divider";
 import { DropdownMenu } from "./DropdownMenu";
-import { renderIcon } from "./Icons";
 import {
   getKeyboardShortcutsForMenuItems,
   isSelectableMenuItem,
@@ -15,7 +13,6 @@ import {
   SelectableMenuItem,
   SubMenuItem,
 } from "./internal/Menu";
-import { Spacer } from "./Spacer";
 import { Tooltip } from "./Tooltip";
 
 const iconButtonStyle = {
@@ -46,12 +43,13 @@ export const ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown<
         }
       }}
     >
-      <Button disabled={item.disabled} active={item.checked || open}>
-        {item.icon && renderIcon(item.icon)}
-        {item.title && item.icon && <Spacer.Horizontal inline size={6} />}
+      <Button
+        disabled={item.disabled}
+        active={item.checked || open}
+        icon={item.icon}
+        iconRight="DropdownChevronIcon"
+      >
         {item.title}
-        <Spacer.Horizontal inline size={6} />
-        <DropdownChevronIcon />
       </Button>
     </DropdownMenu>
   );
@@ -70,6 +68,7 @@ export const ToolbarMenuButton = memoGeneric(function ToolbarMenuButton<
     <Button
       disabled={item.disabled}
       active={item.checked}
+      icon={item.icon}
       style={item.icon && !item.title ? iconButtonStyle : undefined}
       onClick={() => {
         if (onSelectMenuItem && item.value) {
@@ -77,8 +76,6 @@ export const ToolbarMenuButton = memoGeneric(function ToolbarMenuButton<
         }
       }}
     >
-      {item.icon && renderIcon(item.icon)}
-      {item.title && item.icon && <Spacer.Horizontal inline size={6} />}
       {item.title}
     </Button>
   );

package/src/components/connected-users-menu/ConnectedUsersMenuLayout.tsx

@@ -1,12 +1,7 @@
-import { cssVars } from "../../theme";
-
-import { ChatBubbleWithDotsIcon } from "@noya-app/noya-icons";
 import React from "react";
 import { INPUT_HEIGHT } from "../../theme";
-import { colorFromString } from "../../utils/colorFromString";
 import { Avatar, AvatarProps, AvatarStack } from "../Avatar";
 import Button from "../Button";
-import { Spacer } from "../Spacer";
 import { Small } from "../Text";
 import { Tooltip } from "../Tooltip";
 
@@ -25,14 +20,12 @@ export const UserAvatar = ({ userId, name, image }: AvatarProps) => (
 
 type ConnectedUsersMenuLayoutProps = {
   renderUsers: () => React.ReactNode;
-  currentUserId?: string;
   launchAIAssistant?: () => void;
   isAssistantOpen?: boolean;
 };
 
 export const ConnectedUsersMenuLayout = ({
   renderUsers,
-  currentUserId,
   launchAIAssistant,
   isAssistantOpen,
 }: ConnectedUsersMenuLayoutProps) => {
@@ -41,29 +34,13 @@ export const ConnectedUsersMenuLayout = ({
       <AvatarStack size={INPUT_HEIGHT} className="mr-1">
         {renderUsers()}
       </AvatarStack>
-
-      {/* AI Assistant Avatar */}
       {launchAIAssistant && (
-        <Tooltip
-          content={
-            <div className="flex flex-col">
-              <Small>AI Assistant</Small>
-            </div>
-          }
-        >
+        <Tooltip content="AI Assistant">
           <Button
-            variant={isAssistantOpen ? "secondary" : undefined}
+            active={isAssistantOpen}
             onClick={launchAIAssistant}
-            style={{
-              backgroundColor: isAssistantOpen
-                ? colorFromString(currentUserId ?? "")
-                : undefined,
-            }}
+            icon="ChatBubbleWithDotsIcon"
           >
-            <ChatBubbleWithDotsIcon
-              color={isAssistantOpen ? undefined : cssVars.colors.icon}
-            />
-            <Spacer.Horizontal inline size={6} />
             AI
           </Button>
         </Tooltip>

package/src/contexts/DesignSystemConfiguration.tsx

@@ -3,6 +3,7 @@ import * as React from "react";
 import { ToastProvider } from "../components/Toast";
 import { DialogProvider } from "./DialogContext";
 import { FloatingWindowProvider } from "./FloatingWindowContext";
+import { OpenPortalsProvider } from "./OpenPortalsContext";
 
 export type DesignSystemConfigurationContextValue = {
   platform: PlatformName;
@@ -39,11 +40,13 @@ export const DesignSystemConfigurationProvider = React.memo(
 
     return (
       <DesignSystemConfigurationContext.Provider value={contextValue}>
-        <DialogProvider>
-          <ToastProvider>
-            <FloatingWindowProvider>{children}</FloatingWindowProvider>
-          </ToastProvider>
-        </DialogProvider>
+        <OpenPortalsProvider>
+          <DialogProvider>
+            <ToastProvider>
+              <FloatingWindowProvider>{children}</FloatingWindowProvider>
+            </ToastProvider>
+          </DialogProvider>
+        </OpenPortalsProvider>
       </DesignSystemConfigurationContext.Provider>
     );
   }

package/src/contexts/OpenPortalsContext.tsx

@@ -0,0 +1,67 @@
+import * as React from "react";
+
+export type OpenPortalsContextValue = {
+  hasOpenPortals: boolean;
+};
+
+export type OpenPortalControlsContextValue = {
+  addOpenPortal: (portal: string) => void;
+  removeOpenPortal: (portal: string) => void;
+};
+
+/**
+ * This context is used to track the open portals in the design system.
+ *
+ * We currently use this so that we can cover up iframes when there are open portals.
+ * This lets us intercept click events that would otherwise be swallowed by the iframe.
+ */
+const OpenPortalsContext = React.createContext<OpenPortalsContextValue>({
+  hasOpenPortals: false,
+});
+
+const OpenPortalControlsContext =
+  React.createContext<OpenPortalControlsContextValue>({
+    addOpenPortal: () => {},
+    removeOpenPortal: () => {},
+  });
+
+export const OpenPortalsProvider = React.memo(function OpenPortalsProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [openPortals, setOpenPortals] = React.useState<string[]>([]);
+
+  const value = React.useMemo(
+    () => ({ hasOpenPortals: openPortals.length > 0 }),
+    [openPortals]
+  );
+
+  const controlsValue = React.useMemo(
+    () => ({
+      addOpenPortal: (portal: string) => {
+        setOpenPortals((prev) => [...prev, portal]);
+      },
+      removeOpenPortal: (portal: string) => {
+        setOpenPortals((prev) => prev.filter((p) => p !== portal));
+      },
+    }),
+    []
+  );
+
+  return (
+    <OpenPortalsContext.Provider value={value}>
+      <OpenPortalControlsContext.Provider value={controlsValue}>
+        {children}
+      </OpenPortalControlsContext.Provider>
+    </OpenPortalsContext.Provider>
+  );
+});
+
+export function useHasOpenPortals(): boolean {
+  return React.useContext(OpenPortalsContext).hasOpenPortals;
+}
+
+export function useOpenPortalsControls(): OpenPortalControlsContextValue {
+  return React.useContext(OpenPortalControlsContext);
+}