@protobase/ui 0.12.7 → 0.12.9

package/dist/action-card/action-card.d.ts

@@ -20,7 +20,9 @@ export type ActionCardProps = {
   actions?: CardAction[];
   onAction?: (id: string) => void;
   children?: ReactNode;
+  /** Without the bordered card and the title row, for a page that is already framed; the title still labels the section. */
+  frameless?: boolean;
 };
 /** A card with a toned title row, any content, a note and buttons: the building block of rich chat messages. */
-export declare const ActionCard: ({ title, tone, badge, note, actions, onAction, children }: ActionCardProps) => import("react").JSX.Element;
+export declare const ActionCard: ({ title, tone, badge, note, actions, onAction, children, frameless }: ActionCardProps) => import("react").JSX.Element;
 //#endregion

package/dist/action-card/action-card.js

@@ -27,15 +27,15 @@ const frames = {
 	}
 };
 /** A card with a toned title row, any content, a note and buttons: the building block of rich chat messages. */
-const ActionCard = ({ title, tone = "neutral", badge, note, actions = [], onAction, children }) => {
+const ActionCard = ({ title, tone = "neutral", badge, note, actions = [], onAction, children, frameless = false }) => {
 	const [confirming, setConfirming] = useState();
 	const hints = actions.flatMap((action) => action.hint ? [action.hint] : []);
 	const click = (action) => action.confirm ? setConfirming(action) : onAction?.(action.id);
 	return /* @__PURE__ */ jsxs("section", {
 		"aria-label": title,
-		className: cn("shrink-0 overflow-hidden rounded-lg border bg-background whitespace-normal text-foreground shadow-sm", frames[tone].border),
+		className: frameless ? "whitespace-normal text-foreground" : cn("shrink-0 overflow-hidden rounded-lg border bg-background whitespace-normal text-foreground shadow-sm", frames[tone].border),
 		children: [
-			/* @__PURE__ */ jsxs("header", {
+			!frameless && /* @__PURE__ */ jsxs("header", {
 				className: cn("flex items-center gap-2 px-3 py-2", frames[tone].header),
 				children: [/* @__PURE__ */ jsx("h3", {
 					className: "min-w-0 flex-1 text-[13px] font-semibold",
@@ -46,7 +46,7 @@ const ActionCard = ({ title, tone = "neutral", badge, note, actions = [], onActi
 				})]
 			}),
 			(children || note || actions.length > 0) && /* @__PURE__ */ jsxs("div", {
-				className: "space-y-2.5 px-3 py-2.5",
+				className: cn("space-y-2.5", !frameless && "px-3 py-2.5"),
 				children: [
 					children,
 					note && /* @__PURE__ */ jsx("p", {

package/dist/app/displays/display-controls.js

@@ -20,6 +20,7 @@ const DisplaySwitch = ({ view, value, onChange }) => {
 	if (choices.length < 2) return null;
 	return /* @__PURE__ */ jsx(Segmented, {
 		label: "Display",
+		size: "md",
 		value,
 		onChange,
 		options: choices.map((choice) => ({
@@ -40,7 +41,7 @@ const SortMenu = ({ model, view, display, orderBy, onChange }) => {
 		"aria-label": "Sort",
 		value: `${current.columnId} ${current.direction}`,
 		onChange: (event) => onChange(event.target.value),
-		className: "h-7 rounded-md border border-border-strong bg-background px-2 text-xs shadow-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20",
+		className: "h-8 rounded-md border border-border-strong bg-background px-2.5 text-[13px] shadow-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20",
 		children: names.flatMap((name) => directions.map(([direction, word]) => /* @__PURE__ */ jsxs("option", {
 			value: `${name} ${direction}`,
 			children: [

package/dist/app/list-page.js

@@ -15,6 +15,7 @@ import { pinnedStorageKey } from "../data-grid/pinned-storage.js";
 import { DataGrid } from "../data-grid/data-grid.js";
 import { ActiveFilterChips } from "../filter-panel/active-filter-chips.js";
 import { activeChips, emptyFilterState, removeChip } from "../filter-panel/filter-state.js";
+import { ToolbarRow } from "../filter-panel/toolbar-row.js";
 import { FilterPanel } from "../filter-panel/filter-panel.js";
 import { columnsFromModel } from "../live/columns-from-model.js";
 import { stateToText, textToState } from "../live/filter-string.js";
@@ -124,11 +125,29 @@ const LoadedList = ({ model, address }) => {
 		setFilter(state, text ? [...others, where.search(text)] : others);
 	};
 	const plural = view?.names?.plural ?? humanize(resource);
+	const sortMenu = display && /* @__PURE__ */ jsx(SortMenu, {
+		model,
+		view,
+		display,
+		orderBy,
+		onChange: (next) => set({ orderBy: next })
+	});
+	const searchBox = model.search?.length ? /* @__PURE__ */ jsx(ListSearch, {
+		value: search?.kind === "search" ? search.text : "",
+		onCommit: commitSearch,
+		placeholder: `Search ${plural.toLowerCase()}`
+	}) : null;
 	const panel = /* @__PURE__ */ jsx(FilterPanel, {
 		layout,
 		config,
 		value: state,
-		onChange: setFilter
+		onChange: setFilter,
+		leading: sortMenu,
+		trailing: searchBox
+	});
+	const desktopToolbar = layout === "bar" ? panel : /* @__PURE__ */ jsx(ToolbarRow, {
+		groups: [sortMenu ? [sortMenu] : []],
+		trailing: searchBox
 	});
 	const chips = activeChips(config, state);
 	const phoneFilters = /* @__PURE__ */ jsxs("div", {
@@ -217,18 +236,8 @@ const LoadedList = ({ model, address }) => {
 						value: display?.name ?? tableDisplay,
 						onChange: (name) => set({ display: name })
 					}),
-					display && /* @__PURE__ */ jsx(SortMenu, {
-						model,
-						view,
-						display,
-						orderBy,
-						onChange: (next) => set({ orderBy: next })
-					}),
-					model.search?.length ? /* @__PURE__ */ jsx(ListSearch, {
-						value: search?.kind === "search" ? search.text : "",
-						onCommit: commitSearch,
-						placeholder: `Search ${plural.toLowerCase()}`
-					}) : null,
+					!desktop && sortMenu,
+					!desktop && searchBox,
 					can(permissions, "create") && /* @__PURE__ */ jsxs(Button, {
 						variant: "primary",
 						onClick: () => go({
@@ -258,7 +267,7 @@ const LoadedList = ({ model, address }) => {
 				noun: plural.toLowerCase(),
 				filter: parsed.ok ? filterText : ""
 			}),
-			!desktop ? phoneFilters : layout === "bar" && panel,
+			desktop ? desktopToolbar : phoneFilters,
 			desktop && layout === "panel" ? /* @__PURE__ */ jsxs("div", {
 				className: "flex min-h-0 flex-1 gap-4",
 				children: [panel, shown]

package/dist/app/list-search.js

@@ -17,7 +17,7 @@ const ListSearch = ({ value, onCommit, placeholder }) => {
 		onCommit
 	]);
 	return /* @__PURE__ */ jsx(Input, {
-		wrapperClassName: "min-w-0 flex-1 sm:w-72 sm:flex-none",
+		wrapperClassName: "min-w-0 flex-1 sm:w-72 sm:flex-initial",
 		leading: /* @__PURE__ */ jsx(Search, { className: "size-4" }),
 		placeholder,
 		"aria-label": "Search",

package/dist/filter-panel/filter-panel.js

@@ -6,10 +6,12 @@ import { FilterMenu } from "./filter-menu.js";
 import { FilterSection } from "./filter-section.js";
 import { RangeFilter } from "./range-filter.js";
 import { ToggleRow } from "./toggle-row.js";
+import { ToolbarRow, toolbarShows } from "./toolbar-row.js";
 import { useFilterState } from "./use-filter-state.js";
+import { Fragment } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/filter-panel/filter-panel.tsx
-const FilterPanel = ({ config, layout, value, defaultValue, onChange, lockedLabels, defaultOpenMenu, fullWidth }) => {
+const FilterPanel = ({ config, layout, value, defaultValue, onChange, lockedLabels, defaultOpenMenu, fullWidth, leading, trailing }) => {
 	const [state, setState] = useFilterState(value, defaultValue, onChange);
 	const chips = activeChips(config, state);
 	const chipsView = /* @__PURE__ */ jsx(ActiveFilterChips, {
@@ -76,35 +78,41 @@ const FilterPanel = ({ config, layout, value, defaultValue, onChange, lockedLabe
 			})
 		]
 	});
+	const menus = [
+		...config.facets.map((group) => /* @__PURE__ */ jsx(FilterMenu, {
+			label: group.label,
+			activeCount: (state.facets[group.id] ?? []).length,
+			defaultOpen: defaultOpenMenu === group.id,
+			children: facetView(group)
+		}, group.id)),
+		...config.range ? [/* @__PURE__ */ jsx(FilterMenu, {
+			label: config.range.label,
+			activeCount: state.range ? 1 : 0,
+			width: 280,
+			defaultOpen: defaultOpenMenu === config.range.id,
+			children: rangeView
+		}, "range")] : [],
+		...dateView ? [/* @__PURE__ */ jsx(Fragment, { children: dateView }, "date")] : []
+	];
+	const toggles = (config.toggles ?? []).map((toggle) => /* @__PURE__ */ jsx("div", {
+		className: "flex items-center gap-2 text-[13px] text-muted-foreground",
+		children: /* @__PURE__ */ jsx(ToggleRow, {
+			label: toggle.label,
+			checked: state.toggles.includes(toggle.id),
+			onChange: () => setState(toggleFlag(state, toggle.id))
+		})
+	}, toggle.id));
+	const groups = [
+		leading ? [/* @__PURE__ */ jsx(Fragment, { children: leading }, "leading")] : [],
+		menus,
+		toggles
+	];
+	if (!toolbarShows(groups, trailing) && chips.length === 0 && !lockedLabels?.length) return null;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col gap-2",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex flex-wrap items-center gap-2",
-			children: [
-				config.facets.map((group) => /* @__PURE__ */ jsx(FilterMenu, {
-					label: group.label,
-					activeCount: (state.facets[group.id] ?? []).length,
-					defaultOpen: defaultOpenMenu === group.id,
-					children: facetView(group)
-				}, group.id)),
-				config.range && /* @__PURE__ */ jsx(FilterMenu, {
-					label: config.range.label,
-					activeCount: state.range ? 1 : 0,
-					width: 280,
-					defaultOpen: defaultOpenMenu === config.range.id,
-					children: rangeView
-				}),
-				dateView,
-				config.toggles && /* @__PURE__ */ jsx("span", { className: "mx-1 h-5 w-px bg-border" }),
-				config.toggles?.map((toggle) => /* @__PURE__ */ jsx("div", {
-					className: "flex items-center gap-2 text-[13px] text-muted-foreground",
-					children: /* @__PURE__ */ jsx(ToggleRow, {
-						label: toggle.label,
-						checked: state.toggles.includes(toggle.id),
-						onChange: () => setState(toggleFlag(state, toggle.id))
-					})
-				}, toggle.id))
-			]
+		children: [/* @__PURE__ */ jsx(ToolbarRow, {
+			groups,
+			trailing
 		}), chipsView]
 	});
 };

package/dist/filter-panel/toolbar-row.js

@@ -0,0 +1,22 @@
+import { Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/filter-panel/toolbar-row.tsx
+/** Whether a toolbar row with these groups and trailing control shows anything. */
+const toolbarShows = (groups, trailing) => groups.some((group) => group.length > 0) || Boolean(trailing);
+/**
+* One row of list controls: the non-empty groups in order with a divider between each two, then the trailing control
+* at the right end, narrowing before it wraps. Nothing at all when it would show nothing.
+*/
+const ToolbarRow = ({ groups, trailing }) => {
+	if (!toolbarShows(groups, trailing)) return null;
+	const shown = groups.filter((group) => group.length > 0);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-wrap items-center gap-2",
+		children: [shown.map((group, index) => /* @__PURE__ */ jsxs(Fragment, { children: [index > 0 && /* @__PURE__ */ jsx("span", { className: "mx-1 h-5 w-px bg-border" }), group] }, index)), trailing && /* @__PURE__ */ jsx("div", {
+			className: "flex min-w-32 flex-1 justify-end",
+			children: trailing
+		})]
+	});
+};
+//#endregion
+export { ToolbarRow, toolbarShows };

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.12.7";
+var version = "0.12.9";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };

package/dist/primitives/segmented.js

@@ -1,15 +1,25 @@
 import { cn } from "../lib/cn.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/segmented.tsx
-const Segmented = ({ value, options, onChange, label }) => /* @__PURE__ */ jsx("span", {
+const sizes = {
+	sm: {
+		group: "h-7",
+		option: "px-2.5 text-xs"
+	},
+	md: {
+		group: "h-8",
+		option: "px-3 text-[13px]"
+	}
+};
+const Segmented = ({ value, options, onChange, label, size = "sm" }) => /* @__PURE__ */ jsx("span", {
 	role: "group",
 	"aria-label": label,
-	className: "inline-flex h-7 rounded-md bg-muted p-0.5",
+	className: cn("inline-flex", sizes[size].group, "rounded-md bg-muted p-0.5"),
 	children: options.map((option) => /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		"aria-pressed": option.value === value,
 		onClick: () => onChange(option.value),
-		className: cn("inline-flex items-center gap-1.5 rounded px-2.5 text-xs font-medium transition-colors", option.value === value ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"),
+		className: cn("inline-flex items-center gap-1.5 rounded", sizes[size].option, "font-medium transition-colors", option.value === value ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"),
 		children: [option.icon && /* @__PURE__ */ jsx(option.icon, { className: "size-3.5" }), option.label]
 	}, option.value))
 });