@datalayer/primer-addons 1.0.11 → 1.0.12

package/lib/components/appearance/AppearanceControls.d.ts

@@ -0,0 +1,10 @@
+import type { ReactElement } from 'react';
+import { type ColorMode, type ThemeVariant } from '../../theme';
+export interface AppearanceControlsProps {
+    colorMode: ColorMode;
+    themeVariant: ThemeVariant;
+    onColorModeChange: (mode: ColorMode) => void;
+    onThemeChange: (theme: ThemeVariant) => void;
+}
+export declare function AppearanceControls({ colorMode, themeVariant, onColorModeChange, onThemeChange, }: AppearanceControlsProps): ReactElement;
+export default AppearanceControls;

package/lib/components/appearance/AppearanceControls.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { SegmentedControl } from '@primer/react';
+import { MoonIcon, SunIcon, DeviceDesktopIcon, } from '@primer/octicons-react';
+import { Box } from '../box/Box';
+import { themeVariants, themeConfigs, } from '../../theme';
+export function AppearanceControls({ colorMode, themeVariant, onColorModeChange, onThemeChange, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { sx: { px: 2, py: 2, display: 'flex', justifyContent: 'center' }, children: _jsxs(SegmentedControl, { "aria-label": "Color mode", size: "small", onChange: (index) => {
+                        const modes = ['light', 'dark', 'auto'];
+                        onColorModeChange(modes[index]);
+                    }, children: [_jsx(SegmentedControl.IconButton, { selected: colorMode === 'light', icon: SunIcon, "aria-label": "Light" }), _jsx(SegmentedControl.IconButton, { selected: colorMode === 'dark', icon: MoonIcon, "aria-label": "Dark" }), _jsx(SegmentedControl.IconButton, { selected: colorMode === 'auto', icon: DeviceDesktopIcon, "aria-label": "Auto" })] }) }), _jsx(Box, { sx: {
+                    px: 2,
+                    pb: 2,
+                    display: 'flex',
+                    justifyContent: 'center',
+                    gap: 2,
+                }, children: themeVariants.map((variant) => {
+                    const cfg = themeConfigs[variant];
+                    const isSelected = themeVariant === variant;
+                    return (_jsx(Box, { as: "button", "aria-label": cfg.label, "aria-pressed": isSelected, onClick: () => onThemeChange(variant), sx: {
+                            width: 24,
+                            height: 24,
+                            borderRadius: '50%',
+                            backgroundColor: cfg.brandColor,
+                            border: '2px solid',
+                            borderColor: isSelected ? 'accent.fg' : 'border.default',
+                            cursor: 'pointer',
+                            padding: 0,
+                            outline: 'none',
+                            transition: 'border-color 0.15s ease',
+                            boxShadow: isSelected
+                                ? '0 0 0 2px var(--bgColor-accent-muted, rgba(9,105,218,0.3))'
+                                : 'none',
+                            '&:hover': {
+                                borderColor: 'accent.fg',
+                            },
+                            '&:focus-visible': {
+                                boxShadow: '0 0 0 2px var(--bgColor-accent-muted, rgba(9,105,218,0.3))',
+                            },
+                        } }, variant));
+                }) })] }));
+}
+export default AppearanceControls;

package/lib/components/appearance/AppearanceControlsWithStore.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { UseBoundStore, StoreApi } from 'zustand';
+import type { ThemeState } from '../../theme/useThemeStore';
+export interface AppearanceControlsWithStoreProps {
+    useStore: UseBoundStore<StoreApi<ThemeState>>;
+}
+export declare const AppearanceControlsWithStore: React.FC<AppearanceControlsWithStoreProps>;
+export default AppearanceControlsWithStore;

package/lib/{theme/ThemeSwitcher.js → components/appearance/AppearanceControlsWithStore.js}

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, IconButton, SegmentedControl, Tooltip } from '@primer/react';
+import { IconButton, SegmentedControl, Tooltip } from '@primer/react';
 import { SunIcon, MoonIcon, DeviceDesktopIcon, CircleIcon, } from '@primer/octicons-react';
-import { themeConfigs, themeVariants } from './themeRegistry';
-export const ThemeSwitcher = ({ useStore }) => {
+import { Box } from '../box/Box';
+import { themeConfigs, themeVariants } from '../../theme/themeRegistry';
+export const AppearanceControlsWithStore = ({ useStore }) => {
     const { colorMode, theme: themeVariant } = useStore();
     return (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 3 }, children: [_jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: themeVariants.map(variant => {
                     const tcfg = themeConfigs[variant];
@@ -17,3 +18,4 @@ export const ThemeSwitcher = ({ useStore }) => {
                     useStore.getState().setColorMode(modes[index]);
                 }, children: [_jsx(SegmentedControl.IconButton, { selected: colorMode === 'light', icon: SunIcon, "aria-label": "Light" }), _jsx(SegmentedControl.IconButton, { selected: colorMode === 'dark', icon: MoonIcon, "aria-label": "Dark" }), _jsx(SegmentedControl.IconButton, { selected: colorMode === 'auto', icon: DeviceDesktopIcon, "aria-label": "Auto" })] })] }));
 };
+export default AppearanceControlsWithStore;

package/lib/components/appearance/index.d.ts

@@ -0,0 +1,2 @@
+export * from './AppearanceControls';
+export * from './AppearanceControlsWithStore';

package/lib/components/appearance/index.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export * from './AppearanceControls';
+export * from './AppearanceControlsWithStore';

package/lib/components/index.d.ts

@@ -1,3 +1,5 @@
+export * from "./appearance/AppearanceControls";
+export * from "./appearance/AppearanceControlsWithStore";
 export * from "./box/Box";
 export * from "./card/Card";
 export * from "./content-loader/ContentLoader";
@@ -5,4 +7,6 @@ export * from "./closeable-flash/CloseableFlash";
 export * from "./icons/CircleIcon";
 export * from "./overlay/Overlay";
 export * from "./slider/Slider";
+export * from "./logo";
+export * from "./appearance";
 export * from "./toolbar";

package/lib/components/index.js

@@ -1,3 +1,5 @@
+export * from "./appearance/AppearanceControls";
+export * from "./appearance/AppearanceControlsWithStore";
 export * from "./box/Box";
 export * from "./card/Card";
 export * from "./content-loader/ContentLoader";
@@ -5,4 +7,6 @@ export * from "./closeable-flash/CloseableFlash";
 export * from "./icons/CircleIcon";
 export * from "./overlay/Overlay";
 export * from "./slider/Slider";
+export * from "./logo";
+export * from "./appearance";
 export * from "./toolbar";

package/lib/components/logo/DatalayerLogo.d.ts

@@ -0,0 +1,18 @@
+import { type SVGProps } from 'react';
+import { type ThemeVariant } from '../../theme';
+export interface LogoColorPair {
+    primary: string;
+    secondary: string;
+}
+export declare const THEME_LOGO_COLORS: Record<ThemeVariant, {
+    light: LogoColorPair;
+    dark: LogoColorPair;
+}>;
+export declare function getLogoColors(variant?: ThemeVariant, colorMode?: 'light' | 'dark' | 'auto'): LogoColorPair;
+export interface DatalayerLogoProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {
+    size?: number;
+    primaryColor?: string;
+    secondaryColor?: string;
+}
+export declare const DatalayerLogo: import("react").ForwardRefExoticComponent<DatalayerLogoProps & import("react").RefAttributes<SVGSVGElement>>;
+export default DatalayerLogo;

package/lib/components/logo/DatalayerLogo.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { forwardRef } from 'react';
+import { datalayerColors, spatialColors, lovelyColors, matrixColors, } from '../../theme';
+export const THEME_LOGO_COLORS = {
+    datalayer: {
+        light: {
+            primary: datalayerColors.greenBrand,
+            secondary: datalayerColors.greenText,
+        },
+        dark: {
+            primary: datalayerColors.greenBright,
+            secondary: datalayerColors.greenAccent,
+        },
+    },
+    spatial: {
+        light: {
+            primary: spatialColors.indigoBrand,
+            secondary: spatialColors.indigoText,
+        },
+        dark: {
+            primary: spatialColors.indigoBright,
+            secondary: spatialColors.indigoAccent,
+        },
+    },
+    lovely: {
+        light: {
+            primary: lovelyColors.roseBrand,
+            secondary: lovelyColors.roseText,
+        },
+        dark: {
+            primary: lovelyColors.roseBright,
+            secondary: lovelyColors.roseAccent,
+        },
+    },
+    matrix: {
+        light: {
+            primary: matrixColors.greenBrand,
+            secondary: matrixColors.greenText,
+        },
+        dark: {
+            primary: matrixColors.greenGlow,
+            secondary: matrixColors.greenPhosphor,
+        },
+    },
+};
+export function getLogoColors(variant = 'datalayer', colorMode = 'light') {
+    const mode = colorMode === 'auto' ? 'light' : colorMode;
+    return THEME_LOGO_COLORS[variant]?.[mode] ?? THEME_LOGO_COLORS.datalayer.light;
+}
+const BAR_HEIGHT = 25;
+const BARS = [
+    { y: 0, secondaryWidth: 30, primaryWidth: 70 },
+    { y: 37.5, secondaryWidth: 50, primaryWidth: 50 },
+    { y: 75, secondaryWidth: 70, primaryWidth: 30 },
+];
+export const DatalayerLogo = forwardRef(function DatalayerLogo({ size = 16, primaryColor = 'currentColor', secondaryColor = 'currentColor', ...svgProps }, ref) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 100", width: size, height: size, "aria-hidden": "true", ref: ref, ...svgProps, children: BARS.map(({ y, secondaryWidth, primaryWidth }) => (_jsxs("g", { children: [_jsx("rect", { x: 0, y: y, width: secondaryWidth, height: BAR_HEIGHT, fill: secondaryColor }), _jsx("rect", { x: secondaryWidth, y: y, width: primaryWidth, height: BAR_HEIGHT, fill: primaryColor })] }, y))) }));
+});
+export default DatalayerLogo;

package/lib/components/logo/DatalayerLogoText.d.ts

@@ -0,0 +1,22 @@
+import { type SVGProps } from 'react';
+import type { ThemeVariant } from '../../theme';
+export interface DatalayerLogoTextProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {
+    size?: number;
+    scale?: number;
+    colorMode?: 'light' | 'dark' | 'auto';
+    variant?: ThemeVariant;
+    primaryColor?: string;
+    secondaryColor?: string;
+    textSizeMultiplier?: number;
+    /**
+     * When true, render logo mark first then text.
+     * When false (default), render text first then logo mark.
+     */
+    inverse?: boolean;
+}
+/**
+ * Datalayer icon + wordmark based on official brand proportions.
+ * Uses themed colors by default and allows explicit color overrides.
+ */
+export declare const DatalayerLogoText: import("react").ForwardRefExoticComponent<DatalayerLogoTextProps & import("react").RefAttributes<SVGSVGElement>>;
+export default DatalayerLogoText;

package/lib/components/logo/DatalayerLogoText.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { forwardRef } from 'react';
+import { getLogoColors } from './DatalayerLogo';
+import { DatalayerText } from './DatalayerText';
+/**
+ * Datalayer icon + wordmark based on official brand proportions.
+ * Uses themed colors by default and allows explicit color overrides.
+ */
+export const DatalayerLogoText = forwardRef(function DatalayerLogoText({ size = 25, scale = 1, colorMode = 'light', variant = 'datalayer', primaryColor, secondaryColor, 
+// 2.380655 ~= 25 / (0.7 * 15.00187)
+// This makes the wordmark glyph height match the 25-unit icon height.
+textSizeMultiplier = 2.380655, inverse = false, ...svgProps }, ref) {
+    const themed = getLogoColors(variant, colorMode);
+    const primary = primaryColor ?? themed.primary;
+    const secondary = secondaryColor ?? themed.secondary;
+    const baseHeight = size;
+    const baseWidth = (149.672 / 25) * size;
+    const height = baseHeight * scale;
+    const width = baseWidth * scale;
+    const iconGroup = (_jsxs("g", { transform: "translate(0 0)", children: [_jsx("rect", { x: "0", y: "0", width: "10", height: "6.25", fill: secondary }), _jsx("rect", { x: "10", y: "0", width: "15", height: "6.25", fill: primary }), _jsx("rect", { x: "0", y: "9.375", width: "15", height: "6.25", fill: secondary }), _jsx("rect", { x: "15", y: "9.375", width: "10", height: "6.25", fill: primary }), _jsx("rect", { x: "0", y: "18.75", width: "20", height: "6.25", fill: secondary }), _jsx("rect", { x: "20", y: "18.75", width: "5", height: "6.25", fill: primary })] }));
+    const logoFirst = (_jsxs(_Fragment, { children: [iconGroup, _jsx(DatalayerText, { primaryColor: primary, secondaryColor: secondary, sizeMultiplier: textSizeMultiplier, x: 16 })] }));
+    const textFirst = (_jsxs(_Fragment, { children: [_jsx(DatalayerText, { primaryColor: primary, secondaryColor: secondary, sizeMultiplier: textSizeMultiplier, x: 0 }), _jsxs("g", { transform: "translate(124.672 0)", children: [_jsx("rect", { x: "0", y: "0", width: "10", height: "6.25", fill: secondary }), _jsx("rect", { x: "10", y: "0", width: "15", height: "6.25", fill: primary }), _jsx("rect", { x: "0", y: "9.375", width: "15", height: "6.25", fill: secondary }), _jsx("rect", { x: "15", y: "9.375", width: "10", height: "6.25", fill: primary }), _jsx("rect", { x: "0", y: "18.75", width: "20", height: "6.25", fill: secondary }), _jsx("rect", { x: "20", y: "18.75", width: "5", height: "6.25", fill: primary })] })] }));
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 149.672 25", width: width, height: height, role: "img", "aria-label": "Datalayer", ref: ref, ...svgProps, children: inverse ? logoFirst : textFirst }));
+});
+export default DatalayerLogoText;

package/lib/components/logo/DatalayerText.d.ts

@@ -0,0 +1,16 @@
+import type { SVGProps } from 'react';
+export interface DatalayerTextProps extends Omit<SVGProps<SVGGElement>, 'ref'> {
+    primaryColor?: string;
+    secondaryColor?: string;
+    /** Multiplies the base wordmark size. 1.0 keeps current dimensions. */
+    sizeMultiplier?: number;
+    /** X translation in the parent SVG coordinate system. */
+    x?: number;
+    /** Y translation in the parent SVG coordinate system. */
+    y?: number;
+}
+/**
+ * Official Datalayer wordmark outlines (BebasNeue converted to paths).
+ */
+export declare const DatalayerText: ({ primaryColor, secondaryColor, sizeMultiplier, x, y, ...groupProps }: DatalayerTextProps) => JSX.Element;
+export default DatalayerText;

package/lib/components/logo/DatalayerText.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Official Datalayer wordmark outlines (BebasNeue converted to paths).
+ */
+export const DatalayerText = ({ primaryColor = 'currentColor', secondaryColor = 'currentColor', sizeMultiplier = 1, x = 20, y = -190.15, ...groupProps }) => {
+    const baseScale = 0.7;
+    const scale = baseScale * sizeMultiplier;
+    // Keep the wordmark anchored when scaling so larger multipliers do not
+    // move the paths out of the parent SVG viewBox.
+    const anchorX = 17.35761;
+    const anchorY = 289.499065;
+    const translateX = x + anchorX * (baseScale - scale);
+    const translateY = y + anchorY * (baseScale - scale);
+    return (_jsxs("g", { transform: `matrix(${scale},0,0,${scale},${translateX},${translateY})`, ...groupProps, children: [_jsx("path", { d: "m 17.35761,297 h 3.729038 c 2.357437,0 3.514725,-1.30731 3.514725,-3.70761 v -7.58666 c 0,-2.4003 -1.157288,-3.7076 -3.514725,-3.7076 H 17.35761 Z m 3.686175,-12.85875 c 0.750094,0 1.20015,0.38576 1.20015,1.45733 v 7.80097 c 0,1.07156 -0.450056,1.45733 -1.20015,1.45733 h -1.328737 v -10.71563 z", fill: secondaryColor }), _jsx("path", { d: "M 31.29328,281.99813 H 27.842849 L 25.442549,297 h 2.164556 l 0.407194,-2.72177 h 2.893219 L 31.314711,297 h 2.378869 z m -1.864519,2.65747 h 0.04286 l 1.114425,7.58666 h -2.271713 z", fill: secondaryColor }), _jsx("path", { d: "m 33.2894,284.14125 h 2.464594 V 297 h 2.357438 v -12.85875 h 2.464593 v -2.14312 H 33.2894 Z", fill: secondaryColor }), _jsx("path", { d: "M 46.027265,281.99813 H 42.576834 L 40.176534,297 h 2.164556 l 0.407194,-2.72177 h 2.893219 L 46.048696,297 h 2.378869 z m -1.864519,2.65747 h 0.04286 l 1.114425,7.58666 h -2.271713 z", fill: secondaryColor }), _jsx("path", { d: "m 51.175594,297 h 6.236494 v -2.14312 h -3.879056 v -12.85875 h -2.357438 z", fill: primaryColor }), _jsx("path", { d: "M 63.688095,281.99813 H 60.237664 L 57.837364,297 h 2.164556 l 0.407194,-2.72177 h 2.893219 L 63.709526,297 h 2.378869 z m -1.864519,2.65747 h 0.04286 l 1.114425,7.58666 h -2.271713 z", fill: primaryColor }), _jsx("path", { d: "m 68.326286,297 h 2.357438 v -4.97205 l 2.978944,-10.02982 h -2.250282 l -1.778793,6.83656 h -0.04286 l -1.778794,-6.83656 h -2.464593 l 2.978943,10.02982 z", fill: primaryColor }), _jsx("path", { d: "m 76.973461,284.14125 h 4.071938 v -2.14312 H 74.616024 V 297 h 6.429375 v -2.14312 h -4.071938 v -4.39341 h 3.236119 v -2.14313 h -3.236119 z", fill: primaryColor }), _jsx("path", { d: "m 89.814797,297 c -0.235744,-0.55721 -0.257175,-1.09299 -0.257175,-1.82166 v -2.31457 c 0,-1.56448 -0.385763,-2.67891 -1.564481,-3.17183 v -0.0429 c 1.050131,-0.49292 1.543049,-1.47875 1.543049,-3.0218 v -1.17872 c 0,-2.31458 -1.050131,-3.45043 -3.493293,-3.45043 H 82.485309 V 297 h 2.357438 v -6.10791 h 0.814387 c 1.071563,0 1.54305,0.51435 1.54305,1.90739 v 2.35743 c 0,1.22158 0.08573,1.45733 0.214313,1.84309 z m -3.836194,-12.85875 c 0.835819,0 1.20015,0.47149 1.20015,1.54305 v 1.47876 c 0,1.20015 -0.535781,1.58591 -1.414462,1.58591 h -0.921544 v -4.60772 z", fill: primaryColor })] }));
+};
+export default DatalayerText;

package/lib/components/logo/index.d.ts

@@ -0,0 +1,3 @@
+export * from './DatalayerLogo';
+export * from './DatalayerLogoText';
+export * from './DatalayerText';

package/lib/components/logo/index.js

@@ -0,0 +1,3 @@
+export * from './DatalayerLogo';
+export * from './DatalayerLogoText';
+export * from './DatalayerText';

package/lib/index.js

@@ -1,4 +1,3 @@
 export * from "./components";
 export * from "./utils";
-// Export Theme.
 export * from './theme';

package/lib/theme/Palette.d.ts

@@ -1,4 +1,8 @@
-export declare const RESERVATION_CIRCLE_COLOR = "#656D76";
-export declare const CREDITS_CIRCLE_COLOR = "#16A085";
-export declare const JOINED_INVITE_COLOR = "#0366d6";
-export declare const PENDING_INVITE_COLOR = "#cfd3d7";
+/** @deprecated Use `defaultIndicatorColors.reservation` */
+export declare const RESERVATION_CIRCLE_COLOR: string;
+/** @deprecated Use `defaultIndicatorColors.credits` */
+export declare const CREDITS_CIRCLE_COLOR: string;
+/** @deprecated Use `defaultIndicatorColors.inviteJoined` */
+export declare const JOINED_INVITE_COLOR: string;
+/** @deprecated Use `defaultIndicatorColors.invitePending` */
+export declare const PENDING_INVITE_COLOR: string;

package/lib/theme/Palette.js

@@ -2,9 +2,16 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-// export const RESERVATION_CIRCLE_COLOR_VAR = '--data-yellow-color';
-export const RESERVATION_CIRCLE_COLOR = '#656D76';
-// export const CREDITS_CIRCLE_COLOR_VAR = '--data-blue-color';
-export const CREDITS_CIRCLE_COLOR = '#16A085';
-export const JOINED_INVITE_COLOR = '#0366d6';
-export const PENDING_INVITE_COLOR = '#cfd3d7';
+/**
+ * @deprecated Use `indicatorColors` / `defaultIndicatorColors` from
+ * `@datalayer/primer-addons/lib/theme` instead.
+ */
+import { defaultIndicatorColors } from './colors/indicatorColors';
+/** @deprecated Use `defaultIndicatorColors.reservation` */
+export const RESERVATION_CIRCLE_COLOR = defaultIndicatorColors.reservation;
+/** @deprecated Use `defaultIndicatorColors.credits` */
+export const CREDITS_CIRCLE_COLOR = defaultIndicatorColors.credits;
+/** @deprecated Use `defaultIndicatorColors.inviteJoined` */
+export const JOINED_INVITE_COLOR = defaultIndicatorColors.inviteJoined;
+/** @deprecated Use `defaultIndicatorColors.invitePending` */
+export const PENDING_INVITE_COLOR = defaultIndicatorColors.invitePending;

package/lib/theme/colors/index.d.ts

@@ -2,3 +2,4 @@ export { datalayerColors } from './datalayerColors';
 export { spatialColors } from './spatialColors';
 export { lovelyColors } from './lovelyColors';
 export { matrixColors } from './matrixColors';
+export { indicatorColors, defaultIndicatorColors, type IndicatorColors, } from './indicatorColors';

package/lib/theme/colors/index.js

@@ -6,3 +6,4 @@ export { datalayerColors } from './datalayerColors';
 export { spatialColors } from './spatialColors';
 export { lovelyColors } from './lovelyColors';
 export { matrixColors } from './matrixColors';
+export { indicatorColors, defaultIndicatorColors, } from './indicatorColors';

package/lib/theme/colors/indicatorColors.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Indicator Color Palette — Semantic status colours for indicators,
+ * badges, progress rings, and status dots.
+ *
+ * Each theme provides its own `IndicatorColors` so consumers pick up
+ * the correct tones automatically. The palette contains both
+ * **status colours** (success, warning, danger …) and
+ * **domain-specific** colours (reservation, credits, invite …).
+ *
+ * Usage:
+ * ```ts
+ * import { indicatorColors } from '@datalayer/primer-addons/lib/theme';
+ * const colors = indicatorColors.datalayer; // or .spatial, .lovely, .matrix
+ * <Box sx={{ bg: colors.success }} />
+ * ```
+ */
+export interface IndicatorColors {
+    /** Neutral / default — nothing notable */
+    neutral: string;
+    /** Muted — defined but inactive */
+    muted: string;
+    /** In-progress / loading */
+    pending: string;
+    /** Warning / attention-needed  */
+    warning: string;
+    /** Error / failure */
+    danger: string;
+    /** Healthy / success */
+    success: string;
+    /** Informational / accent */
+    info: string;
+    /** Reservation indicator (e.g. usage rings) */
+    reservation: string;
+    /** Credits indicator (e.g. usage rings) */
+    credits: string;
+    /** Accepted / joined invite */
+    inviteJoined: string;
+    /** Pending invite */
+    invitePending: string;
+}
+export declare const indicatorColors: {
+    readonly datalayer: IndicatorColors;
+    readonly spatial: IndicatorColors;
+    readonly lovely: IndicatorColors;
+    readonly matrix: IndicatorColors;
+};
+/**
+ * Convenience: default indicator palette (Datalayer theme).
+ */
+export declare const defaultIndicatorColors: IndicatorColors;

package/lib/theme/colors/indicatorColors.js

@@ -0,0 +1,68 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/* ── Per-theme palettes ────────────────────────────────── */
+const datalayer = {
+    neutral: '#656D76',
+    muted: '#8b949e',
+    pending: '#d29922',
+    warning: '#d29922',
+    danger: '#d1242f',
+    success: '#16A085',
+    info: '#0969da',
+    reservation: '#656D76',
+    credits: '#16A085',
+    inviteJoined: '#0969da',
+    invitePending: '#cfd3d7',
+};
+const spatial = {
+    neutral: '#8892B0',
+    muted: '#6B7394',
+    pending: '#E2B340',
+    warning: '#E2B340',
+    danger: '#FF5252',
+    success: '#4F46E5',
+    info: '#448AFF',
+    reservation: '#8892B0',
+    credits: '#4F46E5',
+    inviteJoined: '#448AFF',
+    invitePending: '#6B7394',
+};
+const lovely = {
+    neutral: '#9D7A8F',
+    muted: '#C9A2B8',
+    pending: '#FFD740',
+    warning: '#FFD740',
+    danger: '#FF1744',
+    success: '#DB2777',
+    info: '#536DFE',
+    reservation: '#9D7A8F',
+    credits: '#DB2777',
+    inviteJoined: '#536DFE',
+    invitePending: '#C9A2B8',
+};
+const matrix = {
+    neutral: '#5A6E3A',
+    muted: '#7A9A50',
+    pending: '#FFD600',
+    warning: '#FFD600',
+    danger: '#FF3D00',
+    success: '#00C853',
+    info: '#00E676',
+    reservation: '#5A6E3A',
+    credits: '#00C853',
+    inviteJoined: '#00E676',
+    invitePending: '#7A9A50',
+};
+/* ── Public map ────────────────────────────────────────── */
+export const indicatorColors = {
+    datalayer,
+    spatial,
+    lovely,
+    matrix,
+};
+/**
+ * Convenience: default indicator palette (Datalayer theme).
+ */
+export const defaultIndicatorColors = datalayer;

package/lib/theme/index.d.ts

@@ -11,5 +11,4 @@ export * from './themeRegistry';
 export * from './Palette';
 export * from './useSystemColorMode';
 export * from './useThemeStore';
-export * from './ThemeSwitcher';
 export * from './ThemedProvider';

package/lib/theme/index.js

@@ -15,5 +15,4 @@ export * from './themeRegistry';
 export * from './Palette';
 export * from './useSystemColorMode';
 export * from './useThemeStore';
-export * from './ThemeSwitcher';
 export * from './ThemedProvider';

package/lib/utils/Portals.d.ts

@@ -4,6 +4,10 @@ type Colormode = 'light' | 'dark' | 'auto';
 /**
  * Ensure we define a root for Primer portal root.
  *
+ * Creates a dedicated `<div>` appended to `<body>` with a high z-index
+ * so that portaled content (overlays, tooltips, action menus) renders
+ * above other positioned UI elements such as chat panels.
+ *
  *  @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
  */

package/lib/utils/Portals.js

@@ -19,21 +19,73 @@ const resolveColormode = (colormode) => {
     }
     return colormode;
 };
+/**
+ * Infer current app color mode from existing DOM theme markers.
+ *
+ * This avoids accidentally forcing light mode when callers invoke
+ * setupPrimerPortals() without passing an explicit mode.
+ */
+const inferCurrentColormode = () => {
+    const portalRoot = document.getElementById(PRIMER_PORTAL_ROOT_ID);
+    const portalMode = portalRoot?.getAttribute('data-color-mode');
+    if (portalMode === 'light' || portalMode === 'dark' || portalMode === 'auto') {
+        return portalMode;
+    }
+    const htmlMode = document.documentElement.getAttribute('data-color-mode');
+    if (htmlMode === 'light' || htmlMode === 'dark' || htmlMode === 'auto') {
+        return htmlMode;
+    }
+    const bodyMode = document.body.getAttribute('data-color-mode');
+    if (bodyMode === 'light' || bodyMode === 'dark' || bodyMode === 'auto') {
+        return bodyMode;
+    }
+    return 'auto';
+};
+/**
+ * Infer Primer light/dark theme names from existing DOM markers.
+ */
+const inferCurrentThemeNames = () => {
+    const portalRoot = document.getElementById(PRIMER_PORTAL_ROOT_ID);
+    const lightTheme = portalRoot?.getAttribute('data-light-theme') ||
+        document.documentElement.getAttribute('data-light-theme') ||
+        document.body.getAttribute('data-light-theme') ||
+        'light';
+    const darkTheme = portalRoot?.getAttribute('data-dark-theme') ||
+        document.documentElement.getAttribute('data-dark-theme') ||
+        document.body.getAttribute('data-dark-theme') ||
+        'dark';
+    return { lightTheme, darkTheme };
+};
 /**
  * Ensure we define a root for Primer portal root.
  *
+ * Creates a dedicated `<div>` appended to `<body>` with a high z-index
+ * so that portaled content (overlays, tooltips, action menus) renders
+ * above other positioned UI elements such as chat panels.
+ *
  *  @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 = 'light') => {
-    const resolved = resolveColormode(colormode);
-    const body = document.body;
-    body.dataset['portalRoot'] = 'true';
-    body.dataset['colorMode'] = resolved;
-    body.dataset['lightTheme'] = 'light';
-    body.dataset['darkTheme'] = 'dark';
-    body.id = PRIMER_PORTAL_ROOT_ID;
-    registerPortalRoot(body);
+export const setupPrimerPortals = (colormode) => {
+    const effectiveColormode = colormode ?? inferCurrentColormode();
+    const resolved = resolveColormode(effectiveColormode);
+    const { lightTheme, darkTheme } = inferCurrentThemeNames();
+    // Create or reuse a dedicated portal root div.
+    let portalRoot = document.getElementById(PRIMER_PORTAL_ROOT_ID);
+    if (!portalRoot) {
+        portalRoot = document.createElement('div');
+        portalRoot.id = PRIMER_PORTAL_ROOT_ID;
+        document.body.appendChild(portalRoot);
+    }
+    // Primer theme attributes — required for proper theming inside portals.
+    portalRoot.dataset['portalRoot'] = 'true';
+    portalRoot.dataset['colorMode'] = resolved;
+    portalRoot.dataset['lightTheme'] = lightTheme;
+    portalRoot.dataset['darkTheme'] = darkTheme;
+    // High z-index so overlays render above positioned UI (e.g. chat z-index 1001).
+    portalRoot.style.position = 'relative';
+    portalRoot.style.zIndex = '9999';
+    registerPortalRoot(portalRoot);
 };
 /* ─── camelCase → kebab-case ─────────────────────────────────────────── */
 const camelToKebab = (s) => s.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/primer-addons",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "license": "BSD-3-Clause",
   "scripts": {
     "build": "tsc && vite build",

package/lib/_utils/story-helpers.d.ts

@@ -1,31 +0,0 @@
-import React from 'react';
-import { ArgTypes } from '@storybook/react';
-import { Icon } from '@primer/octicons-react';
-type StoryContext = Record<string, unknown> & {
-    globals: {
-        colorScheme: string;
-    };
-    parameters: Record<string, unknown>;
-};
-export declare const colormodeFromScheme: (colorScheme: string) => "dark" | "light";
-export declare const withThemeProvider: (Story: React.FC<React.PropsWithChildren<StoryContext>>, context: StoryContext) => string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
-export declare const toolbarTypes: {
-    colorScheme: {
-        name: string;
-        description: string;
-        defaultValue: string;
-        toolbar: {
-            icon: string;
-            items: string[];
-            title: string;
-        };
-    };
-};
-export declare const inputWrapperArgTypes: ArgTypes;
-export declare const getTextInputArgTypes: (category?: string) => Record<string, unknown>;
-export declare const OcticonArgType: (iconList: Icon[]) => {
-    options: string[];
-    control: string;
-    mapping: Record<string, Icon>;
-};
-export {};

package/lib/_utils/story-helpers.js

@@ -1,105 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createGlobalStyle } from 'styled-components';
-import { ThemeProvider, themeGet, BaseStyles, theme } from '@primer/react';
-// set global theme styles for each story
-const GlobalStyle = createGlobalStyle `
-  body,
-  .docs-story {
-    background-color: ${themeGet('colors.canvas.default')};
-    color: ${themeGet('colors.fg.default')};
-  }
-`;
-export const colormodeFromScheme = (colorScheme) => {
-    return colorScheme.startsWith('light') ? 'light' : 'dark';
-};
-export const withThemeProvider = (Story, context) => {
-    // used for testing ThemeProvider.stories.tsx
-    if (context.parameters.disableThemeDecorator)
-        return Story(context);
-    const { colorScheme } = context.globals;
-    return (_jsxs(ThemeProvider, { theme: theme, colorMode: colormodeFromScheme(colorScheme), dayScheme: colorScheme, nightScheme: colorScheme, children: [colorScheme.startsWith('light') ? (_jsx(GlobalStyle, { "$lightTheme": true })) : (_jsx(GlobalStyle, {})), _jsx(BaseStyles, { children: _jsx("div", { id: "html-addon-root", children: Story(context) }) })] }));
-};
-export const toolbarTypes = {
-    colorScheme: {
-        name: 'Color Scheme',
-        description: 'Switch color scheme',
-        defaultValue: 'light',
-        toolbar: {
-            icon: 'photo',
-            items: [...Object.keys(theme.colorSchemes)],
-            title: 'Color Scheme',
-        },
-    },
-};
-export const inputWrapperArgTypes = {
-    block: {
-        defaultValue: false,
-        control: 'boolean',
-    },
-    contrast: {
-        defaultValue: false,
-        control: 'boolean',
-    },
-    disabled: {
-        defaultValue: false,
-        control: 'boolean',
-    },
-    placeholder: {
-        defaultValue: '',
-        control: 'text',
-    },
-    size: {
-        name: 'size (input)', // TODO: remove '(input)'
-        defaultValue: 'medium',
-        options: ['small', 'medium', 'large'],
-        control: 'radio',
-    },
-    validationStatus: {
-        defaultValue: undefined,
-        options: ['error', 'success', undefined],
-        control: 'radio',
-    },
-};
-const textInputArgTypesUnsorted = {
-    ...inputWrapperArgTypes,
-    loading: {
-        defaultValue: false,
-        control: 'boolean',
-    },
-    loaderPosition: {
-        defaultValue: 'auto',
-        options: ['auto', 'leading', 'trailing'],
-        control: 'radio',
-    },
-    monospace: {
-        defaultValue: false,
-        control: 'boolean',
-    },
-};
-// Alphabetize and optionally categorize the props
-export const getTextInputArgTypes = (category) => Object.keys(textInputArgTypesUnsorted)
-    .sort()
-    .reduce((obj, key) => {
-    obj[key] = category
-        ? {
-            // have to do weird type casting so we can spread the object
-            ...textInputArgTypesUnsorted[key],
-            table: {
-                category,
-            },
-        }
-        : textInputArgTypesUnsorted[key];
-    return obj;
-}, {});
-// Use this function for icon options in the controls. Desired icons are passed in as an array of Octicons
-export const OcticonArgType = (iconList) => {
-    const icons = iconList.reduce((obj, icon) => {
-        obj[icon.displayName || 'Icon'] = icon;
-        return obj;
-    }, {});
-    return {
-        options: Object.keys(icons),
-        control: 'select',
-        mapping: icons,
-    };
-};

package/lib/theme/ThemeSwitcher.d.ts

@@ -1,17 +0,0 @@
-/**
- * ThemeSwitcher – Themed colour circles + light/dark/auto segmented control.
- *
- * The component requires an external Zustand `ThemeState` store (created
- * with `createThemeStore`).  Consumers pass the `useStore` hook as a prop
- * so the switcher is completely decoupled from any specific app's store.
- *
- * @module theme/ThemeSwitcher
- */
-import React from 'react';
-import type { ThemeState } from './useThemeStore';
-import type { UseBoundStore, StoreApi } from 'zustand';
-export interface ThemeSwitcherProps {
-    /** A Zustand store hook created via `createThemeStore()`. */
-    useStore: UseBoundStore<StoreApi<ThemeState>>;
-}
-export declare const ThemeSwitcher: React.FC<ThemeSwitcherProps>;