18 مستودعات
Systems for managing keyboard focus and navigation flow between individual interactive UI elements.
Distinct from Focus Navigation Controllers: Focuses on element-level focus within a view rather than window-level navigation between screens.
Explore 18 awesome GitHub repositories matching development tools & productivity · Element Focus Controllers. Refine with filters or upvote what's useful.
Terminal.Gui is a cross-platform .NET toolkit for building interactive text-based user interfaces. It provides a component-based architecture, a terminal rendering engine, and a declarative layout system to create console applications that run consistently across Windows, macOS, and Linux. The framework distinguishes itself with a comprehensive set of interactive console widgets, including data grids, hex editors, and hierarchical tree components. It supports advanced visual capabilities such as 24-bit True Color, Sixel image support, and a relative-coordinate layout system that adapts to ter
TUI system for controlling the navigation flow and focus movement between interactive elements.
This repository contains the HTML specification, which defines the core standards for web page structuring, content organization, and document rendering. It establishes the fundamental algorithms for state-machine-based tokenization, tree construction for the document object model, and origin-based security isolation. The specification provides a framework for defining custom elements with independent lifecycles and registries. It also details the requirements for cross-document communication, session history management, and the synchronization of interface properties with content attributes.
Defines how keyboard focus and navigation flow are managed between interactive UI elements.
react-native-video is a cross-platform video player component for React Native that enables the playback of local and remote video files using native platform decoders. It functions as an adaptive streaming player supporting HLS, DASH, and SmoothStreaming formats with automatic bitrate selection and quality adaptation. The project is distinguished by its support for industry-standard digital rights management, including Widevine, FairPlay, and PlayReady, and a plugin-based architecture that allows for the injection of custom analytics or playback logic without modifying the core library. It a
Implements directional focus management and remote control input handling for television platforms.
This project is an accessible modal component for React applications. It provides a dialog window that overlays main content and manages keyboard focus to ensure compatibility with assistive technologies. The component integrates a portal wrapper to render modal content into a separate DOM node, avoiding layout nesting issues. It uses a focus-trapping system to restrict keyboard navigation to the dialog window and prevent users from tabbing into background page content. The library covers visibility control, custom portal mounting, and visual styling for dialog windows and overlays. It also
Stores a reference to the previously active element and returns focus to it after the modal closes.
Golden Layout is a framework-agnostic UI container and web window layout manager designed to organize application interfaces into a flexible grid of draggable and resizable multi-pane windows. It functions as a hierarchical grid system that arranges page elements into a tree of nested rows and columns to create complex professional interfaces. The system acts as a multi-window workspace orchestrator, allowing components to be detached from the main layout into independent native browser windows. It also serves as a serializable layout engine that captures the arrangement of user interface com
Implements logic to assign or remove focus from specific components to trigger focus and blur events.
Reach UI is an open-source library of accessible, low-level React components designed to serve as a foundation for building design systems and interactive user interfaces. It is an accessibility-first toolkit that handles core concerns like ARIA attributes, focus management, and screen reader support automatically, without requiring developer configuration. The library is built as a collection of standalone packages, each managing its own lifecycle and dependencies, enabling granular adoption and tree-shaking. Components use a polymorphic rendering pattern, accepting an as prop to render as
Controls and tracks keyboard focus within interactive elements like modals, menus, and complex widgets.
re-frame هو إطار عمل وظيفي لبناء تطبيقات الصفحة الواحدة (SPA) باستخدام ClojureScript. يوفر قاعدة بيانات مركزية غير قابلة للتغيير تعمل كمصدر وحيد للحقيقة لحالة التطبيق بالكامل، مما يفرض تدفق بيانات أحادي الاتجاه صارم حيث تؤدي الأحداث إلى تغييرات في الحالة وتحديثات لاحقة للعرض. يتميز إطار العمل برسم بياني تفاعلي للإشارات وخط أنابيب (pipeline) وسيط يعتمد على المعترضات (interceptors). من خلال التعامل مع منطق التطبيق كسلسلة من الأحداث القائمة على البيانات والآثار الجانبية التصريحية، فإنه يفصل منطق الأعمال عن طبقة العرض. تسمح هذه البنية للمطورين بإدارة تغييرات الحالة المعقدة والعمليات الخارجية من خلال دوال نقية، مما يضمن تنفيذ الآثار الجانبية بواسطة مترجم منفصل بدلاً من الاستدعاءات الإلزامية. يتضمن النظام مجموعة شاملة من الإمكانيات لإدارة بنية التطبيق، بما في ذلك اشتقاق البيانات التفاعلي، ومطابقة العرض القائمة على الاشتراكات، وإدارة الحالة القائمة على الأحداث. يدعم سير عمل التطوير المتقدم مثل تتبع الأحداث، وحفظ نقاط فحص الحالة، والقدرة على محاكاة الآثار الجانبية للاختبار المعزول. تم تصميم المشروع للتكامل مع React، مستفيداً من مطابقة DOM الافتراضي لتحديث واجهات المستخدم بكفاءة. يوفر مجموعة قوية من الأدوات للتعامل مع الاهتمامات المتقاطعة، وإدارة رسوم بيانية معقدة لتدفق البيانات، وتنسيق العمليات غير المتزامنة ضمن خط أنابيب أحداث متسلسل وقابل للتنبؤ.
Sets focus to a specific HTML element after rendering to ensure the element exists before the imperative operation.
هذا المشروع عبارة عن لوحة رسم بصرية مدعومة بالذكاء الاصطناعي وإطار عمل للسبورة البيضاء التعاونية. يعمل كمحرك رسم متجه قابل للتخصيص وأداة لتحويل رسومات الواجهة المرسومة يدوياً والنماذج الأولية (Wireframes) إلى كود وظيفي باستخدام الذكاء الاصطناعي. يتميز النظام بدمج وكلاء الذكاء الاصطناعي الذين يمكنهم قراءة وتعديل وتوليد المخططات البصرية مباشرة على اللوحة. كما يوفر محرر سير عمل يعتمد على العقد لبناء خطوط أنابيب الأتمتة وتدفقات معالجة البيانات من خلال ربط المكونات متعددة الوسائط. تغطي المنصة مجموعة واسعة من القدرات، بما في ذلك التعاون متعدد اللاعبين في الوقت الفعلي مع تتبع وجود المستخدم، ولوحة غير محدودة مع عرض مسرع بواسطة GPU، ومجموعة شاملة من أدوات معالجة الكائنات والمحاذاة. كما تنفذ معايير إمكانية الوصول إلى الويب وتوفر واجهة قابلة للبرمجة لتعريف الأشكال المخصصة وعناصر تحكم اللوحة البرمجية.
Tracks and restores keyboard focus to active elements after modal interactions are dismissed.
OrionTV is a cross-platform television application framework and external API video client. It functions as a video playback application designed for television screens, utilizing a system that locates and streams content by querying external API interfaces rather than hosting media files locally. The project uses Expo to generate compatible application binaries for multiple television operating systems from a single codebase. Its interface is specifically optimized for large screens and is navigated using remote control focus management. The framework covers capabilities for third-party vid
Implements a focus management system optimized for D-pad and remote control navigation on TV screens.
Open-UI هي مجموعة من مواصفات معايير واجهة مستخدم الويب ومكتبة مكونات واجهة مستخدم موحدة. توفر تعريفات تقنية لمكونات واجهة المستخدم العالمية، والسلوكيات، ومتطلبات إمكانية الوصول المصممة لضمان التوافق عبر المتصفحات من خلال سلسلة من مقترحات لغة الويب. يتميز المشروع بـ polyfill لإمكانية الوصول إلى الويب و polyfills للتحكم القابلة للتوسيع التي توفر وظائف تحكم حديثة في واجهة المستخدم في البيئات التي تفتقر إلى دعم المتصفح الأصلي. ويتضمن مجموعة توافق المتصفح للتحقق من أن المكونات تلبي متطلبات السلوك وإمكانية الوصول المحددة. تغطي المكتبة مجموعة واسعة من عناصر الواجهة، بما في ذلك مربعات التحرير والسرد القابلة للبحث، وأنظمة القوائم التفاعلية، ومدخلات النطاق متعددة المقابض، وقوائم الاختيار القابلة للتخصيص. كما تتضمن مكونات التخطيط والتنقل مثل الأكورديون، والنوافذ المشروطة، ومسارات التنقل (breadcrumbs)، وعناصر العرض الدوارة (carousels). يستخدم النظام ربط السلوك التصريحي وإرسال الإجراءات القائم على الأحداث لتنفيذ منطق المكون، مع كشف الحالات الداخلية من خلال CSS pseudo-elements للتصميم البصري.
Controls whether an element and its subtree are keyboard-focusable while retaining other forms of interactivity like mouse clicks.
SmartTubeLegacy هو عميل YouTube مفتوح المصدر لأجهزة Android TV وأجهزة الاستقبال (set-top boxes). يعمل كمشغل وسائط محسن للشاشات الكبيرة، ويوفر واجهة متخصصة لبث محتوى الفيديو. يتيح التطبيق استهلاك الوسائط بدون إعلانات عن طريق تجاوز الإعلانات والأجزاء الممولة. ويدعم البث عالي الدقة حتى 4K، مستخدماً فك تشفير الفيديو المسرع بالأجهزة لتحسين الأداء على أجهزة التلفزيون. يتضمن النظام واجهة leanback مصممة للتنقل عبر أجهزة التحكم عن بعد القياسية للتلفزيون. كما يتميز بإدارة حسابات داخلية لمزامنة ملفات تعريف المستخدمين وآلية تحديث تلقائي لتثبيت إصدارات التطبيق الجديدة.
Implements a focus management system optimized for D-pad and television remote control navigation.
RmlUi هي مكتبة عرض واجهة مستخدم (UI) وبرمجيات وسيطة عبر المنصات تمكن من إنشاء واجهات المستخدم باستخدام مجموعة فرعية من HTML وCSS. تعمل كطبقة مستقلة عن العرض مصممة لدمج التخطيط والتصميم القياسي للويب في محركات الألعاب المخصصة والتطبيقات المضمنة. يتميز إطار العمل بدمجه لـ Lua للمنطق والتحكم الديناميكي، بالإضافة إلى مجموعة أدوات متخصصة لعرض صور SVG ورسوم Lottie المتحركة. يستخدم خلفية عرض قابلة للتوصيل تفصل توليد الهندسة عن العرض النهائي، مما يسمح له بتوليد هندسة ذات ملمس (textured) لخطوط أنابيب رسومية مختلفة. يغطي النظام مجموعة واسعة من الإمكانيات، بما في ذلك محرك تخطيط نموذج الصندوق (box-model)، ومحرك أنماط متسلسل، وربط البيانات لمزامنة النماذج مع العروض. يوفر إدارة شاملة للمدخلات للماوس ولوحة المفاتيح واللمس، إلى جانب خدمات التدويل لترجمة النصوص بناءً على اللغة. تشمل الميزات الإضافية تحجيم DPI العالي، وتكوين الشفافية القائم على الطبقات، ومجموعة من المكونات التفاعلية مثل أشرطة التمرير والقوائم المنسدلة. يمكن تجميع المصدر في ملفات WebAssembly ثنائية للتنفيذ في متصفحات الويب.
Provides controls to determine if an element can receive focus or accept user-initiated click events.
أداة toolong هي عارض سجلات طرفي ومدير سجلات TUI مصمم لمراقبة تدفقات السجلات الحية والتنقل في ملفات السجلات الكبيرة. تعمل كمجمع للسجلات ومنسق JSONL، قادرة على دمج ملفات سجلات متعددة في عرض زمني واحد من خلال الكشف التلقائي عن الطوابع الزمنية. يدعم التطبيق تصور البيانات المهيكلة من خلال تنسيق ملفات JSONL بشكل جميل وتطبيق تمييز الصيغ البرمجية على أنماط سجلات خوادم الويب الشائعة. يتعامل التطبيق مع البيانات واسعة النطاق بكفاءة من خلال طرق عرض قابلة للتمرير ذات حجم افتراضي، مما يسمح للمستخدمين بفتح السجلات المضغوطة أو الملفات بأي حجم دون تحميل المستند بالكامل في الذاكرة. يتضمن النظام قدرات لتتبع تدفقات السجلات (Tailing)، وإجراء مطابقة نصية تقريبية (Fuzzy matching)، وإدارة التنقل عبر نموذج شاشة قائم على المكدس. كما يوفر لوحة أوامر لاكتشاف وظائف التطبيق ويدعم عناصر تفاعلية مثل الروابط القابلة للنقر وتلميحات الأدوات عند التحويم.
Programmatically shifts input focus between individual interactive UI elements.
This project is a jQuery plugin that provides HTML5 placeholder emulation for input and textarea fields. It functions as a compatibility library to ensure consistent placeholder behavior across different web browsers, specifically those that do not natively support the HTML5 placeholder attribute. The utility extends the functionality of DOM input fields by modifying how form elements display hint text before a user provides input. It integrates as a browser compatibility layer to provide legacy browser support for modern HTML5 form features. The implementation covers browser feature detecti
Toggles between showing placeholder hints and allowing user input by listening for focus and blur events.
This project is a native Android TV Bilibili client and third-party video player designed for streaming and browsing video content on large screens. It functions as a television-centric media application that enables users to access Bilibili content through an interface optimized for distance and remote control navigation. The application implements remote-optimized navigation to map hardware input to UI focus patterns and utilizes adaptive bitrate switching to adjust video quality based on network conditions. It employs a reactive state management architecture and a type-safe network layer t
Implements a focus management system optimized for D-pad and remote control navigation on television screens.
Eloquent-JavaScript is a comprehensive JavaScript programming textbook and interactive coding tutorial designed for web development education. It serves as both a language reference and a practical guide, combining theoretical lessons with an environment where learners can execute and modify code examples. The project focuses on the fundamental principles of the JavaScript language, including lexical scoping, prototype-based inheritance, and asynchronous patterns. It provides detailed instruction on object-oriented programming, functional programming, and the use of the browser DOM to create
Demonstrates how to detect when a user enters or leaves a form field using focus and blur events.
This project is an Apple TV video application and API client for Bilibili, designed to stream video content with support for HDR and subtitles. It serves as a specialized media player that integrates with Bilibili services to provide video discovery and user account management. The application features a real-time danmaku renderer that overlays scrolling user comments on top of video playback. It includes a plugin-based player system for adding custom overlays and behavioral modifications, as well as tools for adjusting playback speed and skipping sponsored segments. The system covers adapti
Manages user interaction through a structured tree of focusable elements designed for remote-control navigation.
This library provides a flexible dropdown menu component for building single and multi-select inputs within web applications. It is designed to support accessible data entry through keyboard navigation and screen reader compatibility, while maintaining interface responsiveness when handling large datasets. The component distinguishes itself through a high degree of configurability, allowing developers to replace default templates, icons, and labels with custom visual elements. It utilizes virtual scrolling to render only visible items, ensuring performance remains consistent even when managin
Exposes internal input elements to the parent scope to enable programmatic management of keyboard focus and navigation states.