@djangocfg/ui-core 2.1.430 → 2.1.431

package/README.md

@@ -44,7 +44,7 @@ import { UiProviders, Button, Card } from '@djangocfg/ui-core';
 </UiProviders>
 ```
 
-`<UiProviders>` mounts Tooltip / Dialog / Toast / Theme provider in the right order. **Mount it once at the root** — library components (and everything in `@djangocfg/ui-tools`) trust it to be there and never nest their own (a second `TooltipProvider` is the canonical "Tooltip must be used within TooltipProvider" trap).
+`<UiProviders>` mounts Tooltip / Dialog / Toast in the right order **and a top-level error `Boundary`** (a crash shows a recoverable fallback, not a white screen). **Mount it once at the root** — library components (and everything in `@djangocfg/ui-tools`) trust it to be there and never nest their own (a second `TooltipProvider` is the canonical "Tooltip must be used within TooltipProvider" trap). Pass `onError` to forward crashes to your logger, `errorFallback` for a custom (e.g. i18n) crash screen, or `errorBoundary={false}` to opt out.
 
 ## Catalogue
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.430",
+  "version": "2.1.431",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -106,7 +106,7 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.430",
+    "@djangocfg/i18n": "^2.1.431",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -180,8 +180,8 @@
     "@chenglou/pretext": "*"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.430",
-    "@djangocfg/typescript-config": "^2.1.430",
+    "@djangocfg/i18n": "^2.1.431",
+    "@djangocfg/typescript-config": "^2.1.431",
     "@types/node": "^25.2.3",
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",

package/src/components/forms/popover-action-button/index.tsx

@@ -0,0 +1,47 @@
+"use client"
+
+import * as React from 'react';
+
+import { cn } from '../../../lib/utils';
+
+/**
+ * PopoverActionButton — the full-width icon+label list/footer row, macOS style:
+ *
+ *   [ icon ] label…
+ *
+ * The canonical "jump to settings" / footer-link control inside popovers and
+ * menus (e.g. "Connection settings…", "Manage providers…"). Replaces the
+ * hand-rolled `<button className="flex w-full items-center gap-2 rounded px-2
+ * py-1.5 …">` that was copied across popover footers.
+ *
+ * Plain `<button>` underneath — extend it with any native button prop. The
+ * incoming `className` is merged last, so callers can still add layout tweaks
+ * (`mt-1`, etc.) without re-stating the base styling.
+ */
+export interface PopoverActionButtonProps
+  extends React.ComponentProps<"button"> {
+  /** Icon rendered before the label, in a fixed `h-3.5 w-3.5` slot. */
+  icon?: React.ReactNode;
+}
+
+const PopoverActionButton = React.forwardRef<HTMLButtonElement, PopoverActionButtonProps>(
+  ({ className, icon, type = "button", children, ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        type={type}
+        className={cn(
+          "flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs text-muted-foreground hover:bg-muted hover:text-foreground",
+          className,
+        )}
+        {...props}
+      >
+        {icon != null && <span className="h-3.5 w-3.5 shrink-0">{icon}</span>}
+        {children}
+      </button>
+    );
+  },
+);
+PopoverActionButton.displayName = "PopoverActionButton";
+
+export { PopoverActionButton };

package/src/components/index.ts

@@ -27,6 +27,8 @@ export type { SmartOTPProps as OTPInputProps, OTPValidationMode, OTPPasteBehavio
 export { ButtonGroup as ButtonGroupComponent } from './forms/button-group';
 export { DownloadButton } from './forms/button-download';
 export type { DownloadButtonProps } from './forms/button-download';
+export { PopoverActionButton } from './forms/popover-action-button';
+export type { PopoverActionButtonProps } from './forms/popover-action-button';
 
 // Mask Input
 export { MaskInput } from './forms/mask-input';
@@ -79,6 +81,8 @@ export { navigationMenuTriggerStyle, NavigationMenu, NavigationMenuList, Navigat
 export { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarSeparator, MenubarLabel, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarPortal, MenubarSubContent, MenubarSubTrigger, MenubarGroup, MenubarSub, MenubarShortcut } from './navigation/menubar';
 export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup } from './navigation/dropdown-menu';
 export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from './navigation/context-menu';
+export { PopoverRowButton } from './navigation/popover-row-button';
+export type { PopoverRowButtonProps } from './navigation/popover-row-button';
 export { MenuBuilder } from './navigation/menu';
 export type { MenuItem, MenuActionItem, MenuSubmenuItem, MenuCheckboxItem, MenuRadioGroup, MenuRadioOption, MenuSeparator, MenuLabel, MenuSection, MenuCustom, MenuRowBase, MenuBuilderProps } from './navigation/menu';
 export { Tabs, TabsContent, TabsList, TabsTrigger } from './navigation/tabs';

package/src/components/navigation/popover-row-button/index.tsx

@@ -0,0 +1,54 @@
+"use client"
+
+import { Check } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '../../../lib/utils';
+
+/**
+ * PopoverRowButton — a selectable list-row button, macOS picker style:
+ *
+ *   [ ✓ ] label…
+ *
+ * The canonical row for model / machine / provider pickers: full-width, left
+ * aligned, with a trailing-leading check that fades in on `selected`. Replaces
+ * the hand-rolled `<button className={cn("flex w-full items-center gap-2 px-3
+ * py-1.5 …", active && "bg-muted/60")}>` copied across pickers.
+ *
+ * Plain `<button>` underneath — extend it with any native button prop. The
+ * incoming `className` is merged last so callers can compose freely.
+ */
+export interface PopoverRowButtonProps
+  extends React.ComponentProps<"button"> {
+  /** Marks the row active — fills the background and shows the check. */
+  selected?: boolean;
+}
+
+const PopoverRowButton = React.forwardRef<HTMLButtonElement, PopoverRowButtonProps>(
+  ({ className, selected = false, type = "button", children, ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        type={type}
+        className={cn(
+          "flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs",
+          "hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40",
+          selected && "bg-muted/60",
+          className,
+        )}
+        {...props}
+      >
+        <Check
+          className={cn(
+            "h-3.5 w-3.5 shrink-0 text-primary",
+            selected ? "opacity-100" : "opacity-0",
+          )}
+        />
+        {children}
+      </button>
+    );
+  },
+);
+PopoverRowButton.displayName = "PopoverRowButton";
+
+export { PopoverRowButton };

package/src/components/select/select.tsx

@@ -53,12 +53,22 @@ const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
     icon?: React.ComponentType<{ className?: string }>;
+    /**
+     * `ghost` strips the bordered field chrome (border, bg, shadow, fixed
+     * height) for use as a flat inline control — e.g. a compact dropdown in a
+     * status bar or toolbar where the trigger should read like a plain button.
+     */
+    variant?: "default" | "ghost";
   }
->(({ className, children, icon: Icon, ...props }, ref) => (
+>(({ className, children, icon: Icon, variant = "default", ...props }, ref) => (
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between whitespace-nowrap rounded-[var(--radius)] border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+      "flex items-center justify-between whitespace-nowrap text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+      variant === "default" &&
+        "h-10 w-full rounded-[var(--radius)] border border-input bg-transparent px-3 py-2 shadow-sm focus:ring-1 focus:ring-ring",
+      variant === "ghost" &&
+        "rounded-md px-2 py-0.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground data-[state=open]:bg-muted data-[state=open]:text-foreground",
       className
     )}
     {...props}

package/src/providers/UiProviders.tsx

@@ -1,10 +1,11 @@
 'use client';
 
 import * as React from 'react';
-import { useEffect, useState } from 'react';
+import type { ErrorInfo } from 'react';
 
 import { TooltipProvider } from '../components/overlay/tooltip';
 import { Toaster } from '../components/feedback/sonner';
+import { Boundary, type BoundaryProps } from '../components/boundary';
 import { DialogProvider } from '../lib/dialog-service/DialogProvider';
 
 export interface UiProvidersProps {
@@ -15,6 +16,23 @@ export interface UiProvidersProps {
   noToaster?: boolean;
   /** Disable the imperative `window.dialog` service + its renderer. */
   noDialogService?: boolean;
+  /**
+   * Top-level crash protection. By default UiProviders wraps the whole tree in
+   * a fullscreen `<Boundary>` so any uncaught React error shows a recoverable
+   * fallback instead of a white screen. Pass `onError` to forward the crash to
+   * your logger / monitor (the host owns logging; the boundary just calls it).
+   * Set `errorBoundary={false}` if the host installs its own top-level boundary.
+   */
+  onError?: (error: Error, info: ErrorInfo) => void;
+  /** Disable the built-in top-level error boundary. @default false (boundary on) */
+  errorBoundary?: false;
+  /**
+   * Custom fallback for the built-in boundary. Receives `{ error, errorInfo,
+   * reset }`. Use it to render an app-specific (e.g. i18n'd) crash screen
+   * instead of the default fullscreen one — lets hosts keep a single boundary
+   * (this one) rather than wrapping their own on top.
+   */
+  errorFallback?: BoundaryProps['fallback'];
   /**
    * SSR-safe mount strategy. Default `true` — skips providers on the
    * initial server render and remounts after `useEffect` so Radix
@@ -60,6 +78,9 @@ export function UiProviders({
   tooltipDelay = 100,
   noToaster,
   noDialogService,
+  onError,
+  errorBoundary,
+  errorFallback,
 }: UiProvidersProps) {
   // No SSR-skip on purpose: any nested library component that renders
   // `<Tooltip>` on its first paint expects to find `<TooltipProvider>`
@@ -67,7 +88,23 @@ export function UiProviders({
   // "Tooltip must be used within TooltipProvider" before hydration.
   // Radix's own provider tolerates the SSR pass — no hydration
   // mismatches observed; the safe wrapper was over-engineering.
-  const tree = noDialogService ? children : <DialogProvider>{children}</DialogProvider>;
+  const dialogTree = noDialogService ? children : <DialogProvider>{children}</DialogProvider>;
+  // Top-level crash protection by default. The Boundary catches uncaught React
+  // errors and shows a recoverable fullscreen fallback; `onError` forwards the
+  // crash to the host's logger/monitor. Opt out with `errorBoundary={false}`.
+  const tree =
+    errorBoundary === false ? (
+      dialogTree
+    ) : (
+      <Boundary
+        variant="fullscreen"
+        name="ui-providers"
+        onError={onError}
+        fallback={errorFallback}
+      >
+        {dialogTree}
+      </Boundary>
+    );
   return (
     <TooltipProvider delayDuration={tooltipDelay}>
       {tree}