@botiverse/raft-ui 0.67.0 → 0.68.0

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## [0.68.0](https://github.com/botiverse/raft-design/compare/v0.67.0...v0.68.0) (2026-11-06)
+
+### Changed
+
+- **MobileNavServerPopoverDestinations** (`@botiverse/raft-ui/wip`): more than 4 destinations take 3 columns, rows of 3 with the last row from the left (`data-layout="grid"`); each button keeps its height, icon, label size and hit area. 4 or fewer stay in one row (`data-layout="row"`). The count is of the element children, looking inside fragments. ([#1037](https://github.com/botiverse/raft-design/pull/1037))
+  - Why: a server tab that holds Artifacts, Members, Computers, Apps and Settings put five in a row, which truncated labels such as "Computadoras" at 360px; a third of the popover keeps them whole in every language.
+  - Affects: a server tab popover with more than 4 destinations; up to 4 are unchanged.
+  - Docs: https://raft-design.botiverse.build/components/mobile-nav/#the-server-tab
+
 ## [0.67.0](https://github.com/botiverse/raft-design/compare/v0.66.0...v0.67.0) (2026-11-06)
 
 ### Added

package/dist/components/mobile-nav/mobile-nav-server.d.mts

@@ -47,8 +47,17 @@ export type MobileNavServerPopoverRowLabelProps = ComponentPropsWithRef<"span">;
 /** A row's label: takes the room and truncates. */
 export declare function MobileNavServerPopoverRowLabel({ className, ...props }: MobileNavServerPopoverRowLabelProps): import("react").JSX.Element;
 export type MobileNavServerPopoverDestinationsProps = ComponentPropsWithRef<"div">;
-/** The server's own pages, side by side in equal cells; a `group`, named with `aria-label`. */
-export declare function MobileNavServerPopoverDestinations({ className, ...props }: MobileNavServerPopoverDestinationsProps): import("react").JSX.Element;
+/**
+ * The server's own pages in equal cells; a `group`, named with `aria-label`.
+ * Up to 4 sit side by side in one row (`data-layout="row"`). More than 4
+ * take 3 columns, rows of 3 with the last row starting at the left
+ * (`data-layout="grid"`), so each label keeps a third of the popover and
+ * stays whole in every language. The count is of the element children, taken
+ * in React, looking inside fragments (a product puts the pages a guest lacks
+ * in one): counting them in CSS would take a structural pseudo-class on the
+ * children, which the WebKit selector rules in CLAUDE.md forbid.
+ */
+export declare function MobileNavServerPopoverDestinations({ className, children, ...props }: MobileNavServerPopoverDestinationsProps): import("react").JSX.Element;
 export type MobileNavServerPopoverDestinationProps = ComponentPropsWithRef<"button">;
 /**
  * One of the server's pages: a 20px icon over a short label in a `span`, which

package/dist/components/mobile-nav/mobile-nav-server.mjs

@@ -2,7 +2,7 @@ import { tv } from "../../lib/tv.mjs";
 import { MobileNavItem } from "./mobile-nav.mjs";
 import "../../lib/touch-drag.mjs";
 import { PopoverContent } from "../popover/popover.mjs";
-import { createContext, use, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Children, Fragment, createContext, isValidElement, use, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Popover } from "@base-ui/react/popover";
 //#region src/components/mobile-nav/mobile-nav-server.tsx
@@ -33,7 +33,7 @@ const mobileNavServer = tv({ slots: {
 	rowLabel: ["min-w-0 flex-1 truncate"],
 	rowBody: ["flex min-w-0 flex-1 flex-col"],
 	rowDescription: ["min-w-0 truncate", "font-mono text-mono-meta font-normal text-foreground-hint"],
-	destinations: ["grid shrink-0 grid-flow-col auto-cols-fr gap-1 p-1"],
+	destinations: ["grid shrink-0 grid-flow-col auto-cols-fr gap-1 p-1", "data-[layout=grid]:grid-flow-row data-[layout=grid]:grid-cols-3"],
 	destination: [
 		"relative flex min-w-0 cursor-default select-none flex-col items-center justify-center",
 		"outline-none transition-colors",
@@ -231,14 +231,28 @@ function MobileNavServerPopoverRowLabel({ className, ...props }) {
 		...props
 	});
 }
-/** The server's own pages, side by side in equal cells; a `group`, named with `aria-label`. */
-function MobileNavServerPopoverDestinations({ className, ...props }) {
+/** Past this many pages, the row becomes a grid of 3 columns. */
+const DESTINATIONS_IN_ONE_ROW = 4;
+/**
+* The server's own pages in equal cells; a `group`, named with `aria-label`.
+* Up to 4 sit side by side in one row (`data-layout="row"`). More than 4
+* take 3 columns, rows of 3 with the last row starting at the left
+* (`data-layout="grid"`), so each label keeps a third of the popover and
+* stays whole in every language. The count is of the element children, taken
+* in React, looking inside fragments (a product puts the pages a guest lacks
+* in one): counting them in CSS would take a structural pseudo-class on the
+* children, which the WebKit selector rules in CLAUDE.md forbid.
+*/
+function MobileNavServerPopoverDestinations({ className, children, ...props }) {
 	const { destinations } = mobileNavServer();
+	const count = countElements(children);
 	return /* @__PURE__ */ jsx("div", {
 		role: "group",
 		"data-slot": "mobile-nav-server-popover-destinations",
+		"data-layout": count > DESTINATIONS_IN_ONE_ROW ? "grid" : "row",
 		className: destinations({ className }),
-		...props
+		...props,
+		children
 	});
 }
 /**
@@ -279,6 +293,15 @@ function MobileNavServerPopoverRowDescription({ className, ...props }) {
 		...props
 	});
 }
+/** The element children, counting a fragment's elements rather than the fragment. */
+function countElements(children) {
+	let count = 0;
+	for (const child of Children.toArray(children)) {
+		if (!isValidElement(child)) continue;
+		count += child.type === Fragment ? countElements(child.props.children) : 1;
+	}
+	return count;
+}
 function assignRef(ref, value) {
 	if (typeof ref === "function") ref(value);
 	else if (ref) ref.current = value;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botiverse/raft-ui",
-  "version": "0.67.0",
+  "version": "0.68.0",
   "description": "React components and CSS foundations for the Raft Design System.",
   "keywords": [
     "agent-skills",