myoperator-mcp 0.2.377 → 0.2.379

package/dist/index.js

@@ -8518,6 +8518,49 @@ function PaginationEllipsis({
 }
 PaginationEllipsis.displayName = "PaginationEllipsis";
 
+export interface PaginationInfoProps extends React.ComponentProps<"p"> {
+  /** Current page (1-based) */
+  currentPage: number;
+  /** Number of items shown per page */
+  pageSize: number;
+  /** Total number of items across all pages */
+  totalItems: number;
+  /** Leading label before the range (default: "Showing") */
+  label?: string;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+function PaginationInfo({
+  currentPage,
+  pageSize,
+  totalItems,
+  label = "Showing",
+  className,
+  ...props
+}: PaginationInfoProps) {
+  const startItem = totalItems === 0 ? 0 : (currentPage - 1) * pageSize + 1;
+  const endItem = Math.min(currentPage * pageSize, totalItems);
+
+  return (
+    <p
+      data-slot="pagination-info"
+      aria-live="polite"
+      className={cn(
+        "m-0 text-sm text-semantic-text-muted whitespace-nowrap",
+        className
+      )}
+      {...props}
+    >
+      {label}{" "}
+      <span className="font-medium text-semantic-text-primary">
+        {startItem}\u2013{endItem} of {totalItems}
+      </span>
+    </p>
+  );
+}
+PaginationInfo.displayName = "PaginationInfo";
+
 export interface PaginationWidgetProps {
   /** Current page (1-based) */
   currentPage: number;
@@ -8527,7 +8570,13 @@ export interface PaginationWidgetProps {
   onPageChange: (page: number) => void;
   /** Number of pages shown on each side of current page (default: 1) */
   siblingCount?: number;
-  /** Additional CSS classes */
+  /** Total number of items \u2014 required to render the "Showing X-Y of Z" summary */
+  totalItems?: number;
+  /** Items per page \u2014 required to render the "Showing X-Y of Z" summary */
+  pageSize?: number;
+  /** Horizontal placement of the page controls (default: "center", or "end" when the summary is shown) */
+  align?: "start" | "center" | "end";
+  /** Additional CSS classes for the outer wrapper */
   className?: string;
 }
 
@@ -8569,17 +8618,35 @@ function usePaginationRange(
   return pages;
 }
 
+const paginationAlignClasses = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+} as const;
+
 function PaginationWidget({
   currentPage,
   totalPages,
   onPageChange,
   siblingCount = 1,
+  totalItems,
+  pageSize,
+  align,
   className,
 }: PaginationWidgetProps) {
   const pages = usePaginationRange(currentPage, totalPages, siblingCount);
+  const showInfo = totalItems !== undefined && pageSize !== undefined;
+  const resolvedAlign = align ?? (showInfo ? "end" : "center");
 
-  return (
-    <Pagination className={className}>
+  const controls = (
+    <Pagination
+      className={cn(
+        "mx-0 w-auto",
+        paginationAlignClasses[resolvedAlign],
+        !showInfo && "w-full",
+        !showInfo && className
+      )}
+    >
       <PaginationContent>
         <PaginationItem>
           <PaginationPrevious
@@ -8624,6 +8691,25 @@ function PaginationWidget({
       </PaginationContent>
     </Pagination>
   );
+
+  if (!showInfo) return controls;
+
+  return (
+    <div
+      data-slot="pagination-widget"
+      className={cn(
+        "flex w-full flex-col items-start gap-3 sm:flex-row sm:items-center sm:justify-between",
+        className
+      )}
+    >
+      <PaginationInfo
+        currentPage={currentPage}
+        pageSize={pageSize}
+        totalItems={totalItems}
+      />
+      {controls}
+    </div>
+  );
 }
 PaginationWidget.displayName = "PaginationWidget";
 
@@ -8635,6 +8721,7 @@ export {
   PaginationPrevious,
   PaginationNext,
   PaginationEllipsis,
+  PaginationInfo,
   PaginationWidget,
 };
 `,
@@ -10466,6 +10553,15 @@ const Select = SelectPrimitive.Root;
 
 const SelectGroup = SelectPrimitive.Group;
 
+/**
+ * Lets \`SelectContent\` set the long-label behaviour once for every
+ * \`SelectItem\` it renders, so callers don't repeat the flag per item.
+ * Items may still override it individually.
+ */
+const SelectItemLayoutContext = React.createContext<{
+  truncateOptionText: boolean;
+}>({ truncateOptionText: false });
+
 const SelectValue = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value>, ref: React.Ref<React.ElementRef<typeof SelectPrimitive.Value>>) => (
   <SelectPrimitive.Value
     ref={ref}
@@ -10583,6 +10679,13 @@ export type SelectContentProps = React.ComponentPropsWithoutRef<
    */
   onViewportScrollEnd?: (event: React.UIEvent<HTMLDivElement>) => void;
   hideScrollButtons?: boolean;
+  /**
+   * Clip long option labels to a single line with an ellipsis instead of
+   * wrapping them. Applies to every \`SelectItem\` inside this content;
+   * individual items can override it with their own \`truncateOptionText\`.
+   * The trigger value always truncates, regardless of this flag.
+   */
+  truncateOptionText?: boolean;
 };
 
 const BOTTOM_THRESHOLD_PX = 24;
@@ -10596,6 +10699,7 @@ const SelectContent = React.forwardRef(
       position = "popper",
       onViewportScrollEnd,
       hideScrollButtons,
+      truncateOptionText = false,
       ...props
     }: SelectContentProps,
     ref: React.Ref<React.ElementRef<typeof SelectPrimitive.Content>>
@@ -10651,6 +10755,11 @@ const SelectContent = React.forwardRef(
       };
     }, [viewport, onViewportScrollEnd]);
 
+    const itemLayout = React.useMemo(
+      () => ({ truncateOptionText }),
+      [truncateOptionText]
+    );
+
     return (
       <SelectPrimitive.Portal>
         <SelectPrimitive.Content
@@ -10679,7 +10788,9 @@ const SelectContent = React.forwardRef(
                 "h-[var(--radix-select-trigger-height)] w-full"
             )}
           >
-            {children}
+            <SelectItemLayoutContext.Provider value={itemLayout}>
+              {children}
+            </SelectItemLayoutContext.Provider>
           </SelectPrimitive.Viewport>
           {!hideScrollButtons && <SelectScrollDownButton />}
         </SelectPrimitive.Content>
@@ -10701,29 +10812,49 @@ const SelectLabel = React.forwardRef(({ className, ...props }: React.ComponentPr
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
-const SelectItem = React.forwardRef(({ className, children, ...props }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>, ref: React.Ref<React.ElementRef<typeof SelectPrimitive.Item>>) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex w-full cursor-pointer select-none items-start rounded-sm py-2 pl-4 pr-8 text-base text-semantic-text-primary outline-none",
-      "hover:bg-semantic-bg-ui focus:bg-semantic-bg-ui",
-      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute right-2 flex size-4 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <Check className="size-4 text-semantic-brand" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-    <span className="min-w-0 flex-1 whitespace-normal break-words leading-normal">
-      <SelectPrimitive.ItemText>
-        {children}
-      </SelectPrimitive.ItemText>
-    </span>
-  </SelectPrimitive.Item>
-));
+export interface SelectItemProps
+  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {
+  /**
+   * Clip this option's label to a single line with an ellipsis instead of
+   * wrapping it. Defaults to the value set on \`SelectContent\` (wrapped).
+   */
+  truncateOptionText?: boolean;
+}
+
+const SelectItem = React.forwardRef(({ className, children, truncateOptionText, ...props }: SelectItemProps, ref: React.Ref<React.ElementRef<typeof SelectPrimitive.Item>>) => {
+  const layout = React.useContext(SelectItemLayoutContext);
+  const truncate = truncateOptionText ?? layout.truncateOptionText;
+
+  return (
+    <SelectPrimitive.Item
+      ref={ref}
+      className={cn(
+        "relative flex w-full cursor-pointer select-none items-start rounded-sm py-2 pl-4 pr-8 text-base text-semantic-text-primary outline-none",
+        "hover:bg-semantic-bg-ui focus:bg-semantic-bg-ui",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-4 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <Check className="size-4 text-semantic-brand" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <span
+        title={truncate && typeof children === "string" ? children : undefined}
+        className={cn(
+          "min-w-0 flex-1 leading-normal",
+          truncate ? "truncate" : "whitespace-normal break-words"
+        )}
+      >
+        <SelectPrimitive.ItemText>
+          {children}
+        </SelectPrimitive.ItemText>
+      </span>
+    </SelectPrimitive.Item>
+  );
+});
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 
 const SelectSeparator = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>, ref: React.Ref<React.ElementRef<typeof SelectPrimitive.Separator>>) => (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myoperator-mcp",
-  "version": "0.2.377",
+  "version": "0.2.379",
   "description": "MCP server for myOperator UI components - enables AI assistants to access component metadata, examples, and design tokens",
   "type": "module",
   "bin": "./dist/index.js",