indas-ui 0.1.7 → 0.1.9

package/dist/components/dashboard/charts/BoxPlot.js

@@ -56,11 +56,11 @@ export function BoxPlotChart({ data, height = 300, showLegend = false, color = '
             formatter: (params) => {
                 if (params.seriesType === 'boxplot') {
                     const [min, q1, median, q3, max] = params.data;
-                    return `<strong>${categories[params.dataIndex]}</strong><br/>
-            Max: ${max}<br/>
-            Q3: ${q3}<br/>
-            Median: ${median}<br/>
-            Q1: ${q1}<br/>
+                    return `<strong>${categories[params.dataIndex]}</strong><br/>
+            Max: ${max}<br/>
+            Q3: ${q3}<br/>
+            Median: ${median}<br/>
+            Q1: ${q1}<br/>
             Min: ${min}`;
                 }
                 return `Outlier: ${params.data[1]}`;

package/dist/components/dashboard/charts/Gantt.js

@@ -97,36 +97,36 @@ export function GanttChart({ tasks, height = 400, showProgress = true, showToday
                     return '';
                 const duration = getDuration(task.startDate, task.endDate);
                 const progress = task.progress ?? 0;
-                return `
-          <div style="padding: 8px; min-width: 180px;">
-            <div style="font-weight: 600; margin-bottom: 6px; color: ${theme.textColorStrong};">${task.name}</div>
-            <div style="display: grid; gap: 4px; font-size: 12px;">
-              <div style="display: flex; justify-content: space-between;">
-                <span style="color: ${theme.textColor};">Start:</span>
-                <span style="font-weight: 500;">${formatDate(task.startDate)}</span>
-              </div>
-              <div style="display: flex; justify-content: space-between;">
-                <span style="color: ${theme.textColor};">End:</span>
-                <span style="font-weight: 500;">${formatDate(task.endDate)}</span>
-              </div>
-              <div style="display: flex; justify-content: space-between;">
-                <span style="color: ${theme.textColor};">Duration:</span>
-                <span style="font-weight: 500;">${duration} day${duration !== 1 ? 's' : ''}</span>
-              </div>
-              ${showProgress ? `
-              <div style="display: flex; justify-content: space-between;">
-                <span style="color: ${theme.textColor};">Progress:</span>
-                <span style="font-weight: 500; color: ${progress >= 100 ? theme.success : progress >= 50 ? theme.warning : theme.info};">${progress}%</span>
-              </div>
-              ` : ''}
-              ${task.category ? `
-              <div style="display: flex; justify-content: space-between;">
-                <span style="color: ${theme.textColor};">Category:</span>
-                <span style="font-weight: 500;">${task.category}</span>
-              </div>
-              ` : ''}
-            </div>
-          </div>
+                return `
+          <div style="padding: 8px; min-width: 180px;">
+            <div style="font-weight: 600; margin-bottom: 6px; color: ${theme.textColorStrong};">${task.name}</div>
+            <div style="display: grid; gap: 4px; font-size: 12px;">
+              <div style="display: flex; justify-content: space-between;">
+                <span style="color: ${theme.textColor};">Start:</span>
+                <span style="font-weight: 500;">${formatDate(task.startDate)}</span>
+              </div>
+              <div style="display: flex; justify-content: space-between;">
+                <span style="color: ${theme.textColor};">End:</span>
+                <span style="font-weight: 500;">${formatDate(task.endDate)}</span>
+              </div>
+              <div style="display: flex; justify-content: space-between;">
+                <span style="color: ${theme.textColor};">Duration:</span>
+                <span style="font-weight: 500;">${duration} day${duration !== 1 ? 's' : ''}</span>
+              </div>
+              ${showProgress ? `
+              <div style="display: flex; justify-content: space-between;">
+                <span style="color: ${theme.textColor};">Progress:</span>
+                <span style="font-weight: 500; color: ${progress >= 100 ? theme.success : progress >= 50 ? theme.warning : theme.info};">${progress}%</span>
+              </div>
+              ` : ''}
+              ${task.category ? `
+              <div style="display: flex; justify-content: space-between;">
+                <span style="color: ${theme.textColor};">Category:</span>
+                <span style="font-weight: 500;">${task.category}</span>
+              </div>
+              ` : ''}
+            </div>
+          </div>
         `;
             }
         },

package/dist/components/dashboard/charts/Pareto.js

@@ -28,8 +28,8 @@ export function ParetoChart({ data, height = 300, showLegend = true, barColor =
             formatter: (params) => {
                 const bar = params.find((p) => p.seriesType === 'bar');
                 const line = params.find((p) => p.seriesType === 'line');
-                return `${bar?.name}<br/>
-          Value: ${formatNumber(bar?.value)}<br/>
+                return `${bar?.name}<br/>
+          Value: ${formatNumber(bar?.value)}<br/>
           Cumulative: ${line?.value}%`;
             }
         },

package/dist/components/datagrid/DataGrid.js

@@ -1530,15 +1530,15 @@ enableFilterRow = false, initialColumnFilters, }) {
                                                                                             e.preventDefault();
                                                                                             onRowContextMenu(row.original, e);
                                                                                         }
-                                                                                    }, style: getRowProps?.(row.original)?.style, className: `
-                                  cursor-pointer group
-                                  transition-colors duration-150 ease-out
+                                                                                    }, style: getRowProps?.(row.original)?.style, className: `
+                                  cursor-pointer group
+                                  transition-colors duration-150 ease-out
                                   ${isHighlighted
                                                                                         ? 'border-2 border-[rgb(var(--color-primary))] bg-gradient-to-r from-[rgb(var(--color-primary))]/10 to-[rgb(var(--color-primary))]/20 shadow-lg relative'
                                                                                         : isSelected
                                                                                             ? 'bg-[color-mix(in_srgb,rgb(var(--color-primary))_8%,rgb(var(--bg-surface)))] shadow-sm hover:bg-[color-mix(in_srgb,rgb(var(--color-primary))_15%,rgb(var(--bg-surface)))]'
-                                                                                            : 'hover:bg-[color-mix(in_srgb,rgb(var(--color-primary))_5%,rgb(var(--bg-surface)))]'}
-                                  ${getRowProps?.(row.original)?.className ?? ''}
+                                                                                            : 'hover:bg-[color-mix(in_srgb,rgb(var(--color-primary))_5%,rgb(var(--bg-surface)))]'}
+                                  ${getRowProps?.(row.original)?.className ?? ''}
                                 `, children: row.getVisibleCells().map((cell, cellIndex) => (_jsx(CellRenderer, { cell: cell, cellIndex: cellIndex, row: row, enableBacchaSearch: enableBacchaSearch, mainColumnsArray: mainColumnsArray, frozenColumnsState: frozenColumnsState, navigationState: navigationState, columnSearches: columnSearches, isColumnSearchActive: isColumnSearchActive, onColumnSearch: handleColumnSearch, onClearColumnSearch: handleClearColumnSearch, SearchHighlighter: SearchHighlighter, InlineSearchCell: InlineSearchCell, isSelected: isSelected }, cell.id))) }, row.id));
                                                                             }), rowVirtualizer.getVirtualItems().length > 0 && (_jsx("tr", { children: _jsx("td", { colSpan: table.getVisibleFlatColumns().length, style: {
                                                                                         height: `${rowVirtualizer.getTotalSize() -
@@ -1554,15 +1554,15 @@ enableFilterRow = false, initialColumnFilters, }) {
                                                                                     e.preventDefault();
                                                                                     onRowContextMenu(row.original, e);
                                                                                 }
-                                                                            }, rowHeight: rowHeight, style: getRowProps?.(row.original)?.style, className: `
-                                      cursor-pointer group
-                                      transition-colors duration-150 ease-out
+                                                                            }, rowHeight: rowHeight, style: getRowProps?.(row.original)?.style, className: `
+                                      cursor-pointer group
+                                      transition-colors duration-150 ease-out
                                       ${isHighlighted
                                                                                 ? 'border-2 border-primary bg-gradient-to-r from-primary/10 to-primary/20 shadow-lg relative z-10'
                                                                                 : isSelected
                                                                                     ? 'bg-[rgb(var(--bg-selected))] shadow-sm hover:bg-[rgb(var(--bg-hover))]'
-                                                                                    : 'hover:bg-[rgb(var(--bg-hover))]'}
-                                      ${getRowProps?.(row.original)?.className ?? ''}
+                                                                                    : 'hover:bg-[rgb(var(--bg-hover))]'}
+                                      ${getRowProps?.(row.original)?.className ?? ''}
                                     `, children: row.getVisibleCells().map((cell, cellIndex) => (_jsx(CellRenderer, { cell: cell, cellIndex: cellIndex, row: row, enableBacchaSearch: enableBacchaSearch, mainColumnsArray: mainColumnsArray, frozenColumnsState: frozenColumnsState, navigationState: navigationState, columnSearches: columnSearches, isColumnSearchActive: isColumnSearchActive, onColumnSearch: handleColumnSearch, onClearColumnSearch: handleClearColumnSearch, SearchHighlighter: SearchHighlighter, InlineSearchCell: InlineSearchCell, isSelected: isSelected }, cell.id))) }, row.id));
                                                                     })) })) }));
                                                         })() }), enableSummary && summaryConfig && (_jsx(SummaryRow, { table: table, data: processedData, config: summaryConfig, enableRowSelection: enableRowSelection, showDragHandle: isRowReorderingActive }))] }), !loading && table.getRowModel().rows.length === 0 && (_jsx("div", { className: "absolute left-0 right-0 bottom-0 flex items-center justify-center pointer-events-none z-10", style: { top: '44px' }, children: _jsx("span", { className: "text-[rgb(var(--fg-muted))] text-sm", children: "No data available" }) }))] }) }));

package/dist/components/datagrid/controls/menu/view/CardView.js

@@ -152,14 +152,14 @@ export function CardView({ data, columns, onRowClick, selectedRows, onRowSelect,
     return (_jsxs("div", { ref: containerRef, className: "outline-none", tabIndex: 0, onKeyDown: handleKeyDown, children: [_jsx("div", { className: cfg.pad, children: _jsx("div", { className: `grid ${cfg.grid} ${cfg.gap}`, children: _jsx(AnimatePresence, { initial: false, children: data.map((item, index) => {
                             const isFocused = focusedIndex === index;
                             const itemSelected = isSelected(item);
-                            return (_jsx(motion.div, { ref: (el) => { cardRefs.current[index] = el; }, initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, transition: { duration: 0.12, delay: Math.min(index * 0.015, 0.15) }, className: "group/card outline-none", tabIndex: -1, onClick: () => setFocusedIndex(index), onDoubleClick: () => handleCardClick(item), children: _jsxs("div", { className: `
-                    relative rounded-lg border bg-[rgb(var(--bg-surface))] overflow-hidden h-full
-                    transition-all duration-150
+                            return (_jsx(motion.div, { ref: (el) => { cardRefs.current[index] = el; }, initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, transition: { duration: 0.12, delay: Math.min(index * 0.015, 0.15) }, className: "group/card outline-none", tabIndex: -1, onClick: () => setFocusedIndex(index), onDoubleClick: () => handleCardClick(item), children: _jsxs("div", { className: `
+                    relative rounded-lg border bg-[rgb(var(--bg-surface))] overflow-hidden h-full
+                    transition-all duration-150
                     ${itemSelected
                                         ? 'border-[rgb(var(--color-primary))] shadow-sm'
-                                        : 'border-[rgb(var(--bd-default))] hover:border-[rgb(var(--color-primary))]/40 hover:shadow-sm'}
-                    ${isFocused ? 'ring-2 ring-[rgb(var(--color-primary))]/30 ring-offset-1' : ''}
-                    ${getCardClassName?.(item) ?? ''}
+                                        : 'border-[rgb(var(--bd-default))] hover:border-[rgb(var(--color-primary))]/40 hover:shadow-sm'}
+                    ${isFocused ? 'ring-2 ring-[rgb(var(--color-primary))]/30 ring-offset-1' : ''}
+                    ${getCardClassName?.(item) ?? ''}
                   `, children: [_jsx("div", { className: `absolute left-0 top-0 bottom-0 w-[2px] transition-colors duration-150 ${itemSelected ? 'bg-[rgb(var(--color-primary))]' : 'bg-transparent group-hover/card:bg-[rgb(var(--color-primary))]/30'}` }), _jsxs("div", { className: "pl-3 pr-2.5 py-2.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [onRowSelect && (_jsx("div", { className: "flex-shrink-0", onClick: (e) => e.stopPropagation(), children: _jsx(SelectionCheckbox, { checked: itemSelected, onChange: (checked) => handleCheckboxChange(item, checked), circular: circularCheckboxes, mode: "checkbox" }) })), _jsxs("div", { className: "flex-1 min-w-0 flex items-baseline gap-1.5", children: [_jsx("p", { className: `${cfg.titleText} font-semibold text-[rgb(var(--fg-default))] truncate leading-tight`, children: displayColumns.length > 0 && getDisplayValue(item, displayColumns[0].accessorKey) }), displayColumns.length > 1 && (_jsx("p", { className: `${cfg.subtitleText} text-[rgb(var(--color-primary))] font-medium truncate flex-shrink-0`, children: getDisplayValue(item, displayColumns[1].accessorKey) }))] }), _jsx("div", { className: "flex-shrink-0 opacity-0 group-hover/card:opacity-100 transition-opacity duration-150", onClick: (e) => e.stopPropagation(), children: actionsColumn && actionsColumn.cell?.({
                                                                 row: { original: item },
                                                                 getValue: () => null,

package/dist/components/modals/Modal.js

@@ -25,7 +25,11 @@ const modalSizes = {
  * @param breakpoint - Pixel width threshold (default 768)
  */
 export function useIsMobile(breakpoint = 768) {
-    const [isMobile, setIsMobile] = React.useState(false);
+    return useMobileQuery(breakpoint) ?? false;
+}
+/** As useIsMobile, but null until the width has been read (the first render, and on the server). */
+function useMobileQuery(breakpoint) {
+    const [isMobile, setIsMobile] = React.useState(null);
     React.useEffect(() => {
         const mq = window.matchMedia(`(max-width: ${breakpoint}px)`);
         setIsMobile(mq.matches);
@@ -111,6 +115,12 @@ function Modal({ open, onOpenChange, ...props }) {
     const childRegistry = React.useCallback((delta) => {
         childOpenCountRef.current += delta;
     }, []);
+    // The sentinel outlives one run of the effect below: React Strict Mode runs it, cleans it up and
+    // runs it again at once in development. Retracting in that cleanup meant a `history.back()` that
+    // landed after the replay had pushed a new sentinel, popped that one, and read as a back press:
+    // every modal on a phone closed itself a moment after opening. So the cleanup only marks it for
+    // retraction, a replay in the same tick takes it back, and the retraction happens a microtask later.
+    const sentinelRef = React.useRef(null);
     React.useEffect(() => {
         if (!open)
             return;
@@ -121,8 +131,17 @@ function Modal({ open, onOpenChange, ...props }) {
         // Push a sentinel tagged with THIS modal's identity, so we can tell our own
         // dismissal apart from a nested child retracting its entry. Without the id
         // the parent closes too when a child modal applies or cancels.
-        const id = ++modalSentinelSeq;
-        window.history.pushState({ __modal: true, __modalId: id }, '');
+        let sentinel = sentinelRef.current;
+        if (sentinel?.retracting) {
+            sentinel.retracting = false;
+        }
+        else {
+            sentinel = { id: ++modalSentinelSeq, retracting: false };
+            sentinelRef.current = sentinel;
+            window.history.pushState({ __modal: true, __modalId: sentinel.id }, '');
+        }
+        const mine = sentinel;
+        const id = mine.id;
         let selfPopped = false;
         const onPopState = () => {
             // React only when OUR sentinel is the one that just left the stack.
@@ -146,12 +165,21 @@ function Modal({ open, onOpenChange, ...props }) {
             // Closing normally (Apply / Cancel / X) — retract our own sentinel so the
             // history stack doesn't grow. If the back button already popped it,
             // calling back() again would navigate the real page away.
-            if (selfPopped)
+            if (selfPopped) {
+                sentinelRef.current = null;
                 return;
-            const state = window.history.state;
-            if (state && state.__modal && state.__modalId === id) {
-                window.history.back();
             }
+            mine.retracting = true;
+            queueMicrotask(() => {
+                if (!mine.retracting)
+                    return;
+                if (sentinelRef.current === mine)
+                    sentinelRef.current = null;
+                const state = window.history.state;
+                if (state && state.__modal && state.__modalId === id) {
+                    window.history.back();
+                }
+            });
         };
     }, [open]);
     return (_jsx(ModalHasOpenChildContext.Provider, { value: childOpenCountRef, children: _jsx(ModalDepthContext.Provider, { value: depth, children: _jsx(ModalChildRegistryContext.Provider, { value: childRegistry, children: _jsx(DialogPrimitive.Root, { open: open, onOpenChange: handleOpenChange, ...props }) }) }) }));
@@ -198,7 +226,22 @@ ModalOverlay.displayName = DialogPrimitive.Overlay.displayName;
  */
 const ModalContent = React.forwardRef(({ className, children, hideCloseButton, disableOutsideClick, size, style, 'aria-describedby': ariaDescribedBy, ...props }, ref) => {
     const stableRef = useStableRef(ref);
-    const isMobile = useIsMobile();
+    // The page and the dialog are different trees, so switching between them remounts everything
+    // inside: a form half filled in was wiped when a tablet turned, or a window was dragged, across
+    // the breakpoint. So the layout follows the screen only while closed; open, it keeps the one it
+    // opened with, and catches up once closed. The content exists only while open, so its ref says.
+    const live = useMobileQuery(768);
+    const [open, setOpen] = React.useState(false);
+    const [held, setHeld] = React.useState(null);
+    // The first reading always counts: before it the width is unknown, and a modal open at page load
+    // on a phone must still become the page.
+    if (live !== null && held !== live && (held === null || !open))
+        setHeld(live);
+    const isMobile = held ?? false;
+    const contentRef = React.useCallback((node) => {
+        stableRef(node);
+        setOpen(node !== null);
+    }, [stableRef]);
     // Nested modals must paint above their parent. Radix portals every modal to
     // <body>, so equal z-index makes stacking fall back to DOM order and the
     // child renders behind / overlapping the parent.
@@ -213,12 +256,12 @@ const ModalContent = React.forwardRef(({ className, children, hideCloseButton, d
     }, [hasOpenChild]);
     // On mobile: render as a full-screen page
     if (isMobile) {
-        return (_jsx(DialogPrimitive.Portal, { children: _jsx(DialogPrimitive.Content, { ref: stableRef, "aria-describedby": ariaDescribedBy, style: { zIndex, ...style }, className: cn("fixed inset-0 flex flex-col", "bg-[rgb(var(--bg-surface))]", className), 
+        return (_jsx(DialogPrimitive.Portal, { children: _jsx(DialogPrimitive.Content, { ref: contentRef, "aria-describedby": ariaDescribedBy, style: { zIndex, ...style }, className: cn("fixed inset-0 flex flex-col", "bg-[rgb(var(--bg-surface))]", className), 
                 // Always block outside click on mobile — there's nothing "outside"
                 onInteractOutside: (e) => e.preventDefault(), onEscapeKeyDown: handleEscapeKeyDown, ...props, children: _jsx(ModalMobileContext.Provider, { value: { isMobilePage: true, onClose: undefined }, children: children }) }) }));
     }
     // Desktop: unchanged Radix dialog
-    return (_jsxs(ModalPortal, { children: [_jsx(ModalOverlay, { style: { zIndex: zIndex - 1 } }), _jsxs(DialogPrimitive.Content, { ref: stableRef, "aria-describedby": ariaDescribedBy, style: { zIndex, ...style }, className: cn("fixed left-[50%] top-[50%] grid translate-x-[-50%] translate-y-[-50%]", "border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))] shadow-lg", "rounded-lg sm:rounded-lg", size ? modalSizes[size] : "max-w-lg w-full mx-4 h-auto max-h-[85vh]", 
+    return (_jsxs(ModalPortal, { children: [_jsx(ModalOverlay, { style: { zIndex: zIndex - 1 } }), _jsxs(DialogPrimitive.Content, { ref: contentRef, "aria-describedby": ariaDescribedBy, style: { zIndex, ...style }, className: cn("fixed left-[50%] top-[50%] grid translate-x-[-50%] translate-y-[-50%]", "border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))] shadow-lg", "rounded-lg sm:rounded-lg", size ? modalSizes[size] : "max-w-lg w-full mx-4 h-auto max-h-[85vh]", 
                 // Gap + padding only for standard modals — fullscreen/master/p-0 modals
                 // run their own flush header/body/footer layout, so the gap shows as bands.
                 size !== 'master' && size !== 'fullscreen' && !className?.includes('p-0') && "gap-3 sm:gap-4 p-4 sm:p-6", className), onInteractOutside: (e) => {

package/dist/components/ui/chart.js

@@ -26,16 +26,16 @@ const ChartStyle = ({ id, config }) => {
     }
     return (_jsx("style", { dangerouslySetInnerHTML: {
             __html: Object.entries(THEMES)
-                .map(([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
+                .map(([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
 ${colorConfig
                 .map(([key, itemConfig]) => {
                 const color = itemConfig.theme?.[theme] ||
                     itemConfig.color;
                 return color ? `  --color-${key}: ${color};` : null;
             })
-                .join('\n')}
-}
+                .join('\n')}
+}
 `)
                 .join('\n'),
         } }));

package/dist/contexts/ThemeContext.js

@@ -50,58 +50,58 @@ export function ThemeProvider({ children, defaultTheme = { variant: 'default', m
  * ```
  */
 export function ThemeScript({ storageKey = THEME_CONFIG.storageKey, defaultTheme = 'default', defaultMode = 'light' }) {
-    const script = `
-    (function() {
-      try {
-        // Get saved theme or use default - no system detection
-        var savedTheme;
-        try {
-          savedTheme = JSON.parse(localStorage.getItem('${storageKey}'));
-        } catch (e) {
-          savedTheme = null;
-        }
-
-        // Force light theme with default variant - this is hardcoded
-        var mode = 'light';
-        var variant = 'default';
-
-        // Always use default light theme, no exceptions
-
-        // Remove any existing theme classes
-        var html = document.documentElement;
-        var classList = html.classList;
-        var classesToRemove = [];
-        for (var i = 0; i < classList.length; i++) {
-          var className = classList[i];
-          if (className.startsWith('theme-') || className === 'light' || className === 'dark') {
-            classesToRemove.push(className);
-          }
-        }
-        classesToRemove.forEach(function(className) {
-          html.classList.remove(className);
-        });
-
-        // Add new theme classes
-        html.classList.add('theme-' + variant, mode);
-
-        // CSS variables are handled by CSS classes, no need to set them here
-      } catch (e) {
-        // Fallback: ensure we have default classes
-        var html = document.documentElement;
-        var classList = html.classList;
-        var classesToRemove = [];
-        for (var i = 0; i < classList.length; i++) {
-          var className = classList[i];
-          if (className.startsWith('theme-') || className === 'light' || className === 'dark') {
-            classesToRemove.push(className);
-          }
-        }
-        classesToRemove.forEach(function(className) {
-          html.classList.remove(className);
-        });
-        html.classList.add('theme-${defaultTheme}', '${defaultMode}');
-      }
-    })()
+    const script = `
+    (function() {
+      try {
+        // Get saved theme or use default - no system detection
+        var savedTheme;
+        try {
+          savedTheme = JSON.parse(localStorage.getItem('${storageKey}'));
+        } catch (e) {
+          savedTheme = null;
+        }
+
+        // Force light theme with default variant - this is hardcoded
+        var mode = 'light';
+        var variant = 'default';
+
+        // Always use default light theme, no exceptions
+
+        // Remove any existing theme classes
+        var html = document.documentElement;
+        var classList = html.classList;
+        var classesToRemove = [];
+        for (var i = 0; i < classList.length; i++) {
+          var className = classList[i];
+          if (className.startsWith('theme-') || className === 'light' || className === 'dark') {
+            classesToRemove.push(className);
+          }
+        }
+        classesToRemove.forEach(function(className) {
+          html.classList.remove(className);
+        });
+
+        // Add new theme classes
+        html.classList.add('theme-' + variant, mode);
+
+        // CSS variables are handled by CSS classes, no need to set them here
+      } catch (e) {
+        // Fallback: ensure we have default classes
+        var html = document.documentElement;
+        var classList = html.classList;
+        var classesToRemove = [];
+        for (var i = 0; i < classList.length; i++) {
+          var className = classList[i];
+          if (className.startsWith('theme-') || className === 'light' || className === 'dark') {
+            classesToRemove.push(className);
+          }
+        }
+        classesToRemove.forEach(function(className) {
+          html.classList.remove(className);
+        });
+        html.classList.add('theme-${defaultTheme}', '${defaultMode}');
+      }
+    })()
   `;
     // suppressHydrationWarning: this inline head script is a known target for
     // browser extensions (e.g. ad/popup blockers) that overwrite its content or