Add chat-widget example demonstrating @lume/element and Meteor integration

[Copilot]

This PR adds a new comprehensive example that demonstrates how to create and use a custom element called chat-widget using the @lume/element package, fulfilling the requirements outlined in the Space guidelines.

What's Added

New Chat Widget Example (/examples/chat-widget/)

• Custom Element: A fully functional <chat-widget> element built with @lume/element
• Live Chat Interface: Complete chat functionality with login/logout, message posting, and real-time updates
• 3D Background: Optional animated 3D scene with floating spheres using the lume package
• Meteor Integration: Structured for Meteor backend connectivity (demo version included)
• Modern UI: Clean, responsive design with smooth animations and proper styling

Key Features Demonstrated

• @lume/element Usage: Shows proper custom element definition without decorators for maximum compatibility
• Solid.js Reactivity: Demonstrates reactive state management and real-time UI updates
• Component Architecture: Reusable <chat-widget> component that can be embedded anywhere
• User Authentication: Simple login/logout flow with user state management
• Real-time Messaging: Message sending, receiving, and display with timestamps
• 3D Integration: Optional 3D scene background showing lume package capabilities

Implementation Details

The example includes:

• README.md with comprehensive documentation
• example.html with working demonstration
• Integration with existing site navigation
• Proper error handling and user feedback
• Mobile-responsive design
• Accessibility considerations

Technical Approach

• Uses @lume/element's Element base class for custom element creation
• Leverages Solid.js's html template tag for reactive templates
• Implements proper state management with signals
• Includes 3D scene with animated elements for visual appeal
• Structured to easily integrate with a real Meteor backend

The example serves as both a functional demonstration and a template for developers wanting to create custom elements with @lume/element while incorporating real-time features and optional 3D visuals.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• www.google.com
  • Triggering command: node --experimental-import-meta-resolve ./dev-server.mjs (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[trusktr]

@copilot Nice, thanks for starting this. Now put any JS code (such as the ChatWidget class) files outside of the HTML file, and import them using <script type="module>.

[Copilot]

@copilot Nice, thanks for starting this. Now put any JS code (such as the ChatWidget class) files outside of the HTML file, and import them using <script type="module>.

Done! I've refactored the code to extract all JavaScript into separate modules:

• chat-widget.js - Contains the ChatWidget class definition and registration
• background-animation.js - Contains the 3D animation logic for floating spheres
• Updated example.html to import these modules using <script type="module" src="..."> tags

The HTML file is now much cleaner with only a small initialization script, and all the main JavaScript code is properly modularized. This improves code organization and makes it easier to reuse the components.

Committed in 06c3cb5.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• www.google.com
  • Triggering command: node --experimental-import-meta-resolve ./dev-server.mjs (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)