why-hydration 0.1.5 → 0.3.0

package/dist/next/index.cjs

@@ -1,19 +1,19 @@
 'use client';
 'use strict';
 
-var chunkOFVFNPE6_cjs = require('../chunk-OFVFNPE6.cjs');
-require('../chunk-AT6A77X3.cjs');
+var chunkRWMRFTQ4_cjs = require('../chunk-RWMRFTQ4.cjs');
+require('../chunk-QFHUKJ5K.cjs');
 require('../chunk-DXPTZB3Z.cjs');
 
 
 
 Object.defineProperty(exports, "HydrationInspector", {
   enumerable: true,
-  get: function () { return chunkOFVFNPE6_cjs.HydrationInspector; }
+  get: function () { return chunkRWMRFTQ4_cjs.HydrationInspector; }
 });
 Object.defineProperty(exports, "createHydrationInspector", {
   enumerable: true,
-  get: function () { return chunkOFVFNPE6_cjs.createHydrationInspector; }
+  get: function () { return chunkRWMRFTQ4_cjs.createHydrationInspector; }
 });
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/next/index.d.cts

@@ -1,3 +1,3 @@
 export { HydrationInspector, HydrationInspectorHandle, HydrationInspectorProps, InspectorOptions, OverlayOptions, createHydrationInspector } from '../react.cjs';
-export { d as HydrationCauseCategory, H as HydrationReport } from '../types-6wTih14e.cjs';
+export { d as HydrationCauseCategory, H as HydrationReport } from '../types-C14vcpBO.cjs';
 import 'react';

package/dist/next/index.d.ts

@@ -1,3 +1,3 @@
 export { HydrationInspector, HydrationInspectorHandle, HydrationInspectorProps, InspectorOptions, OverlayOptions, createHydrationInspector } from '../react.js';
-export { d as HydrationCauseCategory, H as HydrationReport } from '../types-6wTih14e.js';
+export { d as HydrationCauseCategory, H as HydrationReport } from '../types-C14vcpBO.js';
 import 'react';

package/dist/next/index.js

@@ -1,6 +1,6 @@
 'use client';
-export { HydrationInspector, createHydrationInspector } from '../chunk-3I6F4K4L.js';
-import '../chunk-AS5DZZHI.js';
+export { HydrationInspector, createHydrationInspector } from '../chunk-CER5NQRR.js';
+import '../chunk-KP4S6CRL.js';
 import '../chunk-XIM33ZGB.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/react.cjs

@@ -1,19 +1,19 @@
 'use client';
 'use strict';
 
-var chunkOFVFNPE6_cjs = require('./chunk-OFVFNPE6.cjs');
-require('./chunk-AT6A77X3.cjs');
+var chunkRWMRFTQ4_cjs = require('./chunk-RWMRFTQ4.cjs');
+require('./chunk-QFHUKJ5K.cjs');
 require('./chunk-DXPTZB3Z.cjs');
 
 
 
 Object.defineProperty(exports, "HydrationInspector", {
   enumerable: true,
-  get: function () { return chunkOFVFNPE6_cjs.HydrationInspector; }
+  get: function () { return chunkRWMRFTQ4_cjs.HydrationInspector; }
 });
 Object.defineProperty(exports, "createHydrationInspector", {
   enumerable: true,
-  get: function () { return chunkOFVFNPE6_cjs.createHydrationInspector; }
+  get: function () { return chunkRWMRFTQ4_cjs.createHydrationInspector; }
 });
 //# sourceMappingURL=react.cjs.map
 //# sourceMappingURL=react.cjs.map

package/dist/react.d.cts

@@ -1,9 +1,30 @@
 import * as React from 'react';
-import { H as HydrationReport, C as Classifier } from './types-6wTih14e.cjs';
-export { a as Cause, b as DetectionContext, D as Divergence, d as HydrationCauseCategory } from './types-6wTih14e.cjs';
+import { H as HydrationReport, C as Classifier } from './types-C14vcpBO.cjs';
+export { a as Cause, b as DetectionContext, D as Divergence, d as HydrationCauseCategory } from './types-C14vcpBO.cjs';
+
+/**
+ * Overlay languages.
+ *
+ * The overlay speaks the page's language where it can: an Arabic page gets an
+ * Arabic, right-to-left panel, and everything else gets English. The engine's
+ * own output (`cause.explanation`, the console, `onReport`) is always English;
+ * only this view is translated, by looking causes up by `messageId`.
+ *
+ * Only the overlay imports this module, so it is tree-shaken out of production
+ * builds together with the rest of the dev implementation.
+ */
+
+type OverlayLocale = 'en' | 'ar' | 'he' | 'fa';
 
 interface OverlayOptions {
     position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    /**
+     * Language of the panel. `'auto'` (the default) follows the page's
+     * `<html lang>`: Arabic, Hebrew and Persian pages get the panel in that
+     * language, laid out right-to-left, and every other page gets English.
+     * Pass `'en'`, `'ar'`, `'he'` or `'fa'` to pin it.
+     */
+    locale?: 'auto' | OverlayLocale;
 }
 
 interface InspectorOptions {
@@ -35,4 +56,4 @@ interface HydrationInspectorHandle {
 }
 declare function createHydrationInspector(options?: InspectorOptions): HydrationInspectorHandle;
 
-export { Classifier, HydrationInspector, type HydrationInspectorHandle, type HydrationInspectorProps, HydrationReport, type InspectorOptions, type OverlayOptions, createHydrationInspector };
+export { Classifier, HydrationInspector, type HydrationInspectorHandle, type HydrationInspectorProps, HydrationReport, type InspectorOptions, type OverlayLocale, type OverlayOptions, createHydrationInspector };

package/dist/react.d.ts

@@ -1,9 +1,30 @@
 import * as React from 'react';
-import { H as HydrationReport, C as Classifier } from './types-6wTih14e.js';
-export { a as Cause, b as DetectionContext, D as Divergence, d as HydrationCauseCategory } from './types-6wTih14e.js';
+import { H as HydrationReport, C as Classifier } from './types-C14vcpBO.js';
+export { a as Cause, b as DetectionContext, D as Divergence, d as HydrationCauseCategory } from './types-C14vcpBO.js';
+
+/**
+ * Overlay languages.
+ *
+ * The overlay speaks the page's language where it can: an Arabic page gets an
+ * Arabic, right-to-left panel, and everything else gets English. The engine's
+ * own output (`cause.explanation`, the console, `onReport`) is always English;
+ * only this view is translated, by looking causes up by `messageId`.
+ *
+ * Only the overlay imports this module, so it is tree-shaken out of production
+ * builds together with the rest of the dev implementation.
+ */
+
+type OverlayLocale = 'en' | 'ar' | 'he' | 'fa';
 
 interface OverlayOptions {
     position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    /**
+     * Language of the panel. `'auto'` (the default) follows the page's
+     * `<html lang>`: Arabic, Hebrew and Persian pages get the panel in that
+     * language, laid out right-to-left, and every other page gets English.
+     * Pass `'en'`, `'ar'`, `'he'` or `'fa'` to pin it.
+     */
+    locale?: 'auto' | OverlayLocale;
 }
 
 interface InspectorOptions {
@@ -35,4 +56,4 @@ interface HydrationInspectorHandle {
 }
 declare function createHydrationInspector(options?: InspectorOptions): HydrationInspectorHandle;
 
-export { Classifier, HydrationInspector, type HydrationInspectorHandle, type HydrationInspectorProps, HydrationReport, type InspectorOptions, type OverlayOptions, createHydrationInspector };
+export { Classifier, HydrationInspector, type HydrationInspectorHandle, type HydrationInspectorProps, HydrationReport, type InspectorOptions, type OverlayLocale, type OverlayOptions, createHydrationInspector };

package/dist/react.js

@@ -1,6 +1,6 @@
 'use client';
-export { HydrationInspector, createHydrationInspector } from './chunk-3I6F4K4L.js';
-import './chunk-AS5DZZHI.js';
+export { HydrationInspector, createHydrationInspector } from './chunk-CER5NQRR.js';
+import './chunk-KP4S6CRL.js';
 import './chunk-XIM33ZGB.js';
 //# sourceMappingURL=react.js.map
 //# sourceMappingURL=react.js.map

package/dist/{types-6wTih14e.d.cts → types-C14vcpBO.d.cts}

@@ -14,9 +14,18 @@ interface Divergence {
 interface Cause {
     category: HydrationCauseCategory;
     confidence: number;
+    /** Always English — this is what the console prints and `onReport` gets. */
     explanation: string;
     suggestion: string;
     docsUrl?: string;
+    /**
+     * Which message produced `explanation`/`suggestion`, so a renderer can show
+     * the same cause in another language. Set by every built-in rule; custom
+     * classifiers may leave it out, and renderers then fall back to the English.
+     */
+    messageId?: string;
+    /** The values interpolated into that message (attribute names, tokens…). */
+    params?: Readonly<Record<string, string | readonly string[]>>;
 }
 type Classifier = (divergence: Divergence) => Cause | null;
 interface SourceLocation {

package/dist/{types-6wTih14e.d.ts → types-C14vcpBO.d.ts}

@@ -14,9 +14,18 @@ interface Divergence {
 interface Cause {
     category: HydrationCauseCategory;
     confidence: number;
+    /** Always English — this is what the console prints and `onReport` gets. */
     explanation: string;
     suggestion: string;
     docsUrl?: string;
+    /**
+     * Which message produced `explanation`/`suggestion`, so a renderer can show
+     * the same cause in another language. Set by every built-in rule; custom
+     * classifiers may leave it out, and renderers then fall back to the English.
+     */
+    messageId?: string;
+    /** The values interpolated into that message (attribute names, tokens…). */
+    params?: Readonly<Record<string, string | readonly string[]>>;
 }
 type Classifier = (divergence: Divergence) => Cause | null;
 interface SourceLocation {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "why-hydration",
-  "version": "0.1.5",
-  "description": "Tells you which component broke hydration, what differed, and how to fix it — in dev, with zero production cost.",
+  "version": "0.3.0",
+  "description": "Find which React component broke hydration, what differed, and how to fix it — for Next.js, Remix and Vite, React 18 and 19. Dev-only, zero production cost.",
   "license": "MIT",
   "author": "Razan Aboushi (https://www.linkedin.com/in/razan-aboushi/)",
   "homepage": "https://github.com/razan-aboushi/why-hydration#readme",
@@ -14,15 +14,33 @@
   },
   "keywords": [
     "react",
+    "react-dom",
     "hydration",
     "hydration error",
+    "hydration mismatch",
+    "hydration-mismatch",
+    "hydration failed",
+    "react hydration",
+    "hydrateRoot",
+    "text content does not match",
+    "suppressHydrationWarning",
     "ssr",
+    "server-side rendering",
     "next",
+    "nextjs",
+    "next.js",
+    "app router",
     "remix",
     "vite",
-    "hydration-mismatch",
+    "react 18",
+    "react 19",
     "devtools",
-    "diagnostics"
+    "debugging",
+    "diagnostics",
+    "developer tools",
+    "rtl",
+    "arabic",
+    "i18n"
   ],
   "type": "module",
   "sideEffects": false,