Main

.gitignore

@@ -29,6 +29,9 @@ pnpm-lock.yaml
 .next/
 out/
 build
+
+# Wrangler local dev state (auto-generated by wrangler pages dev)
+.wrangler/
 dist
 dist-ssr
 

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

CHANGELOG.md

@@ -1,3 +1,11 @@
+# [1.4.0-develop.10](https://github.com/betterbugs/dev-tools/compare/v1.4.0-develop.9...v1.4.0-develop.10) (2026-05-22)
+
+
+### Features
+
+* add class-validator dependency and update page styles ([860e1f5](https://github.com/betterbugs/dev-tools/commit/860e1f55497c9ac86a70fadbc6725a5d07f3f26c))
+* add Image Resizer and Time Calculator components ([35c3e79](https://github.com/betterbugs/dev-tools/commit/35c3e7901069e60a62e44a9987298945f18f65cc))
+
 # [1.4.0-develop.9](https://github.com/betterbugs/dev-tools/compare/v1.4.0-develop.8...v1.4.0-develop.9) (2026-04-14)
 
 ### Features

README.md

@@ -36,6 +36,7 @@
 With BetterBugs, debugging stops being guesswork and becomes a shared, reliable source of truth.
 
 **Key Features:**
+
 - Real session context from production environments
 - One-click bug capture with automatic context gathering
 - Reproducible bug timelines with clear event sequences
@@ -92,12 +93,14 @@ BetterBugs Development Tools solves this by providing:
 ## Available Tools
 
 ### Text Tools
+
 - Text case converters (uppercase, lowercase, title case, sentence case)
 - Text counters (word, character, sentence, line)
 - Text formatters and manipulators
 - Lorem Ipsum generator
 
 ### Code Tools
+
 - JavaScript minifier and obfuscator
 - JSON formatter and minifier
 - HTML to Markdown converter
@@ -106,6 +109,7 @@ BetterBugs Development Tools solves this by providing:
 - CSS formatters and converters
 
 ### Data Tools
+
 - JSON validator and formatter
 - CSV converters and tools
 - QR Code generator
@@ -114,6 +118,7 @@ BetterBugs Development Tools solves this by providing:
 - URL encoder/decoder
 
 ### Color Tools
+
 - Color code converters (HEX, RGB, CMYK)
 - Color picker and inverter
 - Random color generator
@@ -132,17 +137,20 @@ Browse all available tools at [BetterBugs Development Tools](https://www.betterb
 ### Installation
 
 1. **Clone the repository**
+
    ```bash
    git clone https://github.com/betterbugs/dev-tools.git
    cd dev-tools
    ```
 
 2. **Install dependencies**
+
    ```bash
    npm install
    ```
 
 3. **Run the development server**
+
    ```bash
    npm run dev
    ```
@@ -190,18 +198,19 @@ dev-tools/
 4. The tool automatically appears on the homepage
 
 Example:
+
 ```typescript
 "use client";
 import React, { useState } from "react";
 
 const MyNewTool = () => {
   const [input, setInput] = useState("");
-  
+
   return (
     <div>
-      <input 
-        value={input} 
-        onChange={(e) => setInput(e.target.value)} 
+      <input
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
       />
       {/* Your tool logic */}
     </div>
@@ -216,6 +225,7 @@ export default MyNewTool;
 We welcome contributions! Please read our [Contributing Guide](CONTRIBUTING.md) to get started.
 
 Key points:
+
 - Follow [Conventional Commits](https://www.conventionalcommits.org)
 - Target the `develop` branch for feature PRs
 - See our [Pull Request Template](.github/PULL_REQUEST_TEMPLATE.md) for guidance
@@ -232,6 +242,7 @@ Found a security vulnerability? Please email us at dev@betterbugs.io instead of
 ## Reporting Issues
 
 Found a bug? Open an issue on [GitHub Issues](https://github.com/betterbugs/dev-tools/issues) with:
+
 - Clear description of the problem
 - Steps to reproduce
 - Expected vs actual behavior

app/ClientLayout.tsx

@@ -0,0 +1,75 @@
+'use client';
+import { Suspense, useContext } from 'react';
+import { CookiesProvider } from 'react-cookie';
+import {
+  LayoutContext,
+  LayoutContextModel,
+  LayoutContextProvider,
+} from './contexts/layoutContexts';
+import { ThemeProvider } from './contexts/themeContext';
+import HeaderComponent from './components/layout/Header/headerComponent';
+import FooterComponent from './components/layout/footer/footerComponent';
+import CanonicalLink from './components/theme/canonicalLink/canonicalLink';
+import { useMediaQuery } from 'react-responsive';
+import dynamic from 'next/dynamic';
+
+const AnimatedCursor = dynamic(() => import('react-animated-cursor'), {
+  ssr: false,
+});
+
+const InnerContent = ({ children }: { children: React.ReactNode }) => {
+  const { isClient }: LayoutContextModel = useContext(LayoutContext);
+  const isDesktopOrLaptop = useMediaQuery({ query: '(min-width: 1024px)' });
+
+  return (
+    <div className="relative">
+      {isClient && isDesktopOrLaptop && (
+        <AnimatedCursor
+          innerSize={8}
+          outerSize={50}
+          outerAlpha={0.2}
+          innerScale={0.7}
+          outerScale={3}
+          color="0, 218, 146"
+          showSystemCursor={true}
+          clickables={[
+            'a',
+            'input[type="text"]',
+            'input[type="email"]',
+            'input[type="number"]',
+            'input[type="submit"]',
+            'input[type="image"]',
+            'label[for]',
+            'select',
+            'textarea',
+            'button',
+            'link',
+            { target: '.custom' },
+          ]}
+        />
+      )}
+      <Suspense>
+        <HeaderComponent />
+      </Suspense>
+      {children}
+      <FooterComponent />
+    </div>
+  );
+};
+
+const ClientLayout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <Suspense>
+      <CookiesProvider>
+        <LayoutContextProvider>
+          <ThemeProvider>
+            <CanonicalLink />
+            <InnerContent>{children}</InnerContent>
+          </ThemeProvider>
+        </LayoutContextProvider>
+      </CookiesProvider>
+    </Suspense>
+  );
+};
+
+export default ClientLayout;