tekivex-ui 2.5.12 → 2.5.14

package/src/components/TkxIcon.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { forwardRef, type ReactNode, type SVGAttributes } from 'react';
 import { useTheme } from '../themes';
 import { tkx, cx } from '../engine/tkx';
@@ -680,4 +682,4 @@ export const ICON_CATEGORIES: Record<string, IconName[]> = {
     'file', 'file-text', 'folder', 'folder-open', 'code', 'terminal',
     'lock', 'unlock', 'key', 'shield',
   ],
-};
+};

package/src/components/TkxImage.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useState,
   useEffect,
@@ -274,4 +276,4 @@ export function TkxImage({
       {lightbox}
     </>
   );
-}
+}

package/src/components/TkxInput.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { forwardRef, useId, type InputHTMLAttributes, type ReactNode } from 'react';
 import { useTheme } from '../themes';
 import { sanitizeString } from '../engine/security';
@@ -98,4 +100,4 @@ export const TkxInput = forwardRef<HTMLInputElement, TkxInputProps>(
   },
 );
 
-TkxInput.displayName = 'TkxInput';
+TkxInput.displayName = 'TkxInput';

package/src/components/TkxLayout.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   forwardRef,
   createContext,
@@ -644,4 +646,4 @@ TkxCol.displayName = 'TkxCol';
 //   </TkxLayout>
 //   <TkxFooter>Footer</TkxFooter>
 // </TkxLayout>
-// ══════════════════════════════════════════════════════════════════════════════
+// ══════════════════════════════════════════════════════════════════════════════

package/src/components/TkxList.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { type ReactNode } from 'react';
 import { useTheme } from '../themes';
 import { sanitizeString } from '../engine/security';
@@ -239,4 +241,4 @@ export function TkxList({
       )}
     </div>
   );
-}
+}

package/src/components/TkxLiveFeed.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useState,
   useEffect,
@@ -326,4 +328,4 @@ export function TkxLiveFeed({
 }
 
 // Ensure tkx is referenced (satisfies import requirement)
-void tkx;
+void tkx;

package/src/components/TkxLiveLog.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useState,
   useEffect,
@@ -467,4 +469,4 @@ export function TkxLiveLog({
 }
 
 // Satisfy import requirement
-void tkx;
+void tkx;

package/src/components/TkxLiveMetrics.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useState,
   useEffect,
@@ -310,4 +312,4 @@ export function TkxLiveMetrics({
 }
 
 // Satisfy import requirement
-void tkx;
+void tkx;

package/src/components/TkxLogo.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { type ReactNode, type CSSProperties } from 'react';
 import { useTheme } from '../themes';
 import { useReducedMotion } from '../hooks';
@@ -294,4 +296,4 @@ function splitBrand(
       <span style={{ color: primaryColor }}>{text.slice(split)}</span>
     </>
   );
-}
+}

package/src/components/TkxMasonry.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useState,
   useEffect,
@@ -173,4 +175,4 @@ export function TkxMasonry({
       ))}
     </div>
   );
-}
+}

package/src/components/TkxMentions.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { type ReactNode, useState, useRef, useCallback, useEffect } from 'react';
 import { useTheme } from '../themes';
 import { sanitizeString } from '../engine/security';
@@ -207,4 +209,4 @@ export function TkxMentions({
       )}
     </div>
   );
-}
+}

package/src/components/TkxMenu.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useState,
   useRef,
@@ -1039,4 +1041,4 @@ export function TkxMenu({
   );
 }
 
-TkxMenu.displayName = 'TkxMenu';
+TkxMenu.displayName = 'TkxMenu';

package/src/components/TkxModal.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useEffect, useId, type ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 import { useTheme } from '../themes';
@@ -117,4 +119,4 @@ export function TkxModal({ isOpen, onClose, title, size = 'md', closeOnOverlayCl
     </div>,
     document.body,
   );
-}
+}

package/src/components/TkxNumberInput.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useState,
   useRef,
@@ -405,4 +407,4 @@ export function TkxNumberInput({
   );
 }
 
-TkxNumberInput.displayName = 'TkxNumberInput';
+TkxNumberInput.displayName = 'TkxNumberInput';

package/src/components/TkxOTP.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useState,
   useRef,
@@ -292,4 +294,4 @@ export function TkxOTP({
   );
 }
 
-TkxOTP.displayName = 'TkxOTP';
+TkxOTP.displayName = 'TkxOTP';

package/src/components/TkxPagination.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useState, useId } from 'react';
 import { useTheme } from '../themes';
 import { tkx } from '../engine/tkx';
@@ -385,4 +387,4 @@ export function TkxPagination({
   );
 }
 
-TkxPagination.displayName = 'TkxPagination';
+TkxPagination.displayName = 'TkxPagination';

package/src/components/TkxPlayground.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 // ── TkxPlayground ─────────────────────────────────────────────────────────────
 // In-browser live component playground. Type JSX, see it render instantly.
 // Uses new Function() evaluation, an error boundary, quantum component
@@ -43,6 +45,56 @@ export interface TkxPlaygroundProps {
   examples?: PlaygroundExample[];
   height?: number;
   imports?: Record<string, unknown>;
+  /**
+   * When true, reject code containing high-risk tokens (fetch, XMLHttpRequest,
+   * document.cookie, localStorage, sessionStorage, import(), window.*, eval).
+   * Defense-in-depth — not a true sandbox. Default: true.
+   *
+   * Set to `false` only in trusted developer environments where the playground
+   * input cannot come from an untrusted third party.
+   */
+  strictMode?: boolean;
+  /**
+   * Additional forbidden substrings appended to the default deny list
+   * (when strictMode is on).
+   */
+  forbiddenTokens?: string[];
+}
+
+// Conservative deny list for strictMode. These patterns signal network
+// exfiltration, storage access, or global-scope escape — capabilities that
+// live-playground snippets should never need. Matching is substring-based
+// and case-insensitive; it is intentionally coarse (false-positives are
+// acceptable when the alternative is arbitrary code execution).
+const DEFAULT_FORBIDDEN_TOKENS = [
+  'fetch(',
+  'XMLHttpRequest',
+  'navigator.sendBeacon',
+  'document.cookie',
+  'localStorage',
+  'sessionStorage',
+  'indexedDB',
+  'WebSocket',
+  'EventSource',
+  'import(',
+  'eval(',
+  'new Function(',
+  'postMessage',
+  'window.open',
+  'location.href',
+  'location.replace',
+  'location.assign',
+  'document.write',
+  'crypto.subtle',
+];
+
+function detectForbiddenToken(code: string, extra?: string[]): string | null {
+  const needles = [...DEFAULT_FORBIDDEN_TOKENS, ...(extra ?? [])];
+  const lower = code.toLowerCase();
+  for (const n of needles) {
+    if (lower.includes(n.toLowerCase())) return n;
+  }
+  return null;
 }
 
 // ── Built-in examples ─────────────────────────────────────────────────────────
@@ -194,11 +246,31 @@ function getBabel(): BabelStandalone | null {
 function evalCode(
   code: string,
   importsObj: Record<string, unknown>,
+  opts?: { strictMode?: boolean; forbiddenTokens?: string[] },
 ): { element: ReactNode | null; error: string | null; renderMs: number } {
   const t0 = performance.now();
   try {
     const trimmed = code.trim();
 
+    // Strict-mode defense: block high-risk tokens before evaluation.
+    // Not a sandbox — a layer of protection against accidental exfiltration
+    // when a playground is wired to untrusted input (e.g. shared snippets).
+    if (opts?.strictMode !== false) {
+      const hit = detectForbiddenToken(trimmed, opts?.forbiddenTokens);
+      if (hit) {
+        const renderMs = parseFloat((performance.now() - t0).toFixed(2));
+        return {
+          element: null,
+          error:
+            `Blocked by playground strictMode: code contains "${hit}". ` +
+            `This token is disallowed because playground snippets run in the ` +
+            `page's JavaScript context. If you trust the source, pass ` +
+            `strictMode={false} to <TkxPlayground>.`,
+          renderMs,
+        };
+      }
+    }
+
     // Always wrap user code in a function component so React hooks (useState,
     // useEffect, ...) work — they require an active render context to dispatch.
     // The user can write a single JSX expression OR a function body that returns JSX.
@@ -335,6 +407,8 @@ export function TkxPlayground({
   examples: userExamples,
   height = 480,
   imports = {},
+  strictMode = true,
+  forbiddenTokens,
 }: TkxPlaygroundProps) {
   const theme = useTheme();
   const allExamples = [...BUILT_IN_EXAMPLES, ...(userExamples ?? [])];
@@ -359,10 +433,10 @@ export function TkxPlayground({
   const runEval = useCallback(
     (src: string) => {
       setBoundaryError(null);
-      const result = evalCode(src, imports);
+      const result = evalCode(src, imports, { strictMode, forbiddenTokens });
       setPreview(result);
     },
-    [imports],
+    [imports, strictMode, forbiddenTokens],
   );
 
   useEffect(() => {
@@ -768,4 +842,4 @@ export function TkxPlayground({
   );
 }
 
-TkxPlayground.displayName = 'TkxPlayground';
+TkxPlayground.displayName = 'TkxPlayground';

package/src/components/TkxPopover.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useState,
   useRef,
@@ -292,4 +294,4 @@ export function TkxPopover({
   );
 }
 
-export default TkxPopover;
+export default TkxPopover;

package/src/components/TkxProgress.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { forwardRef, type HTMLAttributes } from 'react';
 import { useTheme } from '../themes';
 import { useReducedMotion } from '../hooks';
@@ -109,4 +111,4 @@ export const TkxProgress = forwardRef<HTMLDivElement, TkxProgressProps>(
   },
 );
 
-TkxProgress.displayName = 'TkxProgress';
+TkxProgress.displayName = 'TkxProgress';

package/src/components/TkxQRCode.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useRef, useEffect, useMemo } from 'react';
 import { useTheme } from '../themes';
 import { sanitizeString } from '../engine/security';
@@ -171,4 +173,4 @@ export function TkxQRCode({
       />
     </div>
   );
-}
+}

package/src/components/TkxQuantumForm.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 // ── TkxQuantumForm ────────────────────────────────────────────────────────────
 // Quantum-AI powered smart form. Field types, validation rules, labels, and
 // placeholders are automatically inferred from field names via
@@ -589,4 +591,4 @@ export function TkxQuantumForm({
   );
 }
 
-TkxQuantumForm.displayName = 'TkxQuantumForm';
+TkxQuantumForm.displayName = 'TkxQuantumForm';

package/src/components/TkxRadio.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   createContext,
   useContext,
@@ -281,4 +283,4 @@ export function TkxRadioGroup({
       </div>
     </RadioGroupContext.Provider>
   );
-}
+}

package/src/components/TkxRating.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useState,
   useRef,
@@ -283,4 +285,4 @@ export function TkxRating({
       )}
     </div>
   );
-}
+}

package/src/components/TkxRealTimeChart.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useState,
   useEffect,
@@ -378,4 +380,4 @@ export function TkxRealTimeChart({
 
 // Satisfy import requirement
 void tkx;
-void sanitizeString;
+void sanitizeString;

package/src/components/TkxResult.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { type ReactNode } from 'react';
 import { useTheme } from '../themes';
 import { sanitizeString } from '../engine/security';
@@ -125,4 +127,4 @@ export function TkxResult({ status, title, subTitle, icon, extra }: TkxResultPro
       )}
     </div>
   );
-}
+}

package/src/components/TkxRichTextDisplay.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useMemo,
   type ReactNode,
@@ -391,4 +393,4 @@ export function TkxRichTextDisplay({
       {renderedBlocks}
     </article>
   );
-}
+}

package/src/components/TkxSegmented.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { type ReactNode, useState, useRef, useEffect, useCallback } from 'react';
 import { useTheme } from '../themes';
 import { sanitizeString } from '../engine/security';
@@ -166,4 +168,4 @@ export function TkxSegmented({
       })}
     </div>
   );
-}
+}

package/src/components/TkxSelect.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useState,
   useRef,
@@ -1125,4 +1127,4 @@ export function TkxSelect({
   );
 }
 
-TkxSelect.displayName = 'TkxSelect';
+TkxSelect.displayName = 'TkxSelect';

package/src/components/TkxSkeleton.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { forwardRef, type HTMLAttributes } from 'react';
 import { useTheme } from '../themes';
 import { useReducedMotion } from '../hooks';
@@ -102,4 +104,4 @@ export const TkxSkeleton = forwardRef<HTMLDivElement, TkxSkeletonProps>(
   },
 );
 
-TkxSkeleton.displayName = 'TkxSkeleton';
+TkxSkeleton.displayName = 'TkxSkeleton';

package/src/components/TkxSlider.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useState,
   useRef,
@@ -490,4 +492,4 @@ export function TkxSlider({
   );
 }
 
-TkxSlider.displayName = 'TkxSlider';
+TkxSlider.displayName = 'TkxSlider';

package/src/components/TkxSnackbar.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useState,
   useEffect,
@@ -311,4 +313,4 @@ export function TkxSnackbar({
     </div>,
     document.body,
   );
-}
+}

package/src/components/TkxSpeedDial.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useState,
   useRef,
@@ -392,4 +394,4 @@ export function TkxSpeedDial({
   );
 }
 
-export default TkxSpeedDial;
+export default TkxSpeedDial;

package/src/components/TkxSpin.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useState,
   useEffect,
@@ -258,4 +260,4 @@ export function TkxSpin({
     },
     spinnerContent,
   );
-}
+}

package/src/components/TkxStatistic.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useState, useEffect, useRef, type ReactNode, type CSSProperties, createElement } from 'react';
 import { useTheme } from '../themes';
 import { sanitizeString } from '../engine/security';
@@ -258,4 +260,4 @@ export function TkxCountdown({
         ),
     ),
   );
-}
+}

package/src/components/TkxStepper.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   type CSSProperties,
   type ReactNode,
@@ -482,4 +484,4 @@ export function TkxStepper({
   );
 }
 
-TkxStepper.displayName = 'TkxStepper';
+TkxStepper.displayName = 'TkxStepper';

package/src/components/TkxTable.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useState,
   useRef,
@@ -419,4 +421,4 @@ export function TkxTable<T extends Record<string, unknown>>({
       </div>
     </div>
   );
-}
+}

package/src/components/TkxTabs.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { createContext, useContext, useState, useRef, useId, type ReactNode, type HTMLAttributes } from 'react';
 import { useTheme } from '../themes';
 import { handleTabsKeyboard } from '../engine/wcag';
@@ -121,4 +123,4 @@ export function TkxTabPanel({ index, children, style, className }: TkxTabPanelPr
       {children}
     </div>
   );
-}
+}

package/src/components/TkxTag.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useState,
   useRef,
@@ -316,4 +318,4 @@ export function TkxTagInput({
       )}
     </div>
   );
-}
+}

package/src/components/TkxThemeBuilder.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 // ══════════════════════════════════════════════════════════════════════════════
 // TkxThemeBuilder — Quantum-powered visual theme builder component
 // Uses real quantum annealing to optimize color palettes.
@@ -682,4 +684,4 @@ export function TkxThemeBuilder({
   );
 }
 
-export default TkxThemeBuilder;
+export default TkxThemeBuilder;

package/src/components/TkxTimeline.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useEffect, useRef, type ReactNode } from 'react';
 import { useTheme } from '../themes';
 import { tkx, cx } from '../engine/tkx';
@@ -300,4 +302,4 @@ export function TkxTimeline({
       })}
     </div>
   );
-}
+}

package/src/components/TkxToast.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useState,
   useEffect,
@@ -282,4 +284,4 @@ export function TkxToastProvider({ position = 'top-right', children }: TkxToastP
     </div>,
     document.body,
   )}</>;
-}
+}

package/src/components/TkxToggle.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { forwardRef, useId, type ButtonHTMLAttributes } from 'react';
 import { useTheme } from '../themes';
 import { useReducedMotion } from '../hooks';
@@ -90,4 +92,4 @@ export const TkxToggle = forwardRef<HTMLButtonElement, TkxToggleProps>(
   },
 );
 
-TkxToggle.displayName = 'TkxToggle';
+TkxToggle.displayName = 'TkxToggle';

package/src/components/TkxToolbar.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useRef,
   useCallback,
@@ -257,4 +259,4 @@ export function TkxToolbar({
   );
 }
 
-export default TkxToolbar;
+export default TkxToolbar;