@djangocfg/ui-tools 2.1.425 → 2.1.427

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-tools",
-  "version": "2.1.425",
+  "version": "2.1.427",
   "description": "Heavy React tools with lazy loading - for Electron, Vite, CRA, Next.js apps",
   "keywords": [
     "ui-tools",
@@ -77,9 +77,9 @@
       "require": "./dist/audio-player/index.cjs"
     },
     "./chat": {
-      "types": "./src/tools/Chat/lazy.tsx",
-      "import": "./src/tools/Chat/lazy.tsx",
-      "require": "./src/tools/Chat/lazy.tsx"
+      "types": "./src/tools/chat/lazy.tsx",
+      "import": "./src/tools/chat/lazy.tsx",
+      "require": "./src/tools/chat/lazy.tsx"
     },
     "./cron-scheduler": {
       "types": "./src/tools/input/CronScheduler/lazy.tsx",
@@ -329,8 +329,8 @@
     "test:watch": "vitest"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.425",
-    "@djangocfg/ui-core": "^2.1.425",
+    "@djangocfg/i18n": "^2.1.427",
+    "@djangocfg/ui-core": "^2.1.427",
     "consola": "^3.4.2",
     "lodash-es": "^4.18.1",
     "lucide-react": "^0.545.0",
@@ -405,9 +405,9 @@
     "@maplibre/maplibre-gl-geocoder": "^1.7.0"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.425",
-    "@djangocfg/typescript-config": "^2.1.425",
-    "@djangocfg/ui-core": "^2.1.425",
+    "@djangocfg/i18n": "^2.1.427",
+    "@djangocfg/typescript-config": "^2.1.427",
+    "@djangocfg/ui-core": "^2.1.427",
     "@types/lodash-es": "^4.17.12",
     "@types/mapbox__mapbox-gl-draw": "^1.4.8",
     "@types/node": "^25.2.3",

package/src/lib/browser-bridge/logger.ts

@@ -6,7 +6,7 @@
  * sibling of `lib/page-snapshot/`, so it must NOT reach up into `tools/` —
  * the bridge is infrastructure, Chat is merely a consumer.
  *
- * Mirrors the gating of the chat logger (`tools/Chat/core/logger.ts`): the
+ * Mirrors the gating of the chat logger (`tools/chat/core/logger.ts`): the
  * `chat:directives` sub-logger is silenced unless `isDev`, so noisy bridge
  * events never leak into production builds. Kept local and minimal — only
  * the `directives` scope is needed here.

package/src/lib/page-snapshot/react/provider.tsx

@@ -15,7 +15,7 @@ import {
   installChatBridge,
   setBridgeResolver,
 } from '../../browser-bridge';
-import { useChatSettings } from '../../../tools/Chat/settings';
+import { useChatSettings } from '../../../tools/chat/settings';
 
 import type { CaptureEngineOptions, CaptureResult } from '../engine';
 import { PageSnapshotEngine } from '../engine';

package/src/tools/data/DataTable/parts/DataTable.tsx

@@ -80,17 +80,27 @@ function DataTableShell({ className, style }: { className?: string; style?: Reac
   return (
     <div
       data-slot="data-table"
-      className={cn('flex flex-col gap-2 rounded-sm border border-border bg-background', className)}
+      // Single card frame owned by the shell, matching ui-core <Card>:
+      // `--radius-popover` corner + `--shadow-card` so a data panel reads the
+      // same as every other panel in the app (and gains the soft light-theme
+      // lift). The inner <Table> renders `frame={false}` so it doesn't draw a
+      // second border/radius inside this one (that produced the visible double
+      // border + mismatched corners). `overflow-hidden` clips the header band
+      // and the pagination strip to the rounded corners; the pagination's own
+      // top border is the only divider between body and footer — no `gap`
+      // gutter that reads as a second line.
+      className={cn(
+        'flex flex-col overflow-hidden rounded-[var(--radius-popover)] border border-border bg-card text-card-foreground [box-shadow:var(--shadow-card)]',
+        className
+      )}
       style={style}
     >
-      <div className="relative w-full overflow-auto">
-        <Table>
-          <DataTableHeader />
-          <TableBody>
-            <DataTableRows />
-          </TableBody>
-        </Table>
-      </div>
+      <Table frame={false}>
+        <DataTableHeader />
+        <TableBody>
+          <DataTableRows />
+        </TableBody>
+      </Table>
       <DataTablePagination />
     </div>
   );

package/src/tools/data/DataTable/parts/DataTablePagination.tsx

@@ -1,7 +1,14 @@
 'use client';
 
 import * as React from 'react';
-import { cn } from '@djangocfg/ui-core/lib';
+import {
+  Button,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@djangocfg/ui-core/components';
 import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
 
 import { useDataTableContext } from '../context/DataTableContext';
@@ -16,90 +23,93 @@ export function DataTablePagination() {
   return (
     <div
       data-slot="data-table-pagination"
-      className="flex flex-col items-center justify-between gap-2 px-4 py-2 sm:flex-row"
+      className="flex flex-col items-center justify-between gap-2 border-t border-border px-4 py-2 sm:flex-row"
     >
       <span className="text-sm text-muted-foreground">
         {start}-{end} of {totalRows}
       </span>
 
       <div className="flex items-center gap-2">
-        <select
-          value={pagination.pageSize}
-          onChange={(e) => setPageSize(Number(e.target.value))}
-          className={cn(
-            'h-8 rounded-sm border border-input bg-background px-2 text-sm',
-            'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring'
-          )}
-          aria-label="Rows per page"
+        <Select
+          value={String(pagination.pageSize)}
+          onValueChange={(value) => setPageSize(Number(value))}
         >
-          {pageSizeOptions.map((size) => (
-            <option key={size} value={size}>
-              {size} / page
-            </option>
-          ))}
-        </select>
+          {/* `--radius` is the shared control corner used by ui-core <Button>,
+            * so the page-size trigger and the nav buttons round identically. */}
+          <SelectTrigger
+            className="h-8 w-auto gap-1 rounded-[var(--radius)] px-2 shadow-none"
+            aria-label="Rows per page"
+          >
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {pageSizeOptions.map((size) => (
+              <SelectItem key={size} value={String(size)}>
+                {size} / page
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
 
+        {/* Nav controls reuse the library <Button> (outline/icon) rather than a
+          * bespoke button, so hover, disabled, focus-ring and radius all track
+          * the rest of the app automatically. `h-8 w-8` shrinks the default
+          * icon size (h-9 w-9) to match the compact pagination row.
+          * `elevated={false}` drops the variant's shadow so the buttons sit
+          * flat against the panel, matching the shadow-less page-size select. */}
         <div className="flex items-center gap-1">
-          <PaginationButton
+          <Button
+            variant="outline"
+            size="icon"
+            elevated={false}
+            className="h-8 w-8"
             onClick={() => setPage(1)}
             disabled={pagination.page <= 1}
             aria-label="First page"
           >
             <ChevronsLeft className="h-4 w-4" />
-          </PaginationButton>
-          <PaginationButton
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            elevated={false}
+            className="h-8 w-8"
             onClick={() => setPage(pagination.page - 1)}
             disabled={pagination.page <= 1}
             aria-label="Previous page"
           >
             <ChevronLeft className="h-4 w-4" />
-          </PaginationButton>
+          </Button>
 
           <span className="px-2 text-sm tabular-nums">
             {pagination.page} / {pageCount}
           </span>
 
-          <PaginationButton
+          <Button
+            variant="outline"
+            size="icon"
+            elevated={false}
+            className="h-8 w-8"
             onClick={() => setPage(pagination.page + 1)}
             disabled={pagination.page >= pageCount}
             aria-label="Next page"
           >
             <ChevronRight className="h-4 w-4" />
-          </PaginationButton>
-          <PaginationButton
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            elevated={false}
+            className="h-8 w-8"
             onClick={() => setPage(pageCount)}
             disabled={pagination.page >= pageCount}
             aria-label="Last page"
           >
             <ChevronsRight className="h-4 w-4" />
-          </PaginationButton>
+          </Button>
         </div>
       </div>
     </div>
   );
 }
 DataTablePagination.displayName = 'DataTablePagination';
-
-function PaginationButton({
-  children,
-  onClick,
-  disabled,
-  ...props
-}: React.ButtonHTMLAttributes<HTMLButtonElement>) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      disabled={disabled}
-      className={cn(
-        'inline-flex h-8 w-8 items-center justify-center rounded-sm border border-input bg-background text-sm',
-        'hover:bg-accent hover:text-accent-foreground',
-        'disabled:pointer-events-none disabled:opacity-50',
-        'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring'
-      )}
-      {...props}
-    >
-      {children}
-    </button>
-  );
-}

package/src/tools/dev/code/MarkdownMessage/CollapseToggle.tsx

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 
-import { TOGGLE } from '../../../Chat/styles/bubbleTokens';
+import { TOGGLE } from '../../../chat/styles/bubbleTokens';
 
 interface CollapseToggleProps {
   isCollapsed: boolean;

package/src/tools/dev/code/MarkdownMessage/components.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { Components } from 'react-markdown';
 import Mermaid from '../../Mermaid';
-import { ANCHOR } from '../../../Chat/styles/bubbleTokens';
+import { ANCHOR } from '../../../chat/styles/bubbleTokens';
 import { CodeBlock, CodeBlockFallback } from './CodeBlock';
 import { extractTextFromChildren } from './plainText';
 

package/src/tools/input/SpeechRecognition/core/audio/defaults.ts

@@ -13,8 +13,8 @@
  * Inlined as base64 data URLs in the Chat sound modules, so consumers
  * get working audio with zero loader / ambient-type setup.
  */
-import start from '../../../../Chat/core/audio/sounds/start';
-import sent from '../../../../Chat/core/audio/sounds/sent';
+import start from '../../../../chat/core/audio/sounds/start';
+import sent from '../../../../chat/core/audio/sounds/sent';
 
 export type VoiceSoundEvent = 'start' | 'stop';