@zendir/ui 0.5.0 → 0.6.1

package/dist/react/context/DisplaySettingsContext.js

@@ -1,169 +1,218 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import { useState, useEffect, useCallback, useMemo, useContext, createContext } from "react";
-const PRESET_COLORS = {
-  purple: "#8b5cf6",
-  blue: "#3b82f6",
-  cyan: "#06b6d4",
-  teal: "#14b8a6",
-  green: "#10b981",
-  lime: "#84cc16",
-  amber: "#f59e0b",
-  orange: "#f97316",
-  pink: "#ec4899",
-  red: "#ef4444",
-  slate: "#64748b"
+//#region src/react/context/DisplaySettingsContext.tsx
+/**
+* @zendir/ui - DisplaySettingsContext
+*
+* Centralized context for app-wide display preferences.
+* Controls compact mode, accent colors, glass tint, and other display settings.
+*
+* Features:
+* - Compact mode toggle (affects all cards globally)
+* - Accent color selection (for card accents)
+* - Glass tint selection (for transparent themes)
+* - Color target control (both, accent-only, glass-only)
+* - LocalStorage persistence
+*
+* @example
+* ```tsx
+* import { DisplaySettingsProvider, useDisplaySettings } from '@zendir/ui';
+*
+* // Wrap your app
+* <DisplaySettingsProvider>
+*   <App />
+* </DisplaySettingsProvider>
+*
+* // Use in components
+* function MyCard() {
+*   const { compactMode, accentColor } = useDisplaySettings();
+*   return <Card compact={compactMode} />;
+* }
+* ```
+*/
+var PRESET_COLORS = {
+	purple: "#8b5cf6",
+	blue: "#3b82f6",
+	cyan: "#06b6d4",
+	teal: "#14b8a6",
+	green: "#10b981",
+	lime: "#84cc16",
+	amber: "#f59e0b",
+	orange: "#f97316",
+	pink: "#ec4899",
+	red: "#ef4444",
+	slate: "#64748b"
 };
-const GLASS_TINTS = {
-  ...PRESET_COLORS,
-  clear: "rgba(255,255,255,0.05)",
-  dark: "rgba(0,0,0,0.3)"
+var GLASS_TINTS = {
+	...PRESET_COLORS,
+	clear: "rgba(255,255,255,0.05)",
+	dark: "rgba(0,0,0,0.3)"
 };
-const DEFAULT_SETTINGS = {
-  compactMode: false,
-  accentColor: PRESET_COLORS.purple,
-  glassTint: PRESET_COLORS.purple,
-  colorTarget: "both",
-  accentBorders: true
+var DEFAULT_SETTINGS = {
+	compactMode: false,
+	accentColor: PRESET_COLORS.purple,
+	glassTint: PRESET_COLORS.purple,
+	colorTarget: "both",
+	accentBorders: true
 };
-const STORAGE_KEY = "zendir-display-settings";
-const DisplaySettingsContext = createContext(null);
-function DisplaySettingsProvider({
-  children,
-  defaultCompactMode,
-  defaultAccentColor,
-  defaultGlassTint,
-  defaultColorTarget,
-  defaultAccentBorders,
-  persist = true
-}) {
-  const [settings, setSettings] = useState(() => {
-    if (persist && typeof window !== "undefined") {
-      try {
-        const stored = localStorage.getItem(STORAGE_KEY);
-        if (stored) {
-          const parsed = JSON.parse(stored);
-          return {
-            compactMode: parsed.compactMode ?? defaultCompactMode ?? DEFAULT_SETTINGS.compactMode,
-            accentColor: parsed.accentColor ?? defaultAccentColor ?? DEFAULT_SETTINGS.accentColor,
-            glassTint: parsed.glassTint ?? defaultGlassTint ?? DEFAULT_SETTINGS.glassTint,
-            colorTarget: parsed.colorTarget ?? defaultColorTarget ?? DEFAULT_SETTINGS.colorTarget,
-            accentBorders: parsed.accentBorders ?? defaultAccentBorders ?? DEFAULT_SETTINGS.accentBorders
-          };
-        }
-      } catch {
-      }
-    }
-    return {
-      compactMode: defaultCompactMode ?? DEFAULT_SETTINGS.compactMode,
-      accentColor: defaultAccentColor ?? DEFAULT_SETTINGS.accentColor,
-      glassTint: defaultGlassTint ?? DEFAULT_SETTINGS.glassTint,
-      colorTarget: defaultColorTarget ?? DEFAULT_SETTINGS.colorTarget,
-      accentBorders: defaultAccentBorders ?? DEFAULT_SETTINGS.accentBorders
-    };
-  });
-  useEffect(() => {
-    if (persist && typeof window !== "undefined") {
-      try {
-        localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
-      } catch {
-      }
-    }
-  }, [settings, persist]);
-  const setCompactMode = useCallback((value2) => {
-    setSettings((prev) => ({ ...prev, compactMode: value2 }));
-  }, []);
-  const toggleCompactMode = useCallback(() => {
-    setSettings((prev) => ({ ...prev, compactMode: !prev.compactMode }));
-  }, []);
-  const setAccentColor = useCallback((color) => {
-    setSettings((prev) => ({ ...prev, accentColor: color }));
-  }, []);
-  const setGlassTint = useCallback((color) => {
-    setSettings((prev) => ({ ...prev, glassTint: color }));
-  }, []);
-  const setColorTarget = useCallback((target) => {
-    setSettings((prev) => ({ ...prev, colorTarget: target }));
-  }, []);
-  const setColor = useCallback((color) => {
-    setSettings((prev) => {
-      switch (prev.colorTarget) {
-        case "accent":
-          return { ...prev, accentColor: color };
-        case "glass":
-          return { ...prev, glassTint: color };
-        case "both":
-        default:
-          return { ...prev, accentColor: color, glassTint: color };
-      }
-    });
-  }, []);
-  const setAccentBorders = useCallback((value2) => {
-    setSettings((prev) => ({ ...prev, accentBorders: value2 }));
-  }, []);
-  const toggleAccentBorders = useCallback(() => {
-    setSettings((prev) => ({ ...prev, accentBorders: !prev.accentBorders }));
-  }, []);
-  const resetSettings = useCallback(() => {
-    setSettings(DEFAULT_SETTINGS);
-  }, []);
-  const value = useMemo(() => ({
-    ...settings,
-    setCompactMode,
-    toggleCompactMode,
-    setAccentColor,
-    setGlassTint,
-    setColorTarget,
-    setColor,
-    setAccentBorders,
-    toggleAccentBorders,
-    resetSettings
-  }), [
-    settings,
-    setCompactMode,
-    toggleCompactMode,
-    setAccentColor,
-    setGlassTint,
-    setColorTarget,
-    setColor,
-    setAccentBorders,
-    toggleAccentBorders,
-    resetSettings
-  ]);
-  return /* @__PURE__ */ jsx(DisplaySettingsContext.Provider, { value, children });
+var STORAGE_KEY = "zendir-display-settings";
+var DisplaySettingsContext = createContext(null);
+function DisplaySettingsProvider({ children, defaultCompactMode, defaultAccentColor, defaultGlassTint, defaultColorTarget, defaultAccentBorders, persist = true }) {
+	const [settings, setSettings] = useState(() => {
+		if (persist && typeof window !== "undefined") try {
+			const stored = localStorage.getItem(STORAGE_KEY);
+			if (stored) {
+				const parsed = JSON.parse(stored);
+				return {
+					compactMode: parsed.compactMode ?? defaultCompactMode ?? DEFAULT_SETTINGS.compactMode,
+					accentColor: parsed.accentColor ?? defaultAccentColor ?? DEFAULT_SETTINGS.accentColor,
+					glassTint: parsed.glassTint ?? defaultGlassTint ?? DEFAULT_SETTINGS.glassTint,
+					colorTarget: parsed.colorTarget ?? defaultColorTarget ?? DEFAULT_SETTINGS.colorTarget,
+					accentBorders: parsed.accentBorders ?? defaultAccentBorders ?? DEFAULT_SETTINGS.accentBorders
+				};
+			}
+		} catch {}
+		return {
+			compactMode: defaultCompactMode ?? DEFAULT_SETTINGS.compactMode,
+			accentColor: defaultAccentColor ?? DEFAULT_SETTINGS.accentColor,
+			glassTint: defaultGlassTint ?? DEFAULT_SETTINGS.glassTint,
+			colorTarget: defaultColorTarget ?? DEFAULT_SETTINGS.colorTarget,
+			accentBorders: defaultAccentBorders ?? DEFAULT_SETTINGS.accentBorders
+		};
+	});
+	useEffect(() => {
+		if (persist && typeof window !== "undefined") try {
+			localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
+		} catch {}
+	}, [settings, persist]);
+	const setCompactMode = useCallback((value) => {
+		setSettings((prev) => ({
+			...prev,
+			compactMode: value
+		}));
+	}, []);
+	const toggleCompactMode = useCallback(() => {
+		setSettings((prev) => ({
+			...prev,
+			compactMode: !prev.compactMode
+		}));
+	}, []);
+	const setAccentColor = useCallback((color) => {
+		setSettings((prev) => ({
+			...prev,
+			accentColor: color
+		}));
+	}, []);
+	const setGlassTint = useCallback((color) => {
+		setSettings((prev) => ({
+			...prev,
+			glassTint: color
+		}));
+	}, []);
+	const setColorTarget = useCallback((target) => {
+		setSettings((prev) => ({
+			...prev,
+			colorTarget: target
+		}));
+	}, []);
+	const setColor = useCallback((color) => {
+		setSettings((prev) => {
+			switch (prev.colorTarget) {
+				case "accent": return {
+					...prev,
+					accentColor: color
+				};
+				case "glass": return {
+					...prev,
+					glassTint: color
+				};
+				default: return {
+					...prev,
+					accentColor: color,
+					glassTint: color
+				};
+			}
+		});
+	}, []);
+	const setAccentBorders = useCallback((value) => {
+		setSettings((prev) => ({
+			...prev,
+			accentBorders: value
+		}));
+	}, []);
+	const toggleAccentBorders = useCallback(() => {
+		setSettings((prev) => ({
+			...prev,
+			accentBorders: !prev.accentBorders
+		}));
+	}, []);
+	const resetSettings = useCallback(() => {
+		setSettings(DEFAULT_SETTINGS);
+	}, []);
+	const value = useMemo(() => ({
+		...settings,
+		setCompactMode,
+		toggleCompactMode,
+		setAccentColor,
+		setGlassTint,
+		setColorTarget,
+		setColor,
+		setAccentBorders,
+		toggleAccentBorders,
+		resetSettings
+	}), [
+		settings,
+		setCompactMode,
+		toggleCompactMode,
+		setAccentColor,
+		setGlassTint,
+		setColorTarget,
+		setColor,
+		setAccentBorders,
+		toggleAccentBorders,
+		resetSettings
+	]);
+	return /* @__PURE__ */ jsx(DisplaySettingsContext.Provider, {
+		value,
+		children
+	});
 }
+/**
+* Access display settings context
+* Must be used within a DisplaySettingsProvider
+*/
 function useDisplaySettings() {
-  const context = useContext(DisplaySettingsContext);
-  if (!context) {
-    throw new Error("useDisplaySettings must be used within a DisplaySettingsProvider");
-  }
-  return context;
+	const context = useContext(DisplaySettingsContext);
+	if (!context) throw new Error("useDisplaySettings must be used within a DisplaySettingsProvider");
+	return context;
 }
+/**
+* Optional hook that returns null if not within provider
+* Useful for components that should work with or without the provider
+*/
 function useDisplaySettingsOptional() {
-  return useContext(DisplaySettingsContext);
+	return useContext(DisplaySettingsContext);
 }
+/**
+* Get effective compact mode value
+* Priority: explicit prop > context value > default (false)
+*/
 function getEffectiveCompactMode(propValue, contextValue) {
-  if (propValue !== void 0) return propValue;
-  if (contextValue !== void 0) return contextValue;
-  return false;
+	if (propValue !== void 0) return propValue;
+	if (contextValue !== void 0) return contextValue;
+	return false;
 }
+/**
+* Hook to get card border style based on accentBorders setting
+* Returns the appropriate border style for transparent themes
+*/
 function useCardBorderStyle(tokens, isTransparentTheme) {
-  const displaySettings = useDisplaySettingsOptional();
-  const accentBorders = (displaySettings == null ? void 0 : displaySettings.accentBorders) ?? true;
-  if (!isTransparentTheme) {
-    return tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` };
-  }
-  if (accentBorders) {
-    return tokens.colors.border.cardStyle ?? {};
-  }
-  return { border: "1px solid rgba(255, 255, 255, 0.08)" };
+	const accentBorders = useDisplaySettingsOptional()?.accentBorders ?? true;
+	if (!isTransparentTheme) return tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` };
+	if (accentBorders) return tokens.colors.border.cardStyle ?? {};
+	return { border: "1px solid rgba(255, 255, 255, 0.08)" };
 }
-export {
-  DisplaySettingsProvider,
-  GLASS_TINTS,
-  PRESET_COLORS,
-  getEffectiveCompactMode,
-  useCardBorderStyle,
-  useDisplaySettings,
-  useDisplaySettingsOptional
-};
-//# sourceMappingURL=DisplaySettingsContext.js.map
+//#endregion
+export { DisplaySettingsProvider, DisplaySettingsProvider as default, GLASS_TINTS, PRESET_COLORS, getEffectiveCompactMode, useCardBorderStyle, useDisplaySettings, useDisplaySettingsOptional };
+
+//# sourceMappingURL=DisplaySettingsContext.js.map

package/dist/react/context/DisplaySettingsContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"DisplaySettingsContext.js","sources":["../../../src/react/context/DisplaySettingsContext.tsx"],"sourcesContent":["/**\n * @zendir/ui - DisplaySettingsContext\n * \n * Centralized context for app-wide display preferences.\n * Controls compact mode, accent colors, glass tint, and other display settings.\n * \n * Features:\n * - Compact mode toggle (affects all cards globally)\n * - Accent color selection (for card accents)\n * - Glass tint selection (for transparent themes)\n * - Color target control (both, accent-only, glass-only)\n * - LocalStorage persistence\n * \n * @example\n * ```tsx\n * import { DisplaySettingsProvider, useDisplaySettings } from '@zendir/ui';\n * \n * // Wrap your app\n * <DisplaySettingsProvider>\n *   <App />\n * </DisplaySettingsProvider>\n * \n * // Use in components\n * function MyCard() {\n *   const { compactMode, accentColor } = useDisplaySettings();\n *   return <Card compact={compactMode} />;\n * }\n * ```\n */\n\nimport React, { createContext, useContext, useState, useCallback, useMemo, useEffect, type ReactNode } from 'react';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport type ColorTarget = 'both' | 'accent' | 'glass';\n\nexport interface DisplaySettings {\n  /** Global compact mode - affects all cards */\n  compactMode: boolean;\n  \n  /** Accent color for cards and UI elements */\n  accentColor: string;\n  \n  /** Glass tint color for transparent themes */\n  glassTint: string;\n  \n  /** Which color setting to apply: both, accent-only, or glass-only */\n  colorTarget: ColorTarget;\n  \n  /** Enable accent-colored borders on cards (for transparent themes) */\n  accentBorders: boolean;\n}\n\nexport interface DisplaySettingsContextValue extends DisplaySettings {\n  /** Set compact mode on/off */\n  setCompactMode: (value: boolean) => void;\n  \n  /** Toggle compact mode */\n  toggleCompactMode: () => void;\n  \n  /** Set accent color */\n  setAccentColor: (color: string) => void;\n  \n  /** Set glass tint color */\n  setGlassTint: (color: string) => void;\n  \n  /** Set which color setting to apply */\n  setColorTarget: (target: ColorTarget) => void;\n  \n  /** Set a color that applies based on current target */\n  setColor: (color: string) => void;\n  \n  /** Set accent borders on/off */\n  setAccentBorders: (value: boolean) => void;\n  \n  /** Toggle accent borders */\n  toggleAccentBorders: () => void;\n  \n  /** Reset all settings to defaults */\n  resetSettings: () => void;\n}\n\n// =============================================================================\n// Preset Colors\n// =============================================================================\n\nexport const PRESET_COLORS = {\n  purple: '#8b5cf6',\n  blue: '#3b82f6',\n  cyan: '#06b6d4',\n  teal: '#14b8a6',\n  green: '#10b981',\n  lime: '#84cc16',\n  amber: '#f59e0b',\n  orange: '#f97316',\n  pink: '#ec4899',\n  red: '#ef4444',\n  slate: '#64748b',\n} as const;\n\nexport const GLASS_TINTS = {\n  ...PRESET_COLORS,\n  clear: 'rgba(255,255,255,0.05)',\n  dark: 'rgba(0,0,0,0.3)',\n} as const;\n\nexport type PresetColorKey = keyof typeof PRESET_COLORS;\nexport type GlassTintKey = keyof typeof GLASS_TINTS;\n\n// =============================================================================\n// Default Values\n// =============================================================================\n\nconst DEFAULT_SETTINGS: DisplaySettings = {\n  compactMode: false,\n  accentColor: PRESET_COLORS.purple,\n  glassTint: PRESET_COLORS.purple,\n  colorTarget: 'both',\n  accentBorders: true,\n};\n\nconst STORAGE_KEY = 'zendir-display-settings';\n\n// =============================================================================\n// Context\n// =============================================================================\n\nconst DisplaySettingsContext = createContext<DisplaySettingsContextValue | null>(null);\n\n// =============================================================================\n// Provider Props\n// =============================================================================\n\nexport interface DisplaySettingsProviderProps {\n  children: ReactNode;\n  \n  /** Initial compact mode state */\n  defaultCompactMode?: boolean;\n  \n  /** Initial accent color */\n  defaultAccentColor?: string;\n  \n  /** Initial glass tint color */\n  defaultGlassTint?: string;\n  \n  /** Initial color target */\n  defaultColorTarget?: ColorTarget;\n  \n  /** Initial accent borders state */\n  defaultAccentBorders?: boolean;\n  \n  /** Enable localStorage persistence (default: true) */\n  persist?: boolean;\n}\n\n// =============================================================================\n// Provider Component\n// =============================================================================\n\nexport function DisplaySettingsProvider({\n  children,\n  defaultCompactMode,\n  defaultAccentColor,\n  defaultGlassTint,\n  defaultColorTarget,\n  defaultAccentBorders,\n  persist = true,\n}: DisplaySettingsProviderProps): React.ReactElement {\n  // Initialize state from localStorage or defaults\n  const [settings, setSettings] = useState<DisplaySettings>(() => {\n    if (persist && typeof window !== 'undefined') {\n      try {\n        const stored = localStorage.getItem(STORAGE_KEY);\n        if (stored) {\n          const parsed = JSON.parse(stored);\n          return {\n            compactMode: parsed.compactMode ?? defaultCompactMode ?? DEFAULT_SETTINGS.compactMode,\n            accentColor: parsed.accentColor ?? defaultAccentColor ?? DEFAULT_SETTINGS.accentColor,\n            glassTint: parsed.glassTint ?? defaultGlassTint ?? DEFAULT_SETTINGS.glassTint,\n            colorTarget: parsed.colorTarget ?? defaultColorTarget ?? DEFAULT_SETTINGS.colorTarget,\n            accentBorders: parsed.accentBorders ?? defaultAccentBorders ?? DEFAULT_SETTINGS.accentBorders,\n          };\n        }\n      } catch {\n        // Ignore parse errors\n      }\n    }\n    \n    return {\n      compactMode: defaultCompactMode ?? DEFAULT_SETTINGS.compactMode,\n      accentColor: defaultAccentColor ?? DEFAULT_SETTINGS.accentColor,\n      glassTint: defaultGlassTint ?? DEFAULT_SETTINGS.glassTint,\n      colorTarget: defaultColorTarget ?? DEFAULT_SETTINGS.colorTarget,\n      accentBorders: defaultAccentBorders ?? DEFAULT_SETTINGS.accentBorders,\n    };\n  });\n  \n  // Persist to localStorage when settings change\n  useEffect(() => {\n    if (persist && typeof window !== 'undefined') {\n      try {\n        localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));\n      } catch {\n        // Ignore storage errors\n      }\n    }\n  }, [settings, persist]);\n  \n  // Setters\n  const setCompactMode = useCallback((value: boolean) => {\n    setSettings(prev => ({ ...prev, compactMode: value }));\n  }, []);\n  \n  const toggleCompactMode = useCallback(() => {\n    setSettings(prev => ({ ...prev, compactMode: !prev.compactMode }));\n  }, []);\n  \n  const setAccentColor = useCallback((color: string) => {\n    setSettings(prev => ({ ...prev, accentColor: color }));\n  }, []);\n  \n  const setGlassTint = useCallback((color: string) => {\n    setSettings(prev => ({ ...prev, glassTint: color }));\n  }, []);\n  \n  const setColorTarget = useCallback((target: ColorTarget) => {\n    setSettings(prev => ({ ...prev, colorTarget: target }));\n  }, []);\n  \n  // Set color based on current target\n  const setColor = useCallback((color: string) => {\n    setSettings(prev => {\n      switch (prev.colorTarget) {\n        case 'accent':\n          return { ...prev, accentColor: color };\n        case 'glass':\n          return { ...prev, glassTint: color };\n        case 'both':\n        default:\n          return { ...prev, accentColor: color, glassTint: color };\n      }\n    });\n  }, []);\n  \n  const setAccentBorders = useCallback((value: boolean) => {\n    setSettings(prev => ({ ...prev, accentBorders: value }));\n  }, []);\n  \n  const toggleAccentBorders = useCallback(() => {\n    setSettings(prev => ({ ...prev, accentBorders: !prev.accentBorders }));\n  }, []);\n  \n  const resetSettings = useCallback(() => {\n    setSettings(DEFAULT_SETTINGS);\n  }, []);\n  \n  // Memoized context value\n  const value = useMemo<DisplaySettingsContextValue>(() => ({\n    ...settings,\n    setCompactMode,\n    toggleCompactMode,\n    setAccentColor,\n    setGlassTint,\n    setColorTarget,\n    setColor,\n    setAccentBorders,\n    toggleAccentBorders,\n    resetSettings,\n  }), [\n    settings,\n    setCompactMode,\n    toggleCompactMode,\n    setAccentColor,\n    setGlassTint,\n    setColorTarget,\n    setColor,\n    setAccentBorders,\n    toggleAccentBorders,\n    resetSettings,\n  ]);\n  \n  return (\n    <DisplaySettingsContext.Provider value={value}>\n      {children}\n    </DisplaySettingsContext.Provider>\n  );\n}\n\n// =============================================================================\n// Hook\n// =============================================================================\n\n/**\n * Access display settings context\n * Must be used within a DisplaySettingsProvider\n */\nexport function useDisplaySettings(): DisplaySettingsContextValue {\n  const context = useContext(DisplaySettingsContext);\n  \n  if (!context) {\n    throw new Error('useDisplaySettings must be used within a DisplaySettingsProvider');\n  }\n  \n  return context;\n}\n\n/**\n * Optional hook that returns null if not within provider\n * Useful for components that should work with or without the provider\n */\nexport function useDisplaySettingsOptional(): DisplaySettingsContextValue | null {\n  return useContext(DisplaySettingsContext);\n}\n\n// =============================================================================\n// Utility Functions\n// =============================================================================\n\n/**\n * Get effective compact mode value\n * Priority: explicit prop > context value > default (false)\n */\nexport function getEffectiveCompactMode(\n  propValue: boolean | undefined,\n  contextValue: boolean | undefined\n): boolean {\n  if (propValue !== undefined) return propValue;\n  if (contextValue !== undefined) return contextValue;\n  return false;\n}\n\n/**\n * Get effective accent borders value\n * Priority: explicit prop > context value > default (true)\n */\nexport function getEffectiveAccentBorders(\n  propValue: boolean | undefined,\n  contextValue: boolean | undefined\n): boolean {\n  if (propValue !== undefined) return propValue;\n  if (contextValue !== undefined) return contextValue;\n  return true;\n}\n\n/**\n * Hook to get card border style based on accentBorders setting\n * Returns the appropriate border style for transparent themes\n */\nexport function useCardBorderStyle(\n  tokens: any,\n  isTransparentTheme: boolean\n): React.CSSProperties {\n  const displaySettings = useDisplaySettingsOptional();\n  const accentBorders = displaySettings?.accentBorders ?? true;\n  \n  if (!isTransparentTheme) {\n    return tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` };\n  }\n  \n  if (accentBorders) {\n    return tokens.colors.border.cardStyle ?? {};\n  }\n  \n  // Fallback to subtle neutral border when accent borders disabled\n  return { border: '1px solid rgba(255, 255, 255, 0.08)' };\n}\n\nexport default DisplaySettingsProvider;\n"],"names":["value"],"mappings":"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"}
+{"version":3,"file":"DisplaySettingsContext.js","names":[],"sources":["../../../src/react/context/DisplaySettingsContext.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - DisplaySettingsContext\r\n *\r\n * Centralized context for app-wide display preferences.\r\n * Controls compact mode, accent colors, glass tint, and other display settings.\r\n *\r\n * Features:\r\n * - Compact mode toggle (affects all cards globally)\r\n * - Accent color selection (for card accents)\r\n * - Glass tint selection (for transparent themes)\r\n * - Color target control (both, accent-only, glass-only)\r\n * - LocalStorage persistence\r\n *\r\n * @example\r\n * ```tsx\r\n * import { DisplaySettingsProvider, useDisplaySettings } from '@zendir/ui';\r\n *\r\n * // Wrap your app\r\n * <DisplaySettingsProvider>\r\n *   <App />\r\n * </DisplaySettingsProvider>\r\n *\r\n * // Use in components\r\n * function MyCard() {\r\n *   const { compactMode, accentColor } = useDisplaySettings();\r\n *   return <Card compact={compactMode} />;\r\n * }\r\n * ```\r\n */\r\n\r\nimport React, {\r\n  createContext,\r\n  useContext,\r\n  useState,\r\n  useCallback,\r\n  useMemo,\r\n  useEffect,\r\n  type ReactNode,\r\n} from \"react\";\r\n\r\n// =============================================================================\r\n// Types\r\n// =============================================================================\r\n\r\nexport type ColorTarget = \"both\" | \"accent\" | \"glass\";\r\n\r\nexport interface DisplaySettings {\r\n  /** Global compact mode - affects all cards */\r\n  compactMode: boolean;\r\n\r\n  /** Accent color for cards and UI elements */\r\n  accentColor: string;\r\n\r\n  /** Glass tint color for transparent themes */\r\n  glassTint: string;\r\n\r\n  /** Which color setting to apply: both, accent-only, or glass-only */\r\n  colorTarget: ColorTarget;\r\n\r\n  /** Enable accent-colored borders on cards (for transparent themes) */\r\n  accentBorders: boolean;\r\n}\r\n\r\nexport interface DisplaySettingsContextValue extends DisplaySettings {\r\n  /** Set compact mode on/off */\r\n  setCompactMode: (value: boolean) => void;\r\n\r\n  /** Toggle compact mode */\r\n  toggleCompactMode: () => void;\r\n\r\n  /** Set accent color */\r\n  setAccentColor: (color: string) => void;\r\n\r\n  /** Set glass tint color */\r\n  setGlassTint: (color: string) => void;\r\n\r\n  /** Set which color setting to apply */\r\n  setColorTarget: (target: ColorTarget) => void;\r\n\r\n  /** Set a color that applies based on current target */\r\n  setColor: (color: string) => void;\r\n\r\n  /** Set accent borders on/off */\r\n  setAccentBorders: (value: boolean) => void;\r\n\r\n  /** Toggle accent borders */\r\n  toggleAccentBorders: () => void;\r\n\r\n  /** Reset all settings to defaults */\r\n  resetSettings: () => void;\r\n}\r\n\r\n// =============================================================================\r\n// Preset Colors\r\n// =============================================================================\r\n\r\nexport const PRESET_COLORS = {\r\n  purple: \"#8b5cf6\",\r\n  blue: \"#3b82f6\",\r\n  cyan: \"#06b6d4\",\r\n  teal: \"#14b8a6\",\r\n  green: \"#10b981\",\r\n  lime: \"#84cc16\",\r\n  amber: \"#f59e0b\",\r\n  orange: \"#f97316\",\r\n  pink: \"#ec4899\",\r\n  red: \"#ef4444\",\r\n  slate: \"#64748b\",\r\n} as const;\r\n\r\nexport const GLASS_TINTS = {\r\n  ...PRESET_COLORS,\r\n  clear: \"rgba(255,255,255,0.05)\",\r\n  dark: \"rgba(0,0,0,0.3)\",\r\n} as const;\r\n\r\nexport type PresetColorKey = keyof typeof PRESET_COLORS;\r\nexport type GlassTintKey = keyof typeof GLASS_TINTS;\r\n\r\n// =============================================================================\r\n// Default Values\r\n// =============================================================================\r\n\r\nconst DEFAULT_SETTINGS: DisplaySettings = {\r\n  compactMode: false,\r\n  accentColor: PRESET_COLORS.purple,\r\n  glassTint: PRESET_COLORS.purple,\r\n  colorTarget: \"both\",\r\n  accentBorders: true,\r\n};\r\n\r\nconst STORAGE_KEY = \"zendir-display-settings\";\r\n\r\n// =============================================================================\r\n// Context\r\n// =============================================================================\r\n\r\nconst DisplaySettingsContext =\r\n  createContext<DisplaySettingsContextValue | null>(null);\r\n\r\n// =============================================================================\r\n// Provider Props\r\n// =============================================================================\r\n\r\nexport interface DisplaySettingsProviderProps {\r\n  children: ReactNode;\r\n\r\n  /** Initial compact mode state */\r\n  defaultCompactMode?: boolean;\r\n\r\n  /** Initial accent color */\r\n  defaultAccentColor?: string;\r\n\r\n  /** Initial glass tint color */\r\n  defaultGlassTint?: string;\r\n\r\n  /** Initial color target */\r\n  defaultColorTarget?: ColorTarget;\r\n\r\n  /** Initial accent borders state */\r\n  defaultAccentBorders?: boolean;\r\n\r\n  /** Enable localStorage persistence (default: true) */\r\n  persist?: boolean;\r\n}\r\n\r\n// =============================================================================\r\n// Provider Component\r\n// =============================================================================\r\n\r\nexport function DisplaySettingsProvider({\r\n  children,\r\n  defaultCompactMode,\r\n  defaultAccentColor,\r\n  defaultGlassTint,\r\n  defaultColorTarget,\r\n  defaultAccentBorders,\r\n  persist = true,\r\n}: DisplaySettingsProviderProps): React.ReactElement {\r\n  // Initialize state from localStorage or defaults\r\n  const [settings, setSettings] = useState<DisplaySettings>(() => {\r\n    if (persist && typeof window !== \"undefined\") {\r\n      try {\r\n        const stored = localStorage.getItem(STORAGE_KEY);\r\n        if (stored) {\r\n          const parsed = JSON.parse(stored);\r\n          return {\r\n            compactMode:\r\n              parsed.compactMode ??\r\n              defaultCompactMode ??\r\n              DEFAULT_SETTINGS.compactMode,\r\n            accentColor:\r\n              parsed.accentColor ??\r\n              defaultAccentColor ??\r\n              DEFAULT_SETTINGS.accentColor,\r\n            glassTint:\r\n              parsed.glassTint ??\r\n              defaultGlassTint ??\r\n              DEFAULT_SETTINGS.glassTint,\r\n            colorTarget:\r\n              parsed.colorTarget ??\r\n              defaultColorTarget ??\r\n              DEFAULT_SETTINGS.colorTarget,\r\n            accentBorders:\r\n              parsed.accentBorders ??\r\n              defaultAccentBorders ??\r\n              DEFAULT_SETTINGS.accentBorders,\r\n          };\r\n        }\r\n      } catch {\r\n        // Ignore parse errors\r\n      }\r\n    }\r\n\r\n    return {\r\n      compactMode: defaultCompactMode ?? DEFAULT_SETTINGS.compactMode,\r\n      accentColor: defaultAccentColor ?? DEFAULT_SETTINGS.accentColor,\r\n      glassTint: defaultGlassTint ?? DEFAULT_SETTINGS.glassTint,\r\n      colorTarget: defaultColorTarget ?? DEFAULT_SETTINGS.colorTarget,\r\n      accentBorders: defaultAccentBorders ?? DEFAULT_SETTINGS.accentBorders,\r\n    };\r\n  });\r\n\r\n  // Persist to localStorage when settings change\r\n  useEffect(() => {\r\n    if (persist && typeof window !== \"undefined\") {\r\n      try {\r\n        localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));\r\n      } catch {\r\n        // Ignore storage errors\r\n      }\r\n    }\r\n  }, [settings, persist]);\r\n\r\n  // Setters\r\n  const setCompactMode = useCallback((value: boolean) => {\r\n    setSettings((prev) => ({ ...prev, compactMode: value }));\r\n  }, []);\r\n\r\n  const toggleCompactMode = useCallback(() => {\r\n    setSettings((prev) => ({ ...prev, compactMode: !prev.compactMode }));\r\n  }, []);\r\n\r\n  const setAccentColor = useCallback((color: string) => {\r\n    setSettings((prev) => ({ ...prev, accentColor: color }));\r\n  }, []);\r\n\r\n  const setGlassTint = useCallback((color: string) => {\r\n    setSettings((prev) => ({ ...prev, glassTint: color }));\r\n  }, []);\r\n\r\n  const setColorTarget = useCallback((target: ColorTarget) => {\r\n    setSettings((prev) => ({ ...prev, colorTarget: target }));\r\n  }, []);\r\n\r\n  // Set color based on current target\r\n  const setColor = useCallback((color: string) => {\r\n    setSettings((prev) => {\r\n      switch (prev.colorTarget) {\r\n        case \"accent\":\r\n          return { ...prev, accentColor: color };\r\n        case \"glass\":\r\n          return { ...prev, glassTint: color };\r\n        case \"both\":\r\n        default:\r\n          return { ...prev, accentColor: color, glassTint: color };\r\n      }\r\n    });\r\n  }, []);\r\n\r\n  const setAccentBorders = useCallback((value: boolean) => {\r\n    setSettings((prev) => ({ ...prev, accentBorders: value }));\r\n  }, []);\r\n\r\n  const toggleAccentBorders = useCallback(() => {\r\n    setSettings((prev) => ({ ...prev, accentBorders: !prev.accentBorders }));\r\n  }, []);\r\n\r\n  const resetSettings = useCallback(() => {\r\n    setSettings(DEFAULT_SETTINGS);\r\n  }, []);\r\n\r\n  // Memoized context value\r\n  const value = useMemo<DisplaySettingsContextValue>(\r\n    () => ({\r\n      ...settings,\r\n      setCompactMode,\r\n      toggleCompactMode,\r\n      setAccentColor,\r\n      setGlassTint,\r\n      setColorTarget,\r\n      setColor,\r\n      setAccentBorders,\r\n      toggleAccentBorders,\r\n      resetSettings,\r\n    }),\r\n    [\r\n      settings,\r\n      setCompactMode,\r\n      toggleCompactMode,\r\n      setAccentColor,\r\n      setGlassTint,\r\n      setColorTarget,\r\n      setColor,\r\n      setAccentBorders,\r\n      toggleAccentBorders,\r\n      resetSettings,\r\n    ],\r\n  );\r\n\r\n  return (\r\n    <DisplaySettingsContext.Provider value={value}>\r\n      {children}\r\n    </DisplaySettingsContext.Provider>\r\n  );\r\n}\r\n\r\n// =============================================================================\r\n// Hook\r\n// =============================================================================\r\n\r\n/**\r\n * Access display settings context\r\n * Must be used within a DisplaySettingsProvider\r\n */\r\nexport function useDisplaySettings(): DisplaySettingsContextValue {\r\n  const context = useContext(DisplaySettingsContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\r\n      \"useDisplaySettings must be used within a DisplaySettingsProvider\",\r\n    );\r\n  }\r\n\r\n  return context;\r\n}\r\n\r\n/**\r\n * Optional hook that returns null if not within provider\r\n * Useful for components that should work with or without the provider\r\n */\r\nexport function useDisplaySettingsOptional(): DisplaySettingsContextValue | null {\r\n  return useContext(DisplaySettingsContext);\r\n}\r\n\r\n// =============================================================================\r\n// Utility Functions\r\n// =============================================================================\r\n\r\n/**\r\n * Get effective compact mode value\r\n * Priority: explicit prop > context value > default (false)\r\n */\r\nexport function getEffectiveCompactMode(\r\n  propValue: boolean | undefined,\r\n  contextValue: boolean | undefined,\r\n): boolean {\r\n  if (propValue !== undefined) return propValue;\r\n  if (contextValue !== undefined) return contextValue;\r\n  return false;\r\n}\r\n\r\n/**\r\n * Get effective accent borders value\r\n * Priority: explicit prop > context value > default (true)\r\n */\r\nexport function getEffectiveAccentBorders(\r\n  propValue: boolean | undefined,\r\n  contextValue: boolean | undefined,\r\n): boolean {\r\n  if (propValue !== undefined) return propValue;\r\n  if (contextValue !== undefined) return contextValue;\r\n  return true;\r\n}\r\n\r\n/**\r\n * Hook to get card border style based on accentBorders setting\r\n * Returns the appropriate border style for transparent themes\r\n */\r\nexport function useCardBorderStyle(\r\n  tokens: any,\r\n  isTransparentTheme: boolean,\r\n): React.CSSProperties {\r\n  const displaySettings = useDisplaySettingsOptional();\r\n  const accentBorders = displaySettings?.accentBorders ?? true;\r\n\r\n  if (!isTransparentTheme) {\r\n    return (\r\n      tokens.colors.border.cardStyle ?? {\r\n        border: `1px solid ${tokens.colors.border.muted}`,\r\n      }\r\n    );\r\n  }\r\n\r\n  if (accentBorders) {\r\n    return tokens.colors.border.cardStyle ?? {};\r\n  }\r\n\r\n  // Fallback to subtle neutral border when accent borders disabled\r\n  return { border: \"1px solid rgba(255, 255, 255, 0.08)\" };\r\n}\r\n\r\nexport default DisplaySettingsProvider;\r\n"],"mappings":"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"}

package/dist/react/context/SpatialSelectionContext.d.ts

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-
 export interface SpatialSelectionContextValue {
     /** ID of the currently selected object, or null if nothing is selected. */
     selectedId: string | null;

package/dist/react/context/SpatialSelectionContext.js

@@ -1,10 +1,39 @@
+import { createContext, useContext } from "react";
 import "react/jsx-runtime";
-import { useContext, createContext } from "react";
-const SpatialSelectionContextInternal = createContext(null);
+//#region src/react/context/SpatialSelectionContext.tsx
+/**
+* @zendir/ui - SpatialSelectionContext
+*
+* Optional shared selection state for spatial dashboards. Wrap a tree
+* containing `<ZenSpace3D />`, `<GroundTrackMap />`,
+* `<ObjectInventoryPanel />`, etc. — they cross-talk via the context
+* and stay synchronised without prop-drilling:
+*
+*   <SpatialSelectionProvider>
+*     <ObjectInventoryPanel objects={scene.objects} />  // writes selection
+*     <ZenSpace3D satellites={...} />                   // reads selection
+*     <GroundTrackMap satellites={tracks} />            // reads selection
+*   </SpatialSelectionProvider>
+*
+* The provider is **opt-in**. Components that consume the context use
+* `useSpatialSelection()` which returns `null` outside a provider —
+* that's how every component stays standalone-usable. No coupling.
+*/
+var SpatialSelectionContextInternal = createContext(null);
+/**
+* Read the spatial-selection context. Returns `null` when used outside
+* a `<SpatialSelectionProvider>` — components MUST handle that case so
+* they stay standalone-usable. Treat the provider as a progressive
+* enhancement, never a hard dependency.
+*
+*   const ctx = useSpatialSelection();
+*   const selectedId = ctx?.selectedId ?? null;        // safe outside provider
+*   const onSelect   = ctx?.setSelectedId ?? noop;      // safe outside provider
+*/
 function useSpatialSelection() {
-  return useContext(SpatialSelectionContextInternal);
+	return useContext(SpatialSelectionContextInternal);
 }
-export {
-  useSpatialSelection
-};
-//# sourceMappingURL=SpatialSelectionContext.js.map
+//#endregion
+export { useSpatialSelection };
+
+//# sourceMappingURL=SpatialSelectionContext.js.map

package/dist/react/context/SpatialSelectionContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpatialSelectionContext.js","sources":["../../../src/react/context/SpatialSelectionContext.tsx"],"sourcesContent":["/**\n * @zendir/ui - SpatialSelectionContext\n *\n * Optional shared selection state for spatial dashboards. Wrap a tree\n * containing `<ZenSpace3D />`, `<GroundTrackMap />`,\n * `<ObjectInventoryPanel />`, etc. — they cross-talk via the context\n * and stay synchronised without prop-drilling:\n *\n *   <SpatialSelectionProvider>\n *     <ObjectInventoryPanel objects={scene.objects} />  // writes selection\n *     <ZenSpace3D satellites={...} />                   // reads selection\n *     <GroundTrackMap satellites={tracks} />            // reads selection\n *   </SpatialSelectionProvider>\n *\n * The provider is **opt-in**. Components that consume the context use\n * `useSpatialSelection()` which returns `null` outside a provider —\n * that's how every component stays standalone-usable. No coupling.\n */\n\nimport { createContext, useCallback, useContext, useMemo, useState } from 'react';\nimport type { ReactNode } from 'react';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport interface SpatialSelectionContextValue {\n  /** ID of the currently selected object, or null if nothing is selected. */\n  selectedId: string | null;\n  /** Set the selection (or clear with `null`). */\n  setSelectedId: (id: string | null) => void;\n  /** Toggle selection: select the id if it isn't selected, clear otherwise. */\n  toggleSelection: (id: string) => void;\n  /** Convenience: clear any current selection. */\n  clearSelection: () => void;\n}\n\nconst SpatialSelectionContextInternal = createContext<SpatialSelectionContextValue | null>(null);\n\n// ─── Provider ─────────────────────────────────────────────────────────────────\n\nexport interface SpatialSelectionProviderProps {\n  children: ReactNode;\n  /** Initial selected id. Default null (nothing selected). */\n  defaultSelectedId?: string | null;\n  /** Controlled mode: when set, the provider mirrors this value instead\n   *  of owning state. Pair with `onSelectionChange`. */\n  selectedId?: string | null;\n  /** Called whenever the selection changes (uncontrolled or controlled). */\n  onSelectionChange?: (id: string | null) => void;\n}\n\nexport function SpatialSelectionProvider({\n  children,\n  defaultSelectedId = null,\n  selectedId: controlledId,\n  onSelectionChange,\n}: SpatialSelectionProviderProps) {\n  const [internalId, setInternalId] = useState<string | null>(defaultSelectedId);\n  const isControlled = controlledId !== undefined;\n  const selectedId = isControlled ? controlledId : internalId;\n\n  const setSelectedId = useCallback(\n    (id: string | null) => {\n      if (!isControlled) setInternalId(id);\n      onSelectionChange?.(id);\n    },\n    [isControlled, onSelectionChange],\n  );\n\n  const toggleSelection = useCallback(\n    (id: string) => {\n      const next = selectedId === id ? null : id;\n      if (!isControlled) setInternalId(next);\n      onSelectionChange?.(next);\n    },\n    [selectedId, isControlled, onSelectionChange],\n  );\n\n  const clearSelection = useCallback(() => {\n    if (!isControlled) setInternalId(null);\n    onSelectionChange?.(null);\n  }, [isControlled, onSelectionChange]);\n\n  const value = useMemo<SpatialSelectionContextValue>(\n    () => ({ selectedId, setSelectedId, toggleSelection, clearSelection }),\n    [selectedId, setSelectedId, toggleSelection, clearSelection],\n  );\n\n  return (\n    <SpatialSelectionContextInternal.Provider value={value}>\n      {children}\n    </SpatialSelectionContextInternal.Provider>\n  );\n}\n\n// ─── Hooks ────────────────────────────────────────────────────────────────────\n\n/**\n * Read the spatial-selection context. Returns `null` when used outside\n * a `<SpatialSelectionProvider>` — components MUST handle that case so\n * they stay standalone-usable. Treat the provider as a progressive\n * enhancement, never a hard dependency.\n *\n *   const ctx = useSpatialSelection();\n *   const selectedId = ctx?.selectedId ?? null;        // safe outside provider\n *   const onSelect   = ctx?.setSelectedId ?? noop;      // safe outside provider\n */\nexport function useSpatialSelection(): SpatialSelectionContextValue | null {\n  return useContext(SpatialSelectionContextInternal);\n}\n\n/**\n * Strict variant — throws if used outside a provider. Useful in the\n * provider's own children when the dependency is intentional.\n */\nexport function useSpatialSelectionStrict(): SpatialSelectionContextValue {\n  const ctx = useContext(SpatialSelectionContextInternal);\n  if (!ctx) {\n    throw new Error(\n      'useSpatialSelectionStrict() called outside <SpatialSelectionProvider>. ' +\n        'Wrap the tree, or use useSpatialSelection() (returns null) for opt-in usage.',\n    );\n  }\n  return ctx;\n}\n\nexport default SpatialSelectionProvider;\n"],"names":[],"mappings":";;AAmCA,MAAM,kCAAkC,cAAmD,IAAI;AAuExF,SAAS,sBAA2D;AACzE,SAAO,WAAW,+BAA+B;AACnD;"}
+{"version":3,"file":"SpatialSelectionContext.js","names":[],"sources":["../../../src/react/context/SpatialSelectionContext.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - SpatialSelectionContext\r\n *\r\n * Optional shared selection state for spatial dashboards. Wrap a tree\r\n * containing `<ZenSpace3D />`, `<GroundTrackMap />`,\r\n * `<ObjectInventoryPanel />`, etc. — they cross-talk via the context\r\n * and stay synchronised without prop-drilling:\r\n *\r\n *   <SpatialSelectionProvider>\r\n *     <ObjectInventoryPanel objects={scene.objects} />  // writes selection\r\n *     <ZenSpace3D satellites={...} />                   // reads selection\r\n *     <GroundTrackMap satellites={tracks} />            // reads selection\r\n *   </SpatialSelectionProvider>\r\n *\r\n * The provider is **opt-in**. Components that consume the context use\r\n * `useSpatialSelection()` which returns `null` outside a provider —\r\n * that's how every component stays standalone-usable. No coupling.\r\n */\r\n\r\nimport {\r\n  createContext,\r\n  useCallback,\r\n  useContext,\r\n  useMemo,\r\n  useState,\r\n} from \"react\";\r\nimport type { ReactNode } from \"react\";\r\n\r\n// ─── Types ────────────────────────────────────────────────────────────────────\r\n\r\nexport interface SpatialSelectionContextValue {\r\n  /** ID of the currently selected object, or null if nothing is selected. */\r\n  selectedId: string | null;\r\n  /** Set the selection (or clear with `null`). */\r\n  setSelectedId: (id: string | null) => void;\r\n  /** Toggle selection: select the id if it isn't selected, clear otherwise. */\r\n  toggleSelection: (id: string) => void;\r\n  /** Convenience: clear any current selection. */\r\n  clearSelection: () => void;\r\n}\r\n\r\nconst SpatialSelectionContextInternal =\r\n  createContext<SpatialSelectionContextValue | null>(null);\r\n\r\n// ─── Provider ─────────────────────────────────────────────────────────────────\r\n\r\nexport interface SpatialSelectionProviderProps {\r\n  children: ReactNode;\r\n  /** Initial selected id. Default null (nothing selected). */\r\n  defaultSelectedId?: string | null;\r\n  /** Controlled mode: when set, the provider mirrors this value instead\r\n   *  of owning state. Pair with `onSelectionChange`. */\r\n  selectedId?: string | null;\r\n  /** Called whenever the selection changes (uncontrolled or controlled). */\r\n  onSelectionChange?: (id: string | null) => void;\r\n}\r\n\r\nexport function SpatialSelectionProvider({\r\n  children,\r\n  defaultSelectedId = null,\r\n  selectedId: controlledId,\r\n  onSelectionChange,\r\n}: SpatialSelectionProviderProps) {\r\n  const [internalId, setInternalId] = useState<string | null>(\r\n    defaultSelectedId,\r\n  );\r\n  const isControlled = controlledId !== undefined;\r\n  const selectedId = isControlled ? controlledId : internalId;\r\n\r\n  const setSelectedId = useCallback(\r\n    (id: string | null) => {\r\n      if (!isControlled) setInternalId(id);\r\n      onSelectionChange?.(id);\r\n    },\r\n    [isControlled, onSelectionChange],\r\n  );\r\n\r\n  const toggleSelection = useCallback(\r\n    (id: string) => {\r\n      const next = selectedId === id ? null : id;\r\n      if (!isControlled) setInternalId(next);\r\n      onSelectionChange?.(next);\r\n    },\r\n    [selectedId, isControlled, onSelectionChange],\r\n  );\r\n\r\n  const clearSelection = useCallback(() => {\r\n    if (!isControlled) setInternalId(null);\r\n    onSelectionChange?.(null);\r\n  }, [isControlled, onSelectionChange]);\r\n\r\n  const value = useMemo<SpatialSelectionContextValue>(\r\n    () => ({ selectedId, setSelectedId, toggleSelection, clearSelection }),\r\n    [selectedId, setSelectedId, toggleSelection, clearSelection],\r\n  );\r\n\r\n  return (\r\n    <SpatialSelectionContextInternal.Provider value={value}>\r\n      {children}\r\n    </SpatialSelectionContextInternal.Provider>\r\n  );\r\n}\r\n\r\n// ─── Hooks ────────────────────────────────────────────────────────────────────\r\n\r\n/**\r\n * Read the spatial-selection context. Returns `null` when used outside\r\n * a `<SpatialSelectionProvider>` — components MUST handle that case so\r\n * they stay standalone-usable. Treat the provider as a progressive\r\n * enhancement, never a hard dependency.\r\n *\r\n *   const ctx = useSpatialSelection();\r\n *   const selectedId = ctx?.selectedId ?? null;        // safe outside provider\r\n *   const onSelect   = ctx?.setSelectedId ?? noop;      // safe outside provider\r\n */\r\nexport function useSpatialSelection(): SpatialSelectionContextValue | null {\r\n  return useContext(SpatialSelectionContextInternal);\r\n}\r\n\r\n/**\r\n * Strict variant — throws if used outside a provider. Useful in the\r\n * provider's own children when the dependency is intentional.\r\n */\r\nexport function useSpatialSelectionStrict(): SpatialSelectionContextValue {\r\n  const ctx = useContext(SpatialSelectionContextInternal);\r\n  if (!ctx) {\r\n    throw new Error(\r\n      \"useSpatialSelectionStrict() called outside <SpatialSelectionProvider>. \" +\r\n        \"Wrap the tree, or use useSpatialSelection() (returns null) for opt-in usage.\",\r\n    );\r\n  }\r\n  return ctx;\r\n}\r\n\r\nexport default SpatialSelectionProvider;\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAyCA,IAAM,kCACJ,cAAmD,IAAI;;;;;;;;;;;AAyEzD,SAAgB,sBAA2D;CACzE,OAAO,WAAW,+BAA+B;AACnD"}

package/dist/react/core/data/DataTable.d.ts

@@ -1,6 +1,5 @@
 import { default as React } from 'react';
 import { TooltipPlacement } from '../overlays/Tooltip';
-
 export interface DataTableColumn<T = Record<string, unknown>> {
     /** Key in data object */
     key: string;
@@ -9,7 +8,7 @@ export interface DataTableColumn<T = Record<string, unknown>> {
     /** Column width (CSS value or number for px) */
     width?: string | number;
     /** Text alignment */
-    align?: 'left' | 'center' | 'right';
+    align?: "left" | "center" | "right";
     /** Use monospace font (good for numbers) */
     mono?: boolean;
     /** Custom cell renderer */
@@ -57,7 +56,7 @@ export interface DataTableProps<T = Record<string, unknown>> {
     /** Color for boolean ✓/✗ values (e.g. '#fff' for white). Defaults to text.primary or row status. */
     booleanColor?: string;
     /** Optional row status key or getter — boolean cells use this row's status color when set (matches white/status design). */
-    getRowStatus?: (row: T, index: number) => 'normal' | 'caution' | 'serious' | 'critical' | 'standby' | 'off' | undefined;
+    getRowStatus?: (row: T, index: number) => "normal" | "caution" | "serious" | "critical" | "standby" | "off" | undefined;
     /** Custom style */
     style?: React.CSSProperties;
 }
@@ -67,7 +66,7 @@ export interface DataTableRowDetailField {
     /** Field value (string, number, or ReactNode for custom rendering) */
     value: React.ReactNode;
     /** Optional status color for the value */
-    status?: 'normal' | 'caution' | 'serious' | 'critical' | 'standby' | 'off';
+    status?: "normal" | "caution" | "serious" | "critical" | "standby" | "off";
     /** Use monospace font for this value */
     mono?: boolean;
 }