From 30e198caed00a4b1049904dfd3c888b2c3077715 Mon Sep 17 00:00:00 2001
From: Eric Charles <eric@datalayer.io>
Date: Thu, 11 Sep 2025 15:13:02 +0200
Subject: [PATCH 1/2] feat: portal

---
 package.json            |  2 +-
 src/components/index.ts |  7 +++++
 src/index.ts            |  9 ++----
 src/utils/Helper.tsx    | 70 +++++++++++++++++++++++++++++++++++++++++
 src/utils/Portals.tsx   | 29 +++++++++++++++++
 src/utils/Styles.tsx    | 19 +++++++++++
 src/utils/index.ts      |  7 +++++
 7 files changed, 135 insertions(+), 8 deletions(-)
 create mode 100644 src/components/index.ts
 create mode 100644 src/utils/Helper.tsx
 create mode 100644 src/utils/Portals.tsx
 create mode 100644 src/utils/Styles.tsx
 create mode 100644 src/utils/index.ts

diff --git a/package.json b/package.json
index 021d710..2101afc 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/primer-addons",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "license": "BSD-3-Clause",
   "scripts": {
     "dev": "vite",
diff --git a/src/components/index.ts b/src/components/index.ts
new file mode 100644
index 0000000..981a79c
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1,7 @@
+export * from "./box/Box";
+export * from "./card/Card";
+export * from "./content-loader/ContentLoader";
+export * from "./closeable-flash/CloseableFlash";
+export * from "./icons/CircleIcon";
+export * from "./overlay/Overlay";
+export * from "./slider/Slider";
diff --git a/src/index.ts b/src/index.ts
index 09717fc..89e38c8 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,7 +1,2 @@
-export * from "./components/box/Box";
-export * from "./components/card/Card";
-export * from "./components/content-loader/ContentLoader";
-export * from "./components/closeable-flash/CloseableFlash";
-export * from "./components/icons/CircleIcon";
-export * from "./components/overlay/Overlay";
-export * from "./components/slider/Slider";
+export * from "./components";
+export * from "./utils";
diff --git a/src/utils/Helper.tsx b/src/utils/Helper.tsx
new file mode 100644
index 0000000..7dd91de
--- /dev/null
+++ b/src/utils/Helper.tsx
@@ -0,0 +1,70 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import React, { Ref, PropsWithChildren } from 'react';
+import { AnimateProps } from '@primer/react-brand';
+
+/**
+ * Layout
+ */
+export const Container = ({
+  children,
+  style,
+}: {
+  children: React.ReactElement[] | React.ReactElement;
+  style?: React.CSSProperties;
+}) => (
+  <div style={{ maxWidth: 1024, margin: '0 auto', ...style }}>{children}</div>
+);
+
+type RedlineBackgroundProps = {
+  height?: number;
+  hasBorder?: boolean;
+};
+
+export function RedlineBackground({
+  height,
+  hasBorder = true,
+  ...rest
+}: PropsWithChildren<RedlineBackgroundProps>) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        overflow: 'hidden',
+        border: hasBorder
+          ? '1px solid var(--base-color-scale-red-2)'
+          : undefined,
+        backgroundImage:
+          'linear-gradient(45deg, var(--base-color-scale-red-0) 12.5%, hsla(var(--base-color-scale-red-2-hsl) / 50%) 12.5%, hsla(var(--base-color-scale-red-2-hsl) / 50%) 50%, var(--base-color-scale-red-0) 50%, var(--base-color-scale-red-0) 62.5%, hsla(var(--base-color-scale-red-2-hsl) / 50%) 62.5%, hsla(var(--base-color-scale-red-2-hsl) / 50%) 100%)',
+        backgroundSize: '5.66px 5.66px',
+        WebkitBoxPack: 'center',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '100%',
+        height,
+      }}
+      {...rest}
+    />
+  );
+}
+
+/**
+ * Base Types
+ *
+ * Component helper type to be extended by component types, e.g.:
+ * type CustomComponentProps = BaseProps<HTMLDivElement> & { ... }
+ *
+ * Example use:
+ *   const CustomComponent = forwardRef<HTMLDivElement, CustomComponentProps>(({className, ...props}, ref) => { ... })
+ *   // OR:
+ *   const CustomComponent = forwardRef(({className: CustomComponentProps, ...props}, ref: Ref<HTMLDivElement>) => { ... })
+ */
+export type BaseProps<T> = {
+  className?: string;
+  id?: string;
+  ref?: Ref<T>;
+  animate?: AnimateProps;
+};
diff --git a/src/utils/Portals.tsx b/src/utils/Portals.tsx
new file mode 100644
index 0000000..7f30903
--- /dev/null
+++ b/src/utils/Portals.tsx
@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { Colormode } from '@datalayer/jupyter-react';
+import { registerPortalRoot } from '@primer/react';
+
+import '@primer/react-brand/lib/css/main.css';
+
+const PRIMER_PORTAL_ROOT_ID = '__primerPortalRoot__';
+
+/**
+ * Ensure we define a root for Primer portal root.
+ *
+ *  @see https://github.com/primer/react/blob/main/packages/react/src/Portal/Portal.tsx#L23
+ *  @see https://github.com/primer/react/blob/030fe020b48b7f12c2994c6614e5d4191fe764ee/src/Portal/Portal.tsx#L33
+ */
+export const setupPrimerPortals = (colormode: Colormode = 'light') => {
+  const body = document.body;
+  body.dataset['portalRoot'] = 'true';
+  body.dataset['colorMode'] = colormode;
+  body.dataset['lightTheme'] = 'light';
+  body.dataset['darkTheme'] = 'dark';
+  body.id = PRIMER_PORTAL_ROOT_ID;
+  registerPortalRoot(body);
+};
+
+export default setupPrimerPortals;
diff --git a/src/utils/Styles.tsx b/src/utils/Styles.tsx
new file mode 100644
index 0000000..493348e
--- /dev/null
+++ b/src/utils/Styles.tsx
@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { ThemeProvider, BaseStyles } from '@primer/react';
+import { jupyterLabTheme } from '@datalayer/jupyter-react';
+
+export const Styles = () => {
+  return (
+    <>
+      <ThemeProvider theme={jupyterLabTheme}>
+        <BaseStyles />
+      </ThemeProvider>
+    </>
+  );
+};
+
+export default Styles;
diff --git a/src/utils/index.ts b/src/utils/index.ts
new file mode 100644
index 0000000..91d9f7b
--- /dev/null
+++ b/src/utils/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+export * from './Helper';
+export * from './Portals';

From b63ac630ec44470a731bf3cb33e4549306e79852 Mon Sep 17 00:00:00 2001
From: Eric Charles <eric@datalayer.io>
Date: Thu, 11 Sep 2025 15:45:55 +0200
Subject: [PATCH 2/2] fix: build

---
 src/utils/Portals.tsx | 3 ++-
 src/utils/Styles.tsx  | 3 +--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/utils/Portals.tsx b/src/utils/Portals.tsx
index 7f30903..af142e8 100644
--- a/src/utils/Portals.tsx
+++ b/src/utils/Portals.tsx
@@ -3,13 +3,14 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
-import { Colormode } from '@datalayer/jupyter-react';
 import { registerPortalRoot } from '@primer/react';
 
 import '@primer/react-brand/lib/css/main.css';
 
 const PRIMER_PORTAL_ROOT_ID = '__primerPortalRoot__';
 
+type Colormode = 'light' | 'dark' | 'auto';
+
 /**
  * Ensure we define a root for Primer portal root.
  *
diff --git a/src/utils/Styles.tsx b/src/utils/Styles.tsx
index 493348e..dfb39fd 100644
--- a/src/utils/Styles.tsx
+++ b/src/utils/Styles.tsx
@@ -4,12 +4,11 @@
  */
 
 import { ThemeProvider, BaseStyles } from '@primer/react';
-import { jupyterLabTheme } from '@datalayer/jupyter-react';
 
 export const Styles = () => {
   return (
     <>
-      <ThemeProvider theme={jupyterLabTheme}>
+      <ThemeProvider>
         <BaseStyles />
       </ThemeProvider>
     </>