foss-design 0.9.11 → 0.9.12

package/dist/viewer/index.html

@@ -14,8 +14,8 @@
         document.documentElement.dataset.theme = dark ? 'dark' : 'light'
       } catch (e) {}
     </script>
-    <script type="module" crossorigin src="./assets/index-mvGp1q3N.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-Cy6JlR85.css">
+    <script type="module" crossorigin src="./assets/index-Cm4CEv8V.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-BUDcnDgZ.css">
   </head>
   <body>
     <div id="root"></div>

package/dist/viewer-lib/index.js

@@ -2730,6 +2730,7 @@ var ICON_PATHS = {
 	tablet: "<rect width=\"16\" height=\"20\" x=\"4\" y=\"2\" rx=\"2\"/><path d=\"M12 18h.01\"/>",
 	note: "<path d=\"M16 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8Z\"/><path d=\"M15 3v4a2 2 0 0 0 2 2h4\"/>",
 	globe: "<circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20\"/><path d=\"M2 12h20\"/>",
+	share: "<path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"/><path d=\"m16 6-4-4-4 4\"/><path d=\"M12 2v13\"/>",
 	pointer: "<path d=\"M4.04 4.69a.5.5 0 0 1 .65-.65l16 6.5a.5.5 0 0 1-.06.95l-6.12 1.58a2 2 0 0 0-1.44 1.44l-1.58 6.12a.5.5 0 0 1-.95.06z\"/>",
 	component: "<path d=\"M5.5 8.5 9 12l-3.5 3.5L2 12l3.5-3.5Z\"/><path d=\"m12 2 3.5 3.5L12 9 8.5 5.5 12 2Z\"/><path d=\"M18.5 8.5 22 12l-3.5 3.5L15 12l3.5-3.5Z\"/><path d=\"m12 15 3.5 3.5L12 22l-3.5-3.5L12 15Z\"/>",
 	keyboard: "<rect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\"/><path d=\"M6 8h.01\"/><path d=\"M10 8h.01\"/><path d=\"M14 8h.01\"/><path d=\"M18 8h.01\"/><path d=\"M8 12h.01\"/><path d=\"M12 12h.01\"/><path d=\"M16 12h.01\"/><path d=\"M7 16h10\"/>",
@@ -5222,10 +5223,10 @@ var Popper = /* @__PURE__ */ __name$9((props) => {
 		children
 	});
 }, "Popper");
-var ANCHOR_NAME = "PopperAnchor";
+var ANCHOR_NAME$1 = "PopperAnchor";
 var PopperAnchor = /* @__PURE__ */ React.forwardRef(/* @__PURE__ */ __name$9(function PopperAnchor2(props, forwardedRef) {
 	const { __scopePopper, virtualRef, ...anchorProps } = props;
-	const context = usePopperContext(ANCHOR_NAME, __scopePopper);
+	const context = usePopperContext(ANCHOR_NAME$1, __scopePopper);
 	const ref = React.useRef(null);
 	const onAnchorChange = context.onAnchorChange;
 	const composedRefs = useComposedRefs(forwardedRef, React.useCallback((node) => {
@@ -7263,7 +7264,7 @@ function whenMouse(handler) {
 }
 __name$2(whenMouse, "whenMouse");
 var Root3 = Menu$1;
-var Anchor2 = MenuAnchor;
+var Anchor2$1 = MenuAnchor;
 var Portal$1 = MenuPortal;
 var Content2$2 = MenuContent;
 var Label$1 = MenuLabel$1;
@@ -7315,7 +7316,7 @@ var DropdownMenuTrigger = /* @__PURE__ */ React.forwardRef(/* @__PURE__ */ __nam
 	const context = useDropdownMenuContext(TRIGGER_NAME$1, __scopeDropdownMenu);
 	const menuScope = useMenuScope(__scopeDropdownMenu);
 	const composedRefs = useComposedRefs(forwardedRef, context.triggerRef);
-	return /* @__PURE__ */ jsx(Anchor2, {
+	return /* @__PURE__ */ jsx(Anchor2$1, {
 		asChild: true,
 		...menuScope,
 		children: /* @__PURE__ */ jsx(Primitive.button, {
@@ -7828,6 +7829,22 @@ var Popover = /* @__PURE__ */ __name((props) => {
 		})
 	});
 }, "Popover");
+var ANCHOR_NAME = "PopoverAnchor";
+var PopoverAnchor = /* @__PURE__ */ React.forwardRef(/* @__PURE__ */ __name(function PopoverAnchor2(props, forwardedRef) {
+	const { __scopePopover, ...anchorProps } = props;
+	const context = usePopoverContext(ANCHOR_NAME, __scopePopover);
+	const popperScope = usePopperScope(__scopePopover);
+	const { onCustomAnchorAdd, onCustomAnchorRemove } = context;
+	React.useEffect(() => {
+		onCustomAnchorAdd();
+		return () => onCustomAnchorRemove();
+	}, [onCustomAnchorAdd, onCustomAnchorRemove]);
+	return /* @__PURE__ */ jsx(Anchor, {
+		...popperScope,
+		...anchorProps,
+		ref: forwardedRef
+	});
+}, "PopoverAnchor"));
 var TRIGGER_NAME = "PopoverTrigger";
 var PopoverTrigger = /* @__PURE__ */ React.forwardRef(/* @__PURE__ */ __name(function PopoverTrigger2(props, forwardedRef) {
 	const { __scopePopover, ...triggerProps } = props;
@@ -7990,6 +8007,7 @@ function getState(open) {
 }
 __name(getState, "getState");
 var Root2 = Popover;
+var Anchor2 = PopoverAnchor;
 var Trigger = PopoverTrigger;
 var Portal = PopoverPortal;
 var Content2 = PopoverContent;
@@ -11523,22 +11541,84 @@ function CanvasBar({ canvas, page, theme, onTheme, sidebar, onSidebar, onPlay, c
 		}) : null]
 	});
 }
-/** The selected item's name and actions, floating over the bottom of the canvas. */
+/** The selected item's name and actions, floating over the bottom of the canvas; it eases in and out. */
 function SelectionBar({ canvas, store, layoutItems, theme, onPlay, inspect }) {
 	const selected = useStore(store, (state) => state.selected);
-	const active = useStore(store, (state) => state.active);
-	const status = useStore(store, (state) => selected ? state.frames[selected] : void 0);
 	const item = layoutItems.find((i) => i.id === selected);
-	const openUrl = useOpenUrl(canvas.id, item?.kind === "screen" || item?.kind === "url" ? item : void 0, theme);
-	if (!item) return null;
-	const frame = item.kind === "screen" || item.kind === "url";
-	const reload = () => reloadFrame(document.querySelector(`[data-item="${CSS.escape(item.id)}"] iframe`));
-	const errors = status?.errors ?? [];
 	return /* @__PURE__ */ jsx("div", {
 		"data-ui": true,
 		className: "pointer-events-none absolute inset-x-0 bottom-5 z-20 flex justify-center px-4",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "pointer-events-auto flex max-w-full flex-col overflow-hidden rounded-[10px] border border-rule bg-surface shadow-pop animate-[q-pop_120ms_ease-out]",
+		children: /* @__PURE__ */ jsx(AnimatePresence, { children: item ? /* @__PURE__ */ jsx(SelectedBar, {
+			canvas,
+			store,
+			item,
+			theme,
+			onPlay,
+			inspect
+		}, "bar") : null })
+	});
+}
+function SelectedBar({ canvas, store, item, theme, onPlay, inspect }) {
+	const { slots } = useViewer();
+	const status = useStore(store, (state) => state.frames[item.id]);
+	const openUrl = useOpenUrl(canvas.id, item.kind === "screen" || item.kind === "url" ? item : void 0, theme);
+	const frame = item.kind === "screen" || item.kind === "url";
+	const reload = () => reloadFrame(document.querySelector(`[data-item="${CSS.escape(item.id)}"] iframe`));
+	const errors = status?.errors ?? [];
+	return /* @__PURE__ */ jsxs(motion.div, {
+		initial: {
+			opacity: 0,
+			y: 10,
+			scale: .98
+		},
+		animate: {
+			opacity: 1,
+			y: 0,
+			scale: 1
+		},
+		exit: {
+			opacity: 0,
+			y: 10,
+			scale: .98,
+			transition: {
+				duration: .14,
+				ease: "easeIn"
+			}
+		},
+		transition: {
+			type: "spring",
+			duration: .26,
+			bounce: .12
+		},
+		className: "relative flex w-fit max-w-[95%] min-w-0 flex-col",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "pointer-events-none absolute inset-x-5 bottom-full flex justify-center",
+			children: /* @__PURE__ */ jsx(AnimatePresence, { children: frame && inspect ? /* @__PURE__ */ jsx(motion.div, {
+				initial: {
+					y: "100%",
+					opacity: 0
+				},
+				animate: {
+					y: 0,
+					opacity: .9
+				},
+				exit: {
+					y: "100%",
+					opacity: 0
+				},
+				transition: {
+					type: "spring",
+					duration: .28,
+					bounce: .15
+				},
+				className: "flex h-[22px] min-w-0 items-center rounded-t-[7px] border border-b-0 border-rule bg-surface/80 px-3 text-[11.5px] whitespace-nowrap text-muted backdrop-blur-md",
+				children: /* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: "Click an element to inspect it"
+				})
+			}, "inspect") : null })
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "pointer-events-auto relative flex max-w-full flex-col overflow-hidden rounded-[10px] border border-rule bg-surface shadow-pop",
 			children: [errors.length ? /* @__PURE__ */ jsxs("div", {
 				className: "flex max-h-40 items-start gap-2 overflow-y-auto border-b border-rule bg-danger-soft px-3.5 py-2 font-mono text-[12px] whitespace-pre-wrap text-danger-text",
 				children: [/* @__PURE__ */ jsx(Icon, {
@@ -11550,29 +11630,11 @@ function SelectionBar({ canvas, store, layoutItems, theme, onPlay, inspect }) {
 					children: errors.join("\n")
 				})]
 			}) : null, /* @__PURE__ */ jsxs("div", {
-				className: "flex h-[44px] items-center gap-1 pr-1.5 pl-3.5",
+				className: "flex h-[44px] items-center gap-1 pr-1.5 pl-3.5 [&>:not(:first-child)]:shrink-0",
 				children: [
-					/* @__PURE__ */ jsxs("div", {
-						className: "flex min-w-0 items-center gap-2 pr-2",
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "truncate text-[13.5px] font-medium",
-							children: item.title || item.id
-						}), frame && active === item.id ? /* @__PURE__ */ jsxs("span", {
-							className: "flex shrink-0 items-center gap-1.5 text-[12px] text-muted",
-							children: [
-								/* @__PURE__ */ jsx(Icon, {
-									name: "pointer",
-									size: 13
-								}),
-								" ",
-								inspect ? "Inspecting" : "Interacting",
-								" ",
-								/* @__PURE__ */ jsx(Kbd, { children: "esc" })
-							]
-						}) : frame ? /* @__PURE__ */ jsx("span", {
-							className: "shrink-0 text-[12px] text-muted",
-							children: inspect ? "Click an element to inspect it" : "Click the screen to interact"
-						}) : null]
+					/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 truncate pr-2 text-[13.5px] font-medium",
+						children: item.title || item.id
 					}),
 					frame ? /* @__PURE__ */ jsx(Tooltip, {
 						content: /* @__PURE__ */ jsxs("span", {
@@ -11615,6 +11677,7 @@ function SelectionBar({ canvas, store, layoutItems, theme, onPlay, inspect }) {
 							onClick: () => void copyText(item.file, "Path copied")
 						})
 					}) : null,
+					slots.selectionActions?.(canvas.id, item),
 					/* @__PURE__ */ jsx(Tooltip, {
 						content: /* @__PURE__ */ jsxs("span", {
 							className: "flex items-center gap-1.5",
@@ -11631,7 +11694,7 @@ function SelectionBar({ canvas, store, layoutItems, theme, onPlay, inspect }) {
 					})
 				]
 			})]
-		})
+		})]
 	});
 }
 /** The inspect mode switch: a button that stays pressed while on. */
@@ -11748,7 +11811,8 @@ function layoutPage(page, sizes) {
 				y: top,
 				w: Math.max(width, header ? HEADER_MIN_WIDTH : 0),
 				h: bottom - top,
-				header
+				header,
+				body: header ? header + HEADER_GAP : 0
 			});
 			y = bottom + SECTION_GAP;
 		}
@@ -12168,13 +12232,17 @@ var Label = memo(function Label({ placed, store }) {
 		]
 	});
 });
-/** A section's title in screen space, for zooms where the one on the canvas is too small to read. */
+/**
+* A section's title in screen space, for zooms where the one on the canvas is too small to read: where
+* that one was, lifted only as far as it must be to clear the frame labels under it.
+*/
 var SectionTitle = memo(function SectionTitle({ placed }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-at": "",
 		style: {
 			"--x": placed.x,
-			"--y": placed.y
+			"--y": placed.y,
+			"--body": placed.body
 		},
 		className: "section-title text-[15px] leading-none font-semibold whitespace-nowrap text-ink select-none",
 		children: placed.section.title
@@ -12772,15 +12840,20 @@ function CanvasView({ canvas, page }) {
 	useEffect(() => {
 		if (picked) setInspect(true);
 	}, [picked]);
+	const pickedInfo = inspection.info;
 	useEffect(() => {
 		const frame = inspection.frame;
-		if (!frame) return;
+		if (!frame || !pickedInfo) return;
 		const id = Object.entries(store.get().frameEls).find(([, el]) => el === frame)?.[0];
 		if (id && store.get().selected !== id) store.set((state) => ({
 			...state,
 			selected: id
 		}));
-	}, [inspection.frame, store]);
+	}, [
+		inspection.frame,
+		pickedInfo,
+		store
+	]);
 	const order = useMemo(() => frameOrder(layout), [layout]);
 	const key = cameraKey(canvas.id, page?.id ?? "");
 	const placed = useRef(false);
@@ -12895,7 +12968,8 @@ function CanvasView({ canvas, page }) {
 		onEscape() {
 			store.set((state) => ({
 				...state,
-				active: null
+				active: null,
+				selected: null
 			}));
 		}
 	}), [
@@ -12928,12 +13002,9 @@ function CanvasView({ canvas, page }) {
 			if (e.key === "Escape") {
 				if (inspection.info) inspection.select(null);
 				else if (inspectOn) setInspect(false);
-				else if (state.active) store.set((s) => ({
-					...s,
-					active: null
-				}));
-				else if (state.selected) store.set((s) => ({
+				else if (state.active || state.selected) store.set((s) => ({
 					...s,
+					active: null,
 					selected: null
 				}));
 			} else if (e.key === "i" && !mod && !e.altKey) setInspect((value) => !value);
@@ -13045,7 +13116,13 @@ function CanvasView({ canvas, page }) {
 							capture: false,
 							apiRef,
 							onPlay: play,
-							onSelect: select
+							onSelect: (id) => {
+								if (!id) {
+									inspection.select(null);
+									setInspect(false);
+								}
+								select(id);
+							}
 						}) : /* @__PURE__ */ jsx("div", {
 							className: "canvas-dots flex h-full",
 							children: /* @__PURE__ */ jsx(Notice, {
@@ -19094,6 +19171,155 @@ function Avatar({ src, name, size = 28, shape = "circle", className }) {
 	});
 }
 //#endregion
+//#region viewer/src/ui/combobox.tsx
+/**
+* One option out of many, in a field: it shows the picked one, typing narrows the list, arrows and
+* Enter pick without the mouse. The list keeps to a few rows and scrolls, however many there are.
+*/
+function Combobox({ options, value, onChange, placeholder, empty = "Nothing matches", className, "aria-label": label }) {
+	const listId = useId();
+	const anchor = useRef(null);
+	const field = useRef(null);
+	const list = useRef(null);
+	const [open, setOpen] = useState(false);
+	const [query, setQuery] = useState("");
+	const [active, setActive] = useState(0);
+	const picked = options.find((option) => option.value === value);
+	const shown = useMemo(() => {
+		const q = query.trim().toLowerCase();
+		return q ? options.filter((option) => `${option.label} ${option.keywords ?? ""}`.toLowerCase().includes(q)) : options;
+	}, [options, query]);
+	const current = Math.min(active, shown.length - 1);
+	const show = () => {
+		setQuery("");
+		setActive(Math.max(0, options.findIndex((option) => option.value === value)));
+		setOpen(true);
+	};
+	const pick = (option) => {
+		onChange(option.value);
+		setOpen(false);
+		setQuery("");
+	};
+	useEffect(() => {
+		if (open) list.current?.querySelector(`[data-index="${current}"]`)?.scrollIntoView({ block: "nearest" });
+	}, [open, current]);
+	return /* @__PURE__ */ jsxs(Root2, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(Anchor2, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs("div", {
+				ref: anchor,
+				onClick: () => {
+					field.current?.focus();
+					if (!open) show();
+				},
+				className: cn("flex h-ctrl w-full min-w-0 cursor-text items-center gap-2 rounded-[6px] border border-rule bg-surface pr-2 pl-2 text-ctrl transition-colors hover:border-rule-strong", "focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-action", className),
+				children: [
+					picked?.media && !query ? /* @__PURE__ */ jsx("span", {
+						className: "flex shrink-0",
+						children: picked.media
+					}) : null,
+					/* @__PURE__ */ jsx("input", {
+						ref: field,
+						value: open ? query : picked?.label ?? "",
+						placeholder: open && picked ? picked.label : placeholder,
+						autoComplete: "off",
+						spellCheck: false,
+						role: "combobox",
+						"aria-label": label,
+						"aria-expanded": open,
+						"aria-controls": listId,
+						"aria-autocomplete": "list",
+						"aria-activedescendant": open && shown[current] ? `${listId}-${current}` : void 0,
+						onChange: (event) => {
+							setQuery(event.target.value);
+							setActive(0);
+							setOpen(true);
+						},
+						onKeyDown: (event) => {
+							if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+								event.preventDefault();
+								if (!open) return show();
+								const step = event.key === "ArrowDown" ? 1 : -1;
+								setActive((i) => Math.min(Math.max(i + step, 0), shown.length - 1));
+							} else if (event.key === "Enter" && open && shown[current]) {
+								event.preventDefault();
+								pick(shown[current]);
+							} else if (event.key === "Escape" && open) {
+								event.preventDefault();
+								event.stopPropagation();
+								setOpen(false);
+							} else if (event.key === "Tab") setOpen(false);
+						},
+						className: "h-full min-w-0 grow border-0 bg-transparent p-0 text-ink outline-none placeholder:text-muted"
+					}),
+					/* @__PURE__ */ jsx(Icon, {
+						name: "chevron-down",
+						size: 16,
+						className: cn("shrink-0 text-muted transition-transform", open && "rotate-180")
+					})
+				]
+			})
+		}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content2, {
+			side: "bottom",
+			align: "start",
+			sideOffset: 4,
+			collisionPadding: 12,
+			onOpenAutoFocus: (event) => event.preventDefault(),
+			onCloseAutoFocus: (event) => event.preventDefault(),
+			onInteractOutside: (event) => {
+				if (anchor.current?.contains(event.target)) event.preventDefault();
+			},
+			className: cn(menuSurface, "max-h-[min(296px,var(--radix-popover-content-available-height))] overflow-y-auto"),
+			style: { width: "var(--radix-popper-anchor-width)" },
+			children: /* @__PURE__ */ jsx("div", {
+				ref: list,
+				id: listId,
+				role: "listbox",
+				"aria-label": label,
+				children: shown.length ? shown.map((option, index) => /* @__PURE__ */ jsxs("div", {
+					id: `${listId}-${index}`,
+					"data-index": index,
+					role: "option",
+					"aria-selected": option.value === value,
+					tabIndex: -1,
+					onMouseDown: (event) => event.preventDefault(),
+					onMouseMove: () => index !== current && setActive(index),
+					onClick: () => pick(option),
+					className: cn("flex min-h-[44px] cursor-pointer items-center gap-2.5 px-2 py-1.5 text-[13.5px]", index === current && "bg-soft"),
+					children: [
+						option.media ? /* @__PURE__ */ jsx("span", {
+							className: "flex shrink-0",
+							children: option.media
+						}) : null,
+						/* @__PURE__ */ jsxs("span", {
+							className: "flex min-w-0 grow flex-col gap-0.5",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "truncate font-medium text-ink",
+								children: option.label
+							}), option.sub ? /* @__PURE__ */ jsx("span", {
+								className: "truncate text-[12px] text-muted",
+								children: option.sub
+							}) : null]
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: cn("flex w-4 shrink-0 text-ink", option.value !== value && "invisible"),
+							children: /* @__PURE__ */ jsx(Icon, {
+								name: "check",
+								size: 16
+							})
+						})
+					]
+				}, option.value)) : /* @__PURE__ */ jsx("div", {
+					className: "px-3 py-2.5 text-[13px] text-muted",
+					children: empty
+				})
+			})
+		}) })]
+	});
+}
+//#endregion
 //#region viewer/src/ui/copy-button.tsx
 /** A ghost "Copy" button that turns into "Copied" with a check for a moment after it copies. */
 function CopyButton({ text, label = "Copy", done = "Copied", className }) {
@@ -19479,4 +19705,4 @@ function TextArea({ label, hint, error, className, id, disabled, rows = 4, ...re
 	});
 }
 //#endregion
-export { ApiError, Avatar, Badge, Bar, Button, ButtonAnchor, ButtonLink, Content, CopyButton, CornerPlate, Count, DesignViewer, Dialog, GroupRow, Icon, IconButton, KV, Kbd, Mark, Menu, MenuItem, MenuLabel, MenuSeparator, Meter, Mono, Muted, NavLabel, Notice, NoticeCard, PageHead, Panel, PanelBody, PanelFoot, PanelHead, PanelTabs, Row, RowLink, Segmented, Sheet, Skeleton, SkeletonRows, SlidePanel, Strip, SubNav, Switch, THead, TextArea, TextField, ThemeMenu, Toaster, Tooltip, TooltipProvider, Two, Wordmark, buttonClass, cn, copyText, floatingSurface, followLink, frameSrc, iconButtonClass, initials, listenToFrame, localSource, menuItemClass, menuSurface, resolveUrl, sendTheme, setThemePref, staticSource, toast, useBarCompact, useIsPhone, useTheme, useThemePref };
+export { ApiError, Avatar, Badge, Bar, Button, ButtonAnchor, ButtonLink, Combobox, Content, CopyButton, CornerPlate, Count, DesignViewer, Dialog, GroupRow, Icon, IconButton, KV, Kbd, Mark, Menu, MenuItem, MenuLabel, MenuSeparator, Meter, Mono, Muted, NavLabel, Notice, NoticeCard, PageHead, Panel, PanelBody, PanelFoot, PanelHead, PanelTabs, Row, RowLink, Segmented, Sheet, Skeleton, SkeletonRows, SlidePanel, Strip, SubNav, Switch, THead, TextArea, TextField, ThemeMenu, Toaster, Tooltip, TooltipProvider, Two, Wordmark, buttonClass, cn, copyText, floatingSurface, followLink, frameSrc, iconButtonClass, initials, listenToFrame, localSource, menuItemClass, menuSurface, resolveUrl, sendTheme, setThemePref, staticSource, toast, useBarCompact, useIsPhone, useTheme, useThemePref };

package/dist/viewer-lib/styles.css

@@ -74,6 +74,7 @@
     --animate-spin: spin 1s linear infinite;
     --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
     --blur-sm: 8px;
+    --blur-md: 12px;
     --default-transition-duration: .15s;
     --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     --default-font-family: "IBM Plex Sans", system-ui, sans-serif;
@@ -417,6 +418,10 @@
     pointer-events: none;
   }
 
+  .invisible {
+    visibility: hidden;
+  }
+
   .visible {
     visibility: visible;
   }
@@ -465,6 +470,10 @@
     inset-inline: 0;
   }
 
+  .inset-x-5 {
+    inset-inline: calc(var(--spacing) * 5);
+  }
+
   .inset-x-6 {
     inset-inline: calc(var(--spacing) * 6);
   }
@@ -525,6 +534,10 @@
     bottom: calc(var(--spacing) * 5);
   }
 
+  .bottom-full {
+    bottom: 100%;
+  }
+
   .left-0 {
     left: 0;
   }
@@ -894,6 +907,10 @@
     max-height: min(56vh, 520px);
   }
 
+  .max-h-\[min\(296px\,var\(--radix-popover-content-available-height\)\)\] {
+    max-height: min(296px, var(--radix-popover-content-available-height));
+  }
+
   .max-h-\[min\(560px\,76vh\)\] {
     max-height: min(560px, 76vh);
   }
@@ -914,6 +931,10 @@
     min-height: 38px;
   }
 
+  .min-h-\[44px\] {
+    min-height: 44px;
+  }
+
   .min-h-\[46px\] {
     min-height: 46px;
   }
@@ -940,6 +961,10 @@
     }
   }
 
+  .w-4 {
+    width: calc(var(--spacing) * 4);
+  }
+
   .w-5 {
     width: calc(var(--spacing) * 5);
   }
@@ -1028,6 +1053,10 @@
     max-width: 80%;
   }
 
+  .max-w-\[95\%\] {
+    max-width: 95%;
+  }
+
   .max-w-\[260px\] {
     max-width: 260px;
   }
@@ -1130,6 +1159,10 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
+  .rotate-180 {
+    rotate: 180deg;
+  }
+
   .transform {
     transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
   }
@@ -1138,10 +1171,6 @@
     animation: .16s ease-out q-fade-in;
   }
 
-  .animate-\[q-pop_120ms_ease-out\] {
-    animation: .12s ease-out q-pop;
-  }
-
   .animate-pulse {
     animation: var(--animate-pulse);
   }
@@ -1170,6 +1199,10 @@
     cursor: pointer;
   }
 
+  .cursor-text {
+    cursor: text;
+  }
+
   .touch-none {
     touch-action: none;
   }
@@ -1376,6 +1409,11 @@
     border-radius: 3.40282e38px;
   }
 
+  .rounded-t-\[7px\] {
+    border-top-left-radius: 7px;
+    border-top-right-radius: 7px;
+  }
+
   .rounded-t-\[14px\] {
     border-top-left-radius: 14px;
     border-top-right-radius: 14px;
@@ -1411,6 +1449,11 @@
     border-bottom-width: 1px;
   }
 
+  .border-b-0 {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 0;
+  }
+
   .border-l {
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
@@ -1558,6 +1601,16 @@
     }
   }
 
+  .bg-surface\/80 {
+    background-color: var(--surface);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-surface\/80 {
+      background-color: color-mix(in oklab, var(--surface) 80%, transparent);
+    }
+  }
+
   .bg-surface\/90 {
     background-color: var(--surface);
   }
@@ -2186,6 +2239,12 @@
     filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
   }
 
+  .backdrop-blur-md {
+    --tw-backdrop-blur: blur(var(--blur-md));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+  }
+
   .backdrop-blur-sm {
     --tw-backdrop-blur: blur(var(--blur-sm));
     -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
@@ -2512,6 +2571,10 @@
       flex-wrap: wrap;
     }
   }
+
+  .\[\&\>\:not\(\:first-child\)\]\:shrink-0 > :not(:first-child) {
+    flex-shrink: 0;
+  }
 }
 
 @font-face {
@@ -3082,9 +3145,9 @@
 }
 
 .canvas-overlay .section-title {
+  translate: 0 max(-100%, min(0px, calc(var(--body) * var(--z) * 1px - 44px)));
   padding-bottom: 8px;
   display: none;
-  translate: 0 -100%;
 }
 
 .canvas-overlay[data-titles="on"] .section-title {

package/dist/viewer-lib/types/viewer/src/lib/viewer.d.ts

@@ -1,3 +1,4 @@
+import type { CanvasItem } from '../../../src/shared/types';
 import { type ReactNode } from 'react';
 import type { ViewerSource } from './source';
 /** Places where an app that embeds the viewer adds its own controls. */
@@ -28,6 +29,8 @@ export interface ViewerSlots {
     canvasesAfter?: ReactNode;
     /** Below the panels of the home page, full width. */
     homeAfter?: ReactNode;
+    /** In the bar of the item selected on a canvas, before the way to zoom to it: sharing that screen, say. */
+    selectionActions?: (canvasId: string, item: CanvasItem) => ReactNode;
     /**
      * On a screen's full-window page, the corner plate with the way out: `note` is a muted line under it
      * (whose content the screen is), `actions` sit next to the way out, and with `badge` the plate folds

package/dist/viewer-lib/types/viewer/src/library.d.ts

@@ -16,6 +16,7 @@ export { Avatar, initials } from './ui/avatar';
 export { Badge, Count, type Tone } from './ui/badge';
 export { Button, ButtonAnchor, type ButtonKind, ButtonLink, type ButtonProps, buttonClass, IconButton, type IconButtonProps, iconButtonClass, } from './ui/button';
 export { Segmented, Switch } from './ui/choice';
+export { Combobox, type ComboboxOption } from './ui/combobox';
 export { CopyButton } from './ui/copy-button';
 export { Dialog } from './ui/dialog';
 export { Icon, type IconName } from './ui/icon';