@datalayer/primer-addons 1.0.22 → 1.0.23

package/lib/components/box/Box.js

@@ -1,7 +1,6 @@
 /*
  * Copyright (c) 2023-2026 Datalayer, Inc.
- *
- * Datalayer License
+ * Distributed under the terms of the Modified BSD License.
  */
 import { Box } from '@primer/react';
 export { Box };

package/lib/components/box/sx.js

@@ -1,7 +1,6 @@
 /*
  * Copyright (c) 2021-2024 Datalayer, Inc.
- *
- * Datalayer License
+ * Distributed under the terms of the Modified BSD License.
  */
 import css from '@styled-system/css';
 import merge from 'deepmerge';

package/lib/components/closeable-flash/CloseableFlash.d.ts

@@ -1,7 +1,29 @@
+/**
+ * `CloseableFlash`: a Primer `Flash` the reader can dismiss.
+ *
+ * Primer's own variants are `default`, `success`, `warning` and `danger`. Two
+ * more are added here, for the levels a platform announce is written at:
+ * `info`, which is the neutral blue Primer already draws for `default` and is
+ * worth having under the name people say, and `critical`, which is `danger`
+ * wearing its emphasis colour — an incident has to look different from a
+ * validation error, and a reader who sees everything red stops reading red.
+ *
+ * @module components/closeable-flash/CloseableFlash
+ */
 import { FC } from "react";
 import { FlashProps } from "@primer/react";
-export type CloseableFlashProps = FlashProps & {
+/** What a flash may be, Primer's own plus the announce levels. */
+export type CloseableFlashVariant = NonNullable<FlashProps['variant']> | 'info' | 'critical';
+export type CloseableFlashProps = Omit<FlashProps, 'variant'> & {
+    variant?: CloseableFlashVariant;
     leadingVisual?: React.ComponentType;
     onClose?: () => void;
+    /**
+     * Whether the reader may close it. `false` draws the same flash without the
+     * close button, which is what a preview of one wants: an editor showing an
+     * announce as it will look should not offer to dismiss something that is
+     * not being shown to anybody yet.
+     */
+    dismissible?: boolean;
 };
 export declare const CloseableFlash: FC<CloseableFlashProps>;

package/lib/components/closeable-flash/CloseableFlash.js

@@ -1,7 +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.
+ */
+/**
+ * `CloseableFlash`: a Primer `Flash` the reader can dismiss.
+ *
+ * Primer's own variants are `default`, `success`, `warning` and `danger`. Two
+ * more are added here, for the levels a platform announce is written at:
+ * `info`, which is the neutral blue Primer already draws for `default` and is
+ * worth having under the name people say, and `critical`, which is `danger`
+ * wearing its emphasis colour — an incident has to look different from a
+ * validation error, and a reader who sees everything red stops reading red.
+ *
+ * @module components/closeable-flash/CloseableFlash
+ */
 import { useState } from "react";
 import { Box, Flash, CircleOcticon, Text } from "@primer/react";
 import { XIcon } from "@primer/octicons-react";
+/**
+ * The Primer variant that draws a given level.
+ *
+ * `info` is Primer's `default` — already the accent blue — and `critical` is
+ * `danger`; what sets the two dangers apart is the emphasis below, not the
+ * variant, because Primer has no louder red to ask for.
+ */
+const flashVariantForVariant = (variant) => {
+    switch (variant) {
+        case 'info':
+            return 'default';
+        case 'critical':
+            return 'danger';
+        default:
+            return variant;
+    }
+};
 const closeButtonToneForVariant = (variant) => {
     switch (variant) {
         case 'success':
@@ -9,7 +42,10 @@ const closeButtonToneForVariant = (variant) => {
         case 'warning':
             return { fg: 'attention.fg', hoverBg: 'rgba(154, 103, 0, 0.16)' };
         case 'danger':
+        case 'critical':
             return { fg: 'danger.fg', hoverBg: 'rgba(207, 34, 46, 0.14)' };
+        case 'info':
+            return { fg: 'accent.fg', hoverBg: 'rgba(9, 105, 218, 0.12)' };
         default:
             return { fg: 'fg.default', hoverBg: 'rgba(31, 35, 40, 0.12)' };
     }
@@ -21,16 +57,21 @@ const textColorForVariant = (variant) => {
         case 'warning':
             return 'attention.fg';
         case 'danger':
+        case 'critical':
             return 'danger.fg';
+        case 'info':
+            return 'accent.fg';
         default:
             return 'fg.default';
     }
 };
 export const CloseableFlash = (props) => {
-    const { leadingVisual, variant, onClose, ...otherProps } = props;
+    const { leadingVisual, variant, onClose, sx, dismissible = true, ...otherProps } = props;
     const resolvedVariant = variant ?? 'default';
     const closeTone = closeButtonToneForVariant(resolvedVariant);
-    const flashVariant = resolvedVariant === 'default' ? undefined : resolvedVariant;
+    const primerVariant = flashVariantForVariant(resolvedVariant);
+    const flashVariant = primerVariant === 'default' ? undefined : primerVariant;
+    const isCritical = resolvedVariant === 'critical';
     const [isVisible, setIsVisible] = useState(true);
     const handleClose = () => {
         if (onClose) {
@@ -41,7 +82,14 @@ export const CloseableFlash = (props) => {
     if (!isVisible) {
         return null;
     }
-    return (_jsx(Flash, { variant: flashVariant, ...otherProps, children: _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [_jsxs(Box, { sx: { flexGrow: 1 }, children: [leadingVisual && _jsx(CircleOcticon, { icon: leadingVisual }), _jsx(Text, { color: textColorForVariant(resolvedVariant), children: props.children })] }), _jsx(Box, { as: "button", type: "button", "aria-label": "Close", onClick: handleClose, sx: {
+    return (_jsx(Flash, { variant: flashVariant, sx: {
+            // A critical flash is the one a reader must not scroll past: the
+            // border carries the emphasis colour rather than the muted one.
+            ...(isCritical
+                ? { borderColor: 'danger.emphasis', borderWidth: 2, borderStyle: 'solid' }
+                : {}),
+            ...sx,
+        }, ...otherProps, children: _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [_jsxs(Box, { sx: { flexGrow: 1 }, children: [leadingVisual && _jsx(CircleOcticon, { icon: leadingVisual }), _jsx(Text, { color: textColorForVariant(resolvedVariant), sx: isCritical ? { fontWeight: 'bold' } : undefined, children: props.children })] }), dismissible && (_jsx(Box, { as: "button", type: "button", "aria-label": "Close", onClick: handleClose, sx: {
                         flex: '0 0 auto',
                         p: 0,
                         m: 0,
@@ -71,5 +119,5 @@ export const CloseableFlash = (props) => {
                         '& svg': {
                             display: 'block',
                         },
-                    }, children: _jsx(Box, { as: "span", "aria-hidden": true, children: _jsx(XIcon, { size: 16 }) }) })] }) }));
+                    }, children: _jsx(Box, { as: "span", "aria-hidden": true, children: _jsx(XIcon, { size: 16 }) }) }))] }) }));
 };

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

@@ -1,4 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2021-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
 import { Box, useTheme } from "@primer/react";
 import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
 import 'react-loading-skeleton/dist/skeleton.css';

package/lib/components/date-picker/DatePicker.d.ts

@@ -1,6 +1,10 @@
 import { type CalendarPickerProps } from "../calendar-picker/CalendarPicker";
 /** `YYYY-MM-DD`, the one format that means the same thing everywhere. */
 export declare function formatISODate(date: Date): string;
+/** `YYYY-MM-DD HH:mm`, the same date with the minute it holds. */
+export declare function formatISODateTime(date: Date): string;
+/** `HH:mm` of a date, which is what a `type="time"` field holds. */
+export declare function formatTime(date: Date): string;
 /**
  * Reads `YYYY-MM-DD` as a local date.
  *
@@ -9,6 +13,16 @@ export declare function formatISODate(date: Date): string;
  * means the same day in every zone.
  */
 export declare function parseISODate(text: string): Date | null;
+/**
+ * Reads `YYYY-MM-DD HH:mm` — or the same with a `T`, or with seconds, or with
+ * no time at all — as a local date.
+ *
+ * Lenient on the way in and strict on the way out: somebody typing a date into
+ * a field has a shape in their fingers, and rejecting `2026-01-31T09:00`
+ * because the separator is a `T` teaches them nothing. What the field *writes*
+ * is always one shape.
+ */
+export declare function parseISODateTime(text: string): Date | null;
 export interface DatePickerProps extends Pick<CalendarPickerProps, "min" | "max" | "isDisabled" | "weekStartsOn" | "locale"> {
     /** The chosen date, or nothing chosen. */
     value?: Date | null;
@@ -35,6 +49,27 @@ export interface DatePickerProps extends Pick<CalendarPickerProps, "min" | "max"
     format?: (date: Date) => string;
     /** An id for the field, for a label that names it from outside. */
     id?: string;
+    /**
+     * Whether the field holds a time as well as a day.
+     *
+     * With it, the field reads and writes `YYYY-MM-DD HH:mm`, and the overlay
+     * carries a time beneath the calendar. Without it — the default — nothing
+     * about the field changes, because most dates are days.
+     */
+    withTime?: boolean;
+    /**
+     * Minutes between the options the minute column offers. Default: five.
+     *
+     * A minute the step does not land on — one read back from a stored value —
+     * is still offered, so choosing an hour never quietly moves it.
+     */
+    timeStep?: number;
+    /**
+     * The time a day picked from the calendar takes when the field held nothing
+     * yet. `"00:00"` by default — a window that starts "on the 3rd" starts at
+     * the beginning of the 3rd.
+     */
+    defaultTime?: string;
 }
 /**
  * A date field with a calendar behind it.
@@ -42,5 +77,5 @@ export interface DatePickerProps extends Pick<CalendarPickerProps, "min" | "max"
  * Controlled: `value` is the caller's, and every pick and every parsed entry
  * arrives through `onChange`.
  */
-export declare function DatePicker({ value, onChange, placeholder, "aria-label": ariaLabel, disabled, size, validationStatus, format, id, min, max, isDisabled, weekStartsOn, locale, }: DatePickerProps): import("react").JSX.Element;
+export declare function DatePicker({ value, onChange, placeholder, "aria-label": ariaLabel, disabled, size, validationStatus, format, id, min, max, isDisabled, weekStartsOn, locale, withTime, timeStep, defaultTime, }: DatePickerProps): import("react").JSX.Element;
 export default DatePicker;

package/lib/components/date-picker/DatePicker.js

@@ -1,14 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { AnchoredOverlay, Box, TextInput } from "@primer/react";
+import { AnchoredOverlay, Box, Button, TextInput } from "@primer/react";
 import { CalendarIcon } from "@primer/octicons-react";
 import { CalendarPicker } from "../calendar-picker/CalendarPicker";
+import { TimeColumns } from "./TimeColumns";
 /** `YYYY-MM-DD`, the one format that means the same thing everywhere. */
 export function formatISODate(date) {
     const month = `${date.getMonth() + 1}`.padStart(2, "0");
     const day = `${date.getDate()}`.padStart(2, "0");
     return `${date.getFullYear()}-${month}-${day}`;
 }
+/** `YYYY-MM-DD HH:mm`, the same date with the minute it holds. */
+export function formatISODateTime(date) {
+    const hours = `${date.getHours()}`.padStart(2, "0");
+    const minutes = `${date.getMinutes()}`.padStart(2, "0");
+    return `${formatISODate(date)} ${hours}:${minutes}`;
+}
+/** `HH:mm` of a date, which is what a `type="time"` field holds. */
+export function formatTime(date) {
+    const hours = `${date.getHours()}`.padStart(2, "0");
+    const minutes = `${date.getMinutes()}`.padStart(2, "0");
+    return `${hours}:${minutes}`;
+}
 /**
  * Reads `YYYY-MM-DD` as a local date.
  *
@@ -23,7 +36,44 @@ export function parseISODate(text) {
     }
     const [, year, month, day] = match;
     const date = new Date(Number(year), Number(month) - 1, Number(day));
-    return Number.isNaN(date.getTime()) ? null : date;
+    return isExactly(date, Number(year), Number(month), Number(day)) ? date : null;
+}
+/**
+ * Whether `date` holds exactly the fields it was built from.
+ *
+ * The `Date` constructor rolls an out-of-range field into the next one —
+ * `2026-02-31` becomes the 3rd of March, `24:00` the next day — instead of
+ * failing, so a typo would be committed as some other moment. A field that
+ * does not come back as written was not a real one.
+ */
+function isExactly(date, year, month, day, hours = 0, minutes = 0, seconds = 0) {
+    return (!Number.isNaN(date.getTime()) &&
+        date.getFullYear() === year &&
+        date.getMonth() === month - 1 &&
+        date.getDate() === day &&
+        date.getHours() === hours &&
+        date.getMinutes() === minutes &&
+        date.getSeconds() === seconds);
+}
+/**
+ * Reads `YYYY-MM-DD HH:mm` — or the same with a `T`, or with seconds, or with
+ * no time at all — as a local date.
+ *
+ * Lenient on the way in and strict on the way out: somebody typing a date into
+ * a field has a shape in their fingers, and rejecting `2026-01-31T09:00`
+ * because the separator is a `T` teaches them nothing. What the field *writes*
+ * is always one shape.
+ */
+export function parseISODateTime(text) {
+    const match = /^(\d{4})-(\d{2})-(\d{2})(?:[T ](\d{1,2}):(\d{2})(?::(\d{2}))?)?$/.exec(text.trim());
+    if (!match) {
+        return null;
+    }
+    const [, year, month, day, hours, minutes, seconds] = match;
+    const date = new Date(Number(year), Number(month) - 1, Number(day), Number(hours ?? 0), Number(minutes ?? 0), Number(seconds ?? 0));
+    return isExactly(date, Number(year), Number(month), Number(day), Number(hours ?? 0), Number(minutes ?? 0), Number(seconds ?? 0))
+        ? date
+        : null;
 }
 /**
  * A date field with a calendar behind it.
@@ -31,18 +81,23 @@ export function parseISODate(text) {
  * Controlled: `value` is the caller's, and every pick and every parsed entry
  * arrives through `onChange`.
  */
-export function DatePicker({ value = null, onChange, placeholder = "YYYY-MM-DD", "aria-label": ariaLabel = "Date", disabled = false, size = "medium", validationStatus, format = formatISODate, id, min, max, isDisabled, weekStartsOn, locale, }) {
+export function DatePicker({ value = null, onChange, placeholder, "aria-label": ariaLabel = "Date", disabled = false, size = "medium", validationStatus, format, id, min, max, isDisabled, weekStartsOn, locale, withTime = false, timeStep = 5, defaultTime = "00:00", }) {
+    // The two shapes, chosen once: a caller that passed a `format` keeps it,
+    // and a caller that asked for a time gets the one that carries a time.
+    const writeDate = format ?? (withTime ? formatISODateTime : formatISODate);
+    const readDate = withTime ? parseISODateTime : parseISODate;
+    const emptyText = placeholder ?? (withTime ? "YYYY-MM-DD HH:mm" : "YYYY-MM-DD");
     const [open, setOpen] = useState(false);
-    const [text, setText] = useState(() => (value ? format(value) : ""));
+    const [text, setText] = useState(() => (value ? writeDate(value) : ""));
     const anchorRef = useRef(null);
     // The field follows the value, except while it is being typed into: a
     // controlled rewrite mid-word moves the caret to the end.
     const typing = useRef(false);
     useEffect(() => {
         if (!typing.current) {
-            setText(value ? format(value) : "");
+            setText(value ? writeDate(value) : "");
         }
-    }, [value, format]);
+    }, [value, writeDate]);
     const commit = (next) => {
         typing.current = false;
         const trimmed = next.trim();
@@ -50,38 +105,89 @@ export function DatePicker({ value = null, onChange, placeholder = "YYYY-MM-DD",
             onChange?.(null);
             return;
         }
-        const parsed = parseISODate(trimmed);
+        const parsed = readDate(trimmed);
         if (parsed) {
             onChange?.(parsed);
-            setText(format(parsed));
+            setText(writeDate(parsed));
         }
         else {
             // Unreadable: put back what is actually held, rather than keeping a
             // date on screen that the caller never received.
-            setText(value ? format(value) : "");
+            setText(value ? writeDate(value) : "");
         }
     };
-    const calendar = useMemo(() => (_jsx(Box, { sx: { p: 3 }, children: _jsx(CalendarPicker, { value: value, defaultMonth: value ?? undefined, onChange: (date) => {
-                onChange?.(date);
-                setText(format(date));
-                setOpen(false);
-            }, min: min, max: max, isDisabled: isDisabled, weekStartsOn: weekStartsOn, locale: locale, "aria-label": `${ariaLabel}, choose a day` }) })), [
+    /** The day picked, wearing the time the field already held. */
+    const withHeldTime = (day) => {
+        const [hours, minutes] = (value ? formatTime(value) : defaultTime)
+            .split(":")
+            .map(Number);
+        const next = new Date(day);
+        next.setHours(hours || 0, minutes || 0, 0, 0);
+        return next;
+    };
+    /** The time the field holds right now, or the one a new pick starts from. */
+    const held = (() => {
+        const [hours, minutes] = (value ? formatTime(value) : defaultTime)
+            .split(":")
+            .map(Number);
+        return { hour: hours || 0, minute: minutes || 0 };
+    })();
+    /** The day the field holds, at the time just chosen. */
+    const atTime = (hour, minute) => {
+        const next = new Date(value ?? new Date());
+        next.setHours(hour, minute, 0, 0);
+        return next;
+    };
+    const calendar = useMemo(() => (_jsxs(Box, { sx: { p: 3 }, children: [_jsx(CalendarPicker, { value: value, defaultMonth: value ?? undefined, onChange: (date) => {
+                    // A day picked while a time is held keeps that time: somebody
+                    // moving a window from the 3rd to the 4th did not mean to move
+                    // it to midnight.
+                    const next = withTime ? withHeldTime(date) : date;
+                    onChange?.(next);
+                    setText(writeDate(next));
+                    if (!withTime) {
+                        setOpen(false);
+                    }
+                }, min: min, max: max, isDisabled: isDisabled, weekStartsOn: weekStartsOn, locale: locale, "aria-label": `${ariaLabel}, choose a day` }), withTime && (_jsxs(Box, { sx: {
+                    mt: 3,
+                    pt: 3,
+                    borderTop: "1px solid",
+                    borderColor: "border.default",
+                }, children: [_jsx(TimeColumns, { hour: held.hour, minute: held.minute, step: timeStep, disabled: disabled, labelPrefix: ariaLabel, onChange: (hour, minute) => {
+                            const next = atTime(hour, minute);
+                            onChange?.(next);
+                            setText(writeDate(next));
+                        } }), _jsx(Box, { sx: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "flex-end",
+                            gap: 2,
+                            mt: 2,
+                        }, children: _jsx(Button, { size: "small", variant: "primary", onClick: () => setOpen(false), children: "Done" }) })] }))] })), 
+    // `withHeldTime`, `held` and `atTime` all close over `value` and
+    // `defaultTime`, both of which are named here.
+    [
         ariaLabel,
-        format,
+        defaultTime,
+        disabled,
         isDisabled,
         locale,
         max,
         min,
         onChange,
+        size,
+        timeStep,
         value,
         weekStartsOn,
+        withTime,
+        writeDate,
     ]);
     return (_jsxs(Box, { ref: anchorRef, sx: { display: "inline-block" }, children: [_jsx(AnchoredOverlay, { open: open, onOpen: () => !disabled && setOpen(true), onClose: () => setOpen(false), 
                 // The field's own box is the anchor; `useRef` types its current as
                 // nullable, which is not how the overlay declares what it takes.
                 anchorRef: anchorRef, 
                 // The field is the anchor; the button inside it does the opening.
-                renderAnchor: null, overlayProps: { role: "dialog", "aria-label": `${ariaLabel} calendar` }, children: calendar }), _jsx(TextInput, { id: id, "aria-label": ariaLabel, "aria-haspopup": "dialog", "aria-expanded": open, value: text, placeholder: placeholder, disabled: disabled, size: size, validationStatus: validationStatus, onChange: (event) => {
+                renderAnchor: null, overlayProps: { role: "dialog", "aria-label": `${ariaLabel} calendar` }, children: calendar }), _jsx(TextInput, { id: id, "aria-label": ariaLabel, "aria-haspopup": "dialog", "aria-expanded": open, value: text, placeholder: emptyText, disabled: disabled, size: size, validationStatus: validationStatus, onChange: (event) => {
                     typing.current = true;
                     setText(event.target.value);
                 }, onBlur: (event) => commit(event.target.value), onKeyDown: (event) => {

package/lib/components/date-picker/TimeColumns.d.ts

@@ -0,0 +1,23 @@
+/** `7` → `07`. Two digits, always, because a column of ragged numbers reads badly. */
+export declare const pad: (value: number) => string;
+export interface TimeColumnsProps {
+    /** The hour shown as chosen, 0–23. */
+    hour: number;
+    /** The minute shown as chosen, 0–59. */
+    minute: number;
+    /** Minutes between the options offered. 1 lists all sixty. */
+    step?: number;
+    /** Told when either column is used, with the whole time. */
+    onChange: (hour: number, minute: number) => void;
+    disabled?: boolean;
+    /** Names the columns for a screen reader: "Start date, hour". Not drawn —
+     *  on screen the two columns are headed "Hour" and "Minute", and a whole
+     *  field label repeated over them reads as noise. */
+    labelPrefix?: string;
+}
+/**
+ * The two columns, side by side, with the time they currently mean between
+ * them.
+ */
+export declare function TimeColumns({ hour, minute, step, onChange, disabled, labelPrefix, }: TimeColumnsProps): import("react").JSX.Element;
+export default TimeColumns;

package/lib/components/date-picker/TimeColumns.js

@@ -0,0 +1,88 @@
+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.
+ */
+/**
+ * Hours and minutes, as two columns the reader scrolls.
+ *
+ * The browser's own `type="time"` control draws its dropdown itself: unstyled,
+ * unaware of the page's theme, and — because it is the platform's own popup —
+ * *over* whatever is already open. Beside a calendar that means the time
+ * dropdown covers the days, which is the one thing somebody choosing a moment
+ * needs to keep seeing.
+ *
+ * So the columns are drawn here, in Primer, inside the overlay that already
+ * exists. Not a second overlay: a menu anchored inside an `AnchoredOverlay`
+ * portals out of it, and the outer overlay's own click-away closes everything
+ * the moment the pointer lands in the inner one.
+ *
+ * @module components/date-picker/TimeColumns
+ */
+import { useEffect, useRef } from "react";
+import { ActionList, Box, Text } from "@primer/react";
+/** `7` → `07`. Two digits, always, because a column of ragged numbers reads badly. */
+export const pad = (value) => `${value}`.padStart(2, "0");
+const HOURS = Array.from({ length: 24 }, (_, index) => index);
+function Column({ label, ariaLabel, values, selected, onPick, disabled, }) {
+    const scroller = useRef(null);
+    const chosen = useRef(null);
+    // The chosen value, in view, the moment the column is drawn. A column that
+    // opens at midnight when it holds 17:00 makes the reader scroll to find out
+    // what it is already set to.
+    useEffect(() => {
+        const item = chosen.current;
+        if (!item) {
+            return;
+        }
+        // After layout, and against the scroller rather than whatever the list
+        // happens to be positioned against.
+        const frame = requestAnimationFrame(() => {
+            item.scrollIntoView({ block: "center", inline: "nearest" });
+        });
+        return () => cancelAnimationFrame(frame);
+    }, [selected]);
+    return (_jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsx(Text, { sx: {
+                    display: "block",
+                    fontSize: 0,
+                    color: "fg.muted",
+                    mb: 1,
+                    textAlign: "center",
+                }, children: label }), _jsx(Box, { ref: scroller, sx: {
+                    height: 132,
+                    overflowY: "auto",
+                    border: "1px solid",
+                    borderColor: "border.default",
+                    borderRadius: 2,
+                    bg: "canvas.default",
+                    // The scrollbar is the only hint that there is more below, so it
+                    // stays: a hidden one turns the column into a list of six hours.
+                    scrollbarWidth: "thin",
+                }, children: _jsx(ActionList, { selectionVariant: "single", "aria-label": ariaLabel, sx: { p: 1 }, children: values.map((value) => (_jsx(ActionList.Item, { ref: value === selected ? chosen : undefined, selected: value === selected, disabled: disabled, onSelect: () => onPick(value), sx: { justifyContent: "center", fontVariantNumeric: "tabular-nums" }, children: pad(value) }, value))) }) })] }));
+}
+/**
+ * The two columns, side by side, with the time they currently mean between
+ * them.
+ */
+export function TimeColumns({ hour, minute, step = 5, onChange, disabled, labelPrefix, }) {
+    const every = Math.min(60, Math.max(1, Math.floor(step) || 1));
+    const minutes = Array.from({ length: Math.ceil(60 / every) }, (_, index) => index * every);
+    // A minute the step does not land on — 17:07 read back from a stored value —
+    // still has to be selectable, or choosing an hour would silently move it.
+    const shown = minutes.includes(minute)
+        ? minutes
+        : [...minutes, minute].sort((left, right) => left - right);
+    return (_jsxs(Box, { children: [_jsxs(Box, { sx: {
+                    display: "flex",
+                    alignItems: "baseline",
+                    justifyContent: "space-between",
+                    gap: 2,
+                    mb: 1,
+                }, children: [_jsx(Text, { sx: { fontSize: 0, color: "fg.muted" }, children: "Time" }), _jsxs(Text, { sx: {
+                            fontFamily: "mono",
+                            fontSize: 1,
+                            fontWeight: "bold",
+                            fontVariantNumeric: "tabular-nums",
+                        }, children: [pad(hour), ":", pad(minute)] })] }), _jsxs(Box, { sx: { display: "flex", gap: 2 }, children: [_jsx(Column, { label: "Hour", ariaLabel: labelPrefix ? `${labelPrefix}, hour` : "Hour", values: HOURS, selected: hour, disabled: disabled, onPick: (next) => onChange(next, minute) }), _jsx(Column, { label: "Minute", ariaLabel: labelPrefix ? `${labelPrefix}, minute` : "Minute", values: shown, selected: minute, disabled: disabled, onPick: (next) => onChange(hour, next) })] })] }));
+}
+export default TimeColumns;

package/lib/components/icons/CircleIcon.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2021-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
 import { useTheme } from '@primer/react';
 import { CircleCurrentColorIcon } from '@datalayer/icons-react';
 export const CircleIcon = ({ color = 'white', variant = 'fg', }) => {

package/lib/components/index.js

@@ -1,3 +1,7 @@
+/*
+ * Copyright (c) 2021-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
 export * from "./appearance/AppearanceControls";
 export * from "./appearance/AppearanceControlsWithStore";
 export * from "./appearance/AppearanceMenu";

package/lib/components/logo/index.js

@@ -1,3 +1,7 @@
+/*
+ * Copyright (c) 2021-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
 export * from "./DatalayerLogo";
 export * from "./DatalayerLogoText";
 export * from "./DatalayerText";

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

@@ -1,4 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2021-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
 import { useEffect, useState } from 'react';
 import { IconButton, Overlay as PrimerOverlay, ThemeProvider, useTheme } from "@primer/react";
 import { XIcon } from "@primer/octicons-react";

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

@@ -1,4 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2021-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
 import { useState, useRef } from "react";
 import { Heading, Text, Box, Button } from "@primer/react";
 import { SideOverlay } from '../..';

package/lib/components/slider/Slider.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2021-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
 import { useEffect, useState } from "react";
 import { useTheme, Box, CounterLabel, FormControl } from "@primer/react";
 export const Slider = ({ name = "slider", id = "slider", min = 0, max = 10, value = 5, label = "label", step = 1, markers = false, displayValue = true, disabled = false, orientation = "horizontal", width = "200px", onChange, }) => {

package/lib/components/slider/Slider.stories.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2021-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
 import { useState } from 'react';
 import { Box, CounterLabel } from "@primer/react";
 import { Slider } from '../../index';

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

@@ -1,4 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2021-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
 import { useEffect, useMemo, useState } from 'react';
 import { IconButton } from '@primer/react';
 import { XIcon } from '@primer/octicons-react';
@@ -169,7 +173,19 @@ export const SlidingPanel = ({ isOpen, message, details, onDismiss, position = '
             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: {
+        }, children: _jsxs(Box, { role: variant === 'error' || variant === 'danger' ? 'alert' : 'status', "aria-live": variant === 'error' || variant === 'danger' ? 'assertive' : 'polite', onClick: onDismiss
+                ? event => {
+                    // A tap on the panel dismisses it — but not a click on a
+                    // link, button or field in its content, nor the end of a
+                    // text selection: those are someone using what it says.
+                    const target = event.target;
+                    if (target.closest('a, button, input, select, textarea, label, [role="button"], [contenteditable="true"]') ||
+                        (window.getSelection()?.toString() ?? '') !== '') {
+                        return;
+                    }
+                    onDismiss();
+                }
+                : undefined, sx: {
                 pointerEvents: 'auto',
                 position: 'relative',
                 display: 'flex',

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

@@ -1,4 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2021-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
 import { useRef, useState } from 'react';
 import { Box, Button, Heading } from '@primer/react';
 import { SlidingPanel } from './SlidingPanel';

package/lib/index.js

@@ -1,3 +1,7 @@
+/*
+ * Copyright (c) 2021-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
 export * from "./components";
 export * from "./utils";
 export * from './theme';

package/lib/reactor/page-layout/PageLayout.js

@@ -112,7 +112,6 @@ function ActivityLine({ label }) {
                 } }), _jsx(Text, { children: label })] }));
 }
 export function PageLayout({ page, hasPage = page !== undefined && page !== null, panel, band, chips, picker, transient, activity, bandMode = "docked", panelMode = "docked", panelSide = "right", sheetWidth = PAGE_SHEET_WIDTH, pageSize, panelWidth = PAGE_PANEL_WIDTH, }) {
-    const floating = bandMode === "floating";
     const bandInPanel = bandMode === "panel";
     const hasBand = band !== undefined && band !== null;
     // One width for the sheet, the band's mount and the chips: the column.
@@ -238,73 +237,90 @@ export function PageLayout({ page, hasPage = page !== undefined && page !== null
                                             pointerEvents: "none",
                                             zIndex: -1,
                                             display: "flex",
-                                        }, children: page }))] })] }), !hasPage || !panel ? null : panelShown ? (_jsxs(Box, { "data-page-panel": "", "data-page-panel-mode": panelMode, sx: {
+                                        }, children: page }))] })] }), !hasPage || !panel ? null : (_jsxs(Box, { "data-page-panel": panelShown ? "" : undefined, "data-page-panel-mode": panelMode, "aria-hidden": panelShown ? undefined : "true", sx: {
                             minWidth: 0,
                             minHeight: 0,
                             display: "flex",
                             flexDirection: "column",
                             bg: "canvas.default",
                             borderColor: "border.default",
-                            ...(panelMode === "docked"
+                            ...(!panelShown
                                 ? {
-                                    flex: `0 0 ${panelWidth}px`,
-                                    maxWidth: "45%",
-                                    order: panelSide === "left" ? -1 : undefined,
-                                    [panelSide === "left" ? "borderRight" : "borderLeft"]: "1px solid",
-                                    // Over the canvas, and beside the band rather than under
-                                    // it: the band belongs to the page column.
-                                    zIndex: 1,
+                                    // Out of sight, and out of the way of the pointer, while
+                                    // whatever is in it goes on running. No `z-index` here:
+                                    // it would make a stacking context, and the composer —
+                                    // which lives in this column whether the panel is open or
+                                    // not — has to be able to float over the page from it.
+                                    position: "absolute",
+                                    inset: 0,
+                                    visibility: "hidden",
+                                    pointerEvents: "none",
+                                    overflow: "visible",
                                 }
-                                : panelMode === "overlay"
+                                : panelMode === "docked"
                                     ? {
-                                        // Over the page's right edge, the page untouched
-                                        // under it; against the root, as the float is.
-                                        position: "absolute",
-                                        top: 0,
-                                        bottom: 0,
-                                        [panelSide]: 0,
-                                        width: panelWidth,
-                                        maxWidth: "85%",
+                                        flex: `0 0 ${panelWidth}px`,
+                                        maxWidth: "45%",
+                                        order: panelSide === "left" ? -1 : undefined,
                                         [panelSide === "left" ? "borderRight" : "borderLeft"]: "1px solid",
-                                        boxShadow: "shadow.large",
-                                        zIndex: 5,
+                                        // Over the canvas, and beside the band rather than under
+                                        // it: the band belongs to the page column.
+                                        zIndex: 1,
                                     }
-                                    : {
-                                        // A window in the page's corner.
-                                        position: "absolute",
-                                        [panelSide]: 16,
-                                        bottom: 16,
-                                        width: panelWidth,
-                                        maxWidth: "calc(100% - 32px)",
-                                        height: "min(70%, 560px)",
-                                        border: "1px solid",
-                                        borderRadius: 2,
-                                        boxShadow: "shadow.large",
-                                        overflow: "hidden",
-                                        zIndex: 5,
-                                    }),
+                                    : panelMode === "overlay"
+                                        ? {
+                                            // Over the page's right edge, the page untouched
+                                            // under it; against the root, as the float is.
+                                            position: "absolute",
+                                            top: 0,
+                                            bottom: 0,
+                                            [panelSide]: 0,
+                                            width: panelWidth,
+                                            maxWidth: "85%",
+                                            [panelSide === "left" ? "borderRight" : "borderLeft"]: "1px solid",
+                                            boxShadow: "shadow.large",
+                                            zIndex: 5,
+                                        }
+                                        : {
+                                            // A window in the page's corner.
+                                            position: "absolute",
+                                            [panelSide]: 16,
+                                            bottom: 16,
+                                            width: panelWidth,
+                                            maxWidth: "calc(100% - 32px)",
+                                            height: "min(70%, 560px)",
+                                            border: "1px solid",
+                                            borderRadius: 2,
+                                            boxShadow: "shadow.large",
+                                            overflow: "hidden",
+                                            zIndex: 5,
+                                        }),
                         }, children: [_jsx(Box, { sx: {
                                     flex: "1 1 auto",
                                     minHeight: 0,
                                     display: "flex",
                                     flexDirection: "column",
                                     "& > *": { flex: "1 1 auto", minHeight: 0 },
-                                }, children: panel }), bandInPanel && hasBand ? (_jsxs(Box, { "data-page-panel-band": "", sx: {
-                                    flex: "0 0 auto",
-                                    borderTop: "1px solid",
-                                    borderColor: "border.default",
-                                    "& > *": { justifyContent: "center" },
-                                }, children: [chips, band] })) : null] })) : (
-                    // Kept mounted, out of sight: a conversation is where the tools
-                    // run and the stream lands, and a panel that unmounted it would
-                    // stop the agent the moment the reader closed it.
-                    _jsx(Box, { "aria-hidden": "true", sx: {
-                            position: "absolute",
-                            inset: 0,
-                            visibility: "hidden",
-                            pointerEvents: "none",
-                            zIndex: -1,
-                            display: "flex",
-                        }, children: panel }))] }), transient, floating && hasBand ? band : null] }));
+                                }, children: panel }), hasBand && bandMode !== "docked" ? (_jsxs(Box, { "data-page-panel-band": bandInPanel ? "" : undefined, sx: bandInPanel
+                                    ? {
+                                        flex: "0 0 auto",
+                                        borderTop: "1px solid",
+                                        borderColor: "border.default",
+                                        // Visible even while the column itself is hidden —
+                                        // which it is until something opens the panel.
+                                        visibility: "visible",
+                                        pointerEvents: "auto",
+                                        "& > *": { justifyContent: "center" },
+                                    }
+                                    : {
+                                        /* The card positions itself against this layout's
+                                           root; this only has to stay out of its way, and
+                                           stay visible when the column around it is not. */
+                                        position: "absolute",
+                                        inset: 0,
+                                        visibility: "visible",
+                                        pointerEvents: "none",
+                                        "& > *": { pointerEvents: "auto" },
+                                    }, children: [bandInPanel ? chips : null, band] })) : null] }))] }), transient] }));
 }
 export default PageLayout;

package/lib/story-helpers.d.ts

@@ -8,7 +8,7 @@ type StoryContext = Record<string, unknown> & {
     parameters: Record<string, unknown>;
 };
 export declare const colormodeFromScheme: (colorScheme: string) => "light" | "dark";
-export declare const withThemeProvider: (Story: React.FC<React.PropsWithChildren<StoryContext>>, context: StoryContext) => string | number | bigint | boolean | Iterable<React.ReactNode> | React.JSX.Element | Promise<React.ReactNode> | null | undefined;
+export declare const withThemeProvider: (Story: React.FC<React.PropsWithChildren<StoryContext>>, context: StoryContext) => string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<React.ReactNode> | React.JSX.Element | null | undefined;
 export declare const toolbarTypes: {
     colorScheme: {
         name: string;

package/lib/theme/palettes/ColorPalette.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /*
  * Copyright (c) 2021-2024 Datalayer, Inc.
- *
- * Datalayer License
+ * Distributed under the terms of the Modified BSD License.
  */
 /**
  * Shared palette types, theme-aware colour resolution, and reusable

package/lib/theme/palettes/index.js

@@ -1,6 +1,5 @@
 /*
  * Copyright (c) 2021-2024 Datalayer, Inc.
- *
- * Datalayer License
+ * Distributed under the terms of the Modified BSD License.
  */
 export * from './ColorPalette';

package/lib/utils/Portals.js

@@ -119,7 +119,9 @@ export const setupPrimerPortals = (colormode) => {
  * `setupPrimerPortals` creates it; before that call there is none, and this
  * answers `null` rather than inventing one.
  */
-export const getPrimerPortalRoot = () => document.getElementById(PRIMER_PORTAL_ROOT_ID);
+export const getPrimerPortalRoot = () => typeof document === 'undefined'
+    ? null
+    : document.getElementById(PRIMER_PORTAL_ROOT_ID);
 /* ─── 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.22",
+  "version": "1.0.23",
   "license": "BSD-3-Clause",
   "scripts": {
     "build": "npm run build:lib",
@@ -37,13 +37,19 @@
     "@primer/octicons-react": "^19.35.0",
     "@primer/primitives": "^10.7.0",
     "@primer/react": "^37.31.0",
-    "react": "19.2.8",
-    "react-dom": "19.2.8",
+    "@primer/react-brand": "^0.58.2",
     "react-loading-skeleton": "^3.5.0",
     "styled-components": "^5.3.10",
     "zustand": "^5.0.0"
   },
+  "peerDependencies": {
+    "react": "^18.3.1 || ^19.0.0",
+    "react-dom": "^18.3.1 || ^19.0.0"
+  },
   "devDependencies": {
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "rimraf": "^6.0.1",
     "@storybook/addon-docs": "^9.0.15",
     "@storybook/addon-essentials": "9.0.0-alpha.12",
     "@storybook/addon-interactions": "^9.0.0-alpha.10",