admin-lte 4.0.0-rc3 → 4.0.0-rc4

package/.claude/settings.local.json

@@ -0,0 +1,28 @@
+{
+  "permissions": {
+    "allow": [
+      "WebFetch(domain:github.com)",
+      "Bash(npm run css-lint)",
+      "Bash(npm run build:*)",
+      "Bash(npm install)",
+      "Bash(npm run:*)",
+      "Bash(npm test:*)",
+      "Bash(npm install:*)",
+      "Bash(npm start)",
+      "WebFetch(domain:adminlte.io)",
+      "Bash(rm:*)",
+      "Bash(find:*)",
+      "Bash(sed:*)",
+      "Bash(gh pr list:*)",
+      "Bash(npm audit:*)",
+      "Bash(npm outdated)",
+      "Bash(npm update:*)",
+      "Bash(git add:*)",
+      "Bash(git commit:*)",
+      "Bash(git tag:*)",
+      "Bash(gh release create:*)",
+      "Bash(npm publish:*)"
+    ],
+    "deny": []
+  }
+}

package/CHANGELOG.md

@@ -5,6 +5,41 @@ All notable changes to AdminLTE will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+## [4.0.0-rc4] - 2025-07-10
+
+### Updated
+- **Dependencies:** Updated 8 packages to latest versions
+  - @rollup/plugin-typescript: 12.1.3 → 12.1.4
+  - @typescript-eslint/eslint-plugin: 8.35.1 → 8.36.0
+  - @typescript-eslint/parser: 8.35.1 → 8.36.0
+  - astro: 5.10.0 → 5.11.0
+  - eslint: 9.30.0 → 9.30.1
+  - prettier: 3.5.3 → 3.6.2
+  - rollup: 4.44.0 → 4.44.2
+  - stylelint: 16.21.0 → 16.21.1
+
+### Fixed
+- **Windows Build Compatibility:** Fixed npm scripts to work cross-platform by replacing Unix-specific shell commands with `shx`
+  - Updated `copy-assets` script to use `shx mkdir` and `shx cp` commands
+  - Updated `flatten-build` script to use `shx cp` and `shx rm` commands  
+  - Added `shx` package as dev dependency for cross-platform shell command support
+  - Resolves build failures on Windows systems with "The syntax of the command is incorrect" errors
+- **TeamViewer Modal Compatibility:** Fixed modal fade animations for remote desktop compatibility
+  - Updated accessibility CSS to use `transition: none` and `opacity: 1` instead of `display: block`
+  - Maintains WCAG 2.1 AA compliance while ensuring modals work properly in TeamViewer sessions
+  - Added specific transform overrides for modal dialogs in reduced motion mode
+- **Mobile Sidebar Scrolling:** Fixed sidebar closing unexpectedly when scrolling on mobile devices
+  - Updated touch event handling to differentiate between tap and scroll gestures
+  - Added proper overflow properties to sidebar wrapper for mobile viewport
+  - Sidebar now remains open during scroll operations on touch devices
+  - Resolves issue where scrolling in sidebar would immediately close it on mobile browsers
+- **Image Path Resolution:** Fixed mobile image loading by using relative paths in HTML
+  - **Root Cause:** Absolute paths like `/assets/img/user.jpg` caused 404 errors on mobile
+  - **Solution:** Generate relative image paths in Astro components based on page location
+  - **Result:** Images now load correctly on all devices and deployment scenarios
+
 ## [4.0.0-rc3] - 2025-06-24
 
 ### Production Deployment & Cross-Platform Compatibility

package/CLAUDE.md

@@ -0,0 +1,106 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+AdminLTE is a Bootstrap 5-based admin dashboard template with TypeScript components and SCSS styling. The project uses Astro for documentation generation and includes comprehensive build tooling for development and production.
+
+## Development Commands
+
+### Start Development
+```bash
+npm start                    # Start development server with file watching (opens http://localhost:3000)
+npm run dev                  # Same as npm start
+```
+
+### Build Commands
+```bash
+npm run build               # Quick development build (CSS + JS + assets + docs)
+npm run production          # Full production build with linting and optimization
+npm run compile             # Build all assets (CSS, JS, assets, docs)
+```
+
+### Asset-Specific Commands
+```bash
+npm run css                 # Build CSS only (compile + prefix + RTL + minify)
+npm run js                  # Build JavaScript only (compile + minify)
+npm run assets              # Process assets only
+```
+
+### Linting and Quality
+```bash
+npm run lint                # Run all linters (JS, CSS, docs, lockfile)
+npm run js-lint             # ESLint for JavaScript/TypeScript
+npm run css-lint            # Stylelint for SCSS
+npm run docs-lint           # Astro check for documentation
+```
+
+### Individual Build Steps
+```bash
+npm run css-compile         # Compile SCSS to CSS
+npm run css-rtl             # Generate RTL versions
+npm run js-compile          # Compile TypeScript to JavaScript
+npm run docs-compile        # Build documentation with Astro
+```
+
+## Architecture
+
+### Core Structure
+- **src/ts/**: TypeScript source files for UI components
+- **src/scss/**: SCSS source files for styling
+- **src/html/**: Astro-based documentation and examples
+- **src/config/**: Build configuration files
+- **src/assets/**: Static assets (images, etc.)
+- **dist/**: Built assets and documentation
+
+### Key Components (src/ts/)
+- **adminlte.ts**: Main entry point that initializes all components
+- **layout.ts**: Core layout management and theme handling
+- **accessibility.ts**: WCAG 2.1 AA compliance features
+- **card-widget.ts**: Collapsible card functionality
+- **treeview.ts**: Navigation tree component
+- **push-menu.ts**: Sidebar menu toggle
+- **direct-chat.ts**: Chat widget functionality
+- **fullscreen.ts**: Fullscreen mode toggle
+
+### Build System
+- **Rollup**: JavaScript bundling (UMD format)
+- **Sass**: SCSS compilation with Bootstrap integration
+- **PostCSS**: CSS processing with autoprefixer and RTL support
+- **Astro**: Static site generation for documentation
+- **ESLint**: JavaScript/TypeScript linting with TypeScript ESLint, Unicorn, and Astro plugins
+
+### Styling Architecture
+- Built on Bootstrap 5.3.7 with custom variables
+- Modular SCSS structure in parts/ directory
+- Dark mode support with separate variable files
+- RTL (Right-to-Left) language support
+- Accessibility-focused styling
+
+### Development Workflow
+1. Source files are watched during development
+2. CSS and JS are automatically compiled and copied to src/html/public/
+3. Astro serves documentation with hot reloading
+4. Production builds include minification and optimization
+
+## Key Files and Configurations
+
+### Build Configuration
+- **src/config/rollup.config.js**: JavaScript bundling configuration
+- **src/config/astro.config.mjs**: Documentation build configuration
+- **src/config/postcss.config.mjs**: CSS processing configuration
+- **eslint.config.js**: Linting rules and file ignores
+
+### Main Entry Points
+- **src/ts/adminlte.ts**: Main TypeScript entry point
+- **src/scss/adminlte.scss**: Main SCSS entry point
+- **dist/js/adminlte.min.js**: Built JavaScript for production
+- **dist/css/adminlte.min.css**: Built CSS for production
+
+### Development Notes
+- The project uses ES modules (type: "module" in package.json)
+- TypeScript configuration is in tsconfig.json
+- File watching is handled by nodemon with specific patterns
+- Assets are copied to src/html/public/ during build for Astro integration
+- Production builds are flattened to dist/ root for deployment

package/README 2.md

@@ -0,0 +1,106 @@
+# [AdminLTE - Bootstrap 5 Admin Dashboard](https://adminlte.io)
+
+[![npm version](https://img.shields.io/npm/v/admin-lte/latest.svg)](https://www.npmjs.com/package/admin-lte)
+[![Packagist](https://img.shields.io/packagist/v/almasaeed2010/adminlte.svg)](https://packagist.org/packages/almasaeed2010/adminlte)
+[![cdn version](https://data.jsdelivr.com/v1/package/npm/admin-lte/badge)](https://www.jsdelivr.com/package/npm/admin-lte)
+[![Discord Invite](https://img.shields.io/badge/discord-join%20now-green)](https://discord.gg/jfdvjwFqfz)
+[![Netlify Status](https://api.netlify.com/api/v1/badges/1277b36b-08f3-43fa-826a-4b4d24614b3c/deploy-status)](https://app.netlify.com/sites/adminlte-v4/deploys)
+
+**AdminLTE** is a fully responsive administration template. Based on **[Bootstrap 5](https://getbootstrap.com/)** framework and also the JavaScript plugins.
+Highly customizable and easy to use. Fits many screen resolutions from small mobile devices to large desktops.
+
+## What's New in v4.0.0-rc3
+
+**Production Deployment & Cross-Platform Compatibility** - This release resolves critical production deployment issues:
+
+- **Fixed Production Builds** - Resolved CSS/JS path issues, sidebar navigation, and image loading in all deployment scenarios
+- **Smart Path Resolution** - Automatic relative path calculation works for root deployment, sub-folders, and CDN hosting  
+- **RTL CSS Fix** - Eliminated rtlcss interference with standard LTR production builds
+- **Updated Dependencies** - Bootstrap 5.3.7, Bootstrap Icons 1.13.1, OverlayScrollbars 2.11.0
+- **Zero Console Errors** - Fixed all CDN integrity mismatches and runtime issues
+- **FTP/Static Host Ready** - Perfect compatibility with traditional hosting and modern static platforms
+
+**Key Improvements:**
+- ✅ Development and production environments now behave identically
+- ✅ Images, CSS, and JavaScript load correctly in any deployment structure  
+- ✅ Sidebar navigation displays properly with badges and arrow indicators
+- ✅ All CDN resources load without console errors
+- ✅ Complete production build included in repository for easy deployment
+
+See the [CHANGELOG.md](CHANGELOG.md) for complete details.
+
+## Looking for Premium Templates?
+
+AdminLTE.io just opened a new premium templates page. Hand picked to ensure the best quality and the most affordable
+prices. Visit <https://adminlte.io/premium> for more information.
+
+!["AdminLTE Presentation"](https://adminlte.io/AdminLTE3.png "AdminLTE Presentation")
+
+**AdminLTE** has been carefully coded with clear comments in all of its JS, SCSS and HTML files.
+SCSS has been used to increase code customizability.
+
+## Quick start
+
+### Development
+
+To start developing with AdminLTE:
+
+1. **Install dependencies:** `npm install`
+2. **Start development server:** `npm start` *(opens browser at http://localhost:3000)*
+3. **Start coding!** Files auto-compile and refresh on changes
+
+### Production Build
+
+To build for production:
+
+1. **Full production build:** `npm run production` *(includes linting and optimization)*
+2. **Quick build:** `npm run build` *(faster for development/testing)*
+
+### Available Scripts
+
+- `npm start` - Start development server with file watching
+- `npm run build` - Build all assets for development
+- `npm run production` - Full production build with linting and bundlewatch
+- `npm run lint` - Run all linters (JS, CSS, docs, lockfile)
+- `npm run css` - Build CSS only
+- `npm run js` - Build JavaScript only
+
+## Browser Support
+
+AdminLTE supports all modern browsers with the latest Bootstrap 5.3.7:
+- Chrome (latest)
+- Firefox (latest) 
+- Safari (latest)
+- Edge (latest)
+
+## Contributing
+
+- Highly welcome.
+- For your extra reference check [AdminLTE v4 Contribution Guide](https://github.com/ColorlibHQ/AdminLTE#contributing)
+- First thing first, you should have bit knowledge about NodeJS.
+- Github Knowledge.
+- Install NodeJS LTS version.
+- Clone this Repository to your machine and change to `master` branch.
+- Go to Cloned Folder.
+- In cli/bash run `npm install` it will install dependency from `package.json`.
+- After installation completes, run `npm start`
+- Cool, Send your changes in PR to `master` branch.
+
+## Sponsorship
+
+Support AdminLTE development by becoming a sponsor.
+[Github Sponsors](https://github.com/sponsors/danny007in) or
+[PayPal](https://www.paypal.me/daniel007in)
+
+## License
+
+AdminLTE is an open source project by [AdminLTE.io](https://adminlte.io) that is licensed under [MIT](https://opensource.org/licenses/MIT).
+AdminLTE.io reserves the right to change the license of future releases.
+
+## Image Credits
+
+- [Pixeden](http://www.pixeden.com/psd-web-elements/flat-responsive-showcase-psd)
+- [Graphicsfuel](https://www.graphicsfuel.com/2013/02/13-high-resolution-blur-backgrounds/)
+- [Pickaface](https://pickaface.net/)
+- [Unsplash](https://unsplash.com/)
+- [Uifaces](http://uifaces.com/)

package/README.md

@@ -73,6 +73,15 @@ AdminLTE supports all modern browsers with the latest Bootstrap 5.3.7:
 - Safari (latest)
 - Edge (latest)
 
+## Platform Support
+
+AdminLTE v4 build scripts work cross-platform:
+- **Windows** - Command Prompt, PowerShell, Git Bash
+- **macOS** - Terminal, iTerm2
+- **Linux** - Bash, Zsh, and other Unix shells
+
+All npm scripts use cross-platform utilities to ensure consistent behavior across different operating systems.
+
 ## Contributing
 
 - Highly welcome.

package/dist/UI/general.html

@@ -96,7 +96,7 @@
                   <div class="d-flex">
                     <div class="flex-shrink-0">
                       <img
-                        src="/assets/img/user1-128x128.jpg"
+                        src="../assets/img/user1-128x128.jpg"
                         alt="User Avatar"
                         class="img-size-50 rounded-circle me-3"
                       />
@@ -122,7 +122,7 @@
                   <div class="d-flex">
                     <div class="flex-shrink-0">
                       <img
-                        src="/assets/img/user8-128x128.jpg"
+                        src="../assets/img/user8-128x128.jpg"
                         alt="User Avatar"
                         class="img-size-50 rounded-circle me-3"
                       />
@@ -148,7 +148,7 @@
                   <div class="d-flex">
                     <div class="flex-shrink-0">
                       <img
-                        src="/assets/img/user3-128x128.jpg"
+                        src="../assets/img/user3-128x128.jpg"
                         alt="User Avatar"
                         class="img-size-50 rounded-circle me-3"
                       />
@@ -213,7 +213,7 @@
             <li class="nav-item dropdown user-menu">
               <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
                 <img
-                  src="/assets/img/user2-160x160.jpg"
+                  src="../assets/img/user2-160x160.jpg"
                   class="user-image rounded-circle shadow"
                   alt="User Image"
                 />
@@ -223,7 +223,7 @@
                 <!--begin::User Image-->
                 <li class="user-header text-bg-primary">
                   <img
-                    src="/assets/img/user2-160x160.jpg"
+                    src="../assets/img/user2-160x160.jpg"
                     class="rounded-circle shadow"
                     alt="User Image"
                   />
@@ -267,7 +267,7 @@
           <a href="../index.html" class="brand-link">
             <!--begin::Brand Image-->
             <img
-              src="/assets/img/AdminLTELogo.png"
+              src="../assets/img/AdminLTELogo.png"
               alt="AdminLTE Logo"
               class="brand-image opacity-75 shadow"
             />
@@ -1897,31 +1897,7 @@
         }
       });
     </script>
-    <!--end::OverlayScrollbars Configure--><!-- Image path runtime fix -->
-    <script>
-      document.addEventListener('DOMContentLoaded', () => {
-        // Find the link tag for the main AdminLTE CSS file.
-        const cssLink = document.querySelector('link[href*="css/adminlte.css"]');
-        if (!cssLink) {
-          return; // Exit if the link isn't found
-        }
-
-        // Extract the base path from the CSS href.
-        // e.g., from "../css/adminlte.css", we get "../"
-        // e.g., from "./css/adminlte.css", we get "./"
-        const cssHref = cssLink.getAttribute('href');
-        const deploymentPath = cssHref.slice(0, cssHref.indexOf('css/adminlte.css'));
-
-        // Find all images with absolute paths and fix them.
-        document.querySelectorAll('img[src^="/assets/"]').forEach((img) => {
-          const originalSrc = img.getAttribute('src');
-          if (originalSrc) {
-            const relativeSrc = originalSrc.slice(1); // Remove leading '/'
-            img.src = deploymentPath + relativeSrc;
-          }
-        });
-      });
-    </script>
+    <!--end::OverlayScrollbars Configure-->
     <!--begin::Bootstrap Tooltips-->
     <script>
       const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');

package/dist/UI/icons.html

@@ -96,7 +96,7 @@
                   <div class="d-flex">
                     <div class="flex-shrink-0">
                       <img
-                        src="/assets/img/user1-128x128.jpg"
+                        src="../assets/img/user1-128x128.jpg"
                         alt="User Avatar"
                         class="img-size-50 rounded-circle me-3"
                       />
@@ -122,7 +122,7 @@
                   <div class="d-flex">
                     <div class="flex-shrink-0">
                       <img
-                        src="/assets/img/user8-128x128.jpg"
+                        src="../assets/img/user8-128x128.jpg"
                         alt="User Avatar"
                         class="img-size-50 rounded-circle me-3"
                       />
@@ -148,7 +148,7 @@
                   <div class="d-flex">
                     <div class="flex-shrink-0">
                       <img
-                        src="/assets/img/user3-128x128.jpg"
+                        src="../assets/img/user3-128x128.jpg"
                         alt="User Avatar"
                         class="img-size-50 rounded-circle me-3"
                       />
@@ -213,7 +213,7 @@
             <li class="nav-item dropdown user-menu">
               <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
                 <img
-                  src="/assets/img/user2-160x160.jpg"
+                  src="../assets/img/user2-160x160.jpg"
                   class="user-image rounded-circle shadow"
                   alt="User Image"
                 />
@@ -223,7 +223,7 @@
                 <!--begin::User Image-->
                 <li class="user-header text-bg-primary">
                   <img
-                    src="/assets/img/user2-160x160.jpg"
+                    src="../assets/img/user2-160x160.jpg"
                     class="rounded-circle shadow"
                     alt="User Image"
                   />
@@ -267,7 +267,7 @@
           <a href="../index.html" class="brand-link">
             <!--begin::Brand Image-->
             <img
-              src="/assets/img/AdminLTELogo.png"
+              src="../assets/img/AdminLTELogo.png"
               alt="AdminLTE Logo"
               class="brand-image opacity-75 shadow"
             />
@@ -838,31 +838,7 @@
         }
       });
     </script>
-    <!--end::OverlayScrollbars Configure--><!-- Image path runtime fix -->
-    <script>
-      document.addEventListener('DOMContentLoaded', () => {
-        // Find the link tag for the main AdminLTE CSS file.
-        const cssLink = document.querySelector('link[href*="css/adminlte.css"]');
-        if (!cssLink) {
-          return; // Exit if the link isn't found
-        }
-
-        // Extract the base path from the CSS href.
-        // e.g., from "../css/adminlte.css", we get "../"
-        // e.g., from "./css/adminlte.css", we get "./"
-        const cssHref = cssLink.getAttribute('href');
-        const deploymentPath = cssHref.slice(0, cssHref.indexOf('css/adminlte.css'));
-
-        // Find all images with absolute paths and fix them.
-        document.querySelectorAll('img[src^="/assets/"]').forEach((img) => {
-          const originalSrc = img.getAttribute('src');
-          if (originalSrc) {
-            const relativeSrc = originalSrc.slice(1); // Remove leading '/'
-            img.src = deploymentPath + relativeSrc;
-          }
-        });
-      });
-    </script>
+    <!--end::OverlayScrollbars Configure-->
     <!--end::Script-->
   </body>
   <!--end::Body-->

package/dist/UI/timeline.html

@@ -96,7 +96,7 @@
                   <div class="d-flex">
                     <div class="flex-shrink-0">
                       <img
-                        src="/assets/img/user1-128x128.jpg"
+                        src="../assets/img/user1-128x128.jpg"
                         alt="User Avatar"
                         class="img-size-50 rounded-circle me-3"
                       />
@@ -122,7 +122,7 @@
                   <div class="d-flex">
                     <div class="flex-shrink-0">
                       <img
-                        src="/assets/img/user8-128x128.jpg"
+                        src="../assets/img/user8-128x128.jpg"
                         alt="User Avatar"
                         class="img-size-50 rounded-circle me-3"
                       />
@@ -148,7 +148,7 @@
                   <div class="d-flex">
                     <div class="flex-shrink-0">
                       <img
-                        src="/assets/img/user3-128x128.jpg"
+                        src="../assets/img/user3-128x128.jpg"
                         alt="User Avatar"
                         class="img-size-50 rounded-circle me-3"
                       />
@@ -213,7 +213,7 @@
             <li class="nav-item dropdown user-menu">
               <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
                 <img
-                  src="/assets/img/user2-160x160.jpg"
+                  src="../assets/img/user2-160x160.jpg"
                   class="user-image rounded-circle shadow"
                   alt="User Image"
                 />
@@ -223,7 +223,7 @@
                 <!--begin::User Image-->
                 <li class="user-header text-bg-primary">
                   <img
-                    src="/assets/img/user2-160x160.jpg"
+                    src="../assets/img/user2-160x160.jpg"
                     class="rounded-circle shadow"
                     alt="User Image"
                   />
@@ -267,7 +267,7 @@
           <a href="../index.html" class="brand-link">
             <!--begin::Brand Image-->
             <img
-              src="/assets/img/AdminLTELogo.png"
+              src="../assets/img/AdminLTELogo.png"
               alt="AdminLTE Logo"
               class="brand-image opacity-75 shadow"
             />
@@ -821,10 +821,10 @@
                       <span class="time"> <i class="bi bi-clock-fill"></i> 2 days ago </span>
                       <h3 class="timeline-header"><a href="#">Mina Lee</a> uploaded new photos</h3>
                       <div class="timeline-body">
-                        <img src="/assets/img/user1-128x128.jpg" alt="..." />
-                        <img src="/assets/img/user1-128x128.jpg" alt="..." />
-                        <img src="/assets/img/user1-128x128.jpg" alt="..." />
-                        <img src="/assets/img/user1-128x128.jpg" alt="..." />
+                        <img src="../assets/img/user1-128x128.jpg" alt="..." />
+                        <img src="../assets/img/user1-128x128.jpg" alt="..." />
+                        <img src="../assets/img/user1-128x128.jpg" alt="..." />
+                        <img src="../assets/img/user1-128x128.jpg" alt="..." />
                       </div>
                     </div>
                   </div>
@@ -916,31 +916,7 @@
         }
       });
     </script>
-    <!--end::OverlayScrollbars Configure--><!-- Image path runtime fix -->
-    <script>
-      document.addEventListener('DOMContentLoaded', () => {
-        // Find the link tag for the main AdminLTE CSS file.
-        const cssLink = document.querySelector('link[href*="css/adminlte.css"]');
-        if (!cssLink) {
-          return; // Exit if the link isn't found
-        }
-
-        // Extract the base path from the CSS href.
-        // e.g., from "../css/adminlte.css", we get "../"
-        // e.g., from "./css/adminlte.css", we get "./"
-        const cssHref = cssLink.getAttribute('href');
-        const deploymentPath = cssHref.slice(0, cssHref.indexOf('css/adminlte.css'));
-
-        // Find all images with absolute paths and fix them.
-        document.querySelectorAll('img[src^="/assets/"]').forEach((img) => {
-          const originalSrc = img.getAttribute('src');
-          if (originalSrc) {
-            const relativeSrc = originalSrc.slice(1); // Remove leading '/'
-            img.src = deploymentPath + relativeSrc;
-          }
-        });
-      });
-    </script>
+    <!--end::OverlayScrollbars Configure-->
     <!--end::Script-->
   </body>
   <!--end::Body-->