@djangocfg/ui-nextjs 2.1.319 → 2.1.321

package/README.md

@@ -6,13 +6,11 @@
 
 # @djangocfg/ui-nextjs
 
-Next.js UI library extending `@djangocfg/ui-core` with 69+ components built on Radix UI + Tailwind CSS v4.
+Next-specific runtime for DjangoCFG: theme provider, PWA install support, and browser-storage hooks.
 
-All navigation components are **locale-aware** via `next-intl` — links automatically include the locale prefix (e.g. `/ru/dashboard`).
+UI primitives (Button, Card, Sidebar, Pagination, Breadcrumb, etc.) live in [`@djangocfg/ui-core`](../ui-core) — they're framework-agnostic and don't belong here. Import them from there directly.
 
-**Part of [DjangoCFG](https://djangocfg.com)** — modern Django framework for production-ready SaaS applications.
-
-**[Live Demo & Props](https://djangocfg.com/demo/)**
+**Part of [DjangoCFG](https://djangocfg.com).**
 
 ## Install
 
@@ -20,291 +18,58 @@ All navigation components are **locale-aware** via `next-intl` — links automat
 pnpm add @djangocfg/ui-nextjs
 ```
 
-Peer dependencies: `next`, `next-intl`, `react`, `tailwindcss`.
-
-## Architecture
-
-```
-@djangocfg/ui-nextjs
-├── Re-exports everything from @djangocfg/ui-core (components + hooks)
-├── + Next.js locale-aware components (11)
-├── + Navigation hooks (useNavigation, useRouter, usePathname)
-├── + Browser storage hooks (2)
-├── + Blocks, Theme, Animations
-```
-
-| Package | Use Case |
-|---------|----------|
-| `@djangocfg/ui-core` | Electron, Vite, CRA, any React app |
-| `@djangocfg/ui-nextjs` | Next.js apps (includes ui-core + locale-aware navigation) |
-
-## Components
-
-### From ui-core (60)
-All components from `@djangocfg/ui-core` are re-exported.
-
-### Next.js Specific
-
-| Component | Description |
-|-----------|-------------|
-| `Sidebar` | Collapsible sidebar; `SidebarTrigger` shows an OS-aware tooltip (`⌘+B` / `Ctrl+B`); `SidebarMenuButton` accepts `tooltip` for icon-rail hints |
-| `Breadcrumb` | Breadcrumb primitives (uses ui-core `<Link>`) |
-| `BreadcrumbNavigation` | High-level breadcrumb component |
-| `Pagination` | Pagination link primitives |
-| `SSRPagination` | Server-compatible pagination |
-| `DropdownMenu` | Local override of ui-core `DropdownMenu` (kept for legacy ui-nextjs callers) |
-
-> **Links**: use `<Link>` and `<ButtonLink>` from `@djangocfg/ui-core/components` directly.
-> Mounted via `NextLinkProvider` (in `BaseApp` from `@djangocfg/layouts`), they
-> render through `next/link` — so prefetch / RSC handling work as expected.
-
-### MultiSelect Pro
-`MultiSelectPro` `MultiSelectProAsync` — Advanced multi-select with async loading
-
-### Blocks (7)
-`Hero` `SuperHero` `SplitHero` `ArticleCard` `FeatureSection` `CTASection` `StatsSection`
-
-```tsx
-import { Hero } from '@djangocfg/ui-nextjs/blocks';
-```
-
-## Hooks
-
-### Navigation (locale-aware)
-
-| Hook | Description |
-|------|-------------|
-| `useNavigation` | Returns `{ router, pathname, redirect }` — all locale-aware |
-| `useRouter` | Locale-aware router (`router.push('/page')` → `/ru/page`) |
-| `usePathname` | Current pathname without locale prefix |
-
-```tsx
-import { useNavigation } from '@djangocfg/ui-nextjs/hooks';
-
-function MyComponent() {
-  const { router, pathname } = useNavigation();
-  // pathname: "/dashboard" (not "/ru/dashboard")
-  // router.push('/settings') → navigates to /ru/settings
-}
-```
-
-### From ui-core (re-exported)
-
-All hooks from `@djangocfg/ui-core/hooks` are available. Common examples:
-
-| Hook | Description |
-|------|-------------|
-| `useMediaQuery` | Responsive breakpoints |
-| `useIsMobile` | Mobile detection |
-| `useShortcutModLabel` | `⌘` vs `Ctrl` labels for shortcut tooltips |
-| `useCopy` | Copy to clipboard |
-| `useCountdown` | Countdown timer |
-| `useDebounce` | Debounce values |
-| `useDebouncedCallback` | Debounced callbacks |
-| `useImageLoader` | Image loading state |
-| `useToast` / `toast` | Toast notifications (Sonner) |
-| `useEventListener` | Event bus |
-| `useDebugTools` | Debug utilities |
-| `useHotkey` | Keyboard shortcuts |
-| `useBrowserDetect` | Browser detection |
-| `useDeviceDetect` | Device detection |
-
-### Next.js Specific (3)
-
-| Hook | Description |
-|------|-------------|
-| `useResolvedTheme` | Light/dark theme resolution (next-themes) |
-| `useLocalStorage` | Persistent state in localStorage |
-| `useSessionStorage` | Persistent state in sessionStorage |
-
-## Dialog Service
-
-The dialog service from ui-core is available for replacing native dialogs:
-
-```tsx
-import { DialogProvider, useDialog, dialog } from '@djangocfg/ui-core/lib/dialog-service';
-```
-
-See ui-core README for full documentation.
-
-## Usage
-
-```tsx
-import {
-  Button, ButtonLink, Card, Input, Sidebar
-} from '@djangocfg/ui-nextjs';
-import { useNavigate } from '@djangocfg/ui-core/hooks';
-import { useLocalStorage } from '@djangocfg/ui-nextjs/hooks';
-
-function Example() {
-  const { navigate } = useNavigate();
-  const [saved, setSaved] = useLocalStorage('form', null);
-
-  return (
-    <Sidebar>
-      <Card>
-        <Input placeholder="Email" />
-        <Button onClick={() => navigate('/dashboard')}>
-          Submit
-        </Button>
-        <ButtonLink href="/docs" variant="outline">
-          Documentation
-        </ButtonLink>
-      </Card>
-    </Sidebar>
-  );
-}
-```
-
-### `<ButtonLink>` examples
-
-`<ButtonLink>` lives in `@djangocfg/ui-core/components`. In Next.js apps it renders
-through `next/link` automatically (via `NextLinkProvider` mounted in `BaseApp`).
-In Wails / Electron / Vite consumers it falls back to a plain `<a>` driven by
-`useNavigate`.
-
-```tsx
-import { ButtonLink } from '@djangocfg/ui-core/components';
-import { ArrowLeft, Settings } from 'lucide-react';
-
-<ButtonLink href="/dashboard">Dashboard</ButtonLink>
-
-<ButtonLink href="/settings" variant="outline" size="sm">
-  <Settings className="h-4 w-4 mr-2" />
-  Settings
-</ButtonLink>
-
-<ButtonLink href="/list" variant="ghost" size="icon">
-  <ArrowLeft className="h-4 w-4" />
-</ButtonLink>
-
-<ButtonLink href="/page" prefetch={false} replace>
-  Navigate (replaceState)
-</ButtonLink>
-```
-
-## Styling
-
-```tsx
-// Import global styles
-import '@djangocfg/ui-nextjs/styles/globals';
-```
-
-## Logger
+## What's inside
 
-Universal logger with consola + zustand for Console panel integration.
-
-```tsx
-import { createLogger, createMediaLogger } from '@djangocfg/ui-nextjs/lib';
+| Subpath | Purpose |
+|---|---|
+| `@djangocfg/ui-nextjs/theme` | `ThemeProvider` (next-themes), `ThemeToggle`, `useResolvedTheme` |
+| `@djangocfg/ui-nextjs/pwa` | `PwaProvider`, `A2HSHint`, `useInstall`, `useIsPWA`, install detection helpers |
+| `@djangocfg/ui-nextjs/hooks` | `useLocalStorage`, `useSessionStorage` and other Next-runtime-only hooks |
 
-// Basic logger
-const log = createLogger('MyComponent');
-log.info('User logged in', { userId: 123 });
-log.error('Failed to load', { error });
-
-// Media logger (with seek/buffer helpers)
-const mediaLog = createMediaLogger('AudioPlayer');
-mediaLog.load(src, 'stream');
-mediaLog.seek(from, to, duration);
-mediaLog.buffer(buffered, duration);
-```
-
-## Exports
-
-| Path | Content |
-|------|---------|
-| `@djangocfg/ui-nextjs` | All components & hooks |
-| `@djangocfg/ui-nextjs/components` | Components only |
-| `@djangocfg/ui-nextjs/hooks` | Hooks only |
-| `@djangocfg/ui-nextjs/blocks` | Landing page blocks |
-| `@djangocfg/ui-nextjs/lib` | Logger, utilities |
-| `@djangocfg/ui-nextjs/theme` | ThemeProvider, ThemeToggle |
-| `@djangocfg/ui-nextjs/animations` | Background animations |
-| `@djangocfg/ui-nextjs/styles` | CSS |
+That's it. Anything else you might be looking for is in `@djangocfg/ui-core`.
 
 ## Theme
 
 ```tsx
 import { ThemeProvider, ThemeToggle } from '@djangocfg/ui-nextjs/theme';
 
-function App({ children }) {
-  return (
-    <ThemeProvider>
-      {children}
-      <ThemeToggle />
-    </ThemeProvider>
-  );
-}
+<ThemeProvider>
+  {children}
+  <ThemeToggle />
+</ThemeProvider>
 ```
 
-## Tailwind v4 Notes
-
-- Arbitrary values (`h-[80px]`) may not work — use inline styles
-- Opacity modifiers (`bg-background/80`) broken with HSL — use inline styles
-- Define spacing/z-index in `@theme` block
-
-## PWA Install
-
-Full Progressive Web App installation support — iOS/Android/Desktop, Add to Home Screen prompt, page resume.
+## PWA
 
 ```tsx
-import { PwaProvider, A2HSHint, PWAPageResumeManager, useInstall } from '@djangocfg/ui-nextjs/pwa';
+import { PwaProvider, A2HSHint, useInstall } from '@djangocfg/ui-nextjs/pwa';
 
-// Wrap your app
-<PwaProvider enabled={true}>
+<PwaProvider enabled>
   {children}
   <A2HSHint resetAfterDays={7} delayMs={3000} logo="/logo192.png" />
-  <PWAPageResumeManager enabled={true} />
 </PwaProvider>
 
-// In any component
 function InstallButton() {
-  const { canPrompt, install, isInstalled, isIOS, isAndroid } = useInstall();
-  if (isInstalled || (!canPrompt && !isIOS)) return null;
-  return <button onClick={install}>Install App</button>;
+  const { canPrompt, install, isInstalled } = useInstall();
+  if (isInstalled || !canPrompt) return null;
+  return <button onClick={install}>Install</button>;
 }
 ```
 
-### Hooks & Utilities
+## Browser storage
 
 ```tsx
-import { useIsPWA, useInstall } from '@djangocfg/ui-nextjs/pwa';
-
-const isPWA = useIsPWA();                    // is running as installed PWA
-const { isIOS, isAndroid, canPrompt } = useInstall();
-```
-
-```tsx
-import {
-  isStandalone,          // window.matchMedia('display-mode: standalone')
-  isStandaloneReliable,  // standalone + navigator.standalone
-  isMobileDevice,        // iOS or Android
-  hasValidManifest,      // checks <link rel="manifest">
-  clearAllPWAInstallData, // reset localStorage flags
-} from '@djangocfg/ui-nextjs/pwa';
-```
-
-### Guide Components
-
-| Component | Description |
-|-----------|-------------|
-| `IOSGuide` | Step-by-step iOS Safari "Add to Home Screen" guide |
-| `DesktopGuide` | Desktop Chrome/Edge install guide |
-| `A2HSHint` | Floating hint bubble (auto-shows on eligible devices) |
-
-### Subpath Import
+import { useLocalStorage } from '@djangocfg/ui-nextjs/hooks';
 
-```tsx
-import { ... } from '@djangocfg/ui-nextjs/pwa';
+const [draft, setDraft] = useLocalStorage('contact-form', null);
 ```
 
 ## Requirements
 
-- Next.js >= 16
-- React >= 19
-- Tailwind CSS >= 4
-- next-intl >= 4
+- Next.js ≥ 16
+- React ≥ 19
+- Tailwind CSS ≥ 4 (for theme tokens consumed by ui-core components)
 
 ---
 
-**[Full documentation & examples](https://djangocfg.com/demo/)**
+**[djangocfg.com](https://djangocfg.com)**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-nextjs",
-  "version": "2.1.319",
+  "version": "2.1.321",
   "description": "Next.js UI component library with Radix UI primitives, Tailwind CSS styling, charts, and form components",
   "keywords": [
     "ui-components",
@@ -49,16 +49,6 @@
       "import": "./src/hooks/index.ts",
       "require": "./src/hooks/index.ts"
     },
-    "./blocks": {
-      "types": "./src/blocks/index.ts",
-      "import": "./src/blocks/index.ts",
-      "require": "./src/blocks/index.ts"
-    },
-    "./animations": {
-      "types": "./src/animations/index.ts",
-      "import": "./src/animations/index.ts",
-      "require": "./src/animations/index.ts"
-    },
     "./theme": {
       "types": "./src/theme/index.ts",
       "import": "./src/theme/index.ts",
@@ -85,11 +75,11 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.319",
-    "@djangocfg/i18n": "^2.1.319",
-    "@djangocfg/nextjs": "^2.1.319",
-    "@djangocfg/ui-core": "^2.1.319",
-    "@djangocfg/ui-tools": "^2.1.319",
+    "@djangocfg/api": "^2.1.321",
+    "@djangocfg/i18n": "^2.1.321",
+    "@djangocfg/nextjs": "^2.1.321",
+    "@djangocfg/ui-core": "^2.1.321",
+    "@djangocfg/ui-tools": "^2.1.321",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
     "consola": "^3.4.2",
@@ -112,7 +102,7 @@
     "react-chartjs-2": "^5.3.0"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.319",
+    "@djangocfg/typescript-config": "^2.1.321",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-slot": "^1.2.4",
     "@types/node": "^24.7.2",

package/src/index.ts

@@ -1,20 +1,17 @@
 // ============================================================================
-// @djangocfg/ui-nextjs - Main Export File
+// @djangocfg/ui-nextjs
+//
+// What lives here: Next-specific runtime — theme provider (next-themes), PWA
+// install support, browser-storage hooks. UI primitives (Button, Card, Sidebar,
+// Pagination, Breadcrumb, etc.) live in @djangocfg/ui-core.
+//
+// We still re-export ui-core/components here for back-compat with existing
+// `import { Button } from '@djangocfg/ui-nextjs'` callers across the monorepo.
+// New code should import from @djangocfg/ui-core/components directly.
 // ============================================================================
 
 'use client';
 
-// Re-export everything from components
-export * from './components';
-
-// Re-export hooks
+export * from '@djangocfg/ui-core/components';
 export * from './hooks';
-
-// Re-export blocks
-export * from './blocks';
-
-// Re-export animations
-export * from './animations';
-
-// Re-export theme
-export * from './theme';
+export * from './theme';