52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T3bca,'use client'; import { Accessibility, ALargeSmall, Baseline, Ban, Contrast, Link2, RotateCcw, Space, Type, X, } from 'lucide-react'; import { ComponentProps, ReactNode, useCallback, useEffect, useState, useSyncExternalStore, } from 'react'; import { Body2, Label1, Label2 } from '@/components/ui/typography'; import { cn } from '@/lib/utils'; /* * UX4G accessibility widget: a floating button opening a panel of reading * adjustments. Every setting is applied to the document root and remembered, * so it survives navigation. * * UX4G also lists a "Screen Reader" row. That is deliberately not shipped — * a browser-based text-to-speech toy is not a screen reader, and pretending * otherwise is worse for the people it claims to serve. Pass `extraRows` if * you have a real integration to offer. */ const STORAGE_KEY = 'indiacn-accessibility'; const STEP_MAX = 3; interface IAccessibilitySettings { textStep: number; lineStep: number; spacingStep: number; highlightLinks: boolean; dyslexiaFont: boolean; hideImages: boolean; invertColors: boolean; readingMask: boolean; } const DEFAULT_SETTINGS: IAccessibilitySettings = { textStep: 0, lineStep: 0, spacingStep: 0, highlightLinks: false, dyslexiaFont: false, hideImages: false, invertColors: false, readingMask: false, }; /* * Settings live in a module store read through useSyncExternalStore. Loading * them in an effect would set state during render-commit, and it would also * let two widgets on one page disagree. */ let currentSettings: IAccessibilitySettings = DEFAULT_SETTINGS; const LISTENERS = new Set<() => void>(); if (typeof window !== 'undefined') { try { const saved = localStorage.getItem(STORAGE_KEY); if (saved) currentSettings = { ...DEFAULT_SETTINGS, ...JSON.parse(saved) }; } catch { // Storage blocked or nothing saved; defaults stand. } } /** Subscribes a widget instance to setting changes. */ function subscribeSettings(listener: () => void) { LISTENERS.add(listener); return () => LISTENERS.delete(listener); } /** Current settings, for useSyncExternalStore. */ const getSettings = () => currentSettings; /** Server render has no storage, so it always sees the defaults. */ const getServerSettings = () => DEFAULT_SETTINGS; /** Replaces the settings and notifies every mounted widget. */ function writeSettings(next: IAccessibilitySettings) { currentSettings = next; applySettings(next); LISTENERS.forEach(listener => listener()); } /** * Shared access to the reading settings. * * Exported so other components — the navbar's text-size control, for one — act * on the same store instead of keeping a second copy that disagrees with the * panel. */ function useAccessibilitySettings() { const settings = useSyncExternalStore(subscribeSettings, getSettings, getServerSettings); /* * Applied from a mount effect rather than at module scope. Doing it at * module scope tripped a bundler-level temporal dead zone * ("Cannot access 'k' before initialization") even with the declarations * ordered correctly, and a module side effect is not worth that fight. * * It lives on the hook, not on the panel, so the navbar's text-size control * works with no panel mounted — which was the original bug. */ useEffect(() => { injectBehaviourStyles(); applySettings(currentSettings); }, [settings]); const setStep = useCallback((key: 'textStep' | 'lineStep' | 'spacingStep', value: number) => { writeSettings({ ...currentSettings, [key]: Math.min(Math.max(value, 0), STEP_MAX) }); }, []); /* * Reads the store at call time rather than from the render closure. Two * clicks in one tick both saw the same captured step and the second was * lost, so three presses landed on level 2. */ const stepBy = useCallback((key: 'textStep' | 'lineStep' | 'spacingStep', delta: number) => { const next = Math.min(Math.max(currentSettings[key] + delta, 0), STEP_MAX); writeSettings({ ...currentSettings, [key]: next }); }, []); const reset = useCallback(() => writeSettings(DEFAULT_SETTINGS), []); return { settings, setStep, stepBy, reset, maxStep: STEP_MAX }; } /** Injected once. Registry consumers get the behaviour without extra CSS. */ const BEHAVIOUR_CSS = ` [data-a11y-highlight-links='true'] a { outline: 2px solid currentColor; outline-offset: 2px; text-decoration: underline !important; } [data-a11y-dyslexia='true'] * { font-family: 'Atkinson Hyperlegible', 'Comic Sans MS', Verdana, sans-serif !important; letter-spacing: 0.05em; } [data-a11y-hide-images='true'] :is(img, picture, video, svg:not([data-a11y-keep])) { visibility: hidden !important; } [data-a11y-invert='true'] { filter: invert(1) hue-rotate(180deg); } [data-a11y-invert='true'] :is(img, picture, video) { filter: invert(1) hue-rotate(180deg); } .indiacn-a11y-mask { position: fixed; inset-inline: 0; height: 8rem; pointer-events: none; z-index: 2147483000; box-shadow: 0 0 0 100vh rgb(0 0 0 / 0.6); } @media (prefers-reduced-motion: reduce) { .indiacn-a11y-mask { transition: none; } } `; /** Adds the behaviour stylesheet to the document a single time. */ function injectBehaviourStyles() { const id = 'indiacn-a11y-styles'; if (document.getElementById(id)) return; const style = document.createElement('style'); style.id = id; style.textContent = BEHAVIOUR_CSS; document.head.appendChild(style); } /** * Writes settings onto the document root and remembers them. * * This belongs to the store, not to a component. It used to run in an effect * inside the panel, which meant the navbar's text-size control did nothing * unless a panel happened to be mounted somewhere on the page. */ function applySettings(settings: IAccessibilitySettings) { const root = document.documentElement; root.style.fontSize = settings.textStep ? `${100 + settings.textStep * 12.5}%` : ''; root.style.lineHeight = settings.lineStep ? String(1.5 + settings.lineStep * 0.25) : ''; root.style.letterSpacing = settings.spacingStep ? `${settings.spacingStep * 0.05}em` : ''; root.dataset.a11yHighlightLinks = String(settings.highlightLinks); root.dataset.a11yDyslexia = String(settings.dyslexiaFont); root.dataset.a11yHideImages = String(settings.hideImages); root.dataset.a11yInvert = String(settings.invertColors); try { localStorage.setItem(STORAGE_KEY, JSON.stringify(settings)); } catch { // Private browsing and blocked storage are fine; the settings just do not persist. } } /** Horizontal reading band that follows the pointer. */ function ReadingMask({ active }: { active: boolean }) { const [top, setTop] = useState(0); useEffect(() => { if (!active) return; const move = (e: PointerEvent) => setTop(e.clientY - 64); window.addEventListener('pointermove', move); return () => window.removeEventListener('pointermove', move); }, [active]); if (!active) return null; return

; } interface IRowProps { icon: ReactNode; label: string; children: ReactNode; } /** One panel row: icon, label, control. */ function AccessibilityRow({ icon, label, children }: IRowProps) { return (

{icon}

{label} {children}

); } interface IStepperButtonProps { label: string; step: number; onStep: () => void; } /** Cycles a stepped setting and reports where it is. */ function StepControl({ label, step, onStep }: IStepperButtonProps) { return ( ); } interface IToggleControlProps { label: string; on: boolean; onToggle: () => void; } /** Small switch used by the boolean rows. */ function ToggleControl({ label, on, onToggle }: IToggleControlProps) { return ( ); } interface IAccessibilityWidgetProps extends Omit, 'children'> { /** Extra rows appended before the footer, for integrations we cannot ship. */ extraRows?: ReactNode; title?: string; } /** * Floating accessibility panel with reading adjustments. * * Settings apply to the whole document and persist across pages. */ function AccessibilityWidget({ className, extraRows, title = 'Accessibility options', ...props }: IAccessibilityWidgetProps) { const [open, setOpen] = useState(false); const { settings } = useAccessibilitySettings(); useEffect(() => { if (!open) return; const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setOpen(false); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [open]); const toggleOpen = useCallback(() => setOpen(o => !o), []); const close = useCallback(() => setOpen(false), []); const reset = useCallback(() => writeSettings(DEFAULT_SETTINGS), []); const bump = useCallback( (key: 'textStep' | 'lineStep' | 'spacingStep') => writeSettings({ ...currentSettings, [key]: (currentSettings[key] + 1) % (STEP_MAX + 1) }), [], ); const flip = useCallback( (key: keyof IAccessibilitySettings) => writeSettings({ ...currentSettings, [key]: !currentSettings[key] }), [], ); const bumpText = useCallback(() => bump('textStep'), [bump]); const bumpLine = useCallback(() => bump('lineStep'), [bump]); const bumpSpacing = useCallback(() => bump('spacingStep'), [bump]); const flipLinks = useCallback(() => flip('highlightLinks'), [flip]); const flipDyslexia = useCallback(() => flip('dyslexiaFont'), [flip]); const flipImages = useCallback(() => flip('hideImages'), [flip]); const flipInvert = useCallback(() => flip('invertColors'), [flip]); const flipMask = useCallback(() => flip('readingMask'), [flip]); return (

{open && ( )}

); } export type { IAccessibilitySettings }; export { AccessibilityWidget, useAccessibilitySettings }; 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L52",null,{"namespace":"@indiacn","registryDependencies":["https://indiacn.in/r/theme.json","https://indiacn.in/r/typography.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"components/ui/accessibility-widget.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]