@datalayer/primer-addons 1.0.15 → 1.0.18

package/lib/App.js

@@ -3,7 +3,7 @@ import { useState, useRef } from "react";
 import { BaseStyles, Box, Text, NavList, Heading, ThemeProvider, Button, theme, ActionMenu, IconButton, ActionList } from "@primer/react";
 import { KebabHorizontalIcon } from "@primer/octicons-react";
 import { DatalayerIcon, LogOutIcon, SettingsIcon } from "@datalayer/icons-react";
-import { Slider, Overlay } from ".";
+import { Slider, SideOverlay } from ".";
 import "@primer/primitives/dist/css/base/typography/typography.css";
 import "@primer/primitives/dist/css/base/motion/motion.css";
 import "@primer/primitives/dist/css/functional/themes/light.css";
@@ -20,6 +20,6 @@ const App = () => {
     const openButtonRef = useRef(null);
     const closeButtonRef = useRef(null);
     const headingRef = useRef(null);
-    return (_jsx(ThemeProvider, { colorMode: "day", theme: theme, children: _jsxs(BaseStyles, { children: [_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(IconButton, { icon: KebabHorizontalIcon, variant: "invisible", "aria-label": "jupyter-runtimes-more" }) }), _jsx(ActionMenu.Overlay, { width: "medium", children: _jsxs(ActionList, { children: [_jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "More\u2026" }), _jsxs(ActionList.Item, { onSelect: () => alert('click'), children: [_jsx(ActionList.LeadingVisual, { children: _jsx(SettingsIcon, {}) }), "Settings", _jsx(ActionList.Description, { variant: "block", children: "Configure your personal settings." })] }), _jsxs(ActionList.Item, { onSelect: () => alert('click'), children: [_jsx(ActionList.LeadingVisual, { children: _jsx(DatalayerIcon, {}) }), "About", _jsx(ActionList.Description, { variant: "block", children: "About Runtimes." })] })] }), _jsxs(_Fragment, { children: [_jsx(ActionList.Divider, {}), _jsxs(ActionList.Item, { variant: "danger", onSelect: () => alert('click'), children: [_jsx(ActionList.LeadingVisual, { children: _jsx(LogOutIcon, {}) }), "Logout"] })] })] }) })] }), _jsxs(Box, { bg: "canvas.default", sx: { display: 'flex' }, children: [_jsx(Box, { children: _jsxs(NavList, { children: [_jsx(NavList.Item, { href: "/", "aria-current": "page", children: "Home" }), _jsx(NavList.Item, { href: "/about", children: "About" }), _jsx(NavList.Item, { href: "/contact", children: "Contact" })] }) }), _jsxs(Box, { p: 3, sx: { flexGrow: 1 }, children: [_jsx(Box, { children: _jsx(Text, { children: "Primer React Addons" }) }), _jsx(Box, { children: _jsx(Slider, { id: "slider", name: "slider", min: 1, max: 10, onChange: () => { } }) }), _jsx(Box, { p: 3, bg: "canvas.default", children: _jsxs(Box, { children: [_jsx(Box, { sx: { width: '100%', bg: 'darkgray' }, children: _jsx(Heading, { ref: headingRef, children: "Header" }) }), _jsxs(Box, { children: [_jsx(Button, { ref: openButtonRef, onClick: () => { setIsOpen(!isOpen); }, children: "Open overlay" }), _jsx(Overlay, { isOpen: isOpen, content: _jsxs(Text, { children: ["Look, I am an ", _jsx(Button, { children: "Overlay \uD83D\uDC49" })] }), setIsOpen: setIsOpen, openButtonRef: openButtonRef, closeButtonRef: closeButtonRef, headingRef: headingRef })] })] }) })] })] })] }) }));
+    return (_jsx(ThemeProvider, { colorMode: "day", theme: theme, children: _jsxs(BaseStyles, { children: [_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(IconButton, { icon: KebabHorizontalIcon, variant: "invisible", "aria-label": "jupyter-runtimes-more" }) }), _jsx(ActionMenu.Overlay, { width: "medium", children: _jsxs(ActionList, { children: [_jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "More\u2026" }), _jsxs(ActionList.Item, { onSelect: () => alert('click'), children: [_jsx(ActionList.LeadingVisual, { children: _jsx(SettingsIcon, {}) }), "Settings", _jsx(ActionList.Description, { variant: "block", children: "Configure your personal settings." })] }), _jsxs(ActionList.Item, { onSelect: () => alert('click'), children: [_jsx(ActionList.LeadingVisual, { children: _jsx(DatalayerIcon, {}) }), "About", _jsx(ActionList.Description, { variant: "block", children: "About Runtimes." })] })] }), _jsxs(_Fragment, { children: [_jsx(ActionList.Divider, {}), _jsxs(ActionList.Item, { variant: "danger", onSelect: () => alert('click'), children: [_jsx(ActionList.LeadingVisual, { children: _jsx(LogOutIcon, {}) }), "Logout"] })] })] }) })] }), _jsxs(Box, { bg: "canvas.default", sx: { display: 'flex' }, children: [_jsx(Box, { children: _jsxs(NavList, { children: [_jsx(NavList.Item, { href: "/", "aria-current": "page", children: "Home" }), _jsx(NavList.Item, { href: "/about", children: "About" }), _jsx(NavList.Item, { href: "/contact", children: "Contact" })] }) }), _jsxs(Box, { p: 3, sx: { flexGrow: 1 }, children: [_jsx(Box, { children: _jsx(Text, { children: "Primer React Addons" }) }), _jsx(Box, { children: _jsx(Slider, { id: "slider", name: "slider", min: 1, max: 10, onChange: () => { } }) }), _jsx(Box, { p: 3, bg: "canvas.default", children: _jsxs(Box, { children: [_jsx(Box, { sx: { width: '100%', bg: 'darkgray' }, children: _jsx(Heading, { ref: headingRef, children: "Header" }) }), _jsxs(Box, { children: [_jsx(Button, { ref: openButtonRef, onClick: () => { setIsOpen(!isOpen); }, children: "Open overlay" }), _jsx(SideOverlay, { isOpen: isOpen, content: _jsxs(Text, { children: ["Look, I am an ", _jsx(Button, { children: "Overlay \uD83D\uDC49" })] }), setIsOpen: setIsOpen, openButtonRef: openButtonRef, closeButtonRef: closeButtonRef, headingRef: headingRef })] })] }) })] })] })] }) }));
 };
 export default App;

package/lib/components/box/Box.d.ts

@@ -1,7 +1,6 @@
 import { ComponentProps } from 'react';
 import type { BackgroundProps, BorderProps, ColorProps, FlexboxProps, GridProps, LayoutProps, PositionProps, ShadowProps, SpaceProps, TypographyProps } from 'styled-system';
 import { type SxProp } from './sx';
-type StyledBoxProps = SxProp & SpaceProps & ColorProps & TypographyProps & LayoutProps & FlexboxProps & GridProps & BackgroundProps & BorderProps & PositionProps & ShadowProps;
-export declare const Box: import("styled-components").StyledComponent<"div", any, StyledBoxProps, never>;
+export declare const Box: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "sx" | keyof SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> | keyof ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> | keyof TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> | keyof BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> | keyof PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>> & SxProp & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "sx" | keyof SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> | keyof ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> | keyof TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> | keyof BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> | keyof PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>> & SxProp & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never>>> & string;
 export type BoxProps = ComponentProps<typeof Box>;
 export default Box;

package/lib/components/content-loader/ContentLoader.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from "@primer/react";
+import { Box, useTheme } from "@primer/react";
 import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
 import 'react-loading-skeleton/dist/skeleton.css';
 export const ContentLoader = (props) => {
-    return (_jsx(Box, { children: _jsx(SkeletonTheme, { children: _jsx(Skeleton, { ...props }) }) }));
+    const { colorMode } = useTheme();
+    const isDark = colorMode !== 'day';
+    return (_jsx(Box, { children: _jsx(SkeletonTheme, { baseColor: isDark ? 'var(--bgColor-muted, #21262d)' : 'var(--bgColor-muted, #ebebeb)', highlightColor: isDark ? 'var(--borderColor-muted, #30363d)' : 'var(--borderColor-muted, #f5f5f5)', children: _jsx(Skeleton, { ...props }) }) }));
 };
 export default ContentLoader;

package/lib/components/icons/CircleIcon.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useTheme } from '@primer/react';
 import { CircleCurrentColorIcon } from '@datalayer/icons-react';
-const COLORS = {
-    'danger': 'danger',
-};
 export const CircleIcon = ({ color = 'white', variant = 'fg', }) => {
     const { theme } = useTheme();
-    return (_jsx(CircleCurrentColorIcon, { fill: theme?.colors[COLORS[color]][variant] ?? color ?? 'white' }));
+    const colorGroup = theme?.colors?.[color];
+    const resolvedColor = colorGroup && typeof colorGroup === 'object'
+        ? colorGroup[variant] ??
+            colorGroup.fg
+        : undefined;
+    return (_jsx(CircleCurrentColorIcon, { fill: resolvedColor ?? color ?? 'currentColor', color: resolvedColor ?? color ?? 'currentColor' }));
 };
 export default CircleIcon;

package/lib/components/index.d.ts

@@ -5,7 +5,7 @@ export * from "./card/Card";
 export * from "./content-loader/ContentLoader";
 export * from "./closeable-flash/CloseableFlash";
 export * from "./icons/CircleIcon";
-export * from "./overlay/Overlay";
+export * from "./side-overlay/SideOverlay";
 export * from "./slider/Slider";
 export * from "./logo";
 export * from "./appearance";

package/lib/components/index.js

@@ -5,7 +5,7 @@ export * from "./card/Card";
 export * from "./content-loader/ContentLoader";
 export * from "./closeable-flash/CloseableFlash";
 export * from "./icons/CircleIcon";
-export * from "./overlay/Overlay";
+export * from "./side-overlay/SideOverlay";
 export * from "./slider/Slider";
 export * from "./logo";
 export * from "./appearance";

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

@@ -0,0 +1,17 @@
+import { type SVGProps } from 'react';
+import { type ThemeVariant } from '../../theme';
+export interface AIProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {
+    size?: number;
+    variant?: ThemeVariant;
+    colorMode?: 'light' | 'dark' | 'auto';
+    /** Colour of the "I" glyph. */
+    primaryColor?: string;
+    /** Colour of the "A" glyph. */
+    secondaryColor?: string;
+}
+/**
+ * AI glyph mark from the official brand source SVG.
+ * Defaults to themed logo colors and supports explicit overrides.
+ */
+export declare const AI: import("react").ForwardRefExoticComponent<AIProps & import("react").RefAttributes<SVGSVGElement>>;
+export default AI;

package/lib/components/logo/AI.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } 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';
+/**
+ * AI glyph mark from the official brand source SVG.
+ * Defaults to themed logo colors and supports explicit overrides.
+ */
+export const AI = forwardRef(function AI({ size = 24, variant = 'datalayer', colorMode = 'light', primaryColor, secondaryColor, ...svgProps }, ref) {
+    const themed = getLogoColors(variant, colorMode);
+    const resolvedPrimary = primaryColor ?? themed.primary;
+    const resolvedSecondary = secondaryColor ?? themed.textColor;
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", width: size, height: size, role: "img", "aria-label": "AI", ref: ref, ...svgProps, children: [_jsx("path", { d: "m13.788825 3.932 6.43325 16.136075h3.5279L17.316725 3.932H13.788825Z", fill: resolvedPrimary, strokeWidth: 0.25 }), _jsx("path", { d: "m6.325375 13.682775 2.20125 -5.67065 2.201275 5.67065H6.325375ZM6.68225 3.932 0.25 20.068075h3.596525l1.3155 -3.3886h6.729425l1.315275 3.3886h3.59655L10.371 3.932H6.68225Z", fill: resolvedSecondary, fillRule: "evenodd", clipRule: "evenodd", strokeWidth: 0.25 })] }));
+});
+export default AI;

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

@@ -0,0 +1,20 @@
+import { type SVGProps } from 'react';
+import { type ThemeVariant } from '../../theme';
+export interface AI2Props extends Omit<SVGProps<SVGSVGElement>, 'ref'> {
+    size?: number;
+    variant?: ThemeVariant;
+    colorMode?: 'light' | 'dark' | 'auto';
+    /** Colour of the "I" glyph. */
+    primaryColor?: string;
+    /** Colour of the "A" glyph. */
+    secondaryColor?: string;
+}
+/**
+ * Alternate AI glyph mark.
+ *
+ * A is rendered with an oblique left bar, a right vertical bar,
+ * and a horizontal crossbar.
+ * I is rendered as a simple vertical bar.
+ */
+export declare const AI2: import("react").ForwardRefExoticComponent<AI2Props & import("react").RefAttributes<SVGSVGElement>>;
+export default AI2;

package/lib/components/logo/AI2.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } 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';
+/**
+ * Alternate AI glyph mark.
+ *
+ * A is rendered with an oblique left bar, a right vertical bar,
+ * and a horizontal crossbar.
+ * I is rendered as a simple vertical bar.
+ */
+export const AI2 = forwardRef(function AI2({ size = 24, variant = 'datalayer', colorMode = 'light', primaryColor, secondaryColor, ...svgProps }, ref) {
+    const themed = getLogoColors(variant, colorMode);
+    const resolvedPrimary = primaryColor ?? themed.primary;
+    const resolvedSecondary = secondaryColor ?? themed.textColor;
+    const barWidth = 3.1;
+    const leftBarBottomInnerX = -2.2 + barWidth;
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "-2.2 0 26.2 24", width: size, height: size, role: "img", "aria-label": "AI2", ref: ref, ...svgProps, children: [_jsx("path", { d: `M15.35 3.5h${barWidth}V20h-${barWidth}z`, fill: resolvedPrimary }), _jsx("path", { d: `M-2.2 20 9.8 3.5h${barWidth}L${leftBarBottomInnerX} 20H-2.2z`, fill: resolvedSecondary }), _jsx("path", { d: `M10.35 3.5h${barWidth}V20h-${barWidth}z`, fill: resolvedSecondary }), _jsx("path", { d: "M3.5 12.95h9.6v2.75H3.5z", fill: resolvedSecondary })] }));
+});
+export default AI2;

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

@@ -0,0 +1,19 @@
+import { type SVGProps } from 'react';
+import { type ThemeVariant } from '../../theme';
+export interface DIProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {
+    size?: number;
+    variant?: ThemeVariant;
+    colorMode?: 'light' | 'dark' | 'auto';
+    /** Colour of the "I" glyph. */
+    primaryColor?: string;
+    /** Colour of the "D" glyph. */
+    secondaryColor?: string;
+}
+/**
+ * DI glyph mark.
+ *
+ * Uses the same public API and semantic color mapping as AI:
+ * primaryColor styles the "I", secondaryColor styles the "D".
+ */
+export declare const DI: import("react").ForwardRefExoticComponent<DIProps & import("react").RefAttributes<SVGSVGElement>>;
+export default DI;

package/lib/components/logo/DI.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } 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';
+/**
+ * DI glyph mark.
+ *
+ * Uses the same public API and semantic color mapping as AI:
+ * primaryColor styles the "I", secondaryColor styles the "D".
+ */
+export const DI = forwardRef(function DI({ size = 24, variant = 'datalayer', colorMode = 'light', primaryColor, secondaryColor, ...svgProps }, ref) {
+    const themed = getLogoColors(variant, colorMode);
+    const resolvedPrimary = primaryColor ?? themed.primary;
+    const resolvedSecondary = secondaryColor ?? themed.textColor;
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", width: size, height: size, role: "img", "aria-label": "DI", ref: ref, ...svgProps, children: [_jsx("path", { d: "M2 3.932H5V20.068075H2ZM3.5 3.932H6.5L12.933 20.068075H9.933ZM2 17.068075H11.4V20.068075H2Z", fill: resolvedSecondary, strokeWidth: 0.25 }), _jsx("path", { d: "m10.788825 3.932 6.43325 16.136075h3.5279L14.316725 3.932H10.788825Z", fill: resolvedPrimary, strokeWidth: 0.25 })] }));
+});
+export default DI;

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

@@ -0,0 +1,25 @@
+import { type SVGProps } from 'react';
+import { type ThemeVariant } from '../../theme';
+export interface DatalayerTextAIProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {
+    size?: number;
+    scale?: number;
+    colorMode?: 'light' | 'dark' | 'auto';
+    variant?: ThemeVariant;
+    /** Colour for the "LAYER" part of the wordmark. */
+    primaryColor?: string;
+    /** Secondary accent colour used by the AI glyph. */
+    secondaryColor?: string;
+    /** Colour for the "DATA" part of the wordmark. */
+    textColor?: string;
+    textSizeMultiplier?: number;
+    aiPrimaryColor?: string;
+    aiSecondaryColor?: string;
+    /** Gap between wordmark and AI glyph in viewBox units. */
+    aiGap?: number;
+}
+/**
+ * Datalayer wordmark followed by AI glyph on one line.
+ * Both elements are aligned to the same 25-unit cap height.
+ */
+export declare const DatalayerTextAI: import("react").ForwardRefExoticComponent<DatalayerTextAIProps & import("react").RefAttributes<SVGSVGElement>>;
+export default DatalayerTextAI;

package/lib/components/logo/DatalayerTextAI.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { forwardRef } from 'react';
+import { AI } from './AI';
+import { DatalayerText } from './DatalayerText';
+import { getLogoColors } from './DatalayerLogo';
+const TEXT_LEFT_TRIM = 12;
+const TEXT_END_X = 136.672 - TEXT_LEFT_TRIM;
+const AI_SIZE = 24;
+const AI_VISIBLE_TOP = 3.932;
+const AI_VISIBLE_LEFT = 0.25;
+const AI_VISIBLE_HEIGHT = 16.136075;
+const AI_SCALE_TO_TEXT_HEIGHT = 25 / AI_VISIBLE_HEIGHT;
+const AI_RENDER_SIZE = AI_SIZE * AI_SCALE_TO_TEXT_HEIGHT;
+const AI_X_TRIM = AI_VISIBLE_LEFT * AI_SCALE_TO_TEXT_HEIGHT;
+const AI_Y_TRIM = AI_VISIBLE_TOP * AI_SCALE_TO_TEXT_HEIGHT;
+/**
+ * Datalayer wordmark followed by AI glyph on one line.
+ * Both elements are aligned to the same 25-unit cap height.
+ */
+export const DatalayerTextAI = forwardRef(function DatalayerTextAI({ size = 25, scale = 1, colorMode = 'light', variant = 'datalayer', primaryColor, secondaryColor, textColor, 
+// 2.380655 ~= 25 / (0.7 * 15.00187)
+textSizeMultiplier = 2.380655, aiPrimaryColor, aiSecondaryColor, aiGap = 6, ...svgProps }, ref) {
+    const themed = getLogoColors(variant, colorMode);
+    const layerColor = primaryColor ?? themed.primary;
+    const accentColor = secondaryColor ?? themed.secondary;
+    const dataTextColor = textColor ?? themed.textColor;
+    const resolvedAiPrimary = aiPrimaryColor ?? layerColor;
+    const resolvedAiSecondary = aiSecondaryColor ?? accentColor;
+    const viewBoxWidth = TEXT_END_X + aiGap + AI_RENDER_SIZE - AI_X_TRIM;
+    const baseHeight = size;
+    const baseWidth = (viewBoxWidth / 25) * size;
+    const height = baseHeight * scale;
+    const width = baseWidth * scale;
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: `0 0 ${viewBoxWidth} 25`, width: width, height: height, role: "img", "aria-label": "Datalayer AI", ref: ref, ...svgProps, children: [_jsx(DatalayerText, { primaryColor: layerColor, secondaryColor: dataTextColor, sizeMultiplier: textSizeMultiplier, x: -TEXT_LEFT_TRIM }), _jsx(AI, { size: AI_RENDER_SIZE, x: TEXT_END_X + aiGap - AI_X_TRIM, y: -AI_Y_TRIM, variant: variant, colorMode: colorMode, primaryColor: resolvedAiPrimary, secondaryColor: resolvedAiSecondary })] }));
+});
+export default DatalayerTextAI;

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

@@ -1,3 +1,7 @@
+export * from './AI';
+export * from './AI2';
+export * from './DI';
 export * from './DatalayerLogo';
 export * from './DatalayerLogoText';
 export * from './DatalayerText';
+export * from './DatalayerTextAI';

package/lib/components/logo/index.js

@@ -1,3 +1,7 @@
+export * from './AI';
+export * from './AI2';
+export * from './DI';
 export * from './DatalayerLogo';
 export * from './DatalayerLogoText';
 export * from './DatalayerText';
+export * from './DatalayerTextAI';

package/lib/components/{overlay/Overlay.d.ts → side-overlay/SideOverlay.d.ts}

@@ -1,4 +1,4 @@
-export interface OverlayProps {
+export interface SideOverlayProps {
     closeButtonRef?: React.RefObject<HTMLButtonElement>;
     content: JSX.Element;
     direction?: 'left' | 'right';
@@ -9,5 +9,5 @@ export interface OverlayProps {
     width?: number | string;
     zIndex?: number;
 }
-export declare const Overlay: ({ width, direction, zIndex, ...rest }: OverlayProps) => import("react/jsx-runtime").JSX.Element;
-export default Overlay;
+export declare const SideOverlay: ({ width, direction, zIndex, ...rest }: SideOverlayProps) => import("react/jsx-runtime").JSX.Element;
+export default SideOverlay;

package/lib/components/{overlay/Overlay.js → side-overlay/SideOverlay.js}

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import { IconButton, Overlay as PrimerOverlay, BaseStyles, ThemeProvider, useTheme } from "@primer/react";
+import { IconButton, Overlay as PrimerOverlay, ThemeProvider, useTheme } from "@primer/react";
 import { XIcon } from "@primer/octicons-react";
 import { Box } from '../box/Box';
 const PrimerAddonOverlay = (props) => {
@@ -25,19 +25,19 @@ const PrimerAddonOverlay = (props) => {
         }
         closeOverlay();
     };
-    const overlayContent = (_jsx(ThemeProvider, { theme: theme, colorMode: colorMode, children: _jsx(BaseStyles, { children: _jsxs(Box, { sx: {
-                    /* We need to remove the padding */
-                    height: `calc(100vh - ${top}px - 8px)`,
-                    width,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                    padding: '4px'
-                }, children: [_jsx(Box, { sx: {
-                            display: 'flex',
-                            justifyContent: 'right',
-                            width: '100%'
-                        }, children: _jsx(IconButton, { variant: 'invisible', ref: closeButtonRef, onClick: closeOverlay, icon: XIcon, "aria-labelledby": "close" }) }), content] }) }) }));
+    const overlayContent = (_jsx(ThemeProvider, { theme: theme, colorMode: colorMode, children: _jsxs(Box, { sx: {
+                /* We need to remove the padding */
+                height: `calc(100vh - ${top}px - 8px)`,
+                width,
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                padding: '4px'
+            }, children: [_jsx(Box, { sx: {
+                        display: 'flex',
+                        justifyContent: 'right',
+                        width: '100%'
+                    }, children: _jsx(IconButton, { variant: 'invisible', ref: closeButtonRef, onClick: closeOverlay, icon: XIcon, "aria-labelledby": "close" }) }), content] }) }));
     return (closeButtonRef && openButtonRef ?
         _jsx(_Fragment, { children: isOpen ?
                 direction === 'left' ?
@@ -48,7 +48,7 @@ const PrimerAddonOverlay = (props) => {
         :
             _jsx(_Fragment, {}));
 };
-export const Overlay = ({ width = '500px', direction = 'left', zIndex = 100, ...rest }) => {
+export const SideOverlay = ({ width = '500px', direction = 'left', zIndex = 100, ...rest }) => {
     return (_jsx(PrimerAddonOverlay, { width: width, direction: direction, zIndex: zIndex, ...rest }));
 };
-export default Overlay;
+export default SideOverlay;

package/lib/components/side-overlay/SideOverlay.stories.d.ts

@@ -0,0 +1,16 @@
+import type { StoryObj } from '@storybook/react';
+import { SideOverlayProps } from '../..';
+declare const meta: {
+    title: string;
+    component: ({ width, direction, zIndex, ...rest }: SideOverlayProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const SideOverlayDayLeft: Story;
+export declare const SideOverlayDayRight: Story;
+export declare const SideOverlayNightLeft: Story;
+export declare const SideOverlayNightRight: Story;

package/lib/components/{overlay/Overlay.stories.js → side-overlay/SideOverlay.stories.js}

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef } from "react";
 import { Heading, Text, Box, Button } from "@primer/react";
-import { Overlay } from '../..';
+import { SideOverlay } from '../..';
 const meta = {
-    title: 'Components/Overlay',
-    component: Overlay,
+    title: 'Components/SideOverlay',
+    component: SideOverlay,
     // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
     tags: ['autodocs'],
     parameters: {
@@ -13,42 +13,42 @@ const meta = {
     },
 };
 export default meta;
-const ThemedOverlay = (props) => {
+const ThemedSideOverlay = (props) => {
     const [isOpen, setIsOpen] = useState(false);
     const openButtonRef = useRef(null);
     const closeButtonRef = useRef(null);
     const headingRef = useRef(null);
-    return (_jsx(Box, { p: 3, bg: "canvas.default", children: _jsxs(Box, { children: [_jsx(Box, { sx: { width: '100%', bg: 'darkgray' }, children: _jsx(Heading, { ref: headingRef, children: "Header" }) }), _jsxs(Box, { children: [_jsx(Button, { ref: openButtonRef, onClick: () => { setIsOpen(!isOpen); }, children: "Open overlay" }), _jsx(Overlay, { ...props, isOpen: isOpen, setIsOpen: setIsOpen, openButtonRef: openButtonRef, closeButtonRef: closeButtonRef })] })] }) }));
+    return (_jsx(Box, { p: 3, bg: "canvas.default", children: _jsxs(Box, { children: [_jsx(Box, { sx: { width: '100%', bg: 'darkgray' }, children: _jsx(Heading, { ref: headingRef, children: "Header" }) }), _jsxs(Box, { children: [_jsx(Button, { ref: openButtonRef, onClick: () => { setIsOpen(!isOpen); }, children: "Open overlay" }), _jsx(SideOverlay, { ...props, isOpen: isOpen, setIsOpen: setIsOpen, openButtonRef: openButtonRef, closeButtonRef: closeButtonRef })] })] }) }));
 };
-export const OverlayDayLeft = {
+export const SideOverlayDayLeft = {
     args: {
         content: _jsx(Text, { children: "\uD83D\uDC48 Look, left aligned, no heading." }),
         direction: "left",
         width: '500px',
     },
-    render: (args) => _jsx(ThemedOverlay, { ...args, colorMode: "day" })
+    render: (args) => _jsx(ThemedSideOverlay, { ...args, colorMode: "day" })
 };
-export const OverlayDayRight = {
+export const SideOverlayDayRight = {
     args: {
         content: _jsx(Text, { children: "Look, right aligned, on heading \uD83D\uDC49" }),
         direction: "right",
         width: '500px',
     },
-    render: (args) => _jsx(ThemedOverlay, { ...args, colorMode: "day" })
+    render: (args) => _jsx(ThemedSideOverlay, { ...args, colorMode: "day" })
 };
-export const OverlayNightLeft = {
+export const SideOverlayNightLeft = {
     args: {
         content: _jsx(Text, { children: "\uD83D\uDC48 Look, left aligned, no heading." }),
         direction: "left",
         width: '300px',
     },
-    render: (args) => _jsx(ThemedOverlay, { ...args, colorMode: "night" })
+    render: (args) => _jsx(ThemedSideOverlay, { ...args, colorMode: "night" })
 };
-export const OverlayNightRight = {
+export const SideOverlayNightRight = {
     args: {
         content: _jsx(Text, { children: "Look, right aligned, on heading \uD83D\uDC49" }),
         direction: "right",
         width: '300px',
     },
-    render: (args) => _jsx(ThemedOverlay, { ...args, colorMode: "night" })
+    render: (args) => _jsx(ThemedSideOverlay, { ...args, colorMode: "night" })
 };

package/lib/components/slider/Slider.js

@@ -17,7 +17,8 @@ export const Slider = ({ name = "slider", id = "slider", min = 0, max = 10, valu
     const sliderStyle = {
         width,
         ...(orientation === "vertical" ? { transform: "rotate(-90deg)" } : {}),
-        colorScheme: colorMode == 'day' ? 'light' : 'dark'
+        colorScheme: colorMode == 'day' ? 'light' : 'dark',
+        accentColor: 'var(--fgColor-accent)',
     };
     return (_jsxs(Box, { display: "flex", alignItems: "center", children: [_jsx("input", { type: "range", id: id, name: name, min: min, max: max, value: sliderVal, step: step ?? "any", list: "slider-markers", style: sliderStyle, onChange: handleSliderChange, disabled: disabled }), markers && step && (_jsx("datalist", { id: "slider-markers", children: Array.from({ length: Math.floor((max - min) / step) + 1 }, (_, i) => min + i * step).map((e) => (
                 // TODO: Supply markers as array and show them here

package/lib/components/toolbar/FloatingToolbar.js

@@ -114,9 +114,9 @@ export function FloatingToolbar({ items, extraItems, anchorElement, isVisible, c
             gap: '2px',
             px: 1,
             py: '4px',
-            bg: 'canvas.overlay',
+            bg: 'var(--overlay-bgColor, var(--bgColor-default))',
             border: '1px solid',
-            borderColor: 'border.default',
+            borderColor: 'var(--borderColor-muted, transparent)',
             borderRadius: 2,
             boxShadow: 'shadow.large',
             position: 'absolute',

package/lib/theme/DatalayerThemeProvider.d.ts

@@ -25,7 +25,7 @@ export interface IDatalayerThemeProviderProps extends Omit<ThemeProviderProps, '
      * When provided, these replace the built-in datalayer styles entirely.
      * The `baseStyles` prop is still merged on top.
      *
-     * Use the `buildThemeStyles` helper from `./themes/createThemeCSSVars`
+     * Use the `buildThemeStyles` helper from `./css/createThemeCSSVars`
      * to generate comprehensive overrides from a `ThemeColorDefs` pair.
      */
     themeStyles?: {

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

@@ -3,7 +3,6 @@ export { spatialColors } from './spatialColors';
 export { lovelyColors } from './lovelyColors';
 export { matrixColors } from './matrixColors';
 export { earthColors } from './earthColors';
-export { indicatorColors, defaultIndicatorColors, type IndicatorColors, } from './indicatorColors';
 import type { ThemeVariant } from '../themeRegistry';
 /**
  * Themed color palettes — maps each `ThemeVariant` to its corresponding

package/lib/theme/colors/index.js

@@ -7,7 +7,6 @@ export { spatialColors } from './spatialColors';
 export { lovelyColors } from './lovelyColors';
 export { matrixColors } from './matrixColors';
 export { earthColors } from './earthColors';
-export { indicatorColors, defaultIndicatorColors, } from './indicatorColors';
 import { datalayerColors } from './datalayerColors';
 import { spatialColors } from './spatialColors';
 import { lovelyColors } from './lovelyColors';

package/lib/theme/{themes → css}/createThemeCSSVars.js

@@ -43,6 +43,13 @@ export function colorDefsToCSS(defs) {
         '--bgColor-default': defs.canvas.default,
         '--bgColor-inset': defs.canvas.default,
         ...optional,
+        /* ── Overlay (portaled surfaces: menus, dialogs, popovers) ────
+         * Primer's <Overlay> paints its surface with `var(--overlay-bgColor)`,
+         * which normally ships in @primer/primitives. Apps using this theme do
+         * NOT load primitives CSS, so define the overlay tokens here to avoid
+         * transparent overlay panels. */
+        '--overlay-bgColor': defs.canvas.default,
+        '--overlay-backdrop-bgColor': 'rgba(0, 0, 0, 0.5)',
         /* ── Foreground / Text ───────────────────────────────────────── */
         '--fgColor-default': defs.fg.default,
         '--fgColor-muted': defs.fg.muted,
@@ -174,6 +181,7 @@ export function colorDefsToCSS(defs) {
         /* ── Datalayer brand tokens (consumed by custom components) ─── */
         '--brand-color-canvas-default': defs.canvas.default,
         '--brand-color-text-default': defs.fg.default,
+        '--datalayer-icon-fg': defs.accent.fg,
     };
 }
 /**

package/lib/theme/index.d.ts

@@ -1,5 +1,6 @@
 export * from './colors';
-export * from './themes/createThemeCSSVars';
+export * from './indicators';
+export * from './css/createThemeCSSVars';
 export * from './themes/datalayerTheme';
 export * from './DatalayerThemeProvider';
 export * from './DatalayerBrandThemeProvider';

package/lib/theme/index.js

@@ -3,7 +3,8 @@
  * Distributed under the terms of the Modified BSD License.
  */
 export * from './colors';
-export * from './themes/createThemeCSSVars';
+export * from './indicators';
+export * from './css/createThemeCSSVars';
 export * from './themes/datalayerTheme';
 export * from './DatalayerThemeProvider';
 export * from './DatalayerBrandThemeProvider';

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

@@ -0,0 +1 @@
+export { indicatorColors, defaultIndicatorColors, type IndicatorColors, } from './indicatorColors';

package/lib/theme/indicators/index.js

@@ -0,0 +1,5 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export { indicatorColors, defaultIndicatorColors, } from './indicatorColors';

package/lib/theme/palettes/{SvgPalette.d.ts → ColorPalette.d.ts}

@@ -1,5 +1,5 @@
 import { type ThemeVariant } from '../themeRegistry';
-export interface SvgPalette {
+export interface ColorPalette {
     bg: string;
     bgPanel: string;
     bgAlt: string;
@@ -17,15 +17,15 @@ export interface SvgPalette {
     textMuted: string;
     isLight: boolean;
 }
-export declare function getSvgPalette(theme?: ThemeVariant, colorMode?: 'light' | 'dark' | 'auto'): SvgPalette;
-export declare function useSvgPalette(): SvgPalette;
-/** @deprecated Use `useSvgPalette` instead. */
-export declare const useBlogSvgPalette: typeof useSvgPalette;
+export declare function getColorPalette(theme?: ThemeVariant, colorMode?: 'light' | 'dark' | 'auto'): ColorPalette;
+export declare function useColorPalette(): ColorPalette;
+/** @deprecated Use `useColorPalette` instead. */
+export declare const useBlogColorPalette: typeof useColorPalette;
 export declare const LightBoostFilter: () => import("react/jsx-runtime").JSX.Element;
 export declare const SharedDefs: ({ p }: {
-    p: SvgPalette;
+    p: ColorPalette;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const svgLightFilter: (p: SvgPalette) => "url(#svgLightBoost)" | undefined;
+export declare const svgLightFilter: (p: ColorPalette) => "url(#svgLightBoost)" | undefined;
 export declare const BgGrid: ({ w, h }: {
     w?: number;
     h?: number;

package/lib/theme/palettes/{SvgPalette.js → ColorPalette.js}

@@ -5,8 +5,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Datalayer License
  */
 /**
- * Shared SVG palette types, theme-aware colour resolution, and reusable
- * gradient / grid definitions consumed by SVG illustrations.
+ * Shared palette types, theme-aware colour resolution, and reusable
+ * gradient / grid definitions.
  */
 import { datalayerColors, spatialColors, lovelyColors, matrixColors, earthColors, } from '../colors';
 import { getBrightPalette, } from '../themeRegistry';
@@ -213,7 +213,7 @@ const palettes = {
         },
     },
 };
-export function getSvgPalette(theme = 'datalayer', colorMode = 'auto') {
+export function getColorPalette(theme = 'datalayer', colorMode = 'auto') {
     const mode = colorMode === 'auto'
         ? typeof window !== 'undefined' &&
             window.matchMedia('(prefers-color-scheme: dark)').matches
@@ -222,12 +222,12 @@ export function getSvgPalette(theme = 'datalayer', colorMode = 'auto') {
         : colorMode;
     return palettes[theme]?.[mode] ?? palettes.datalayer.dark;
 }
-export function useSvgPalette() {
+export function useColorPalette() {
     const { colorMode, theme } = useThemeStore();
-    return getSvgPalette(theme, colorMode);
+    return getColorPalette(theme, colorMode);
 }
-/** @deprecated Use `useSvgPalette` instead. */
-export const useBlogSvgPalette = useSvgPalette;
+/** @deprecated Use `useColorPalette` instead. */
+export const useBlogColorPalette = useColorPalette;
 export const LightBoostFilter = () => (_jsx("filter", { id: "svgLightBoost", colorInterpolationFilters: "sRGB", children: _jsx("feComponentTransfer", { children: _jsx("feFuncA", { type: "gamma", exponent: "0.45", amplitude: "1", offset: "0" }) }) }));
 export const SharedDefs = ({ p }) => (_jsxs("defs", { children: [_jsx(LightBoostFilter, {}), _jsxs("linearGradient", { id: "fadeGreen", x1: "0", y1: "0", x2: "1", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: p.primary, stopOpacity: "0.7" }), _jsx("stop", { offset: "100%", stopColor: p.secondary, stopOpacity: "0" })] }), _jsxs("linearGradient", { id: "fadeGreenH", x1: "0", y1: "0", x2: "1", y2: "0", children: [_jsx("stop", { offset: "0%", stopColor: p.primary, stopOpacity: "0.5" }), _jsx("stop", { offset: "50%", stopColor: p.secondary, stopOpacity: "0.25" }), _jsx("stop", { offset: "100%", stopColor: p.secondary, stopOpacity: "0" })] }), _jsxs("linearGradient", { id: "fadeBright", x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: p.accent, stopOpacity: "0.4" }), _jsx("stop", { offset: "100%", stopColor: p.accent, stopOpacity: "0" })] }), _jsxs("linearGradient", { id: "fadeVivid", x1: "0", y1: "0", x2: "1", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: p.glow, stopOpacity: "0.8" }), _jsx("stop", { offset: "50%", stopColor: p.pop, stopOpacity: "0.5" }), _jsx("stop", { offset: "100%", stopColor: p.spark, stopOpacity: "0" })] }), _jsxs("linearGradient", { id: "fadeVividH", x1: "0", y1: "0", x2: "1", y2: "0", children: [_jsx("stop", { offset: "0%", stopColor: p.glow, stopOpacity: "0.6" }), _jsx("stop", { offset: "100%", stopColor: p.pop, stopOpacity: "0.15" })] }), _jsxs("radialGradient", { id: "glowGreen", children: [_jsx("stop", { offset: "0%", stopColor: p.primary, stopOpacity: "0.6" }), _jsx("stop", { offset: "100%", stopColor: p.primary, stopOpacity: "0" })] }), _jsxs("radialGradient", { id: "glowBright", children: [_jsx("stop", { offset: "0%", stopColor: p.accent, stopOpacity: "0.45" }), _jsx("stop", { offset: "100%", stopColor: p.accent, stopOpacity: "0" })] }), _jsxs("radialGradient", { id: "glowVivid", children: [_jsx("stop", { offset: "0%", stopColor: p.glow, stopOpacity: "0.7" }), _jsx("stop", { offset: "60%", stopColor: p.glow, stopOpacity: "0.2" }), _jsx("stop", { offset: "100%", stopColor: p.glow, stopOpacity: "0" })] }), _jsxs("radialGradient", { id: "glowPop", children: [_jsx("stop", { offset: "0%", stopColor: p.pop, stopOpacity: "0.65" }), _jsx("stop", { offset: "60%", stopColor: p.pop, stopOpacity: "0.15" }), _jsx("stop", { offset: "100%", stopColor: p.pop, stopOpacity: "0" })] }), _jsxs("radialGradient", { id: "glowSpark", children: [_jsx("stop", { offset: "0%", stopColor: p.spark, stopOpacity: "0.6" }), _jsx("stop", { offset: "60%", stopColor: p.spark, stopOpacity: "0.15" }), _jsx("stop", { offset: "100%", stopColor: p.spark, stopOpacity: "0" })] }), _jsxs("radialGradient", { id: "glowBlaze", children: [_jsx("stop", { offset: "0%", stopColor: p.blaze, stopOpacity: "0.7" }), _jsx("stop", { offset: "55%", stopColor: p.blaze, stopOpacity: "0.2" }), _jsx("stop", { offset: "100%", stopColor: p.blaze, stopOpacity: "0" })] }), _jsxs("radialGradient", { id: "glowSurge", children: [_jsx("stop", { offset: "0%", stopColor: p.surge, stopOpacity: "0.7" }), _jsx("stop", { offset: "55%", stopColor: p.surge, stopOpacity: "0.2" }), _jsx("stop", { offset: "100%", stopColor: p.surge, stopOpacity: "0" })] }), _jsxs("radialGradient", { id: "glowFlame", children: [_jsx("stop", { offset: "0%", stopColor: p.flame, stopOpacity: "0.7" }), _jsx("stop", { offset: "55%", stopColor: p.flame, stopOpacity: "0.2" }), _jsx("stop", { offset: "100%", stopColor: p.flame, stopOpacity: "0" })] }), _jsxs("radialGradient", { id: "glowGold", children: [_jsx("stop", { offset: "0%", stopColor: p.gold, stopOpacity: "0.7" }), _jsx("stop", { offset: "55%", stopColor: p.gold, stopOpacity: "0.2" }), _jsx("stop", { offset: "100%", stopColor: p.gold, stopOpacity: "0" })] }), _jsxs("linearGradient", { id: "fadeBlazeToSurge", x1: "0", y1: "0", x2: "1", y2: "0", children: [_jsx("stop", { offset: "0%", stopColor: p.blaze, stopOpacity: "0.7" }), _jsx("stop", { offset: "50%", stopColor: p.spark, stopOpacity: "0.3" }), _jsx("stop", { offset: "100%", stopColor: p.surge, stopOpacity: "0.7" })] }), _jsx("pattern", { id: "gridDots", width: "24", height: "24", patternUnits: "userSpaceOnUse", children: _jsx("circle", { cx: "1", cy: "1", r: "0.7", fill: p.primary, opacity: "0.06" }) })] }));
 export const svgLightFilter = (p) => p.isLight ? 'url(#svgLightBoost)' : undefined;

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

@@ -1 +1 @@
-export * from './SvgPalette';
+export * from './ColorPalette';

package/lib/theme/palettes/index.js

@@ -3,4 +3,4 @@
  *
  * Datalayer License
  */
-export * from './SvgPalette';
+export * from './ColorPalette';

package/lib/theme/themes/datalayerTheme.d.ts

@@ -1087,5 +1087,5 @@ export declare const datalayerTheme: {
     }>;
 };
 /** Comprehensive Primer CSS-variable overrides for light & dark mode. */
-export declare const datalayerThemeStyles: import("./createThemeCSSVars").ThemeStyles;
+export declare const datalayerThemeStyles: import("../css/createThemeCSSVars").ThemeStyles;
 export default datalayerTheme;

package/lib/theme/themes/datalayerTheme.js

@@ -11,7 +11,7 @@
  */
 import { theme as primerTheme } from '@primer/react';
 import { datalayerColors } from '../colors';
-import { buildThemeStyles } from './createThemeCSSVars';
+import { buildThemeStyles } from '../css/createThemeCSSVars';
 /* ── Light-mode colour definitions ───────────────────────────────────── */
 const datalayerLight = {
     canvas: {

package/lib/theme/themes/earthTheme.d.ts

@@ -1087,5 +1087,5 @@ export declare const earthTheme: {
     }>;
 };
 /** Comprehensive Primer CSS-variable overrides for light & dark mode. */
-export declare const earthThemeStyles: import("./createThemeCSSVars").ThemeStyles;
+export declare const earthThemeStyles: import("../css/createThemeCSSVars").ThemeStyles;
 export default earthTheme;

package/lib/theme/themes/earthTheme.js

@@ -11,7 +11,7 @@
  */
 import { theme as primerTheme } from '@primer/react';
 import { earthColors } from '../colors/earthColors';
-import { buildThemeStyles } from './createThemeCSSVars';
+import { buildThemeStyles } from '../css/createThemeCSSVars';
 /* ── Light-mode colour definitions ───────────────────────────────────── */
 const earthLight = {
     canvas: {

package/lib/theme/themes/lovelyTheme.d.ts

@@ -1087,5 +1087,5 @@ export declare const lovelyTheme: {
     }>;
 };
 /** Comprehensive Primer CSS-variable overrides for light & dark mode. */
-export declare const lovelyThemeStyles: import("./createThemeCSSVars").ThemeStyles;
+export declare const lovelyThemeStyles: import("../css/createThemeCSSVars").ThemeStyles;
 export default lovelyTheme;

package/lib/theme/themes/lovelyTheme.js

@@ -10,7 +10,7 @@
  */
 import { theme as primerTheme } from '@primer/react';
 import { lovelyColors } from '../colors';
-import { buildThemeStyles } from './createThemeCSSVars';
+import { buildThemeStyles } from '../css/createThemeCSSVars';
 /* ── Light-mode colour definitions ───────────────────────────────────── */
 const lovelyLight = {
     canvas: {

package/lib/theme/themes/matrixTheme.d.ts

@@ -1087,5 +1087,5 @@ export declare const matrixTheme: {
     }>;
 };
 /** Comprehensive Primer CSS-variable overrides for light & dark mode. */
-export declare const matrixThemeStyles: import("./createThemeCSSVars").ThemeStyles;
+export declare const matrixThemeStyles: import("../css/createThemeCSSVars").ThemeStyles;
 export default matrixTheme;

package/lib/theme/themes/matrixTheme.js

@@ -10,7 +10,7 @@
  */
 import { theme as primerTheme } from '@primer/react';
 import { matrixColors } from '../colors';
-import { buildThemeStyles } from './createThemeCSSVars';
+import { buildThemeStyles } from '../css/createThemeCSSVars';
 /* ── Light-mode colour definitions ───────────────────────────────────── */
 const matrixLight = {
     canvas: {

package/lib/theme/themes/spatialTheme.d.ts

@@ -1087,5 +1087,5 @@ export declare const spatialTheme: {
     }>;
 };
 /** Comprehensive Primer CSS-variable overrides for light & dark mode. */
-export declare const spatialThemeStyles: import("./createThemeCSSVars").ThemeStyles;
+export declare const spatialThemeStyles: import("../css/createThemeCSSVars").ThemeStyles;
 export default spatialTheme;

package/lib/theme/themes/spatialTheme.js

@@ -10,7 +10,7 @@
  */
 import { theme as primerTheme } from '@primer/react';
 import { spatialColors } from '../colors';
-import { buildThemeStyles } from './createThemeCSSVars';
+import { buildThemeStyles } from '../css/createThemeCSSVars';
 /* ── Light-mode colour definitions ───────────────────────────────────── */
 const spatialLight = {
     canvas: {

package/lib/theme/useThemeStore.d.ts

@@ -22,11 +22,13 @@
 import { type StoreApi, type UseBoundStore } from 'zustand';
 import type { ThemeVariant } from './themeRegistry';
 import type { ColorMode } from './DatalayerBrandThemeProvider';
-/** Per-variant theme + colorMode preferences. */
-export type VariantDefaults = Record<string, {
+export type VariantPreference = {
     theme: ThemeVariant;
     colorMode: ColorMode;
-}>;
+    version?: number;
+};
+/** Per-variant theme + colorMode preferences. */
+export type VariantDefaults = Record<string, VariantPreference>;
 export interface ThemeState {
     /** Current color mode (light, dark, or auto = follow OS). */
     colorMode: ColorMode;

package/lib/theme/useThemeStore.js

@@ -26,6 +26,33 @@
 import { create } from 'zustand';
 import { persist, createJSONStorage } from 'zustand/middleware';
 import { themeConfigs } from './themeRegistry';
+const VARIANT_SCHEMA_VERSION = 1;
+function normalizeVariantPreference(pref) {
+    return {
+        theme: pref.theme,
+        colorMode: pref.colorMode,
+        version: typeof pref.version === 'number' ? pref.version : VARIANT_SCHEMA_VERSION,
+    };
+}
+function normalizeVariants(variants) {
+    if (!variants) {
+        return {};
+    }
+    const normalized = {};
+    for (const [key, pref] of Object.entries(variants)) {
+        if (!pref || typeof pref !== 'object' || !('theme' in pref) || !('colorMode' in pref)) {
+            continue;
+        }
+        normalized[key] = normalizeVariantPreference(pref);
+    }
+    return normalized;
+}
+function hasMissingVariantVersion(variants) {
+    if (!variants || Object.keys(variants).length === 0) {
+        return false;
+    }
+    return Object.values(variants).some(pref => typeof pref?.version !== 'number');
+}
 /* ── Helpers ─────────────────────────────────────────────────────── */
 const colorModeCycle = {
     light: 'dark',
@@ -49,7 +76,7 @@ export function createThemeStore(storageKey, defaults) {
         theme: defaults?.theme ?? 'matrix',
         /* ── variant state ──────────────────────────────────── */
         activeVariant: null,
-        variants: defaults?.variants ?? {},
+        variants: normalizeVariants(defaults?.variants),
         /* ── actions ────────────────────────────────────────── */
         toggleColorMode: () => set(state => {
             const next = colorModeCycle[state.colorMode];
@@ -58,7 +85,11 @@ export function createThemeStore(storageKey, defaults) {
                     colorMode: next,
                     variants: {
                         ...state.variants,
-                        [state.activeVariant]: { ...state.variants[state.activeVariant], colorMode: next },
+                        [state.activeVariant]: {
+                            ...state.variants[state.activeVariant],
+                            colorMode: next,
+                            version: VARIANT_SCHEMA_VERSION,
+                        },
                     },
                 };
             }
@@ -70,7 +101,11 @@ export function createThemeStore(storageKey, defaults) {
                     colorMode: mode,
                     variants: {
                         ...state.variants,
-                        [state.activeVariant]: { ...state.variants[state.activeVariant], colorMode: mode },
+                        [state.activeVariant]: {
+                            ...state.variants[state.activeVariant],
+                            colorMode: mode,
+                            version: VARIANT_SCHEMA_VERSION,
+                        },
                     },
                 };
             }
@@ -86,7 +121,11 @@ export function createThemeStore(storageKey, defaults) {
                     colorMode: nextColorMode,
                     variants: {
                         ...state.variants,
-                        [state.activeVariant]: { theme, colorMode: nextColorMode },
+                        [state.activeVariant]: {
+                            theme,
+                            colorMode: nextColorMode,
+                            version: VARIANT_SCHEMA_VERSION,
+                        },
                     },
                 };
             }
@@ -96,7 +135,13 @@ export function createThemeStore(storageKey, defaults) {
             const merged = { ...state.variants };
             for (const [key, val] of Object.entries(defs)) {
                 if (!merged[key]) {
-                    merged[key] = val;
+                    merged[key] = normalizeVariantPreference(val);
+                }
+                else {
+                    merged[key] = normalizeVariantPreference({
+                        ...merged[key],
+                        version: merged[key].version ?? VARIANT_SCHEMA_VERSION,
+                    });
                 }
             }
             return { variants: merged };
@@ -114,7 +159,7 @@ export function createThemeStore(storageKey, defaults) {
         }),
     }), {
         name: storageKey,
-        version: 2,
+        version: 3,
         storage: createJSONStorage(() => localStorage),
         partialize: state => ({
             colorMode: state.colorMode,
@@ -127,7 +172,31 @@ export function createThemeStore(storageKey, defaults) {
          * value the persisted state is discarded and the store starts fresh
          * from code-defined defaults.
          */
-        migrate: () => ({}),
+        migrate: persisted => {
+            const p = (persisted ?? {});
+            const legacyVariants = p.variants;
+            const missingVariantVersion = hasMissingVariantVersion(legacyVariants);
+            const variants = normalizeVariants(legacyVariants);
+            // Legacy snapshots without per-variant versions are upgraded to v1.
+            // Anonymous defaults are forced to matrix/dark during this upgrade.
+            if (missingVariantVersion) {
+                variants['agent-anonymous'] = {
+                    theme: 'matrix',
+                    colorMode: 'dark',
+                    version: VARIANT_SCHEMA_VERSION,
+                };
+            }
+            return {
+                ...p,
+                variants,
+                ...(missingVariantVersion
+                    ? {
+                        theme: p.activeVariant === 'agent-anonymous' ? 'matrix' : p.theme,
+                        colorMode: p.activeVariant === 'agent-anonymous' ? 'dark' : p.colorMode,
+                    }
+                    : {}),
+            };
+        },
         /**
          * Deep-merge variants during hydration so that:
          *  - Code-defined variants (from defaults or registerVariants) are
@@ -139,11 +208,11 @@ export function createThemeStore(storageKey, defaults) {
             const p = (persisted ?? {});
             // Build merged variants: start from code-defined, then overlay
             // any persisted variant whose prefs differ (user customisations).
-            const mergedVariants = { ...current.variants };
+            const mergedVariants = normalizeVariants(current.variants);
             if (p.variants) {
                 for (const [key, val] of Object.entries(p.variants)) {
                     if (val && typeof val === 'object' && 'theme' in val) {
-                        mergedVariants[key] = val;
+                        mergedVariants[key] = normalizeVariantPreference(val);
                     }
                 }
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/primer-addons",
-  "version": "1.0.15",
+  "version": "1.0.18",
   "license": "BSD-3-Clause",
   "scripts": {
     "build": "tsc && vite build",
@@ -8,6 +8,8 @@
     "build:lib": "npm run clean:lib&& tsc -b",
     "clean:lib": "rimraf lib tsconfig.tsbuildinfo",
     "dev": "vite",
+    "gallery": "npm --prefix examples/gallery run dev",
+    "gallery:build": "npm --prefix examples/gallery run build",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "start": "vite",
@@ -27,9 +29,9 @@
   "homepage": "https://primer-addons.datalayer.tech",
   "dependencies": {
     "@datalayer/icons-react": "^1.0.0",
-    "@primer/octicons-react": "^19.15.1",
-    "@primer/primitives": "^10.5.0",
-    "@primer/react": "^37.19.0",
+    "@primer/octicons-react": "^19.29.1",
+    "@primer/primitives": "^10.7.0",
+    "@primer/react": "^37.31.0",
     "react": "^18.3.1 || ^19.0.0",
     "react-dom": "^18.3.1 || ^19.0.0",
     "react-loading-skeleton": "^3.5.0",

package/lib/components/overlay/Overlay.stories.d.ts

@@ -1,16 +0,0 @@
-import type { StoryObj } from '@storybook/react';
-import { OverlayProps } from '../..';
-declare const meta: {
-    title: string;
-    component: ({ width, direction, zIndex, ...rest }: OverlayProps) => import("react/jsx-runtime").JSX.Element;
-    tags: string[];
-    parameters: {
-        layout: string;
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const OverlayDayLeft: Story;
-export declare const OverlayDayRight: Story;
-export declare const OverlayNightLeft: Story;
-export declare const OverlayNightRight: Story;