Zircle is a JavaScript library for building circular, zoomable user interfaces using native custom elements. It recreates the original Zircle component family (z-canvas, z-view, z-spot, z-list, z-dialog) with Orbit for radial layout and Zumly for zoom navigation, eliminating the previous Vue dependency. The library provides a declarative HTML API via templates and a programmatic controller via `createZircle()`, supporting multiple independent canvases, themes, responsive sizing, and accessibility. Internal components include radial knobs, sliders, scrollbars, and pagination, all built with pointer, keyboard, and reduced-motion support. The architecture separates engine concerns: Orbit handles polar geometry and SVG progress rings; Zumly manages view history, zoom transitions, and hash routing; Zircle provides the component vocabulary and canvas lifecycle. Key entry points are the `z-canvas` custom element for declarative usage and the `createZircle()` function for programmatic integration. External dependencies are limited to @zumer/orbit and zumly, and the build produces ESM, standalone ESM, IIFE, and CSS bundles. The codebase demonstrates strong software craftsmanship with thorough browser tests across Chromium, Firefox, and WebKit, TypeScript declarations, a reusable base class (ZSurface) for light-DOM content distribution, and clean separation of control logic in control-utils.js. Several components (z-knob, z-scroll, z-dialog, z-list) implement complex interactive behaviors in a framework-agnostic way, making them valuable references for custom element development.
Glyphr Studio 2 is a fully functional, web-based font editor that runs entirely in the browser. It provides a complete workflow for designing typefaces: creating and editing glyphs via a canvas with Bézier path tools, managing kerning pairs and ligatures, building reusable component instances, and importing/exporting fonts in OTF, TTF, WOFF, WOFF2, and SVG font formats. The application is built as a single-page application using vanilla JavaScript (ES modules) with Vite as the build tool, and it relies on several external libraries: font-flux-js for binary font I/O, bezier-boolean for boolean path operations, and svg-to-bezier for SVG outline parsing. The architecture separates project data (a hierarchical model of glyphs, paths, points, components, and settings) from the UI layer, which is composed of custom web components (e.g., FancyButton, EditCanvas, DisplayCanvas) and a publish-subscribe event system for decoupled state updates. Key entry points include src/app/main.js (application bootstrap), src/project_editor/project_editor.js (central controller managing navigation, history, and selection), and src/formats_io/otf/font_export.js (binary font generation). The editor supports multi-project editing, undo/redo with IndexedDB persistence, and a variety of panels for attributes, layers, guides, and quality checks. The codebase demonstrates solid engineering practices with a clear data model, reusable UI components, and comprehensive unit tests for core data structures and import/export routines, though some areas (e.g., UI panels) have less test coverage.
This repository provides a custom HTML element, `<clipboard-copy>`, that copies text or element content to the clipboard when clicked. Implemented as a web component extending `HTMLElement`, it supports multiple data sources: the `value` attribute, a `for` attribute that references another element by ID (including inputs, textareas, and anchor hrefs), or element text content. The element ensures accessibility by automatically adding `role="button"` and `tabindex="0"` if not present, and handles keyboard events (Enter/Space) for activation. Internally, it uses the modern `navigator.clipboard.writeText()` API when available, falling back to `document.execCommand('copy')` via a temporary hidden node. It also normalizes Unicode whitespace characters (e.g., non-breaking spaces, zero-width joiners) to plain spaces or strips them, ensuring the copied text matches visual expectations. A `clipboard-copy` custom event is dispatched on success, allowing external handlers to provide feedback. The source code is written in TypeScript, is well-structured with clear separation of concerns (clipboard logic in `clipboard.ts`, element definition in `clipboard-copy-element.ts`, and a side-effect module for registration), and includes a comprehensive test suite covering element creation, clipboard operations, shadow DOM contexts, and edge cases like disabled state and Unicode normalization. The project follows GitHub's engineering standards (eslint, prettier, CI via GitHub Actions) and is published as an npm package under `@github/clipboard-copy-element`.
This repository is an official Nx example showcasing a micro-frontend architecture with two frontends: an Angular application for product browsing and a React application for a shopping cart, backed by a .NET minimal API. The code demonstrates cross-framework component reuse via custom elements (Web Components), multi-framework state management (NgRx for Angular, useReducer/Context for React), and Nx's monorepo capabilities including code generation, dependency graph, and CI/CD integration. Data is entirely static, with the .NET API used only for OpenAPI codegen; there is no runtime API consumption. The architecture is clean and modular, emphasizing Nx best practices for large monorepos.
LitElement 2.x is a lightweight base class for building fast, reusable Web Components using lit-html templating. It provides a reactive property system with attribute reflection, lifecycle hooks, and a declarative style API via tagged template literals. The library is published by Google and was the foundation for the Lit library (now in a monorepo). This repository contains the source code for version 2.x, which is in maintenance mode; active development has moved to the Lit monorepo. The codebase demonstrates solid engineering with TypeScript, comprehensive tests, and benchmarks, but relies on older dependencies (lit-html v1, TSLint, Web Component Tester) and includes legacy polyfill workarounds. It is not a data research project; it is a UI component library.
This repository is the source code for the micro-frontends.org website, an educational resource explaining the Micro Frontends architectural pattern. It contains a Jekyll-based static site with detailed tutorials, along with multiple self-contained example applications (plain HTML, client-side composition, universal composition, and data-fetching) that demonstrate key Micro Frontends concepts. The example code is organized by team (red, blue, green) and uses Custom Elements, Server-Side Includes (SSI), Docker Compose, and Nginx to illustrate how to build independent frontend fragments that can be composed into a cohesive application. The repository serves primarily as a learning tool and reference implementation, not a production-ready framework.
This repository defines a schema for describing custom elements manifest files. It provides a TypeScript definition file (schema.d.ts) that serves as the single source of truth for the schema, and a generated JSON Schema file (schema.json) for validation. The schema captures metadata about custom elements including their attributes, events, methods, and CSS properties. The repository includes build scripts to generate the JSON Schema from TypeScript definitions, tests to validate the schema against an example manifest, and CI/CD workflows. While the schema itself is well-designed and reusable, the project shows signs of technical drift due to outdated dependencies.