@godxjp/ui 18.15.4 → 19.0.0

package/dist/components/layout/resizable.d.ts

@@ -1,14 +1,14 @@
 import * as React from "react";
 import * as ResizablePrimitive from "react-resizable-panels";
-export declare const ResizablePanelGroup: {
-    ({ className, ...props }: React.ComponentPropsWithoutRef<typeof ResizablePrimitive.Group>): React.JSX.Element;
-    displayName: string;
-};
-export declare const ResizablePanel: {
-    ({ className, elementRef, ...props }: React.ComponentPropsWithoutRef<typeof ResizablePrimitive.Panel>): React.JSX.Element;
-    displayName: string;
-};
-export declare const ResizableHandle: {
-    ({ className, ...props }: React.ComponentPropsWithoutRef<typeof ResizablePrimitive.Separator>): React.JSX.Element;
-    displayName: string;
-};
+export declare function ResizablePanelGroup({ className, ...props }: React.ComponentPropsWithoutRef<typeof ResizablePrimitive.Group>): React.JSX.Element;
+export declare namespace ResizablePanelGroup {
+    var displayName: string;
+}
+export declare function ResizablePanel({ className, elementRef, ...props }: React.ComponentPropsWithoutRef<typeof ResizablePrimitive.Panel>): React.JSX.Element;
+export declare namespace ResizablePanel {
+    var displayName: string;
+}
+export declare function ResizableHandle({ className, ...props }: React.ComponentPropsWithoutRef<typeof ResizablePrimitive.Separator>): React.JSX.Element;
+export declare namespace ResizableHandle {
+    var displayName: string;
+}

package/dist/components/layout/separator.d.ts

@@ -1 +1,2 @@
 export { Separator } from "../ui/separator.js";
+export type { SeparatorProp, SeparatorProps } from "../ui/separator.js";

package/dist/components/layout/service-role-panel.js

@@ -132,49 +132,54 @@ const ServiceRolePanel = React.forwardRef(
             masterLabel: masterLabel ?? t("layout.serviceRolePanel.rolesLabel"),
             detailLabel: detailLabel ?? t("layout.serviceRolePanel.detailLabel"),
             detailId,
-            master: /* @__PURE__ */ jsx("ul", { className: "flex list-none flex-col gap-1", "data-slot": "service-role-panel-list", children: roles.map((role) => {
+            master: /* @__PURE__ */ jsx("ul", { className: "ui-service-role-panel-list", "data-slot": "service-role-panel-list", children: roles.map((role) => {
               const selected = role.id === value;
-              return /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1", children: [
-                /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    variant: selected ? "secondary" : "ghost",
-                    className: "h-auto flex-1 justify-start py-2 text-start",
-                    "aria-current": selected ? "true" : void 0,
-                    "aria-controls": detailId,
-                    onClick: () => select(role.id),
-                    children: /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col items-start leading-tight", children: [
-                      /* @__PURE__ */ jsxs("span", { className: "inline-flex max-w-full items-center gap-1.5", children: [
-                        /* @__PURE__ */ jsx(Text, { weight: "medium", className: "truncate", children: role.name }),
-                        role.locked && /* @__PURE__ */ jsxs(Badge, { tone: "default", variant: "outline", children: [
-                          /* @__PURE__ */ jsx(Lock, { "aria-hidden": "true" }),
-                          t("layout.serviceRolePanel.locked")
-                        ] })
-                      ] }),
-                      (role.description !== void 0 || role.memberCount !== void 0) && /* @__PURE__ */ jsx(Text, { size: "2xs", tone: "muted", className: "max-w-full truncate", children: [
-                        role.description,
-                        role.memberCount !== void 0 ? (
-                          // `{count}` is Intl.NumberFormat-grouped by `interpolate`,
-                          // pluralized by CLDR category — no hand-built formatting.
-                          t("layout.serviceRolePanel.memberCount", {
-                            count: role.memberCount
-                          })
-                        ) : void 0
-                      ].filter((part) => part !== void 0).join(" \xB7 ") })
-                    ] })
-                  }
-                ),
-                deletable && !role.locked && /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    variant: "ghost",
-                    size: "icon-sm",
-                    "aria-label": t("layout.serviceRolePanel.deleteRole", { role: role.name }),
-                    onClick: () => setPendingDelete(role),
-                    children: /* @__PURE__ */ jsx(Trash2, { "aria-hidden": "true" })
-                  }
-                )
-              ] }, role.id);
+              return (
+                // NOT `.ui-inline-xs`: that helper adds `flex-wrap: wrap`, and this row holds a
+                // flex-1 select button next to an icon-only delete button that must never wrap
+                // onto its own line.
+                /* @__PURE__ */ jsxs("li", { className: "ui-service-role-panel-row", children: [
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: selected ? "secondary" : "ghost",
+                      className: "ui-service-role-panel-item h-auto flex-1 justify-start text-start",
+                      "aria-current": selected ? "true" : void 0,
+                      "aria-controls": detailId,
+                      onClick: () => select(role.id),
+                      children: /* @__PURE__ */ jsxs("span", { className: "ui-service-role-panel-item-body", children: [
+                        /* @__PURE__ */ jsxs("span", { className: "ui-service-role-panel-item-title", children: [
+                          /* @__PURE__ */ jsx(Text, { weight: "medium", className: "truncate", children: role.name }),
+                          role.locked && /* @__PURE__ */ jsxs(Badge, { tone: "default", variant: "outline", children: [
+                            /* @__PURE__ */ jsx(Lock, { "aria-hidden": "true" }),
+                            t("layout.serviceRolePanel.locked")
+                          ] })
+                        ] }),
+                        (role.description !== void 0 || role.memberCount !== void 0) && /* @__PURE__ */ jsx(Text, { size: "2xs", tone: "muted", className: "max-w-full truncate", children: [
+                          role.description,
+                          role.memberCount !== void 0 ? (
+                            // `{count}` is Intl.NumberFormat-grouped by `interpolate`,
+                            // pluralized by CLDR category — no hand-built formatting.
+                            t("layout.serviceRolePanel.memberCount", {
+                              count: role.memberCount
+                            })
+                          ) : void 0
+                        ].filter((part) => part !== void 0).join(" \xB7 ") })
+                      ] })
+                    }
+                  ),
+                  deletable && !role.locked && /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "icon-sm",
+                      "aria-label": t("layout.serviceRolePanel.deleteRole", { role: role.name }),
+                      onClick: () => setPendingDelete(role),
+                      children: /* @__PURE__ */ jsx(Trash2, { "aria-hidden": "true" })
+                    }
+                  )
+                ] }, role.id)
+              );
             }) }),
             children: detail
           }

package/dist/components/layout/sidebar.js

@@ -36,7 +36,19 @@ function SidebarRowContent({
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     !sub ? /* @__PURE__ */ jsx(SidebarIcon, { icon: item.icon }) : null,
     /* @__PURE__ */ jsx("span", { className: "sb-label", children: item.label }),
-    showBadge ? /* @__PURE__ */ jsx("span", { className: "sb-badge", children: item.badge }) : null
+    showBadge ? (
+      // `data-tone` is emitted ONLY for the emphasis tone (rule #44: present-when-on,
+      // absent-when-off), so a rail that never sets `badgeTone` renders the exact same node it
+      // always did and no consumer selector has to out-specify a marker meaning "unchanged".
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "sb-badge",
+          "data-tone": item.badgeTone === "destructive" ? "destructive" : void 0,
+          children: item.badge
+        }
+      )
+    ) : null
   ] });
 }
 function SidebarItem({

package/dist/components/layout/split-pane.d.ts

@@ -1,7 +1,18 @@
 import type { ReactNode } from "react";
 export type SplitPaneProps = {
     children: ReactNode;
-    aside: ReactNode;
+    /**
+     * Aside (trailing) panel content. Pass `null` to CLOSE the rail: no `<aside>` element is
+     * rendered, the grid drops to one full-width column and the gap goes with it.
+     *
+     * Closing this way — rather than dropping the whole `SplitPane` at the call site — is what
+     * keeps `children` MOUNTED. The three wrappers below are rendered unconditionally, so the
+     * main column sits at the same depth and the same slot in the React tree in both states and
+     * React reuses its DOM node instead of remounting it. A collapsible thread/detail panel that
+     * swapped `<SplitPane>{page}</SplitPane>` for a bare `{page}` changed the tree depth, which
+     * remounted the page and threw the reader to the bottom of a scrolled list.
+     */
+    aside: ReactNode | null;
     /**
      * How wide the rail is once the pane is wide enough to split: `sm` 20rem,
      * `md` 22rem, `lg` 30rem. `lg` is for rails that carry a panel rather than a

package/dist/components/layout/split-pane.js

@@ -1,9 +1,18 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 function SplitPane({ children, aside, asideWidth = "md", asideLabel }) {
-  return /* @__PURE__ */ jsx("div", { className: "ui-split-pane-scope", children: /* @__PURE__ */ jsxs("div", { className: "ui-split-pane", "data-aside-width": asideWidth, children: [
-    /* @__PURE__ */ jsx("div", { className: "ui-split-pane-main", children }),
-    /* @__PURE__ */ jsx("aside", { className: "ui-split-pane-aside", "aria-label": asideLabel, children: aside })
-  ] }) });
+  const closed = aside === null || aside === void 0;
+  return /* @__PURE__ */ jsx("div", { className: "ui-split-pane-scope", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "ui-split-pane",
+      "data-aside-width": asideWidth,
+      "data-aside": closed ? "closed" : void 0,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "ui-split-pane-main", children }),
+        closed ? null : /* @__PURE__ */ jsx("aside", { className: "ui-split-pane-aside", "aria-label": asideLabel, children: aside })
+      ]
+    }
+  ) });
 }
 export {
   SplitPane

package/dist/components/navigation/app-setting-picker.js

@@ -41,16 +41,6 @@ const ICON = {
   density: Rows3,
   fontSize: Type
 };
-const TRIGGER_WIDTH = {
-  locale: "sm:w-40",
-  timezone: "sm:w-56",
-  dateFormat: "sm:w-44",
-  timeFormat: "sm:w-44",
-  theme: "sm:w-36",
-  brand: "sm:w-44",
-  density: "sm:w-40",
-  fontSize: "sm:w-36"
-};
 const ARIA_KEY = {
   locale: "navigation.localePicker.ariaLabel",
   timezone: "navigation.timezonePicker.ariaLabel",
@@ -139,7 +129,7 @@ const AppSettingPicker = React.forwardRef(
               id,
               showIndicator: !iconOnly && !inline,
               className: cn(
-                inline ? "ui-app-setting-picker-inline h-auto min-h-0 w-auto rounded-none border-0 bg-transparent p-0 shadow-none" : iconOnly ? (
+                inline ? "ui-app-setting-picker-inline" : iconOnly ? (
                   // Structurally icon-only: drop the owned width + value spacing and square the box to
                   // the density-aware --control-height tap target, centring the icon. Visually it
                   // sits among ghost icon buttons (the topbar's sidebar-toggle/notifications/account
@@ -149,7 +139,7 @@ const AppSettingPicker = React.forwardRef(
                   // (`data-[state=open]:border-ring`, from controlTriggerClass) and the
                   // focus-visible ring are untouched, so keyboard and "is this open" affordance
                   // still hold.
-                  "ui-app-setting-picker-icon hover:bg-accent hover:text-accent-foreground w-[length:var(--control-height)] justify-center border-transparent bg-transparent ps-0 pe-0 shadow-none"
+                  "ui-app-setting-picker-icon hover:bg-accent hover:text-accent-foreground"
                 ) : (
                   // Labeled: sized to a per-kind width from `sm` up; below `sm` it hugs its content and
                   // caps at the container (`w-auto max-w-full`) instead of the old UNCONDITIONAL
@@ -157,7 +147,7 @@ const AppSettingPicker = React.forwardRef(
                   // fill the bar (gh#165). A form field that wants a full-width control passes
                   // `className="w-full"`, which wins over `w-auto`.
                   // `compact` drops the per-kind width entirely so the trigger hugs its value.
-                  cn("w-auto max-w-full", !isCompact && TRIGGER_WIDTH[kind])
+                  cn("w-auto max-w-full", !isCompact && "ui-app-setting-picker-trigger")
                 ),
                 // Compact re-tiers the box through tokens (--app-setting-picker-compact-*); the height
                 // still comes from the official --control-height-sm tier, never a literal. The gap is a
@@ -165,13 +155,14 @@ const AppSettingPicker = React.forwardRef(
                 isCompact && "ui-app-setting-picker-compact gap-[length:var(--app-setting-picker-compact-gap)]",
                 className
               ),
+              "data-kind": kind,
               "aria-label": t(ARIA_KEY[kind]),
               children: [
                 inline ? null : /* @__PURE__ */ jsx(
                   Icon,
                   {
                     className: cn(
-                      "size-4 shrink-0 opacity-70",
+                      "ui-app-setting-picker-glyph",
                       // Compact relies on the trigger's tokenized flex gap instead of an icon margin.
                       !iconOnly && !isCompact && "me-2"
                     ),

package/dist/components/navigation/dropdown-menu.js

@@ -29,7 +29,7 @@ const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...pr
     "data-slot": "dropdown-menu-content",
     sideOffset,
     className: cn(
-      "bg-popover text-popover-foreground data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-32 origin-[var(--radix-dropdown-menu-content-transform-origin)] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+      "ui-dropdown-menu-content data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 origin-[var(--radix-dropdown-menu-content-transform-origin)]",
       className
     ),
     ...props
@@ -44,7 +44,7 @@ const DropdownMenuItem = React.forwardRef(({ className, inset, variant = "defaul
     "data-inset": inset,
     "data-variant": variant,
     className: cn(
-      "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset=true]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+      "ui-dropdown-menu-item [&_svg:not([class*='text-'])]:text-muted-foreground",
       className
     ),
     ...props
@@ -57,7 +57,7 @@ const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref)
     ref,
     "data-slot": "dropdown-menu-label",
     "data-inset": inset,
-    className: cn("px-2 py-1.5 text-sm font-medium data-[inset=true]:ps-8", className),
+    className: cn("ui-dropdown-menu-label", className),
     ...props
   }
 ));
@@ -67,7 +67,7 @@ const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) =>
   {
     ref,
     "data-slot": "dropdown-menu-separator",
-    className: cn("bg-border -mx-1 my-1 h-px", className),
+    className: cn("ui-dropdown-menu-separator", className),
     ...props
   }
 ));
@@ -77,14 +77,11 @@ const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checke
   {
     ref,
     "data-slot": "dropdown-menu-checkbox-item",
-    className: cn(
-      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 ps-8 pe-2 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-      className
-    ),
+    className: cn("ui-dropdown-menu-checkbox-item", className),
     checked,
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute start-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "size-4", "aria-hidden": "true" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "ui-dropdown-menu-indicator-slot", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "ui-dropdown-menu-check", "aria-hidden": "true" }) }) }),
       children
     ]
   }
@@ -95,10 +92,7 @@ const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props
   {
     ref,
     "data-slot": "dropdown-menu-radio-item",
-    className: cn(
-      "focus:bg-accent focus:text-accent-foreground data-[state=checked]:bg-primary/10 data-[state=checked]:text-primary relative flex cursor-default items-center gap-2 rounded-sm px-2.5 py-1.5 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[state=checked]:font-medium [&_svg]:pointer-events-none [&_svg]:shrink-0",
-      className
-    ),
+    className: cn("ui-dropdown-menu-radio-item", className),
     ...props,
     children
   }
@@ -111,13 +105,13 @@ const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, .
     "data-slot": "dropdown-menu-sub-trigger",
     "data-inset": inset,
     className: cn(
-      "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none select-none data-[inset=true]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+      "ui-dropdown-menu-sub-trigger [&_svg:not([class*='text-'])]:text-muted-foreground",
       className
     ),
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx(ChevronRight, { className: "ms-auto size-4", "aria-hidden": "true" })
+      /* @__PURE__ */ jsx(ChevronRight, { className: "ui-dropdown-menu-sub-trigger-icon", "aria-hidden": "true" })
     ]
   }
 ));
@@ -128,7 +122,7 @@ const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) =
     ref,
     "data-slot": "dropdown-menu-sub-content",
     className: cn(
-      "bg-popover text-popover-foreground data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 z-50 min-w-32 origin-[var(--radix-dropdown-menu-content-transform-origin)] overflow-hidden rounded-md border p-1 shadow-lg",
+      "ui-dropdown-menu-sub-content data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 origin-[var(--radix-dropdown-menu-content-transform-origin)]",
       className
     ),
     ...props

package/dist/components/navigation/menubar.d.ts

@@ -1,12 +1,9 @@
 import * as React from "react";
 import * as MenubarPrimitive from "@radix-ui/react-menubar";
 export declare const Menubar: React.ForwardRefExoticComponent<MenubarPrimitive.MenubarProps & React.RefAttributes<HTMLDivElement>>;
-export declare const MenubarMenu: {
-    (props: MenubarPrimitive.MenubarMenuProps & {
-        __scopeMenubar?: import("@radix-ui/react-context").Scope;
-    }): React.JSX.Element;
-    displayName: string;
-};
+export declare const MenubarMenu: (props: MenubarPrimitive.MenubarMenuProps & {
+    __scopeMenubar?: import("@radix-ui/react-context").Scope;
+}) => React.JSX.Element;
 export declare function MenubarTrigger(props: React.ComponentProps<typeof MenubarPrimitive.Trigger>): React.JSX.Element;
 export declare const MenubarContent: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const MenubarItem: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {

package/dist/components/navigation/pagination-utils.d.ts

@@ -1,2 +1,15 @@
-/** Build visible page numbers with ellipsis — Ant Design pagination style. */
-export declare function buildPageRange(current: number, totalPages: number, siblingCount?: number): (number | "ellipsis")[];
+/**
+ * Build visible page numbers with ellipsis — Ant Design / MUI pagination style.
+ *
+ * The item count is CONSTANT wherever the current page sits. The earlier version
+ * derived the window straight from `current ± siblingCount` and let it collapse
+ * against the edges, so a 1,060-page list opened as `1 2 … 1060` — four controls
+ * with a wide empty gap, and both a bad target size and a bad sense of scale
+ * (reported 2026-08-24). Ant Design and MUI both solve this by CLAMPING the
+ * window instead of shrinking it: near an edge the window slides inward so the
+ * strip keeps its full width. Same list now opens as `1 2 3 4 5 … 1060`.
+ *
+ * Slots = `boundaryCount * 2` edges + `siblingCount * 2 + 1` around current + 2
+ * ellipsis positions. With the defaults that is 7 controls.
+ */
+export declare function buildPageRange(current: number, totalPages: number, siblingCount?: number, boundaryCount?: number): (number | "ellipsis")[];

package/dist/components/navigation/pagination-utils.js

@@ -1,24 +1,30 @@
-function buildPageRange(current, totalPages, siblingCount = 1) {
-  if (totalPages <= 1) return totalPages === 1 ? [1] : [];
-  const totalNumbers = siblingCount * 2 + 5;
-  if (totalPages <= totalNumbers) {
-    return Array.from({ length: totalPages }, (_, i) => i + 1);
-  }
-  const left = Math.max(current - siblingCount, 1);
-  const right = Math.min(current + siblingCount, totalPages);
-  const showLeftEllipsis = left > 2;
-  const showRightEllipsis = right < totalPages - 1;
-  const range = [];
-  range.push(1);
-  if (showLeftEllipsis) range.push("ellipsis");
-  else for (let i = 2; i < left; i++) range.push(i);
-  for (let i = left; i <= right; i++) {
-    if (i !== 1 && i !== totalPages) range.push(i);
-  }
-  if (showRightEllipsis) range.push("ellipsis");
-  else for (let i = right + 1; i < totalPages; i++) range.push(i);
-  if (totalPages > 1) range.push(totalPages);
-  return range;
+function range(start, end) {
+  return end < start ? [] : Array.from({ length: end - start + 1 }, (_, i) => start + i);
+}
+function buildPageRange(current, totalPages, siblingCount = 1, boundaryCount = 1) {
+  if (totalPages <= 0) return [];
+  if (totalPages === 1) return [1];
+  const totalNumbers = boundaryCount * 2 + siblingCount * 2 + 3;
+  if (totalPages <= totalNumbers) return range(1, totalPages);
+  const startPages = range(1, Math.min(boundaryCount, totalPages));
+  const endPages = range(Math.max(totalPages - boundaryCount + 1, boundaryCount + 1), totalPages);
+  const siblingsStart = Math.max(
+    Math.min(current - siblingCount, totalPages - boundaryCount - siblingCount * 2 - 1),
+    boundaryCount + 2
+  );
+  const siblingsEnd = Math.min(
+    Math.max(current + siblingCount, boundaryCount + siblingCount * 2 + 2),
+    endPages.length > 0 ? endPages[0] - 2 : totalPages - 1
+  );
+  return [
+    ...startPages,
+    // An ellipsis that would hide exactly ONE page is pointless — spell that page out
+    // instead (Ant/MUI do the same), which is also what keeps the count constant.
+    ...siblingsStart > boundaryCount + 2 ? ["ellipsis"] : boundaryCount + 1 < totalPages - boundaryCount ? [boundaryCount + 1] : [],
+    ...range(siblingsStart, siblingsEnd),
+    ...siblingsEnd < totalPages - boundaryCount - 1 ? ["ellipsis"] : totalPages - boundaryCount > boundaryCount ? [totalPages - boundaryCount] : [],
+    ...endPages
+  ];
 }
 export {
   buildPageRange

package/dist/components/navigation/pagination.d.ts

@@ -8,10 +8,10 @@ declare const PaginationLink: React.ForwardRefExoticComponent<Omit<Omit<React.De
     disabled?: boolean;
     href?: string;
 } & React.RefAttributes<HTMLButtonElement>>;
-declare const PaginationEllipsis: {
-    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
-    displayName: string;
-};
+declare function PaginationEllipsis({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
+declare namespace PaginationEllipsis {
+    var displayName: string;
+}
 declare const PaginationPrevious: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "type"> & {
     isActive?: boolean;
     disabled?: boolean;

package/dist/components/navigation/pagination.js

@@ -142,7 +142,7 @@ function Pagination({
           disabled: Boolean(disabled) || safeCurrent <= 1,
           "aria-label": t("navigation.pagination.prev"),
           onClick: () => go(safeCurrent - 1),
-          children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4", "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true" })
         }
       ),
       /* @__PURE__ */ jsxs("span", { className: "ui-pagination-count", children: [
@@ -159,7 +159,7 @@ function Pagination({
           disabled: Boolean(disabled) || safeCurrent >= totalPages,
           "aria-label": t("navigation.pagination.next"),
           onClick: () => go(safeCurrent + 1),
-          children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4", "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" })
         }
       )
     ] });