@omnitron-dev/prism 0.2.0 → 0.3.1

package/README.md

@@ -39,6 +39,154 @@ function App() {
 }
 ```
 
+## Research documents
+
+`@omnitron-dev/prism/components/research` adds a source-preserving Markdown → typed document → React path. Import `@omnitron-dev/prism/components/research/styles.css` once. It supports GFM, stable Unicode heading anchors, admonitions, tabs, KaTeX and strict Mermaid diagrams. `parseResearchMarkdown(source, documentId)` returns the document tree, heading outline and diagnostics; node attributes retain source positions.
+
+```tsx
+import { ResearchDocument, defineResearchWidget } from '@omnitron-dev/prism/components/research';
+import '@omnitron-dev/prism/components/research/styles.css';
+import { z } from 'zod';
+
+const props = z.object({ value: z.number().finite() }).strict();
+const widgets = {
+  quantity: defineResearchWidget(
+    1,
+    (input) => props.parse(input),
+    ({ value }) => <output aria-label="Quantity">{value}</output>
+  ),
+};
+<ResearchDocument source={markdown} documentId="paper-overview" widgets={widgets} contents />;
+```
+
+Use `$...$` / `$$...$$` for math, a `mermaid` fence for diagrams, and a `prism` fence containing `{"type":"quantity","version":1,"props":{"value":3}}` for a registered widget. `:::note`, `:::warning`, and `:::tabs` with nested `:::tab{label="..."}` use directive syntax. Custom widgets are ordinary host-owned React components with explicit versioned prop validation. The source cannot import JavaScript, register components or grant access. Registries belong to each document, not to process-wide state. `TipTapRenderer` also exposes `nodeRenderers` and `inheritRegisteredNodes`; existing global registrations remain supported by default, while `ResearchDocument` disables inheritance.
+
+Raw HTML and unsupported constructs remain inert with source diagnostics. Unsupported diagram engines retain their source; Pintora is not interpreted as Mermaid. TeX runs with trust disabled and expansion/size limits. Mermaid source cannot change renderer configuration; rendered SVG is sanitized and displayed as an isolated SVG image, preserving the layout styles without inserting document-controlled CSS into the page. Active elements and links are removed; the browser image boundary disables scripting and external resources. Theme changes are serialized. Source/AST/block/edge limits bound accepted input, **not execution time**: Mermaid runs on the browser main thread. Host-owned widgets must independently obey the host's accessibility, resource, network and permission policies. This renderer provides presentation, not proof checking or Noesis semantics. The host owns immutable revision identity, digest verification, authorization and publication. Unknown or failing blocks preserve source rather than masquerading as successful verification.
+
 ## License
 
 MIT
+
+### Theme-native UI primitives
+
+`@omnitron-dev/prism/ui` is a separately built, tree-shakeable entry for MUI
+composition primitives (`Button`, `TextField`, `Tabs`, `Drawer`, `Typography`,
+`ListItemButton`, etc.). It preserves upstream props, slots and keyboard semantics;
+it does not introduce a second set of controls. Use these primitives alongside
+Prism's research editor and knowledge graph under the **same** theme.
+
+```tsx
+import { PrismThemeProvider, Button, TextField } from '@omnitron-dev/prism/ui';
+import { createPrismTheme } from '@omnitron-dev/prism/theme';
+const theme = createPrismTheme({ mode: 'light' });
+<PrismThemeProvider theme={theme}>
+  <TextField label="Title" size="small" />
+  <Button variant="contained">Save</Button>
+</PrismThemeProvider>;
+```
+
+The lightweight provider is appropriate for applications which already own their
+appearance preferences. `PrismProvider` supplies the larger settings/localization
+stack. Do not apply global `button`, `input` or `:focus-visible` appearance rules
+to either provider's controls: configure state styles through the shared theme.
+Keep a visible keyboard-focus indication when integrating legacy stylesheets.
+
+`ResearchDocument` also accepts `sourceProfile="docusaurus"` for explicit
+`{#heading-id}` anchors and namespaced local fragment links. The default research
+profile leaves that syntax literal. This is an inert rendering profile, not an MDX
+runtime or a Docusaurus configuration executor. Corpus routes and semantic metadata
+are supplied by the host's source adapter; Prism does not infer knowledge status.
+
+## Corpus navigation
+
+`@omnitron-dev/prism/components/doc-layout` exposes `DocSidebar`, `DocLayout`
+and `DocSectionNav` without the full component barrel. Sidebar items carry
+stable IDs, labels, optional native hrefs and children. Native hrefs preserve
+modified-click and new-tab navigation; `onItemClick` may route ordinary clicks
+through the host router. Categories announce expansion and remove collapsed
+children from keyboard navigation. No source-format or authorization semantics
+belong in these presentation components.
+
+### Application icon families
+
+Wrap the application (including its theme provider) in `PrismIconProvider` from
+`@omnitron-dev/prism/icons`. Supply components accepting `SvgIconProps`, forwarding
+an SVG ref and retaining MUI's decorative/accessibly labelled behaviour. A partial
+set overrides selected slots; a complete `Record<PrismIconName, PrismIconComponent>`
+provides compile-time coverage. `prismIconNames` enumerates the public slots.
+
+The same context reaches layout controls, search, scientific and rich-text editors,
+graph controls and native MUI slots through portals. Nested providers inherit the
+parent set. Unconfigured slots retain bundled artwork; applications own and license
+their supplied assets. No network icon lookup or DOM replacement is performed.
+Local MUI `slots`, `IconComponent` and `icon` props still take precedence.
+
+```tsx
+import { PrismIconProvider, type PrismIconSet } from '@omnitron-dev/prism/icons';
+const icons = { search: ApplicationSearchIcon } satisfies PrismIconSet;
+<PrismIconProvider icons={icons}>
+  <PrismThemeProvider theme={theme}>{children}</PrismThemeProvider>
+</PrismIconProvider>;
+```
+
+### Scrollbar visibility
+
+Prism's baseline and `Scrollbar` share native, theme-aware scrollbars. On a fine
+pointer they reveal on container hover or `focus-within`, and become transparent
+when idle. Thumb visibility changes neither overflow nor scrollport dimensions.
+Touch input and forced-colors mode retain visible native controls. No mouse
+listener, overlay, delayed timer or scroll-position state is introduced.
+
+Set `<Scrollbar autoHide={false}>` for a persistent thumb, or use
+`mixins.scrollbarStyles(theme, { autoHide: false })` for a custom scrollport.
+`hideScrollbar` remains the explicit fully-hidden option.
+
+
+### Mode-aware application palettes
+
+`PrismProvider.themeOverrides` accepts a static object or a function receiving
+`{ mode: 'light' | 'dark' }`. The provider resolves the operating-system setting
+before calling this function, so an application does not need a second theme
+store or a synchronisation effect. Keep the callback stable when possible.
+
+```tsx
+const appTheme = ({ mode }: PrismThemeOverrideContext) => ({
+  palette: {
+    primary: { main: mode === 'dark' ? '#C9B2FF' : '#7446A6' },
+    background: { paper: mode === 'dark' ? '#241E2C' : '#FFFCF8' },
+  },
+});
+
+<PrismProvider themeOverrides={appTheme}>{children}</PrismProvider>
+```
+
+Import `PrismProvider` and the `PrismThemeOverrideContext` type from
+`@omnitron-dev/prism/core`. The callback is evaluated again when the resolved
+mode changes; existing object overrides retain their behavior.
+
+
+Palette overrides replace dependent tones and channels together: changing `main`
+rebuilds its tonal family; changing an individual colour rebuilds only that
+colour's channel. Explicit shades and channel expressions retain precedence.
+This includes Prism's `lighter`/`darker` and `text.disabledChannel` extensions.
+Opaque static colours receive the higher-contrast black/white `contrastText`
+when none is supplied. Authored contrast colours remain the application's
+responsibility.
+
+For runtime CSS colours (`var(...)`, `oklch(...)`, wide-gamut colours), use
+`themeOverrides={{ cssVariables: { nativeColor: true }, palette: ... }}`. MUI resolves tones and
+contrast in the browser; Prism channels use relative RGB expressions instead
+of guessed numeric values. This requires browser support for CSS relative
+colours and MUI native colour mode. Without native colour mode, an unresolved
+`main` requires explicit `light`, `dark` and `contrastText`; Prism reports this
+contract before MUI's JavaScript colour parser runs. Static presets and
+explicit channel overrides remain supported.
+
+
+### Compact navigation identity
+
+`DashboardLayout` and `Sidenav` accept `compactLogo` for the collapsed or mini
+sidebar. Pass a compact symbol that fits beside the collapse control; the full
+`logo` remains visible in expanded and mobile navigation. Omitting the prop
+preserves the existing logo behavior. The sidebar control stays centred on its
+boundary in either text direction, including enlarged accessible hit targets.

package/dist/accessibility/index.d.ts

@@ -1,157 +1,13 @@
-import { PropsWithChildren, ReactNode } from 'react';
-
 /**
- * Vision Mode Accessibility System
+ * Prism Accessibility Module
  *
- * Simulates color vision deficiencies to help designers and developers
- * test their applications for accessibility. Uses SVG color matrix filters
- * applied globally to simulate how users with different types of color
- * blindness perceive content.
+ * Tools and utilities for building accessible applications.
  *
- * Vision Deficiency Types:
- * - Protanopia: Red-blind (affects ~1% of males)
- * - Deuteranopia: Green-blind (affects ~1% of males)
- * - Tritanopia: Blue-blind (rare, affects <0.01% of population)
- * - Achromatopsia: Complete color blindness (grayscale)
+ * Features:
+ * - Vision Mode: Color blindness simulation for testing
+ * - More accessibility features coming soon
  *
  * @module @omnitron-dev/prism/accessibility
  */
-
-/**
- * Available vision modes for color blindness simulation.
- */
-type VisionMode = 'normal' | 'protanopia' | 'deuteranopia' | 'tritanopia' | 'achromatopsia';
-/**
- * Vision mode metadata for UI display.
- */
-interface VisionModeOption {
-    /** Mode identifier */
-    value: VisionMode;
-    /** Human-readable label */
-    label: string;
-    /** Description of the vision deficiency */
-    description: string;
-    /** Percentage of population affected (for educational purposes) */
-    prevalence?: string;
-}
-/**
- * Vision mode context value.
- */
-interface VisionModeContextValue {
-    /** Current vision mode */
-    mode: VisionMode;
-    /** Set the vision mode */
-    setMode: (mode: VisionMode) => void;
-    /** Toggle between normal and a specific mode */
-    toggle: (mode?: VisionMode) => void;
-    /** Reset to normal vision */
-    reset: () => void;
-    /** Whether vision filters are active */
-    isFiltered: boolean;
-}
-/**
- * Available vision mode options with descriptions.
- */
-declare const VISION_MODE_OPTIONS: VisionModeOption[];
-/**
- * Props for VisionModeProvider.
- */
-interface VisionModeProviderProps extends PropsWithChildren {
-    /** Initial vision mode (default: 'normal' or from localStorage) */
-    defaultMode?: VisionMode;
-    /** Storage key for persistence (default: 'prism-vision-mode') */
-    storageKey?: string;
-    /** Disable persistence to localStorage */
-    disablePersistence?: boolean;
-    /** CSS selector attribute name (default: 'data-vision') */
-    attributeName?: string;
-}
-/**
- * VisionModeProvider - Provides vision mode context and renders filters.
- *
- * @example
- * ```tsx
- * // In your app root
- * import { VisionModeProvider } from '@omnitron-dev/prism/accessibility';
- *
- * function App() {
- *   return (
- *     <VisionModeProvider>
- *       <YourApp />
- *     </VisionModeProvider>
- *   );
- * }
- *
- * // In a component
- * import { useVisionMode, VISION_MODE_OPTIONS } from '@omnitron-dev/prism/accessibility';
- *
- * function AccessibilityPanel() {
- *   const { mode, setMode } = useVisionMode();
- *
- *   return (
- *     <select value={mode} onChange={(e) => setMode(e.target.value as VisionMode)}>
- *       {VISION_MODE_OPTIONS.map((option) => (
- *         <option key={option.value} value={option.value}>
- *           {option.label}
- *         </option>
- *       ))}
- *     </select>
- *   );
- * }
- * ```
- */
-declare function VisionModeProvider({ children, defaultMode, storageKey, disablePersistence, attributeName, }: VisionModeProviderProps): ReactNode;
-/**
- * useVisionMode - Hook to access vision mode context.
- *
- * @throws Error if used outside of VisionModeProvider
- *
- * @example
- * ```tsx
- * function AccessibilityToggle() {
- *   const { mode, setMode, isFiltered, reset } = useVisionMode();
- *
- *   return (
- *     <div>
- *       <p>Current mode: {mode}</p>
- *       <button onClick={() => setMode('protanopia')}>
- *         Simulate Protanopia
- *       </button>
- *       {isFiltered && (
- *         <button onClick={reset}>Reset to Normal</button>
- *       )}
- *     </div>
- *   );
- * }
- * ```
- */
-declare function useVisionMode(): VisionModeContextValue;
-/**
- * Generate CSS styles for vision mode filters.
- * Use this in your theme's CssBaseline or global styles.
- *
- * @param attributeName - The data attribute name (default: 'data-vision')
- * @returns CSS styles object for MUI CssBaseline styleOverrides
- *
- * @example
- * ```tsx
- * // In your theme configuration
- * import { getVisionModeStyles } from '@omnitron-dev/prism/accessibility';
- *
- * const theme = createTheme({
- *   components: {
- *     MuiCssBaseline: {
- *       styleOverrides: (theme) => ({
- *         ...getVisionModeStyles(),
- *         // ... other styles
- *       }),
- *     },
- *   },
- * });
- * ```
- */
-declare function getVisionModeStyles(attributeName?: string): Record<string, {
-    filter: string;
-}>;
-
-export { VISION_MODE_OPTIONS, type VisionMode, type VisionModeContextValue, type VisionModeOption, VisionModeProvider, type VisionModeProviderProps, getVisionModeStyles, useVisionMode };
+export { VisionModeProvider, useVisionMode, getVisionModeStyles, VISION_MODE_OPTIONS, type VisionMode, type VisionModeOption, type VisionModeContextValue, type VisionModeProviderProps, } from './vision-mode.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/accessibility/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/accessibility/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAEL,kBAAkB,EAElB,aAAa,EAEb,mBAAmB,EAEnB,mBAAmB,EAEnB,KAAK,UAAU,EACf,KAAK,gBAAgB,EACrB,KAAK,sBAAsB,EAC3B,KAAK,uBAAuB,GAC7B,MAAM,kBAAkB,CAAC"}

package/dist/accessibility/index.js

@@ -1,4 +1,3 @@
-import '../chunk-77KIJLPP.js';
 import { createContext, useState, useEffect, useCallback, useContext } from 'react';
 import { createPortal } from 'react-dom';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/accessibility/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/accessibility/vision-mode.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["'use client';\n\n/**\n * Vision Mode Accessibility System\n *\n * Simulates color vision deficiencies to help designers and developers\n * test their applications for accessibility. Uses SVG color matrix filters\n * applied globally to simulate how users with different types of color\n * blindness perceive content.\n *\n * Vision Deficiency Types:\n * - Protanopia: Red-blind (affects ~1% of males)\n * - Deuteranopia: Green-blind (affects ~1% of males)\n * - Tritanopia: Blue-blind (rare, affects <0.01% of population)\n * - Achromatopsia: Complete color blindness (grayscale)\n *\n * @module @omnitron-dev/prism/accessibility\n */\n\nimport {\n  createContext,\n  useContext,\n  useState,\n  useEffect,\n  useCallback,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\n// =============================================================================\n// TYPES\n// =============================================================================\n\n/**\n * Available vision modes for color blindness simulation.\n */\nexport type VisionMode = 'normal' | 'protanopia' | 'deuteranopia' | 'tritanopia' | 'achromatopsia';\n\n/**\n * Vision mode metadata for UI display.\n */\nexport interface VisionModeOption {\n  /** Mode identifier */\n  value: VisionMode;\n  /** Human-readable label */\n  label: string;\n  /** Description of the vision deficiency */\n  description: string;\n  /** Percentage of population affected (for educational purposes) */\n  prevalence?: string;\n}\n\n/**\n * Vision mode context value.\n */\nexport interface VisionModeContextValue {\n  /** Current vision mode */\n  mode: VisionMode;\n  /** Set the vision mode */\n  setMode: (mode: VisionMode) => void;\n  /** Toggle between normal and a specific mode */\n  toggle: (mode?: VisionMode) => void;\n  /** Reset to normal vision */\n  reset: () => void;\n  /** Whether vision filters are active */\n  isFiltered: boolean;\n}\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\n\nconst STORAGE_KEY = 'prism-vision-mode';\nconst FILTER_CONTAINER_ID = 'prism-vision-filters';\n\n/**\n * Available vision mode options with descriptions.\n */\nexport const VISION_MODE_OPTIONS: VisionModeOption[] = [\n  {\n    value: 'normal',\n    label: 'Normal Vision',\n    description: 'Shows all colors normally',\n  },\n  {\n    value: 'protanopia',\n    label: 'Protanopia',\n    description: 'Difficulty distinguishing red from green (red-blind)',\n    prevalence: '~1% of males',\n  },\n  {\n    value: 'deuteranopia',\n    label: 'Deuteranopia',\n    description: 'Difficulty distinguishing green from red (green-blind)',\n    prevalence: '~1% of males',\n  },\n  {\n    value: 'tritanopia',\n    label: 'Tritanopia',\n    description: 'Difficulty distinguishing blue from yellow (blue-blind)',\n    prevalence: '<0.01%',\n  },\n  {\n    value: 'achromatopsia',\n    label: 'Achromatopsia',\n    description: 'Complete color blindness (grayscale only)',\n    prevalence: '~0.003%',\n  },\n];\n\n// =============================================================================\n// SVG FILTERS\n// =============================================================================\n\n/**\n * Color matrix values for vision deficiency simulation.\n * These matrices transform colors to simulate how they appear to people\n * with various types of color blindness.\n */\nconst FILTER_MATRICES = {\n  // Protanopia: Reduced sensitivity to red light\n  protanopia: `\n    0.10889 0.89111 0.00000 0 0\n    0.10889 0.89111 0.00000 0 0\n    0.00447 -0.00447 1.00000 0 0\n    0 0 0 1 0\n  `,\n  // Deuteranopia: Reduced sensitivity to green light\n  deuteranopia: `\n    0.4251 0.6934 -0.1147 0 0\n    0.3417 0.5882 0.0692 0 0\n    -0.0105 0.0234 0.9870 0 0\n    0 0 0 1 0\n  `,\n  // Tritanopia: Reduced sensitivity to blue light\n  tritanopia: `\n    0.95 0.05 0 0 0\n    0 0.433 0.567 0 0\n    0 0.475 0.525 0 0\n    0 0 0 1 0\n  `,\n  // Achromatopsia: Complete color blindness (luminance only)\n  achromatopsia: `\n    0.299 0.587 0.114 0 0\n    0.299 0.587 0.114 0 0\n    0.299 0.587 0.114 0 0\n    0 0 0 1 0\n  `,\n} as const;\n\n/**\n * SVG filters for vision mode simulation.\n * Rendered as a hidden element and referenced by CSS.\n */\nfunction VisionFilters(): ReactNode {\n  return (\n    <div\n      id={FILTER_CONTAINER_ID}\n      style={{\n        position: 'absolute',\n        width: 0,\n        height: 0,\n        overflow: 'hidden',\n        pointerEvents: 'none',\n      }}\n      aria-hidden=\"true\"\n    >\n      <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n        <defs>\n          {Object.entries(FILTER_MATRICES).map(([mode, matrix]) => (\n            <filter key={mode} id={`${mode}-filter`}>\n              <feColorMatrix type=\"matrix\" in=\"SourceGraphic\" values={matrix} />\n            </filter>\n          ))}\n        </defs>\n      </svg>\n    </div>\n  );\n}\n\n// =============================================================================\n// CONTEXT\n// =============================================================================\n\nconst VisionModeContext = createContext<VisionModeContextValue | null>(null);\n\n// =============================================================================\n// PROVIDER\n// =============================================================================\n\n/**\n * Props for VisionModeProvider.\n */\nexport interface VisionModeProviderProps extends PropsWithChildren {\n  /** Initial vision mode (default: 'normal' or from localStorage) */\n  defaultMode?: VisionMode;\n  /** Storage key for persistence (default: 'prism-vision-mode') */\n  storageKey?: string;\n  /** Disable persistence to localStorage */\n  disablePersistence?: boolean;\n  /** CSS selector attribute name (default: 'data-vision') */\n  attributeName?: string;\n}\n\n/**\n * VisionModeProvider - Provides vision mode context and renders filters.\n *\n * @example\n * ```tsx\n * // In your app root\n * import { VisionModeProvider } from '@omnitron-dev/prism/accessibility';\n *\n * function App() {\n *   return (\n *     <VisionModeProvider>\n *       <YourApp />\n *     </VisionModeProvider>\n *   );\n * }\n *\n * // In a component\n * import { useVisionMode, VISION_MODE_OPTIONS } from '@omnitron-dev/prism/accessibility';\n *\n * function AccessibilityPanel() {\n *   const { mode, setMode } = useVisionMode();\n *\n *   return (\n *     <select value={mode} onChange={(e) => setMode(e.target.value as VisionMode)}>\n *       {VISION_MODE_OPTIONS.map((option) => (\n *         <option key={option.value} value={option.value}>\n *           {option.label}\n *         </option>\n *       ))}\n *     </select>\n *   );\n * }\n * ```\n */\nexport function VisionModeProvider({\n  children,\n  defaultMode,\n  storageKey = STORAGE_KEY,\n  disablePersistence = false,\n  attributeName = 'data-vision',\n}: VisionModeProviderProps): ReactNode {\n  // Initialize from localStorage or default\n  const [mode, setModeState] = useState<VisionMode>(() => {\n    if (typeof window === 'undefined') return defaultMode ?? 'normal';\n    if (disablePersistence) return defaultMode ?? 'normal';\n\n    try {\n      const stored = localStorage.getItem(storageKey);\n      if (stored) {\n        const parsed = JSON.parse(stored) as VisionMode;\n        if (VISION_MODE_OPTIONS.some((opt) => opt.value === parsed)) {\n          return parsed;\n        }\n      }\n    } catch {\n      // Ignore localStorage errors\n    }\n    return defaultMode ?? 'normal';\n  });\n\n  const [needsFilters, setNeedsFilters] = useState(false);\n\n  // Check if filters need to be rendered\n  useEffect(() => {\n    if (typeof document !== 'undefined' && !document.getElementById(FILTER_CONTAINER_ID)) {\n      setNeedsFilters(true);\n    }\n  }, []);\n\n  // Apply data attribute to document element\n  useEffect(() => {\n    if (typeof document === 'undefined') return undefined;\n\n    if (mode === 'normal') {\n      document.documentElement.removeAttribute(attributeName);\n    } else {\n      document.documentElement.setAttribute(attributeName, mode);\n    }\n\n    return () => {\n      document.documentElement.removeAttribute(attributeName);\n    };\n  }, [mode, attributeName]);\n\n  // Persist to localStorage\n  useEffect(() => {\n    if (disablePersistence || typeof localStorage === 'undefined') return undefined;\n\n    try {\n      localStorage.setItem(storageKey, JSON.stringify(mode));\n    } catch {\n      // Ignore localStorage errors\n    }\n    return undefined;\n  }, [mode, storageKey, disablePersistence]);\n\n  // Cross-tab sync via storage event\n  useEffect(() => {\n    if (disablePersistence || typeof window === 'undefined') return undefined;\n\n    const handleStorage = (e: StorageEvent) => {\n      if (e.key !== storageKey || !e.newValue) return;\n      try {\n        const parsed = JSON.parse(e.newValue) as VisionMode;\n        if (VISION_MODE_OPTIONS.some((opt) => opt.value === parsed)) {\n          setModeState(parsed);\n        }\n      } catch {\n        // Ignore parse errors\n      }\n    };\n\n    window.addEventListener('storage', handleStorage);\n    return () => window.removeEventListener('storage', handleStorage);\n  }, [storageKey, disablePersistence]);\n\n  const setMode = useCallback((newMode: VisionMode) => {\n    setModeState(newMode);\n  }, []);\n\n  const toggle = useCallback((targetMode: VisionMode = 'protanopia') => {\n    setModeState((current) => (current === 'normal' ? targetMode : 'normal'));\n  }, []);\n\n  const reset = useCallback(() => {\n    setModeState('normal');\n  }, []);\n\n  const value: VisionModeContextValue = {\n    mode,\n    setMode,\n    toggle,\n    reset,\n    isFiltered: mode !== 'normal',\n  };\n\n  return (\n    <VisionModeContext.Provider value={value}>\n      {needsFilters && typeof document !== 'undefined' && document.body\n        ? createPortal(<VisionFilters />, document.body)\n        : null}\n      {children}\n    </VisionModeContext.Provider>\n  );\n}\n\n// =============================================================================\n// HOOK\n// =============================================================================\n\n/**\n * useVisionMode - Hook to access vision mode context.\n *\n * @throws Error if used outside of VisionModeProvider\n *\n * @example\n * ```tsx\n * function AccessibilityToggle() {\n *   const { mode, setMode, isFiltered, reset } = useVisionMode();\n *\n *   return (\n *     <div>\n *       <p>Current mode: {mode}</p>\n *       <button onClick={() => setMode('protanopia')}>\n *         Simulate Protanopia\n *       </button>\n *       {isFiltered && (\n *         <button onClick={reset}>Reset to Normal</button>\n *       )}\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useVisionMode(): VisionModeContextValue {\n  const context = useContext(VisionModeContext);\n\n  if (!context) {\n    throw new Error('useVisionMode must be used within a VisionModeProvider');\n  }\n\n  return context;\n}\n\n// =============================================================================\n// CSS STYLES HELPER\n// =============================================================================\n\n/**\n * Generate CSS styles for vision mode filters.\n * Use this in your theme's CssBaseline or global styles.\n *\n * @param attributeName - The data attribute name (default: 'data-vision')\n * @returns CSS styles object for MUI CssBaseline styleOverrides\n *\n * @example\n * ```tsx\n * // In your theme configuration\n * import { getVisionModeStyles } from '@omnitron-dev/prism/accessibility';\n *\n * const theme = createTheme({\n *   components: {\n *     MuiCssBaseline: {\n *       styleOverrides: (theme) => ({\n *         ...getVisionModeStyles(),\n *         // ... other styles\n *       }),\n *     },\n *   },\n * });\n * ```\n */\nexport function getVisionModeStyles(attributeName = 'data-vision'): Record<string, { filter: string }> {\n  const modes: Array<Exclude<VisionMode, 'normal'>> = ['protanopia', 'deuteranopia', 'tritanopia', 'achromatopsia'];\n\n  return Object.fromEntries(\n    modes.map((mode) => [`html[${attributeName}=\"${mode}\"]:not([data-showcase])`, { filter: `url(\"#${mode}-filter\")` }])\n  ) as Record<string, { filter: string }>;\n}\n"]}
+{"version":3,"sources":["../../src/accessibility/vision-mode.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["'use client';\n\n/**\n * Vision Mode Accessibility System\n *\n * Simulates color vision deficiencies to help designers and developers\n * test their applications for accessibility. Uses SVG color matrix filters\n * applied globally to simulate how users with different types of color\n * blindness perceive content.\n *\n * Vision Deficiency Types:\n * - Protanopia: Red-blind (affects ~1% of males)\n * - Deuteranopia: Green-blind (affects ~1% of males)\n * - Tritanopia: Blue-blind (rare, affects <0.01% of population)\n * - Achromatopsia: Complete color blindness (grayscale)\n *\n * @module @omnitron-dev/prism/accessibility\n */\n\nimport {\n  createContext,\n  useContext,\n  useState,\n  useEffect,\n  useCallback,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\n// =============================================================================\n// TYPES\n// =============================================================================\n\n/**\n * Available vision modes for color blindness simulation.\n */\nexport type VisionMode = 'normal' | 'protanopia' | 'deuteranopia' | 'tritanopia' | 'achromatopsia';\n\n/**\n * Vision mode metadata for UI display.\n */\nexport interface VisionModeOption {\n  /** Mode identifier */\n  value: VisionMode;\n  /** Human-readable label */\n  label: string;\n  /** Description of the vision deficiency */\n  description: string;\n  /** Percentage of population affected (for educational purposes) */\n  prevalence?: string;\n}\n\n/**\n * Vision mode context value.\n */\nexport interface VisionModeContextValue {\n  /** Current vision mode */\n  mode: VisionMode;\n  /** Set the vision mode */\n  setMode: (mode: VisionMode) => void;\n  /** Toggle between normal and a specific mode */\n  toggle: (mode?: VisionMode) => void;\n  /** Reset to normal vision */\n  reset: () => void;\n  /** Whether vision filters are active */\n  isFiltered: boolean;\n}\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\n\nconst STORAGE_KEY = 'prism-vision-mode';\nconst FILTER_CONTAINER_ID = 'prism-vision-filters';\n\n/**\n * Available vision mode options with descriptions.\n */\nexport const VISION_MODE_OPTIONS: VisionModeOption[] = [\n  {\n    value: 'normal',\n    label: 'Normal Vision',\n    description: 'Shows all colors normally',\n  },\n  {\n    value: 'protanopia',\n    label: 'Protanopia',\n    description: 'Difficulty distinguishing red from green (red-blind)',\n    prevalence: '~1% of males',\n  },\n  {\n    value: 'deuteranopia',\n    label: 'Deuteranopia',\n    description: 'Difficulty distinguishing green from red (green-blind)',\n    prevalence: '~1% of males',\n  },\n  {\n    value: 'tritanopia',\n    label: 'Tritanopia',\n    description: 'Difficulty distinguishing blue from yellow (blue-blind)',\n    prevalence: '<0.01%',\n  },\n  {\n    value: 'achromatopsia',\n    label: 'Achromatopsia',\n    description: 'Complete color blindness (grayscale only)',\n    prevalence: '~0.003%',\n  },\n];\n\n// =============================================================================\n// SVG FILTERS\n// =============================================================================\n\n/**\n * Color matrix values for vision deficiency simulation.\n * These matrices transform colors to simulate how they appear to people\n * with various types of color blindness.\n */\nconst FILTER_MATRICES = {\n  // Protanopia: Reduced sensitivity to red light\n  protanopia: `\n    0.10889 0.89111 0.00000 0 0\n    0.10889 0.89111 0.00000 0 0\n    0.00447 -0.00447 1.00000 0 0\n    0 0 0 1 0\n  `,\n  // Deuteranopia: Reduced sensitivity to green light\n  deuteranopia: `\n    0.4251 0.6934 -0.1147 0 0\n    0.3417 0.5882 0.0692 0 0\n    -0.0105 0.0234 0.9870 0 0\n    0 0 0 1 0\n  `,\n  // Tritanopia: Reduced sensitivity to blue light\n  tritanopia: `\n    0.95 0.05 0 0 0\n    0 0.433 0.567 0 0\n    0 0.475 0.525 0 0\n    0 0 0 1 0\n  `,\n  // Achromatopsia: Complete color blindness (luminance only)\n  achromatopsia: `\n    0.299 0.587 0.114 0 0\n    0.299 0.587 0.114 0 0\n    0.299 0.587 0.114 0 0\n    0 0 0 1 0\n  `,\n} as const;\n\n/**\n * SVG filters for vision mode simulation.\n * Rendered as a hidden element and referenced by CSS.\n */\nfunction VisionFilters(): ReactNode {\n  return (\n    <div\n      id={FILTER_CONTAINER_ID}\n      style={{\n        position: 'absolute',\n        width: 0,\n        height: 0,\n        overflow: 'hidden',\n        pointerEvents: 'none',\n      }}\n      aria-hidden=\"true\"\n    >\n      <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n        <defs>\n          {Object.entries(FILTER_MATRICES).map(([mode, matrix]) => (\n            <filter key={mode} id={`${mode}-filter`}>\n              <feColorMatrix type=\"matrix\" in=\"SourceGraphic\" values={matrix} />\n            </filter>\n          ))}\n        </defs>\n      </svg>\n    </div>\n  );\n}\n\n// =============================================================================\n// CONTEXT\n// =============================================================================\n\nconst VisionModeContext = createContext<VisionModeContextValue | null>(null);\n\n// =============================================================================\n// PROVIDER\n// =============================================================================\n\n/**\n * Props for VisionModeProvider.\n */\nexport interface VisionModeProviderProps extends PropsWithChildren {\n  /** Initial vision mode (default: 'normal' or from localStorage) */\n  defaultMode?: VisionMode;\n  /** Storage key for persistence (default: 'prism-vision-mode') */\n  storageKey?: string;\n  /** Disable persistence to localStorage */\n  disablePersistence?: boolean;\n  /** CSS selector attribute name (default: 'data-vision') */\n  attributeName?: string;\n}\n\n/**\n * VisionModeProvider - Provides vision mode context and renders filters.\n *\n * @example\n * ```tsx\n * // In your app root\n * import { VisionModeProvider } from '@omnitron-dev/prism/accessibility';\n *\n * function App() {\n *   return (\n *     <VisionModeProvider>\n *       <YourApp />\n *     </VisionModeProvider>\n *   );\n * }\n *\n * // In a component\n * import { useVisionMode, VISION_MODE_OPTIONS } from '@omnitron-dev/prism/accessibility';\n *\n * function AccessibilityPanel() {\n *   const { mode, setMode } = useVisionMode();\n *\n *   return (\n *     <select value={mode} onChange={(e) => setMode(e.target.value as VisionMode)}>\n *       {VISION_MODE_OPTIONS.map((option) => (\n *         <option key={option.value} value={option.value}>\n *           {option.label}\n *         </option>\n *       ))}\n *     </select>\n *   );\n * }\n * ```\n */\nexport function VisionModeProvider({\n  children,\n  defaultMode,\n  storageKey = STORAGE_KEY,\n  disablePersistence = false,\n  attributeName = 'data-vision',\n}: VisionModeProviderProps): ReactNode {\n  // Initialize from localStorage or default\n  const [mode, setModeState] = useState<VisionMode>(() => {\n    if (typeof window === 'undefined') return defaultMode ?? 'normal';\n    if (disablePersistence) return defaultMode ?? 'normal';\n\n    try {\n      const stored = localStorage.getItem(storageKey);\n      if (stored) {\n        const parsed = JSON.parse(stored) as VisionMode;\n        if (VISION_MODE_OPTIONS.some((opt) => opt.value === parsed)) {\n          return parsed;\n        }\n      }\n    } catch {\n      // Ignore localStorage errors\n    }\n    return defaultMode ?? 'normal';\n  });\n\n  const [needsFilters, setNeedsFilters] = useState(false);\n\n  // Check if filters need to be rendered\n  useEffect(() => {\n    if (typeof document !== 'undefined' && !document.getElementById(FILTER_CONTAINER_ID)) {\n      setNeedsFilters(true);\n    }\n  }, []);\n\n  // Apply data attribute to document element\n  useEffect(() => {\n    if (typeof document === 'undefined') return undefined;\n\n    if (mode === 'normal') {\n      document.documentElement.removeAttribute(attributeName);\n    } else {\n      document.documentElement.setAttribute(attributeName, mode);\n    }\n\n    return () => {\n      document.documentElement.removeAttribute(attributeName);\n    };\n  }, [mode, attributeName]);\n\n  // Persist to localStorage\n  useEffect(() => {\n    if (disablePersistence || typeof localStorage === 'undefined') return undefined;\n\n    try {\n      localStorage.setItem(storageKey, JSON.stringify(mode));\n    } catch {\n      // Ignore localStorage errors\n    }\n    return undefined;\n  }, [mode, storageKey, disablePersistence]);\n\n  // Cross-tab sync via storage event\n  useEffect(() => {\n    if (disablePersistence || typeof window === 'undefined') return undefined;\n\n    const handleStorage = (e: StorageEvent) => {\n      if (e.key !== storageKey || !e.newValue) return;\n      try {\n        const parsed = JSON.parse(e.newValue) as VisionMode;\n        if (VISION_MODE_OPTIONS.some((opt) => opt.value === parsed)) {\n          setModeState(parsed);\n        }\n      } catch {\n        // Ignore parse errors\n      }\n    };\n\n    window.addEventListener('storage', handleStorage);\n    return () => window.removeEventListener('storage', handleStorage);\n  }, [storageKey, disablePersistence]);\n\n  const setMode = useCallback((newMode: VisionMode) => {\n    setModeState(newMode);\n  }, []);\n\n  const toggle = useCallback((targetMode: VisionMode = 'protanopia') => {\n    setModeState((current) => (current === 'normal' ? targetMode : 'normal'));\n  }, []);\n\n  const reset = useCallback(() => {\n    setModeState('normal');\n  }, []);\n\n  const value: VisionModeContextValue = {\n    mode,\n    setMode,\n    toggle,\n    reset,\n    isFiltered: mode !== 'normal',\n  };\n\n  return (\n    <VisionModeContext.Provider value={value}>\n      {needsFilters && typeof document !== 'undefined' && document.body\n        ? createPortal(<VisionFilters />, document.body)\n        : null}\n      {children}\n    </VisionModeContext.Provider>\n  );\n}\n\n// =============================================================================\n// HOOK\n// =============================================================================\n\n/**\n * useVisionMode - Hook to access vision mode context.\n *\n * @throws Error if used outside of VisionModeProvider\n *\n * @example\n * ```tsx\n * function AccessibilityToggle() {\n *   const { mode, setMode, isFiltered, reset } = useVisionMode();\n *\n *   return (\n *     <div>\n *       <p>Current mode: {mode}</p>\n *       <button onClick={() => setMode('protanopia')}>\n *         Simulate Protanopia\n *       </button>\n *       {isFiltered && (\n *         <button onClick={reset}>Reset to Normal</button>\n *       )}\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useVisionMode(): VisionModeContextValue {\n  const context = useContext(VisionModeContext);\n\n  if (!context) {\n    throw new Error('useVisionMode must be used within a VisionModeProvider');\n  }\n\n  return context;\n}\n\n// =============================================================================\n// CSS STYLES HELPER\n// =============================================================================\n\n/**\n * Generate CSS styles for vision mode filters.\n * Use this in your theme's CssBaseline or global styles.\n *\n * @param attributeName - The data attribute name (default: 'data-vision')\n * @returns CSS styles object for MUI CssBaseline styleOverrides\n *\n * @example\n * ```tsx\n * // In your theme configuration\n * import { getVisionModeStyles } from '@omnitron-dev/prism/accessibility';\n *\n * const theme = createTheme({\n *   components: {\n *     MuiCssBaseline: {\n *       styleOverrides: (theme) => ({\n *         ...getVisionModeStyles(),\n *         // ... other styles\n *       }),\n *     },\n *   },\n * });\n * ```\n */\nexport function getVisionModeStyles(attributeName = 'data-vision'): Record<string, { filter: string }> {\n  const modes: Array<Exclude<VisionMode, 'normal'>> = ['protanopia', 'deuteranopia', 'tritanopia', 'achromatopsia'];\n\n  return Object.fromEntries(\n    modes.map((mode) => [`html[${attributeName}=\"${mode}\"]:not([data-showcase])`, { filter: `url(\"#${mode}-filter\")` }])\n  ) as Record<string, { filter: string }>;\n}\n"]}

package/dist/accessibility/vision-mode.d.ts

@@ -0,0 +1,154 @@
+/**
+ * Vision Mode Accessibility System
+ *
+ * Simulates color vision deficiencies to help designers and developers
+ * test their applications for accessibility. Uses SVG color matrix filters
+ * applied globally to simulate how users with different types of color
+ * blindness perceive content.
+ *
+ * Vision Deficiency Types:
+ * - Protanopia: Red-blind (affects ~1% of males)
+ * - Deuteranopia: Green-blind (affects ~1% of males)
+ * - Tritanopia: Blue-blind (rare, affects <0.01% of population)
+ * - Achromatopsia: Complete color blindness (grayscale)
+ *
+ * @module @omnitron-dev/prism/accessibility
+ */
+import { type PropsWithChildren, type ReactNode } from 'react';
+/**
+ * Available vision modes for color blindness simulation.
+ */
+export type VisionMode = 'normal' | 'protanopia' | 'deuteranopia' | 'tritanopia' | 'achromatopsia';
+/**
+ * Vision mode metadata for UI display.
+ */
+export interface VisionModeOption {
+    /** Mode identifier */
+    value: VisionMode;
+    /** Human-readable label */
+    label: string;
+    /** Description of the vision deficiency */
+    description: string;
+    /** Percentage of population affected (for educational purposes) */
+    prevalence?: string;
+}
+/**
+ * Vision mode context value.
+ */
+export interface VisionModeContextValue {
+    /** Current vision mode */
+    mode: VisionMode;
+    /** Set the vision mode */
+    setMode: (mode: VisionMode) => void;
+    /** Toggle between normal and a specific mode */
+    toggle: (mode?: VisionMode) => void;
+    /** Reset to normal vision */
+    reset: () => void;
+    /** Whether vision filters are active */
+    isFiltered: boolean;
+}
+/**
+ * Available vision mode options with descriptions.
+ */
+export declare const VISION_MODE_OPTIONS: VisionModeOption[];
+/**
+ * Props for VisionModeProvider.
+ */
+export interface VisionModeProviderProps extends PropsWithChildren {
+    /** Initial vision mode (default: 'normal' or from localStorage) */
+    defaultMode?: VisionMode;
+    /** Storage key for persistence (default: 'prism-vision-mode') */
+    storageKey?: string;
+    /** Disable persistence to localStorage */
+    disablePersistence?: boolean;
+    /** CSS selector attribute name (default: 'data-vision') */
+    attributeName?: string;
+}
+/**
+ * VisionModeProvider - Provides vision mode context and renders filters.
+ *
+ * @example
+ * ```tsx
+ * // In your app root
+ * import { VisionModeProvider } from '@omnitron-dev/prism/accessibility';
+ *
+ * function App() {
+ *   return (
+ *     <VisionModeProvider>
+ *       <YourApp />
+ *     </VisionModeProvider>
+ *   );
+ * }
+ *
+ * // In a component
+ * import { useVisionMode, VISION_MODE_OPTIONS } from '@omnitron-dev/prism/accessibility';
+ *
+ * function AccessibilityPanel() {
+ *   const { mode, setMode } = useVisionMode();
+ *
+ *   return (
+ *     <select value={mode} onChange={(e) => setMode(e.target.value as VisionMode)}>
+ *       {VISION_MODE_OPTIONS.map((option) => (
+ *         <option key={option.value} value={option.value}>
+ *           {option.label}
+ *         </option>
+ *       ))}
+ *     </select>
+ *   );
+ * }
+ * ```
+ */
+export declare function VisionModeProvider({ children, defaultMode, storageKey, disablePersistence, attributeName, }: VisionModeProviderProps): ReactNode;
+/**
+ * useVisionMode - Hook to access vision mode context.
+ *
+ * @throws Error if used outside of VisionModeProvider
+ *
+ * @example
+ * ```tsx
+ * function AccessibilityToggle() {
+ *   const { mode, setMode, isFiltered, reset } = useVisionMode();
+ *
+ *   return (
+ *     <div>
+ *       <p>Current mode: {mode}</p>
+ *       <button onClick={() => setMode('protanopia')}>
+ *         Simulate Protanopia
+ *       </button>
+ *       {isFiltered && (
+ *         <button onClick={reset}>Reset to Normal</button>
+ *       )}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useVisionMode(): VisionModeContextValue;
+/**
+ * Generate CSS styles for vision mode filters.
+ * Use this in your theme's CssBaseline or global styles.
+ *
+ * @param attributeName - The data attribute name (default: 'data-vision')
+ * @returns CSS styles object for MUI CssBaseline styleOverrides
+ *
+ * @example
+ * ```tsx
+ * // In your theme configuration
+ * import { getVisionModeStyles } from '@omnitron-dev/prism/accessibility';
+ *
+ * const theme = createTheme({
+ *   components: {
+ *     MuiCssBaseline: {
+ *       styleOverrides: (theme) => ({
+ *         ...getVisionModeStyles(),
+ *         // ... other styles
+ *       }),
+ *     },
+ *   },
+ * });
+ * ```
+ */
+export declare function getVisionModeStyles(attributeName?: string): Record<string, {
+    filter: string;
+}>;
+//# sourceMappingURL=vision-mode.d.ts.map

package/dist/accessibility/vision-mode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vision-mode.d.ts","sourceRoot":"","sources":["../../src/accessibility/vision-mode.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAML,KAAK,iBAAiB,EACtB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAOf;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,YAAY,GAAG,cAAc,GAAG,YAAY,GAAG,eAAe,CAAC;AAEnG;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,sBAAsB;IACtB,KAAK,EAAE,UAAU,CAAC;IAClB,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,WAAW,EAAE,MAAM,CAAC;IACpB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,0BAA0B;IAC1B,IAAI,EAAE,UAAU,CAAC;IACjB,0BAA0B;IAC1B,OAAO,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IACpC,gDAAgD;IAChD,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACpC,6BAA6B;IAC7B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,wCAAwC;IACxC,UAAU,EAAE,OAAO,CAAC;CACrB;AASD;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,gBAAgB,EA8BjD,CAAC;AAkFF;;GAEG;AACH,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB;IAChE,mEAAmE;IACnE,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,iEAAiE;IACjE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0CAA0C;IAC1C,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,2DAA2D;IAC3D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,WAAW,EACX,UAAwB,EACxB,kBAA0B,EAC1B,aAA6B,GAC9B,EAAE,uBAAuB,GAAG,SAAS,CAwGrC;AAMD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,aAAa,IAAI,sBAAsB,CAQtD;AAMD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,mBAAmB,CAAC,aAAa,SAAgB,GAAG,MAAM,CAAC,MAAM,EAAE;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,CAMrG"}