@datalayer/primer-addons 1.0.18 → 1.0.20

package/lib/components/color/ColorSwatch.js

@@ -0,0 +1,62 @@
+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 { useLayoutEffect, useRef, useState } from "react";
+import { Box, Text } from "@primer/react";
+import { useThemeStore } from "../../theme/useThemeStore";
+/** Convert an `rgb()` / `rgba()` string to a `#rrggbb` hex value. */
+function rgbToHex(rgb) {
+    const match = rgb.match(/rgba?\(([^)]+)\)/);
+    if (!match) {
+        return null;
+    }
+    const parts = match[1].split(",").map((part) => part.trim());
+    if (parts.length < 3) {
+        return null;
+    }
+    const [r, g, b] = parts.map((part) => parseInt(part, 10));
+    if ([r, g, b].some((channel) => Number.isNaN(channel))) {
+        return null;
+    }
+    const toHex = (channel) => channel.toString(16).padStart(2, "0");
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+/**
+ * Theme-aware color swatch. Renders a block filled with `color`, then reads
+ * the resolved value via `getComputedStyle` and displays it as a hex string.
+ * The resolved value recomputes whenever the active theme or color mode
+ * changes, so swatches backed by CSS custom properties stay in sync.
+ */
+export function ColorSwatch({ color, label, showValue = true, height = 54, }) {
+    const ref = useRef(null);
+    const { theme, colorMode } = useThemeStore();
+    const [hex, setHex] = useState(null);
+    useLayoutEffect(() => {
+        const raf = requestAnimationFrame(() => {
+            if (!ref.current) {
+                return;
+            }
+            const rgb = getComputedStyle(ref.current).backgroundColor;
+            setHex(rgbToHex(rgb));
+        });
+        return () => cancelAnimationFrame(raf);
+    }, [color, theme, colorMode]);
+    return (_jsxs(Box, { sx: {
+            display: "grid",
+            gridTemplateRows: `${height}px auto`,
+            border: "1px solid",
+            borderColor: "var(--borderColor-default)",
+            borderRadius: 2,
+            overflow: "hidden",
+            minWidth: 0,
+        }, children: [_jsx(Box, { ref: ref, style: { backgroundColor: color } }), _jsxs(Box, { sx: { p: 2, display: "grid", gap: 1 }, children: [_jsx(Text, { sx: {
+                            fontSize: 0,
+                            color: "fg.default",
+                            whiteSpace: "nowrap",
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                        }, title: label ?? color, children: label ?? color }), showValue && hex ? (_jsx(Text, { sx: { fontSize: 0, color: "fg.muted", fontFamily: "mono" }, children: hex })) : null] })] }));
+}
+export default ColorSwatch;

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

@@ -0,0 +1 @@
+export * from "./ColorSwatch";

package/lib/components/color/index.js

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

package/lib/components/index.d.ts

@@ -1,11 +1,17 @@
 export * from "./appearance/AppearanceControls";
 export * from "./appearance/AppearanceControlsWithStore";
+export * from "./appearance/AppearanceMenu";
+export * from "./appearance/ColorModeCircle";
+export * from "./appearance/ThemePreviewCard";
+export * from "./appearance/ThemeCircle";
 export * from "./box/Box";
 export * from "./card/Card";
+export * from "./color";
 export * from "./content-loader/ContentLoader";
 export * from "./closeable-flash/CloseableFlash";
 export * from "./icons/CircleIcon";
 export * from "./side-overlay/SideOverlay";
+export * from "./sliding-panel/SlidingPanel";
 export * from "./slider/Slider";
 export * from "./logo";
 export * from "./appearance";

package/lib/components/index.js

@@ -1,11 +1,17 @@
 export * from "./appearance/AppearanceControls";
 export * from "./appearance/AppearanceControlsWithStore";
+export * from "./appearance/AppearanceMenu";
+export * from "./appearance/ColorModeCircle";
+export * from "./appearance/ThemePreviewCard";
+export * from "./appearance/ThemeCircle";
 export * from "./box/Box";
 export * from "./card/Card";
+export * from "./color";
 export * from "./content-loader/ContentLoader";
 export * from "./closeable-flash/CloseableFlash";
 export * from "./icons/CircleIcon";
 export * from "./side-overlay/SideOverlay";
+export * from "./sliding-panel/SlidingPanel";
 export * from "./slider/Slider";
 export * from "./logo";
 export * from "./appearance";

package/lib/components/logo/DatalayerLogo.js

@@ -4,7 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Distributed under the terms of the Modified BSD License.
  */
 import { forwardRef, useId } from 'react';
-import { datalayerColors, spatialColors, lovelyColors, matrixColors, earthColors, } from '../../theme';
+import { datalayerColors, spatialColors, lovelyColors, matrixColors, earthColors, sandColors, ivoryColors, sunColors, } from '../../theme';
 /**
  * Gradient pattern derived from the original brand logo SVG:
  *   - Left bars:  accent → brand (bright → mid)
@@ -93,6 +93,54 @@ export const THEME_LOGO_COLORS = {
             secondaryGradient: [earthColors.oceanHover, earthColors.oceanAccent],
         },
     },
+    sand: {
+        light: {
+            primary: sandColors.sandBrand,
+            secondary: sandColors.sandText,
+            textColor: sandColors.gray,
+            primaryGradient: [sandColors.sandAccent, sandColors.sandBrand],
+            secondaryGradient: [sandColors.sandHover, sandColors.sandText],
+        },
+        dark: {
+            primary: sandColors.sandBright,
+            secondary: sandColors.sandAccent,
+            textColor: sandColors.gray,
+            primaryGradient: [sandColors.sandBright, sandColors.sandBrand],
+            secondaryGradient: [sandColors.sandHover, sandColors.sandAccent],
+        },
+    },
+    ivory: {
+        light: {
+            primary: ivoryColors.ivoryBrand,
+            secondary: ivoryColors.ivoryText,
+            textColor: ivoryColors.gray,
+            primaryGradient: [ivoryColors.ivoryAccent, ivoryColors.ivoryBrand],
+            secondaryGradient: [ivoryColors.ivoryHover, ivoryColors.ivoryText],
+        },
+        dark: {
+            primary: ivoryColors.ivoryBright,
+            secondary: ivoryColors.ivoryAccent,
+            textColor: ivoryColors.gray,
+            primaryGradient: [ivoryColors.ivoryBright, ivoryColors.ivoryBrand],
+            secondaryGradient: [ivoryColors.ivoryHover, ivoryColors.ivoryAccent],
+        },
+    },
+    sun: {
+        light: {
+            primary: sunColors.sunBrand,
+            secondary: sunColors.sunText,
+            textColor: sunColors.gray,
+            primaryGradient: [sunColors.sunAccent, sunColors.sunBrand],
+            secondaryGradient: [sunColors.sunHover, sunColors.sunText],
+        },
+        dark: {
+            primary: sunColors.sunBright,
+            secondary: sunColors.sunAccent,
+            textColor: sunColors.gray,
+            primaryGradient: [sunColors.sunBright, sunColors.sunBrand],
+            secondaryGradient: [sunColors.sunHover, sunColors.sunAccent],
+        },
+    },
 };
 export function getLogoColors(variant = 'datalayer', colorMode = 'light') {
     const mode = colorMode === 'auto' ? 'light' : colorMode;

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

@@ -1,9 +1,9 @@
-import { type SVGProps } from 'react';
-import { type ThemeVariant } from '../../theme';
-export interface DatalayerTextAIProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {
+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';
+    colorMode?: "light" | "dark" | "auto";
     variant?: ThemeVariant;
     /** Colour for the "LAYER" part of the wordmark. */
     primaryColor?: string;

package/lib/components/logo/DatalayerTextAI.js

@@ -3,10 +3,9 @@ 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';
+import { forwardRef } from "react";
+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;
@@ -15,13 +14,14 @@ 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_RENDER_SCALE = AI_RENDER_SIZE / AI_SIZE;
 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, 
+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);
@@ -35,6 +35,6 @@ textSizeMultiplier = 2.380655, aiPrimaryColor, aiSecondaryColor, aiGap = 6, ...s
     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 })] }));
+    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 }), _jsxs("g", { transform: `translate(${TEXT_END_X + aiGap - AI_X_TRIM} ${-AI_Y_TRIM}) scale(${AI_RENDER_SCALE})`, children: [_jsx("path", { d: "m13.788825 3.932 6.43325 16.136075h3.5279L17.316725 3.932H13.788825Z", fill: resolvedAiPrimary, 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: resolvedAiSecondary, fillRule: "evenodd", clipRule: "evenodd", strokeWidth: 0.25 })] })] }));
 });
 export default DatalayerTextAI;

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

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

package/lib/components/logo/index.js

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

package/lib/components/side-overlay/SideOverlay.js

@@ -37,7 +37,7 @@ const PrimerAddonOverlay = (props) => {
                         display: 'flex',
                         justifyContent: 'right',
                         width: '100%'
-                    }, children: _jsx(IconButton, { variant: 'invisible', ref: closeButtonRef, onClick: closeOverlay, icon: XIcon, "aria-labelledby": "close" }) }), content] }) }));
+                    }, children: _jsx(IconButton, { variant: 'invisible', ref: closeButtonRef, onClick: closeOverlay, icon: XIcon, "aria-label": "Close" }) }), content] }) }));
     return (closeButtonRef && openButtonRef ?
         _jsx(_Fragment, { children: isOpen ?
                 direction === 'left' ?

package/lib/components/sliding-panel/SlidingPanel.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+export type SlidingPanelPosition = 'north' | 'south' | 'west' | 'east';
+export type SlidingPanelVariant = 'default' | 'info' | 'success' | 'warning' | 'error' | 'danger';
+export interface SlidingPanelProps {
+    isOpen: boolean;
+    message: ReactNode;
+    details?: ReactNode;
+    onDismiss?: () => void;
+    position?: SlidingPanelPosition;
+    variant?: SlidingPanelVariant;
+    durationMs?: number;
+    transitionMs?: number;
+    zIndex?: number;
+    offset?: number;
+    panelSize?: number | string;
+    fullWidth?: boolean;
+}
+export declare const SlidingPanel: ({ isOpen, message, details, onDismiss, position, variant, durationMs, transitionMs, zIndex, offset, panelSize, fullWidth, }: SlidingPanelProps) => import("react/jsx-runtime").JSX.Element | null;
+export default SlidingPanel;

package/lib/components/sliding-panel/SlidingPanel.js

@@ -0,0 +1,217 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { IconButton } from '@primer/react';
+import { XIcon } from '@primer/octicons-react';
+import { Box } from '../box/Box';
+const variantStyles = {
+    default: {
+        bg: 'var(--bgColor-default, #ffffff)',
+        border: 'var(--borderColor-default, #d0d7de)',
+        fg: 'var(--fgColor-default, #1f2328)',
+    },
+    info: {
+        bg: 'var(--bgColor-accent-muted, #ddf4ff)',
+        border: 'var(--borderColor-accent-emphasis, #218bff)',
+        fg: 'var(--fgColor-default, #1f2328)',
+    },
+    success: {
+        bg: 'var(--bgColor-success-muted, #dafbe1)',
+        border: 'var(--borderColor-success-emphasis, #1a7f37)',
+        fg: 'var(--fgColor-success, #1a7f37)',
+    },
+    warning: {
+        bg: 'var(--bgColor-attention-muted, #fff8c5)',
+        border: 'var(--borderColor-attention-emphasis, #9a6700)',
+        fg: 'var(--fgColor-attention, #9a6700)',
+    },
+    error: {
+        bg: 'var(--bgColor-danger-muted, #ffebe9)',
+        border: 'var(--borderColor-danger-emphasis, #cf222e)',
+        fg: 'var(--fgColor-danger, #cf222e)',
+    },
+    danger: {
+        bg: 'var(--bgColor-danger-muted, #ffebe9)',
+        border: 'var(--borderColor-danger-emphasis, #cf222e)',
+        fg: 'var(--fgColor-danger, #cf222e)',
+    },
+};
+const closeButtonStyles = {
+    default: {
+        fg: 'var(--fgColor-default, #1f2328)',
+        hoverBg: 'rgba(31, 35, 40, 0.10)',
+    },
+    info: {
+        fg: 'var(--fgColor-accent, #0969da)',
+        hoverBg: 'rgba(9, 105, 218, 0.14)',
+    },
+    success: {
+        fg: 'var(--fgColor-success, #1a7f37)',
+        hoverBg: 'rgba(26, 127, 55, 0.14)',
+    },
+    warning: {
+        fg: 'var(--fgColor-attention, #9a6700)',
+        hoverBg: 'rgba(154, 103, 0, 0.16)',
+    },
+    error: {
+        fg: 'var(--fgColor-danger, #cf222e)',
+        hoverBg: 'rgba(207, 34, 46, 0.14)',
+    },
+    danger: {
+        fg: 'var(--fgColor-danger, #cf222e)',
+        hoverBg: 'rgba(207, 34, 46, 0.14)',
+    },
+};
+const closedTransforms = {
+    north: 'translateY(-100%)',
+    south: 'translateY(100%)',
+    west: 'translateX(-100%)',
+    east: 'translateX(100%)',
+};
+const edgeBorderStyles = {
+    north: {
+        borderTop: '0',
+        borderRight: '0',
+        borderBottom: '1px solid',
+        borderLeft: '0',
+    },
+    south: {
+        borderTop: '1px solid',
+        borderRight: '0',
+        borderBottom: '0',
+        borderLeft: '0',
+    },
+    west: {
+        borderTop: '0',
+        borderRight: '1px solid',
+        borderBottom: '0',
+        borderLeft: '0',
+    },
+    east: {
+        borderTop: '0',
+        borderRight: '0',
+        borderBottom: '0',
+        borderLeft: '1px solid',
+    },
+};
+export const SlidingPanel = ({ isOpen, message, details, onDismiss, position = 'north', variant = 'default', durationMs, transitionMs = 260, zIndex = 200, offset = 0, panelSize = 360, fullWidth = true, }) => {
+    const [isMounted, setIsMounted] = useState(isOpen);
+    const [isVisible, setIsVisible] = useState(isOpen);
+    useEffect(() => {
+        if (isOpen) {
+            setIsMounted(true);
+            const showTimer = window.setTimeout(() => setIsVisible(true), 10);
+            return () => window.clearTimeout(showTimer);
+        }
+        setIsVisible(false);
+        const hideTimer = window.setTimeout(() => setIsMounted(false), transitionMs);
+        return () => window.clearTimeout(hideTimer);
+    }, [isOpen, transitionMs]);
+    useEffect(() => {
+        if (!isOpen || !onDismiss) {
+            return;
+        }
+        if (durationMs === undefined || durationMs <= 0) {
+            return;
+        }
+        const timer = window.setTimeout(() => {
+            onDismiss();
+        }, durationMs);
+        return () => {
+            window.clearTimeout(timer);
+        };
+    }, [isOpen, durationMs, onDismiss]);
+    const anchorStyles = useMemo(() => {
+        if (position === 'north') {
+            return {
+                top: offset,
+                left: 0,
+                right: 0,
+                justifyContent: 'center',
+                alignItems: 'flex-start',
+            };
+        }
+        if (position === 'south') {
+            return {
+                bottom: offset,
+                left: 0,
+                right: 0,
+                justifyContent: 'center',
+                alignItems: 'flex-end',
+            };
+        }
+        if (position === 'west') {
+            return {
+                left: offset,
+                top: 0,
+                bottom: 0,
+                justifyContent: 'flex-start',
+                alignItems: 'stretch',
+            };
+        }
+        return {
+            right: offset,
+            top: 0,
+            bottom: 0,
+            justifyContent: 'flex-end',
+            alignItems: 'stretch',
+        };
+    }, [position, offset]);
+    if (!isMounted) {
+        return null;
+    }
+    const style = variantStyles[variant];
+    const closeStyle = closeButtonStyles[variant];
+    const horizontal = position === 'north' || position === 'south';
+    const edgeBorder = edgeBorderStyles[position];
+    return (_jsx(Box, { sx: {
+            position: 'fixed',
+            zIndex,
+            display: 'flex',
+            pointerEvents: 'none',
+            ...anchorStyles,
+        }, children: _jsxs(Box, { role: variant === 'error' || variant === 'danger' ? 'alert' : 'status', "aria-live": variant === 'error' || variant === 'danger' ? 'assertive' : 'polite', onClick: onDismiss, sx: {
+                pointerEvents: 'auto',
+                position: 'relative',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'flex-start',
+                cursor: onDismiss ? 'pointer' : 'default',
+                width: horizontal
+                    ? fullWidth
+                        ? '100vw'
+                        : 'min(960px, 96vw)'
+                    : panelSize,
+                maxWidth: horizontal ? '100vw' : undefined,
+                height: horizontal ? undefined : '100vh',
+                maxHeight: horizontal ? undefined : '100vh',
+                borderColor: style.border,
+                borderTop: edgeBorder.borderTop,
+                borderRight: edgeBorder.borderRight,
+                borderBottom: edgeBorder.borderBottom,
+                borderLeft: edgeBorder.borderLeft,
+                backgroundColor: style.bg,
+                color: style.fg,
+                textAlign: 'left',
+                px: 4,
+                py: horizontal ? 3 : 4,
+                boxShadow: 'shadow.large',
+                transform: isVisible ? 'translate(0, 0)' : closedTransforms[position],
+                opacity: isVisible ? 1 : 0,
+                transition: `transform ${transitionMs}ms ease, opacity ${transitionMs}ms ease`,
+                overflow: 'auto',
+            }, children: [onDismiss ? (_jsx(Box, { sx: {
+                        position: 'absolute',
+                        top: 2,
+                        right: 3,
+                    }, children: _jsx(IconButton, { variant: "invisible", icon: XIcon, "aria-label": "Close panel", onClick: event => {
+                            event.stopPropagation();
+                            onDismiss();
+                        }, sx: {
+                            color: closeStyle.fg,
+                            borderRadius: 2,
+                            '&:hover': {
+                                backgroundColor: closeStyle.hoverBg,
+                            },
+                        } }) })) : null, _jsxs(Box, { sx: { width: 'min(980px, 100%)', display: 'grid', gap: 1, pr: onDismiss ? 6 : 0 }, children: [_jsx(Box, { sx: { fontSize: 3, fontWeight: 500, lineHeight: 1.4 }, children: message }), details ? (_jsx(Box, { sx: { fontSize: 1, fontWeight: 400, lineHeight: 1.4, color: 'fg.muted' }, children: details })) : null] })] }) }));
+};
+export default SlidingPanel;

package/lib/components/sliding-panel/SlidingPanel.stories.d.ts

@@ -0,0 +1,16 @@
+import type { StoryObj } from '@storybook/react';
+import { type SlidingPanelProps } from './SlidingPanel';
+declare const meta: {
+    title: string;
+    component: ({ isOpen, message, details, onDismiss, position, variant, durationMs, transitionMs, zIndex, offset, panelSize, fullWidth, }: SlidingPanelProps) => import("react/jsx-runtime").JSX.Element | null;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const NorthInfo: Story;
+export declare const SouthWarning: Story;
+export declare const EastSuccess: Story;
+export declare const WestError: Story;

package/lib/components/sliding-panel/SlidingPanel.stories.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { Box, Button, Heading } from '@primer/react';
+import { SlidingPanel } from './SlidingPanel';
+const meta = {
+    title: 'Components/SlidingPanel',
+    component: SlidingPanel,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+const Demo = (props) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const openButtonRef = useRef(null);
+    return (_jsxs(Box, { sx: { p: 4, minHeight: '100vh', bg: 'canvas.default' }, children: [_jsx(Heading, { as: "h2", sx: { fontSize: 3, mb: 3 }, children: "Sliding Panel Demo" }), _jsx(Button, { ref: openButtonRef, onClick: () => setIsOpen(true), children: "Open panel" }), _jsx(SlidingPanel, { ...props, isOpen: isOpen, onDismiss: () => setIsOpen(false) }), isOpen ? (_jsx(Box, { sx: { mt: 3 }, children: _jsx(Button, { size: "small", onClick: () => setIsOpen(false), children: "Close" }) })) : null] }));
+};
+export const NorthInfo = {
+    args: {
+        isOpen: false,
+        message: 'Sliding panel message',
+        details: 'Additional details appear below the message in normal font.',
+        position: 'north',
+        variant: 'info',
+        durationMs: 4500,
+        fullWidth: true,
+    },
+    render: args => _jsx(Demo, { ...args }),
+};
+export const SouthWarning = {
+    args: {
+        isOpen: false,
+        message: 'Sliding panel message',
+        details: 'Additional details appear below the message in normal font.',
+        position: 'south',
+        variant: 'warning',
+        durationMs: 0,
+        fullWidth: true,
+    },
+    render: args => _jsx(Demo, { ...args }),
+};
+export const EastSuccess = {
+    args: {
+        isOpen: false,
+        message: 'Sliding panel message',
+        details: 'Additional details appear below the message in normal font.',
+        position: 'east',
+        variant: 'success',
+        durationMs: 0,
+        panelSize: 360,
+        fullWidth: false,
+    },
+    render: args => _jsx(Demo, { ...args }),
+};
+export const WestError = {
+    args: {
+        isOpen: false,
+        message: 'Sliding panel message',
+        details: 'Additional details appear below the message in normal font.',
+        position: 'west',
+        variant: 'error',
+        durationMs: 0,
+        panelSize: 360,
+        fullWidth: false,
+    },
+    render: args => _jsx(Demo, { ...args }),
+};

package/lib/components/toolbar/Toolbar.js

@@ -30,7 +30,24 @@ export function Toolbar({ items, extraItems, className, disabled, ariaLabel = 'E
     const allItems = useMemo(() => {
         if (!extraItems?.length)
             return items;
-        return [...items, ...extraItems];
+        /*
+         * An extra item takes the place of the item it shares its key with.
+         *
+         * A host that knows better what one of the items should do — how this
+         * document is saved, where it is run — says so with the key of that item
+         * rather than adding a second button next to it. What it leaves out, its
+         * order and its icon among them, stays as the toolbar had it.
+         */
+        const overrides = new Map(extraItems.map(item => [item.key, item]));
+        const merged = items.map(item => {
+            const override = overrides.get(item.key);
+            if (!override) {
+                return item;
+            }
+            overrides.delete(item.key);
+            return { ...item, ...override };
+        });
+        return [...merged, ...extraItems.filter(item => overrides.has(item.key))];
     }, [items, extraItems]);
     return (_jsx(Box, { className: className, role: "toolbar", "aria-label": ariaLabel, sx: {
             display: 'flex',

package/lib/components/toolbar/ToolbarButton.js

@@ -6,16 +6,19 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * ToolbarButton - A single button in a Toolbar.
  *
- * Renders a native <button> with a direct Octicon icon.
- * Avoids Primer's IconButton and Tooltip components to prevent invariant
- * violations in Primer v37 (Tooltip requires a native interactive child,
- * and IconButton's internal Tooltip conflicts with external wrappers).
- *
- * Uses the native HTML `title` attribute for tooltip behaviour.
+ * Renders a native <button> with a direct Octicon icon, wrapped in Primer's
+ * Tooltip when the item carries a title. The v37 Tooltip demands a native
+ * interactive child — the reason IconButton is avoided — and a plain
+ * <button> is exactly that. A disabled item therefore wears `aria-disabled`
+ * rather than the `disabled` attribute: a truly disabled button is not
+ * interactive, which both silences its tooltip and breaks the invariant —
+ * and the tooltip of a disabled action is precisely where the why-disabled
+ * explanation lives.
  *
  * @module components/toolbar/ToolbarButton
  */
 import { isValidElement } from 'react';
+import { Tooltip } from '@primer/react';
 export function ToolbarButton({ item, size = 'medium' }) {
     const { ariaLabel, title, icon, label, isActive, onClick, disabled } = item;
     // Resolve icon → React element.
@@ -38,7 +41,7 @@ export function ToolbarButton({ item, size = 'medium' }) {
         iconElement = _jsx("span", { style: { fontSize: 12, fontWeight: 600, lineHeight: 1 }, children: label });
     }
     const btnSize = size === 'small' ? 28 : 32;
-    return (_jsx("button", { type: "button", "aria-label": ariaLabel, title: title, onMouseDown: (e) => e.preventDefault(), onClick: onClick, disabled: disabled, style: {
+    const button = (_jsx("button", { type: "button", "aria-label": ariaLabel, "aria-disabled": disabled || undefined, onMouseDown: (e) => e.preventDefault(), onClick: disabled ? undefined : onClick, style: {
             display: 'inline-flex',
             alignItems: 'center',
             justifyContent: 'center',
@@ -66,5 +69,7 @@ export function ToolbarButton({ item, size = 'medium' }) {
                 ? 'var(--fgColor-accent, #0969da)'
                 : 'var(--fgColor-muted, #656d76)';
         }, children: iconElement }));
+    // No title: nothing to say, no wrapper to say it with.
+    return title ? (_jsx(Tooltip, { text: title, direction: "s", children: button })) : (button);
 }
 export default ToolbarButton;