@parallelworks/ui 0.55.0 → 0.56.0

package/dist/components/HoverCard.js

@@ -1,4 +1,5 @@
 import { cardClassName, positionerClassName } from "./floating.js";
+import { useFullscreenContainer } from "./fullscreen.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { PreviewCard } from "@base-ui/react/preview-card";
 //#region src/components/HoverCard.tsx
@@ -7,23 +8,27 @@ import { PreviewCard } from "@base-ui/react/preview-card";
 *  reachable another way, such as the page the anchor links to. The card
 *  stays open while the pointer is over it. */
 function HoverCard({ card, children, defaultOpen = false }) {
+	const fullscreen = useFullscreenContainer();
 	return /* @__PURE__ */ jsxs(PreviewCard.Root, {
 		defaultOpen,
 		children: [/* @__PURE__ */ jsx(PreviewCard.Trigger, {
 			delay: 350,
 			closeDelay: 150,
 			render: children
-		}), /* @__PURE__ */ jsx(PreviewCard.Portal, { children: /* @__PURE__ */ jsx(PreviewCard.Positioner, {
-			side: "bottom",
-			align: "start",
-			sideOffset: 8,
-			collisionPadding: 8,
-			className: positionerClassName,
-			children: /* @__PURE__ */ jsx(PreviewCard.Popup, {
-				className: cardClassName,
-				children: card
+		}), /* @__PURE__ */ jsx(PreviewCard.Portal, {
+			container: fullscreen,
+			children: /* @__PURE__ */ jsx(PreviewCard.Positioner, {
+				side: "bottom",
+				align: "start",
+				sideOffset: 8,
+				collisionPadding: 8,
+				className: positionerClassName,
+				children: /* @__PURE__ */ jsx(PreviewCard.Popup, {
+					className: cardClassName,
+					children: card
+				})
 			})
-		}) })]
+		})]
 	});
 }
 //#endregion

package/dist/components/Menu.js

@@ -1,13 +1,16 @@
 import { cx } from "../cx.js";
 import { CheckIcon, ChevronRightIcon } from "../icons.js";
 import { panelClassName, panelItemClassName, positionerClassName } from "./floating.js";
+import { useFullscreenContainer } from "./fullscreen.js";
 import { Menu } from "@base-ui/react/menu";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Menu.tsx
 var itemClassName = panelItemClassName;
 /** The portal, positioner and popup every menu needs. */
 function MenuPopup({ children, className, side = "bottom", align = "start", anchor, keepMounted = false }) {
+	const fullscreen = useFullscreenContainer();
 	return /* @__PURE__ */ jsx(Menu.Portal, {
+		container: fullscreen,
 		keepMounted,
 		children: /* @__PURE__ */ jsx(Menu.Positioner, {
 			side,

package/dist/components/Modal.js

@@ -1,4 +1,5 @@
 import { cx } from "../cx.js";
+import { useFullscreenContainer } from "./fullscreen.js";
 import { closeHandler } from "./dismiss.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { AlertDialog } from "@base-ui/react/alert-dialog";
@@ -21,37 +22,41 @@ var sizeClasses = {
 *  and a `footer` for the standard layout, as a Drawer has, or lay out the whole
 *  panel with the children. */
 function Modal({ open, onClose, title, description, footer, size, alert = false, dismissible = true, align = "top", panel = true, backdropClassName = "bg-black/40", className, children, ...popupProps }) {
+	const fullscreen = useFullscreenContainer();
 	const onOpenChange = closeHandler(dismissible, onClose);
 	const header = title !== void 0 || description !== void 0;
 	const body = children !== void 0 && children !== null && children !== false;
 	const laidOut = header || footer !== void 0;
-	const content = /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, { className: cx("fixed inset-0 z-(--layer-modal)", backdropClassName) }), /* @__PURE__ */ jsx(Dialog.Viewport, {
-		className: cx("fixed inset-0 z-(--layer-modal) flex justify-center px-4 pt-20 pb-8", align === "center" ? "items-center" : "items-start sm:pt-[max(14vh,5rem)]"),
-		children: /* @__PURE__ */ jsx(Dialog.Popup, {
-			...popupProps,
-			className: cx(panel && "rounded-xl border border-(--theme-border) bg-(--theme-app-bg) text-(--theme-app) shadow-2xl", size && [sizeClasses[size], "max-w-full"], laidOut && "flex max-h-full flex-col", "outline-none", className),
-			children: laidOut ? /* @__PURE__ */ jsxs(Fragment, { children: [
-				header && /* @__PURE__ */ jsxs("div", {
-					className: cx("shrink-0 px-5 pt-5", !body && "pb-5"),
-					children: [title !== void 0 && /* @__PURE__ */ jsx(ModalTitle, {
-						className: "m-0 text-lg font-semibold",
-						children: title
-					}), description !== void 0 && /* @__PURE__ */ jsx(ModalDescription, {
-						className: "m-0 mt-1.5 text-sm text-(--theme-muted-text-color)",
-						children: description
-					})]
-				}),
-				body && /* @__PURE__ */ jsx("div", {
-					className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-5 py-4",
-					children
-				}),
-				footer !== void 0 && /* @__PURE__ */ jsx("div", {
-					className: "flex shrink-0 items-center justify-end gap-2 border-t border-(--theme-border) px-5 py-3",
-					children: footer
-				})
-			] }) : children
-		})
-	})] });
+	const content = /* @__PURE__ */ jsxs(Dialog.Portal, {
+		container: fullscreen,
+		children: [/* @__PURE__ */ jsx(Dialog.Backdrop, { className: cx("fixed inset-0 z-(--layer-modal)", backdropClassName) }), /* @__PURE__ */ jsx(Dialog.Viewport, {
+			className: cx("fixed inset-0 z-(--layer-modal) flex justify-center px-4 pt-20 pb-8", align === "center" ? "items-center" : "items-start sm:pt-[max(14vh,5rem)]"),
+			children: /* @__PURE__ */ jsx(Dialog.Popup, {
+				...popupProps,
+				className: cx(panel && "rounded-xl border border-(--theme-border) bg-(--theme-app-bg) text-(--theme-app) shadow-2xl", size && [sizeClasses[size], "max-w-full"], laidOut && "flex max-h-full flex-col", "outline-none", className),
+				children: laidOut ? /* @__PURE__ */ jsxs(Fragment, { children: [
+					header && /* @__PURE__ */ jsxs("div", {
+						className: cx("shrink-0 px-5 pt-5", !body && "pb-5"),
+						children: [title !== void 0 && /* @__PURE__ */ jsx(ModalTitle, {
+							className: "m-0 text-lg font-semibold",
+							children: title
+						}), description !== void 0 && /* @__PURE__ */ jsx(ModalDescription, {
+							className: "m-0 mt-1.5 text-sm text-(--theme-muted-text-color)",
+							children: description
+						})]
+					}),
+					body && /* @__PURE__ */ jsx("div", {
+						className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-5 py-4",
+						children
+					}),
+					footer !== void 0 && /* @__PURE__ */ jsx("div", {
+						className: "flex shrink-0 items-center justify-end gap-2 border-t border-(--theme-border) px-5 py-3",
+						children: footer
+					})
+				] }) : children
+			})
+		})]
+	});
 	return alert ? /* @__PURE__ */ jsx(AlertDialog.Root, {
 		open,
 		onOpenChange,

package/dist/components/Popover.js

@@ -1,5 +1,6 @@
 import { cx } from "../cx.js";
 import { panelClassName, positionerClassName, tipClassName, toPositionerAnchor } from "./floating.js";
+import { useFullscreenContainer } from "./fullscreen.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, use, useCallback, useRef } from "react";
 import { Popover } from "@base-ui/react/popover";
@@ -17,6 +18,7 @@ function useClosePopover() {
 *  returns focus to the trigger. Use a Menu for a list of actions, and a
 *  HoverCard for a preview a link already leads to. */
 function Popover$1({ trigger, at, title, open, defaultOpen, onOpenChange, side = "bottom", align = "center", openOnHover = false, initialFocus = "first-control", anchor, keepSide = false, variant = "panel", className, children, ...popupProps }) {
+	const fullscreen = useFullscreenContainer();
 	const tip = variant === "tip";
 	const popup = useRef(null);
 	const actions = useRef(null);
@@ -33,32 +35,35 @@ function Popover$1({ trigger, at, title, open, defaultOpen, onOpenChange, side =
 				delay: 300,
 				closeDelay: 150
 			} : {}
-		}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
-			side,
-			align,
-			sideOffset: tip ? 8 : 6,
-			collisionPadding: 8,
-			...keepSide && { collisionAvoidance: { side: "none" } },
-			...at ? { anchor: toPositionerAnchor(at) } : anchor ? { anchor } : {},
-			className: positionerClassName,
-			children: /* @__PURE__ */ jsxs(Popover.Popup, {
-				...popupProps,
-				ref: popup,
-				initialFocus: initialFocus === "popup" ? popup : initialFocus === "first-control",
-				className: cx(tip ? cx("max-w-sm text-left", tipClassName) : cx(panelClassName, "max-h-(--available-height) max-w-[calc(100vw-16px)] overflow-y-auto p-3"), className),
-				children: [
-					tip && /* @__PURE__ */ jsx(Popover.Arrow, { className: "size-2 rotate-45 bg-(--theme-app) data-[side=top]:-bottom-1 data-[side=bottom]:-top-1 data-[side=left]:-right-1 data-[side=right]:-left-1" }),
-					title && /* @__PURE__ */ jsx(Popover.Title, {
-						className: "mb-2 text-sm font-semibold",
-						children: title
-					}),
-					/* @__PURE__ */ jsx(CloseContext, {
-						value: close,
-						children
-					})
-				]
+		}), /* @__PURE__ */ jsx(Popover.Portal, {
+			container: fullscreen,
+			children: /* @__PURE__ */ jsx(Popover.Positioner, {
+				side,
+				align,
+				sideOffset: tip ? 8 : 6,
+				collisionPadding: 8,
+				...keepSide && { collisionAvoidance: { side: "none" } },
+				...at ? { anchor: toPositionerAnchor(at) } : anchor ? { anchor } : {},
+				className: positionerClassName,
+				children: /* @__PURE__ */ jsxs(Popover.Popup, {
+					...popupProps,
+					ref: popup,
+					initialFocus: initialFocus === "popup" ? popup : initialFocus === "first-control",
+					className: cx(tip ? cx("max-w-sm text-left", tipClassName) : cx(panelClassName, "max-h-(--available-height) max-w-[calc(100vw-16px)] overflow-y-auto p-3"), className),
+					children: [
+						tip && /* @__PURE__ */ jsx(Popover.Arrow, { className: "size-2 rotate-45 bg-(--theme-app) data-[side=top]:-bottom-1 data-[side=bottom]:-top-1 data-[side=left]:-right-1 data-[side=right]:-left-1" }),
+						title && /* @__PURE__ */ jsx(Popover.Title, {
+							className: "mb-2 text-sm font-semibold",
+							children: title
+						}),
+						/* @__PURE__ */ jsx(CloseContext, {
+							value: close,
+							children
+						})
+					]
+				})
 			})
-		}) })]
+		})]
 	});
 }
 //#endregion

package/dist/components/Radio.js

@@ -9,7 +9,7 @@ import { RadioGroup } from "@base-ui/react/radio-group";
 function Radio$1({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Radio.Root, {
 		...props,
-		className: cx("flex size-4 shrink-0 items-center justify-center rounded-full border border-(--theme-border-strong) bg-(--theme-input-bg) cursor-pointer transition-colors motion-reduce:transition-none", focusOutline, "data-checked:border-(--theme-accent) data-checked:bg-(--theme-accent)", "aria-invalid:border-(--theme-error)", "data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
+		className: cx("flex size-4 shrink-0 items-center justify-center rounded-full border border-(--theme-border-strong) bg-(--theme-input-bg) cursor-pointer transition-colors motion-reduce:transition-none", focusOutline, "data-checked:border-(--theme-focus) data-checked:bg-(--theme-accent)", "aria-invalid:border-(--theme-error)", "data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
 		children: /* @__PURE__ */ jsx(Radio.Indicator, { className: "size-1.5 rounded-full bg-(--theme-accent-text)" })
 	});
 }

package/dist/components/Select.js

@@ -1,6 +1,7 @@
 import { cx } from "../cx.js";
 import { CheckIcon, ChevronDownIcon } from "../icons.js";
 import { panelClassName, positionerClassName } from "./floating.js";
+import { useFullscreenContainer } from "./fullscreen.js";
 import { Tooltip } from "./Tooltip.js";
 import { fieldBox } from "./fieldBox.js";
 import { optionNaming, pickerItemClassName } from "./comboboxItems.js";
@@ -13,6 +14,7 @@ var triggerClassName = "flex cursor-pointer items-center justify-between gap-2 p
 /** Picks one value, or several with `multiple`, from a short list. Use
 *  Combobox when the list is long enough to need filtering. */
 function Select$1({ items, placeholder, className, "aria-label": ariaLabel, "aria-labelledby": labelledBy, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-required": required, trigger, triggerTooltip, size = "md", onItemHighlighted, ...rootProps }) {
+	const fullscreen = useFullscreenContainer();
 	const uid = useId();
 	const labelOf = (value) => items.find((item) => Object.is(item.value, value))?.label;
 	const triggerProps = {
@@ -46,51 +48,54 @@ function Select$1({ items, placeholder, className, "aria-label": ariaLabel, "ari
 				className: "shrink-0 text-(--theme-muted-text-color)",
 				children: /* @__PURE__ */ jsx(ChevronDownIcon, { "aria-hidden": "true" })
 			})]
-		}), /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, {
-			alignItemWithTrigger: false,
-			sideOffset: 4,
-			className: positionerClassName,
-			children: /* @__PURE__ */ jsx(Select.Popup, {
-				className: cx("min-w-(--anchor-width) max-w-[min(20rem,var(--available-width))]", panelClassName),
-				children: /* @__PURE__ */ jsx(Select.List, {
-					className: cx("max-h-[min(15rem,var(--available-height))] overflow-y-auto", "p-1"),
-					children: items.map((item, index) => /* @__PURE__ */ jsxs(Select.Item, {
-						value: item.value,
-						disabled: item.disabled,
-						...optionNaming(`${uid}${index}`, item),
-						onFocus: onItemHighlighted && (() => onItemHighlighted(item.value)),
-						className: pickerItemClassName,
-						children: [
-							item.icon && /* @__PURE__ */ jsx("span", {
-								className: "flex shrink-0 items-center",
-								children: item.icon
-							}),
-							/* @__PURE__ */ jsxs("span", {
-								className: "flex min-w-0 flex-col",
-								children: [/* @__PURE__ */ jsxs("span", {
-									className: "flex min-w-0 items-center gap-2",
-									children: [/* @__PURE__ */ jsx(Select.ItemText, {
-										id: `${uid}${index}label`,
-										className: "truncate",
-										children: item.label
-									}), item.badge]
-								}), /* @__PURE__ */ jsx(OptionDescription, {
-									id: `${uid}${index}description`,
-									item
-								})]
-							}),
-							/* @__PURE__ */ jsx(Select.ItemIndicator, {
-								className: "ml-auto flex shrink-0 items-center",
-								children: /* @__PURE__ */ jsx(CheckIcon, {
-									"aria-hidden": "true",
-									className: "size-3.5"
+		}), /* @__PURE__ */ jsx(Select.Portal, {
+			container: fullscreen,
+			children: /* @__PURE__ */ jsx(Select.Positioner, {
+				alignItemWithTrigger: false,
+				sideOffset: 4,
+				className: positionerClassName,
+				children: /* @__PURE__ */ jsx(Select.Popup, {
+					className: cx("min-w-(--anchor-width) max-w-[min(20rem,var(--available-width))]", panelClassName),
+					children: /* @__PURE__ */ jsx(Select.List, {
+						className: cx("max-h-[min(15rem,var(--available-height))] overflow-y-auto", "p-1"),
+						children: items.map((item, index) => /* @__PURE__ */ jsxs(Select.Item, {
+							value: item.value,
+							disabled: item.disabled,
+							...optionNaming(`${uid}${index}`, item),
+							onFocus: onItemHighlighted && (() => onItemHighlighted(item.value)),
+							className: pickerItemClassName,
+							children: [
+								item.icon && /* @__PURE__ */ jsx("span", {
+									className: "flex shrink-0 items-center",
+									children: item.icon
+								}),
+								/* @__PURE__ */ jsxs("span", {
+									className: "flex min-w-0 flex-col",
+									children: [/* @__PURE__ */ jsxs("span", {
+										className: "flex min-w-0 items-center gap-2",
+										children: [/* @__PURE__ */ jsx(Select.ItemText, {
+											id: `${uid}${index}label`,
+											className: "truncate",
+											children: item.label
+										}), item.badge]
+									}), /* @__PURE__ */ jsx(OptionDescription, {
+										id: `${uid}${index}description`,
+										item
+									})]
+								}),
+								/* @__PURE__ */ jsx(Select.ItemIndicator, {
+									className: "ml-auto flex shrink-0 items-center",
+									children: /* @__PURE__ */ jsx(CheckIcon, {
+										"aria-hidden": "true",
+										className: "size-3.5"
+									})
 								})
-							})
-						]
-					}, String(item.value)))
+							]
+						}, String(item.value)))
+					})
 				})
 			})
-		}) })]
+		})]
 	});
 }
 //#endregion

package/dist/components/Slider.js

@@ -17,10 +17,10 @@ function Slider$1({ value, onValueChange, min, max, step = 1, disabled = false,
 		children: /* @__PURE__ */ jsx(Slider.Control, {
 			className: "flex w-full touch-none select-none items-center py-2 data-disabled:cursor-not-allowed data-disabled:opacity-50",
 			children: /* @__PURE__ */ jsxs(Slider.Track, {
-				className: "h-1 w-full rounded-full bg-(--theme-border)",
-				children: [/* @__PURE__ */ jsx(Slider.Indicator, { className: "rounded-full bg-(--theme-accent)" }), /* @__PURE__ */ jsx(Slider.Thumb, {
+				className: "h-1 w-full rounded-full bg-(--theme-border-strong)",
+				children: [/* @__PURE__ */ jsx(Slider.Indicator, { className: "rounded-full bg-(--theme-focus)" }), /* @__PURE__ */ jsx(Slider.Thumb, {
 					"aria-label": ariaLabel,
-					className: "size-4 rounded-full border-2 border-(--theme-accent) bg-(--theme-panel-bg) shadow-sm has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-(--theme-focus)"
+					className: "size-4 rounded-full border-2 border-(--theme-focus) bg-(--theme-panel-bg) shadow-sm has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-(--theme-focus)"
 				})]
 			})
 		})

package/dist/components/Switch.js

@@ -21,7 +21,7 @@ var sizes = {
 function Switch$1({ size = "md", className, onLabel, offLabel, ...props }) {
 	const control = /* @__PURE__ */ jsx(Switch.Root, {
 		...props,
-		className: cx("peer inline-flex shrink-0 items-center rounded-full p-0.5 bg-(--theme-border-strong) transition-colors duration-200 cursor-pointer motion-reduce:transition-none", "data-checked:bg-(--theme-accent)", focusOutline, "aria-invalid:ring-2 aria-invalid:ring-(--theme-error)", "data-disabled:cursor-not-allowed data-disabled:opacity-50", sizes[size].root, className),
+		className: cx("peer inline-flex shrink-0 items-center rounded-full p-0.5 bg-(--theme-border-strong) transition-colors duration-200 cursor-pointer motion-reduce:transition-none", "data-checked:bg-(--theme-focus)", focusOutline, "aria-invalid:ring-2 aria-invalid:ring-(--theme-error)", "data-disabled:cursor-not-allowed data-disabled:opacity-50", sizes[size].root, className),
 		children: /* @__PURE__ */ jsx(Switch.Thumb, { className: cx("rounded-full bg-white shadow-sm transition-transform duration-200 motion-reduce:transition-none", sizes[size].thumb) })
 	});
 	if (onLabel === void 0 && offLabel === void 0) return control;

package/dist/components/Tooltip.js

@@ -1,4 +1,5 @@
 import { positionerClassName, tipArrowClassName, tipClassName } from "./floating.js";
+import { useFullscreenContainer } from "./fullscreen.js";
 import { keyedByContent } from "./keys.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1, createContext, use, useState } from "react";
@@ -19,18 +20,22 @@ function KbdShortcut({ keys }) {
 	});
 }
 function TooltipPopup({ content, shortcut, side }) {
-	return /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
-		side,
-		sideOffset: 8,
-		className: positionerClassName,
-		children: /* @__PURE__ */ jsxs(Tooltip.Popup, {
-			className: `max-w-xs ${tipClassName}`,
-			children: [/* @__PURE__ */ jsx(Tooltip.Arrow, { className: tipArrowClassName }), shortcut ? /* @__PURE__ */ jsxs("span", {
-				className: "inline-flex items-center gap-2",
-				children: [content, /* @__PURE__ */ jsx(KbdShortcut, { keys: shortcut })]
-			}) : content]
+	const fullscreen = useFullscreenContainer();
+	return /* @__PURE__ */ jsx(Tooltip.Portal, {
+		container: fullscreen,
+		children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+			side,
+			sideOffset: 8,
+			className: positionerClassName,
+			children: /* @__PURE__ */ jsxs(Tooltip.Popup, {
+				className: `max-w-xs ${tipClassName}`,
+				children: [/* @__PURE__ */ jsx(Tooltip.Arrow, { className: tipArrowClassName }), shortcut ? /* @__PURE__ */ jsxs("span", {
+					className: "inline-flex items-center gap-2",
+					children: [content, /* @__PURE__ */ jsx(KbdShortcut, { keys: shortcut })]
+				}) : content]
+			})
 		})
-	}) });
+	});
 }
 /** One popup serves every Tooltip below it, so each anchor costs only a trigger.
 *  UIProvider mounts it; nothing else needs to. */

package/dist/components/fieldBox.js

@@ -20,7 +20,7 @@ var sizes = {
 *  thumb: an outline in the theme's focus color, which is solved for 3:1 on every surface a
 *  control sits on, so it shows on a checked control as well as an empty one. */
 var focusOutline = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--theme-focus)";
-var base = "w-full min-w-0 rounded-md border border-(--theme-border) bg-(--theme-input-bg) text-(--theme-app) outline-none transition-colors placeholder:text-(--theme-placeholder)";
+var base = "w-full min-w-0 rounded-md border border-(--theme-border-strong) bg-(--theme-input-bg) text-(--theme-app) outline-none transition-colors placeholder:text-(--theme-placeholder)";
 var own = cx("focus-visible:border-(--theme-focus) focus-visible:ring-1 focus-visible:ring-(--theme-focus)", "aria-invalid:border-(--theme-error) aria-invalid:focus-visible:ring-(--theme-error)", "disabled:cursor-not-allowed disabled:bg-(--theme-input-disabled-bg) disabled:text-(--theme-placeholder)", "data-disabled:cursor-not-allowed data-disabled:bg-(--theme-input-disabled-bg) data-disabled:text-(--theme-placeholder)");
 var inside = cx("has-[:focus-visible]:border-(--theme-focus) has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-(--theme-focus)", "has-[[aria-invalid=true]]:border-(--theme-error) has-[[aria-invalid=true]:focus-visible]:ring-(--theme-error)", "has-[input:disabled]:cursor-not-allowed has-[input:disabled]:bg-(--theme-input-disabled-bg) has-[input:disabled]:text-(--theme-placeholder)", "data-disabled:cursor-not-allowed data-disabled:bg-(--theme-input-disabled-bg) data-disabled:text-(--theme-placeholder)");
 /** The box every input-like control draws: text inputs, textareas, and the triggers of

package/dist/components/fullscreen.d.ts

@@ -0,0 +1,4 @@
+/** Where a popup portals while an element is fullscreen: that element. The browser
+ *  shows only the fullscreen element's subtree, so a popup portaled to the body
+ *  would open unseen behind it. Undefined otherwise, which keeps the body. */
+export declare function useFullscreenContainer(): HTMLElement | undefined;

package/dist/components/fullscreen.js

@@ -0,0 +1,18 @@
+import { useSyncExternalStore } from "react";
+//#region src/components/fullscreen.ts
+function subscribe(onChange) {
+	document.addEventListener("fullscreenchange", onChange);
+	return () => document.removeEventListener("fullscreenchange", onChange);
+}
+function snapshot() {
+	const element = document.fullscreenElement;
+	return element instanceof HTMLElement ? element : void 0;
+}
+/** Where a popup portals while an element is fullscreen: that element. The browser
+*  shows only the fullscreen element's subtree, so a popup portaled to the body
+*  would open unseen behind it. Undefined otherwise, which keeps the body. */
+function useFullscreenContainer() {
+	return useSyncExternalStore(subscribe, snapshot, () => void 0);
+}
+//#endregion
+export { useFullscreenContainer };

package/dist/graph/GraphEditorDialogs.d.ts

@@ -12,7 +12,7 @@ export declare const STEP_FIELDS: readonly ['name', 'run', 'shell', 'uses', 'wit
 export declare const RETRY_FIELDS: readonly ['max-retries', 'interval', 'timeout', 'clean-on-retry'];
 interface ViewProps {
     source?: string | undefined;
-    /** Adds the job or step being edited; applied with the first save, so cancelling adds nothing. */
+    /** Adds the job or step being edited; applied with the first save, so canceling adds nothing. */
     addition?: GraphEdit | undefined;
     /** The view to open in; YAML unless the host says form. */
     view?: SettingsView | undefined;

package/dist/styles/theme.css

@@ -23,7 +23,7 @@
   --theme-placeholder: light-dark(#7e8796, #9da5ad);
   --theme-link: light-dark(#06354f, #9dd7ff);
   --theme-border: light-dark(#cacdd0, #30363d);
-  --theme-border-strong: light-dark(#a3a6a9, #4f565d);
+  --theme-border-strong: light-dark(#848689, #676e76);
   --theme-accent: light-dark(#06354f, #5b9ccf);
   --theme-accent-text: light-dark(#ffffff, #000000);
   --theme-accent-hover: light-dark(#002841, #6aace0);