@visns-studio/visns-components 5.26.5 → 6.0.0

package/package.json

@@ -5,8 +5,6 @@
         "@dnd-kit/utilities": "^3.2.2",
         "@emotion/is-prop-valid": "^1.4.0",
         "@fontsource/barlow": "^5.2.8",
-        "@inovua/reactdatagrid-community": "^5.10.2",
-        "@inovua/reactdatagrid-enterprise": "^5.10.2",
         "@mapbox/mapbox-gl-geocoder": "^5.1.2",
         "@nivo/bar": "^0.87.0",
         "@nivo/core": "^0.87.0",
@@ -17,8 +15,8 @@
         "@tinymce/miniature": "^6.0.0",
         "@tinymce/tinymce-react": "^6.3.0",
         "@uiw/react-color": "^2.10.1",
-        "@visns-studio/visns-datagrid-community": "1.1.0",
-        "@visns-studio/visns-datagrid-enterprise": "1.1.0",
+        "@visns-studio/visns-datagrid-community": "1.2.0",
+        "@visns-studio/visns-datagrid-enterprise": "1.2.0",
         "@vitejs/plugin-react": "^4.7.0",
         "add": "^2.0.6",
         "array-move": "^4.0.0",
@@ -50,7 +48,6 @@
         "react-password-strength-bar": "^0.4.1",
         "react-promise-tracker": "^2.1.1",
         "react-quill": "^2.0.0",
-        "react-reveal": "^1.2.2",
         "react-router-dom": "^6.30.3",
         "react-select": "^5.10.2",
         "react-signature-pad-wrapper": "^4.3.2",
@@ -94,7 +91,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.26.5",
+    "version": "6.0.0",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [
@@ -115,5 +112,9 @@
         "url": "https://github.com/visnsstudio/visns-components/issues"
     },
     "homepage": "https://github.com/visnsstudio/visns-components#readme",
-    "packageManager": "yarn@4.9.2"
+    "packageManager": "yarn@4.9.2",
+    "resolutions": {
+        "@visns-studio/visns-datagrid-community": "portal:../visns-datagrid/lib/community-edition",
+        "@visns-studio/visns-datagrid-enterprise": "portal:../visns-datagrid/lib/enterprise-edition"
+    }
 }

package/src/components/DataGrid.jsx

@@ -1,3 +1,4 @@
+import debugLog from './utils/debugLog';
 import './styles/global.css';
 import './styles/global-datagrid.css';
 
@@ -301,21 +302,39 @@ const DataGrid = forwardRef(
         const [showImportModal, setShowImportModal] = useState(false);
 
         /** Modal Functions */
+        // Mirrors modalShow for use inside the dataSource closure (state
+        // would be stale there); used by the requireFirstEntry flow.
+        const modalShowRef = useRef(false);
+
         const modalOpen = (formType, formId) => {
+            modalShowRef.current = true;
             setModalShow(true);
             setFormType(formType);
             setFormId(formId);
         };
 
         const modalClose = () => {
+            modalShowRef.current = false;
             setModalShow(false);
             setBulkEditMode(false);
             setBulkEditGroupData(null);
+
+            // Opt-in (form.create.requireFirstEntry): this grid must not be
+            // left empty. Closing the form while no rows exist triggers a
+            // reload, whose empty result reopens the create form — the only
+            // way out is saving at least one entry (or leaving the page).
+            if (
+                form?.create?.requireFirstEntry &&
+                Array.isArray(dataRef.current) &&
+                dataRef.current.length === 0
+            ) {
+                handleReload();
+            }
         };
 
         /** Import Modal Functions */
         const handleBulkUploadClick = () => {
-            console.log('[DataGrid] Opening import modal with:', {
+            debugLog('[DataGrid] Opening import modal with:', {
                 paramValue,
                 pageData,
                 routeParams,
@@ -555,6 +574,35 @@ const DataGrid = forwardRef(
                     }
                     dataRef.current = res.data;
 
+                    // Opt-in (form.create.requireFirstEntry): when a clean
+                    // load (no search/filter narrowing) finds no rows, open
+                    // the create form automatically so the user is walked
+                    // straight into entering the first record. Combined with
+                    // modalClose's reload-when-empty, dismissing the form
+                    // just brings it back until one entry is saved.
+                    if (
+                        form?.create?.requireFirstEntry &&
+                        Array.isArray(res.data) &&
+                        res.data.length === 0 &&
+                        !modalShowRef.current &&
+                        !dSearch &&
+                        !(
+                            Array.isArray(params.filterValue) &&
+                            params.filterValue.some(
+                                (f) =>
+                                    f?.value !== null &&
+                                    f?.value !== undefined &&
+                                    f?.value !== ''
+                            )
+                        )
+                    ) {
+                        toast.warning(
+                            form.create.requireFirstEntryMessage ||
+                                'At least one entry is required — please add the first record.'
+                        );
+                        modalOpen('create', null);
+                    }
+
                     // Opt-in grouped display (ajaxSetting.treeGroupBy {key,
                     // column, parentFields, countLabel}): consecutive rows
                     // sharing a non-empty `key` value get a synthetic summary
@@ -687,7 +735,7 @@ const DataGrid = forwardRef(
 
         // Get default limit from userProfile preferences, tableSetting, or default to 25
         const getDefaultLimit = () => {
-            console.log('[DataGrid] getDefaultLimit called:', {
+            debugLog('[DataGrid] getDefaultLimit called:', {
                 userProfile_rows_per_page: userProfile?.rows_per_page,
                 userProfile_settings_rows_per_page: userProfile?.settings?.rows_per_page,
                 tableSetting_pageSize: tableSetting?.pageSize,
@@ -701,7 +749,7 @@ const DataGrid = forwardRef(
 
         const [limit, setLimit] = useState(() => {
             const initialLimit = getDefaultLimit();
-            console.log('[DataGrid] Initial limit set to:', initialLimit);
+            debugLog('[DataGrid] Initial limit set to:', initialLimit);
             return initialLimit;
         });
         const [search, setSearch] = useState('');
@@ -713,7 +761,7 @@ const DataGrid = forwardRef(
 
         // Effect to update limit when userProfile becomes available (for async loaded profiles)
         useEffect(() => {
-            console.log('[DataGrid] useEffect triggered:', {
+            debugLog('[DataGrid] useEffect triggered:', {
                 initialLimitApplied: initialLimitApplied.current,
                 userProfile_rows_per_page: userProfile?.rows_per_page,
                 userProfile_settings_rows_per_page: userProfile?.settings?.rows_per_page,
@@ -722,9 +770,9 @@ const DataGrid = forwardRef(
             // Only apply the user's preference once, when userProfile first becomes available
             if (!initialLimitApplied.current) {
                 const userLimit = userProfile?.rows_per_page || userProfile?.settings?.rows_per_page;
-                console.log('[DataGrid] Checking userLimit:', userLimit);
+                debugLog('[DataGrid] Checking userLimit:', userLimit);
                 if (userLimit && userLimit > 0) {
-                    console.log('[DataGrid] Setting limit to userLimit:', userLimit);
+                    debugLog('[DataGrid] Setting limit to userLimit:', userLimit);
                     setLimit(userLimit);
                     initialLimitApplied.current = true;
                 }
@@ -1699,17 +1747,17 @@ const DataGrid = forwardRef(
 
                 switch (iconConfig.id) {
                     case 'clock':
-                        console.log(
+                        debugLog(
                             `Starting timer action for group: ${groupValue}`
                         );
                         break;
                     case 'alarm':
-                        console.log(
+                        debugLog(
                             `Setting alarm action for group: ${groupValue}`
                         );
                         break;
                     case 'check':
-                        console.log(
+                        debugLog(
                             `Mark complete action for group: ${groupValue}`
                         );
                         break;
@@ -1734,18 +1782,18 @@ const DataGrid = forwardRef(
                             // Open modal for bulk editing
                             modalOpen('update', null);
                         } else {
-                            console.log(
+                            debugLog(
                                 `Bulk edit action for group: ${groupValue}`
                             );
                         }
                         break;
                     case 'envelope':
-                        console.log(
+                        debugLog(
                             `Send notification action for group: ${groupValue}`
                         );
                         break;
                     default:
-                        console.log(
+                        debugLog(
                             `Custom action ${iconConfig.id} for group: ${groupValue}`
                         );
                         break;
@@ -1917,7 +1965,7 @@ const DataGrid = forwardRef(
          */
         const onRowClick = useCallback(
             (rowProps, event) => {
-                console.log('🔍 DataGrid onRowClick triggered:', {
+                debugLog('🔍 DataGrid onRowClick triggered:', {
                     rowData: rowProps.data,
                     event: event,
                     target: event.target,
@@ -1928,7 +1976,7 @@ const DataGrid = forwardRef(
                     '.InovuaReactDataGrid__cell'
                 );
 
-                console.log('🔍 Cell element found:', cellElement);
+                debugLog('🔍 Cell element found:', cellElement);
 
                 // Add null check to prevent errors when cellElement is null
                 if (!cellElement) {
@@ -1942,7 +1990,7 @@ const DataGrid = forwardRef(
                     cellElement.parentNode.children
                 ).indexOf(cellElement);
 
-                console.log('🔍 Column analysis:', {
+                debugLog('🔍 Column analysis:', {
                     columnIndex: columnIndex,
                     totalColumns: rowProps.columns.length,
                     isLastColumn: columnIndex === rowProps.columns.length - 1,
@@ -1956,11 +2004,11 @@ const DataGrid = forwardRef(
                     rowProps.columns.length > 1 &&
                     columnIndex === rowProps.columns.length - 1
                 ) {
-                    console.log('🔍 Last column clicked - no action');
+                    debugLog('🔍 Last column clicked - no action');
                     // Handle last column click
                 } else {
                     const column = rowProps.columns[columnIndex];
-                    console.log('🔍 Column clicked:', {
+                    debugLog('🔍 Column clicked:', {
                         columnId: column?.id,
                         columnType: column?.type,
                         hasLink: !!column?.link,
@@ -2041,7 +2089,7 @@ const DataGrid = forwardRef(
                                     'width=1440,height=1024,menubar=1,resizable=1,status=1,titlebar=1,toolbar=1'
                                 );
                             } else {
-                                console.log('🔍 Checking for update setting:', {
+                                debugLog('🔍 Checking for update setting:', {
                                     settings: settingsRef.current,
                                     form: formRef.current,
                                     primaryKey: formRef.current?.primaryKey,
@@ -2054,13 +2102,13 @@ const DataGrid = forwardRef(
                                     (setting) => setting.id === 'update'
                                 );
 
-                                console.log(
+                                debugLog(
                                     '🔍 Update setting found:',
                                     updateSetting
                                 );
 
                                 if (updateSetting) {
-                                    console.log('✅ Opening modal with:', {
+                                    debugLog('✅ Opening modal with:', {
                                         type: 'update',
                                         id: rowProps.data[
                                             formRef.current.primaryKey
@@ -2091,7 +2139,7 @@ const DataGrid = forwardRef(
                 const { onClick } = rowProps;
 
                 rowProps.onClick = (event) => {
-                    console.log('🔍 Row onClick triggered:', {
+                    debugLog('🔍 Row onClick triggered:', {
                         rowId: rowProps.data?.id,
                         rowData: rowProps.data,
                         event: event,
@@ -2110,10 +2158,10 @@ const DataGrid = forwardRef(
                             '.InovuaReactDataGrid__group-cell'
                         );
 
-                    console.log('🔍 Group row check:', isGroupRow);
+                    debugLog('🔍 Group row check:', isGroupRow);
 
                     if (isGroupRow) {
-                        console.log(
+                        debugLog(
                             '🔍 Group row detected - calling original onClick only'
                         );
                         // For group rows, only allow the original onClick handler (for expand/collapse)
@@ -2128,7 +2176,7 @@ const DataGrid = forwardRef(
                         '.InovuaReactDataGrid__cell'
                     );
 
-                    console.log('🔍 Cell element in row handler:', cellElement);
+                    debugLog('🔍 Cell element in row handler:', cellElement);
 
                     // Add null check to prevent errors when cellElement is null
                     if (!cellElement) {
@@ -2144,14 +2192,14 @@ const DataGrid = forwardRef(
 
                     const column = rowProps.columns[columnIndex];
 
-                    console.log('🔍 Row handler column analysis:', {
+                    debugLog('🔍 Row handler column analysis:', {
                         columnIndex: columnIndex,
                         columnId: column?.id,
                         isCheckboxColumn: column?.id === '__checkbox-column',
                     });
 
                     if (column.id === '__checkbox-column') {
-                        console.log(
+                        debugLog(
                             '🔍 Checkbox column clicked - handling checkbox logic'
                         );
                         // For checkbox column clicks, we need to handle them specially
@@ -2199,14 +2247,14 @@ const DataGrid = forwardRef(
                             onClick(event);
                         }
                     } else {
-                        console.log(
+                        debugLog(
                             '🔍 Non-checkbox column - calling onRowClick'
                         );
                         // For non-checkbox columns, handle normal row clicks
                         // But do NOT trigger checkbox selection
                         onRowClick(rowProps, event);
 
-                        console.log(
+                        debugLog(
                             '🔍 Calling original onClick handler:',
                             !!onClick
                         );
@@ -2787,12 +2835,12 @@ const DataGrid = forwardRef(
             // Check function-based condition if it exists
             if (allow && s.condition && typeof s.condition === 'function') {
                 try {
-                    console.log('🔍 DataGrid: Evaluating condition for setting:', s.id, 'with data:', d);
+                    debugLog('🔍 DataGrid: Evaluating condition for setting:', s.id, 'with data:', d);
                     const conditionResult = s.condition(d);
-                    console.log('🔍 DataGrid: Condition result:', conditionResult, 'for setting:', s.id);
+                    debugLog('🔍 DataGrid: Condition result:', conditionResult, 'for setting:', s.id);
                     if (!conditionResult) {
                         allow = false;
-                        console.log('🔍 DataGrid: Setting blocked by condition:', s.id);
+                        debugLog('🔍 DataGrid: Setting blocked by condition:', s.id);
                     }
                 } catch (error) {
                     console.warn('🔍 DataGrid: Condition function error for setting:', s.id, error);
@@ -2852,7 +2900,7 @@ const DataGrid = forwardRef(
                         return null;
                 }
             } else {
-                console.log('🔍 Setting NOT rendered (allow=false):', {
+                debugLog('🔍 Setting NOT rendered (allow=false):', {
                     settingId: s.id,
                     reason: 'filtered out by permissions or active conditions',
                 });
@@ -3420,7 +3468,7 @@ const DataGrid = forwardRef(
                                     shouldAutoEnableWordWrap &&
                                     column.wordWrap !== true
                                 ) {
-                                    console.log(
+                                    debugLog(
                                         `DataGrid: Auto-enabled wordWrap for column "${columnId}" (${column.label})`
                                     );
                                 }
@@ -3445,7 +3493,7 @@ const DataGrid = forwardRef(
 
                                             // Debug logging for wordWrap cell rendering
                                             if (column.wordWrap === true) {
-                                                console.log(
+                                                debugLog(
                                                     'DataGrid DEBUG - Rendering WordWrap Cell:',
                                                     {
                                                         columnId,
@@ -3827,7 +3875,7 @@ const DataGrid = forwardRef(
 
             if (userPreferredLimit && userPreferredLimit > 0) {
                 // User has a preference, don't override it
-                console.log('[DataGrid] Respecting user preference, not auto-calculating limit:', userPreferredLimit);
+                debugLog('[DataGrid] Respecting user preference, not auto-calculating limit:', userPreferredLimit);
             } else if (ajaxSetting?.take >= 35) {
                 setLimit(ajaxSetting.take);
             } else {
@@ -4033,7 +4081,7 @@ const DataGrid = forwardRef(
                                               } else {
                                                   newState[groupValue] = true;
                                               }
-                                              console.log(
+                                              debugLog(
                                                   'Updated collapsed groups:',
                                                   newState
                                               );
@@ -4152,7 +4200,7 @@ const DataGrid = forwardRef(
                                               if (
                                                   groupClickTimeoutRef.current
                                               ) {
-                                                  console.log(
+                                                  debugLog(
                                                       '🖱️ Ignoring rapid click'
                                                   );
                                                   return;
@@ -4167,7 +4215,7 @@ const DataGrid = forwardRef(
                                                       'input[type="checkbox"]'
                                                   )
                                               ) {
-                                                  console.log(
+                                                  debugLog(
                                                       '🖱️ Ignoring click on expand button or checkbox'
                                                   );
                                                   return;

package/src/components/Form.jsx

@@ -2416,6 +2416,38 @@ function Form({
                 toast.error('Failed to fetch data:', error);
             }
         } else {
+            // Bulk edit opens without a record fetch (columnId is null), so
+            // seed each field with the value the group rows already share —
+            // otherwise saved values (e.g. an assigned user) render blank and
+            // required fields force a re-pick on every open.
+            if (bulkEditMode && bulkEditGroupData?.groupRows?.length) {
+                const modalFields =
+                    bulkEditGroupData.iconConfig?.formModal?.fields || [];
+
+                formSettings.fields.forEach((item) => {
+                    const { id, type, parent } = item;
+
+                    if (parent) return;
+                    if (modalFields.length && !modalFields.includes(id)) return;
+
+                    const values = bulkEditGroupData.groupRows.map(
+                        (row) => row?.[id]
+                    );
+                    const first = values[0];
+                    const isShared =
+                        first !== undefined &&
+                        first !== null &&
+                        first !== '' &&
+                        values.every((value) => value === first);
+
+                    if (isShared) {
+                        _formData[id] = ['date', 'datetime'].includes(type)
+                            ? moment(first).toDate()
+                            : first;
+                    }
+                });
+            }
+
             setFormData(_formData);
         }
     };

package/src/components/Navigation.jsx

@@ -11,6 +11,7 @@ import {
     UserSearch,
     ClipboardCheck,
     LogOut,
+    Settings,
     Shield,
     Image,
     Phone,
@@ -238,6 +239,7 @@ function Navigation({
             phone: Phone,
             shield: Shield,
             signOut: LogOut,
+            settings: Settings,
             search: Search,
             userSearch: UserSearch,
             clipboardCheck: ClipboardCheck,
@@ -259,7 +261,6 @@ function Navigation({
             return (
                 <li>
                     <button
-                        title="Scan Business Card"
                         data-tooltip-id="system-tooltip"
                         data-tooltip-content="Scan Business Card"
                         onClick={() => setShowBusinessCardOcr(true)}
@@ -284,7 +285,6 @@ function Navigation({
             return (
                 <li>
                     <button
-                        title={n.label}
                         data-tooltip-id="system-tooltip"
                         data-tooltip-content={n.label}
                         onClick={handleLogout}
@@ -305,7 +305,6 @@ function Navigation({
                         data-tooltip-content={n.label}
                         className={`${activeClass}`}
                         target={n.target ? n.target : '_self'}
-                        title={n.label}
                     >
                         {IconComponent && (
                             <IconComponent size={19} strokeWidth={2} />

package/src/components/TableFilter.jsx

@@ -373,7 +373,19 @@ function TableFilter({
                 )
             )
         ) {
-            window.open(url);
+            // Items with target "_self" navigate in the same tab; the
+            // default remains a new window for backward compatibility.
+            const clickedItem =
+                filters.find((f) => f.id === id) ||
+                filters
+                    .flatMap((f) => f.children || [])
+                    .find((c) => c.id === id);
+
+            if (clickedItem?.target === '_self') {
+                window.location.assign(url);
+            } else {
+                window.open(url);
+            }
         }
 
         // Calculate the updated settings

package/src/components/auth/Login.jsx

@@ -2,7 +2,7 @@ import '../styles/global.css';
 
 import React, { useState } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
-import Reveal from 'react-reveal/Reveal';
+import Reveal from '../utils/Reveal';
 import { toast } from 'react-toastify';
 import { User, Lock } from 'lucide-react';
 

package/src/components/auth/Reset.jsx

@@ -1,7 +1,7 @@
 import '../styles/global.css';
 
 import React, { useState } from 'react';
-import Reveal from 'react-reveal/Reveal';
+import Reveal from '../utils/Reveal';
 import { toast } from 'react-toastify';
 import parse from 'html-react-parser';
 import { User } from 'lucide-react';

package/src/components/auth/TwoFactorAuth.jsx

@@ -2,7 +2,7 @@ import '../styles/global.css';
 
 import React, { useState, useEffect } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
-import Reveal from 'react-reveal/Reveal';
+import Reveal from '../utils/Reveal';
 import { toast } from 'react-toastify';
 import { Lock } from 'lucide-react';
 

package/src/components/auth/Verify.jsx

@@ -5,7 +5,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import parse from 'html-react-parser';
 import validator from 'validator';
-import Reveal from 'react-reveal/Reveal';
+import Reveal from '../utils/Reveal';
 
 import CustomFetch from '../Fetch';
 

package/src/components/generic/CmsDetail.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useParams, useNavigate, useLocation } from 'react-router-dom';
-import Reveal from 'react-reveal/Reveal';
+import Reveal from '../utils/Reveal';
 import { ToastContainer } from 'react-toastify';
 import Form from '../Form';
 

package/src/components/generic/CmsIndex.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Outlet } from 'react-router-dom';
-import Reveal from 'react-reveal/Reveal';
+import Reveal from '../utils/Reveal';
 import DataGrid from '../DataGrid';
 
 function CmsIndex({ setting, userProfile }) {

package/src/components/generic/CmsSort.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
-import Reveal from 'react-reveal/Reveal';
+import Reveal from '../utils/Reveal';
 import { arrayMoveImmutable } from 'array-move';
 import { toast } from 'react-toastify';
 import CustomFetch from '../Fetch';

package/src/components/generic/GenericDetail.jsx

@@ -2994,6 +2994,14 @@ function GenericDetail({
                                             {activeTabConfig.export && (
                                                 <button
                                                     className={styles.btn}
+                                                    style={{
+                                                        display: 'inline-flex',
+                                                        alignItems: 'center',
+                                                        justifyContent: 'center',
+                                                        gap: '7px',
+                                                        minWidth: '92px',
+                                                        height: '42px',
+                                                    }}
                                                     onClick={() =>
                                                         handleExport(
                                                             activeTabConfig.export
@@ -3008,6 +3016,14 @@ function GenericDetail({
                                             {activeTabConfig.customAction && (
                                                 <button
                                                     className={styles.btn}
+                                                    style={{
+                                                        display: 'inline-flex',
+                                                        alignItems: 'center',
+                                                        justifyContent: 'center',
+                                                        gap: '7px',
+                                                        minWidth: '92px',
+                                                        height: '42px',
+                                                    }}
                                                     onClick={() =>
                                                         handleCustomAction(
                                                             activeTabConfig.customAction
@@ -3025,6 +3041,14 @@ function GenericDetail({
                                                 <button
                                                     key={index}
                                                     className={styles.btn}
+                                                    style={{
+                                                        display: 'inline-flex',
+                                                        alignItems: 'center',
+                                                        justifyContent: 'center',
+                                                        gap: '7px',
+                                                        minWidth: '92px',
+                                                        height: '42px',
+                                                    }}
                                                     onClick={() =>
                                                         handleCustomAction(customAction)
                                                     }

package/src/components/styles/GenericIndex.module.scss

@@ -211,7 +211,6 @@
     border-radius: var(--br);
     outline: none;
     transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
-    font-size: 1.25em;
 }
 
 .btn:hover:not(:disabled) {

package/src/components/utils/Reveal.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+/**
+ * Drop-in replacement for react-reveal's <Reveal effect="...">, which is
+ * unmaintained and depends on legacy React lifecycles/context removed in
+ * React 19. The effect class (e.g. "fadeInUp") is expected to define its
+ * own @keyframes/duration in the consuming app's CSS; its animation runs
+ * when the element mounts.
+ */
+const Reveal = ({ effect = '', className = '', children, ...rest }) => (
+    <div
+        className={[effect, className].filter(Boolean).join(' ')}
+        {...rest}
+    >
+        {children}
+    </div>
+);
+
+export default Reveal;

package/src/components/utils/debugLog.js

@@ -0,0 +1,20 @@
+/**
+ * Opt-in debug logger. Silent by default so component internals don't spam
+ * the console; enable in a browser with:
+ *   localStorage.setItem('visns-debug', '1')
+ * and disable with localStorage.removeItem('visns-debug').
+ */
+const debugLog = (...args) => {
+    try {
+        if (
+            typeof window !== 'undefined' &&
+            window.localStorage?.getItem('visns-debug')
+        ) {
+            console.log(...args);
+        }
+    } catch (e) {
+        // Storage unavailable (private mode / SSR) — stay silent
+    }
+};
+
+export default debugLog;