rodydavis/lit-examples
1
0
Fork 0
Code Issues 1 Pull Requests 10 Actions Packages Projects Releases Wiki Activity

fix(lit-components): fix rendering and interaction issues in force-graph, html-table, and draggable-dom
Build and Deploy / build-and-deploy (push) Has been cancelled
Details

Browse Source 
- lit-force-graph: Refactored for instance reuse, better lifecycle management, and added dynamic imports for AR/VR modes.
- lit-html-table: Improved visual design, readability of headers, and fixed reactivity in editable mode.
- lit-draggable-dom: Fixed clipping issues by switching to relative/absolute positioning and resolved a panning speed bug caused by CSS variable inheritance.
This commit is contained in:
Rody Davis
2026-05-17 00:41:14 -07:00
parent bbdbeb9788
commit b9e42c3ef4
253 changed files with 2555 additions and 4471 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+7 -700
View File
@@ -1,705 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lit Web Components Showcase</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--bg-gradient: linear-gradient(135deg, #090d16 0%, #111827 100%);
--glass-bg: rgba(17, 24, 39, 0.7);
--glass-border: rgba(255, 255, 255, 0.08);
--text-primary: #f3f4f6;
--text-secondary: #9ca3af;
--accent: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
--accent-hover: linear-gradient(135deg, #4f46e5 0%, #9333ea 100%);
--shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
--font-main: 'Plus Jakarta Sans', 'Outfit', sans-serif;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: var(--font-main);
background: var(--bg-gradient);
color: var(--text-primary);
min-height: 100vh;
display: flex;
overflow: hidden;
}
/* Sidebar Styles */
.sidebar {
width: 320px;
background: var(--glass-bg);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-right: 1px solid var(--glass-border);
display: flex;
flex-direction: column;
height: 100vh;
z-index: 10;
}
.sidebar-header {
padding: 24px;
border-bottom: 1px solid var(--glass-border);
}
.sidebar-header h1 {
font-size: 20px;
font-weight: 700;
background: var(--accent);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 8px;
}
.sidebar-header p {
font-size: 12px;
color: var(--text-secondary);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
}
.search-box {
padding: 16px 24px;
border-bottom: 1px solid var(--glass-border);
}
.search-input {
width: 100%;
padding: 12px 16px;
border-radius: 12px;
border: 1px solid var(--glass-border);
background: rgba(0, 0, 0, 0.2);
color: var(--text-primary);
font-family: var(--font-main);
font-size: 14px;
outline: none;
transition: all 0.3s ease;
}
.search-input:focus {
border-color: #6366f1;
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}
.project-list {
flex: 1;
overflow-y: auto;
padding: 16px;
}
/* Custom Scrollbar */
.project-list::-webkit-scrollbar {
width: 6px;
}
.project-list::-webkit-scrollbar-track {
background: transparent;
}
.project-list::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
}
.project-item {
display: flex;
align-items: center;
padding: 12px 16px;
border-radius: 12px;
margin-bottom: 8px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid transparent;
}
.project-item:hover {
background: rgba(255, 255, 255, 0.03);
border-color: rgba(255, 255, 255, 0.05);
transform: translateX(4px);
}
.project-item.active {
background: var(--accent);
box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
transform: translateX(6px);
}
.project-emoji {
font-size: 22px;
margin-right: 16px;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
transition: all 0.3s ease;
}
.project-item.active .project-emoji {
background: rgba(255, 255, 255, 0.2);
}
.project-info {
flex: 1;
}
.project-title {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 2px;
}
.project-meta {
font-size: 11px;
color: var(--text-secondary);
}
.project-item.active .project-title {
color: #ffffff;
}
.project-item.active .project-meta {
color: rgba(255, 255, 255, 0.8);
}
/* Main Area Styles */
.main-content {
flex: 1;
height: 100vh;
display: flex;
flex-direction: column;
position: relative;
}
/* Empty/Hero State */
.hero-state {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px;
text-align: center;
animation: fadeIn 0.6s ease;
}
.hero-card {
background: var(--glass-bg);
backdrop-filter: blur(24px);
border: 1px solid var(--glass-border);
border-radius: 24px;
padding: 48px;
max-width: 600px;
box-shadow: var(--shadow);
position: relative;
overflow: hidden;
}
.hero-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, transparent 60%);
pointer-events: none;
}
.hero-icon {
font-size: 64px;
margin-bottom: 24px;
display: inline-block;
animation: float 4s ease-in-out infinite;
}
.hero-title {
font-size: 32px;
font-weight: 800;
margin-bottom: 16px;
background: var(--accent);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-desc {
font-size: 16px;
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: 32px;
}
.hero-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.stat-item {
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--glass-border);
border-radius: 16px;
padding: 16px;
}
.stat-val {
font-size: 24px;
font-weight: 700;
color: #6366f1;
margin-bottom: 4px;
}
.stat-lbl {
font-size: 11px;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Iframe Viewport Styles */
.viewport {
display: none;
flex-direction: column;
flex: 1;
height: 100vh;
animation: fadeIn 0.4s ease;
}
.viewport-header {
background: rgba(17, 24, 39, 0.9);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--glass-border);
padding: 16px 24px;
display: flex;
align-items: center;
justify-content: space-between;
}
.viewport-title-area {
display: flex;
align-items: center;
}
.back-btn {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--glass-border);
color: var(--text-primary);
width: 36px;
height: 36px;
border-radius: 10px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
margin-right: 16px;
transition: all 0.2s ease;
}
.back-btn:hover {
background: rgba(255, 255, 255, 0.1);
transform: scale(1.05);
}
.viewport-title {
font-size: 18px;
font-weight: 700;
}
.viewport-controls {
display: flex;
align-items: center;
gap: 12px;
}
.size-btn {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--glass-border);
color: var(--text-secondary);
padding: 8px 12px;
border-radius: 8px;
cursor: pointer;
font-size: 12px;
font-weight: 600;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 6px;
}
.size-btn:hover, .size-btn.active {
background: rgba(255, 255, 255, 0.12);
color: var(--text-primary);
border-color: rgba(255, 255, 255, 0.2);
}
.external-link-btn {
background: var(--accent);
border: none;
color: #ffffff;
padding: 8px 16px;
border-radius: 8px;
cursor: pointer;
font-size: 12px;
font-weight: 600;
text-decoration: none;
display: flex;
align-items: center;
gap: 6px;
transition: all 0.2s ease;
}
.external-link-btn:hover {
background: var(--accent-hover);
box-shadow: 0 4px 12px rgba(168, 85, 247, 0.25);
}
.iframe-wrapper {
flex: 1;
background: #000000;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
overflow: hidden;
position: relative;
}
iframe {
width: 100%;
height: 100%;
border: none;
border-radius: 12px;
background: #ffffff;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Responsiveness viewports */
.iframe-wrapper.desktop iframe {
width: 100%;
height: 100%;
}
.iframe-wrapper.tablet iframe {
width: 768px;
height: 1024px;
max-height: 100%;
}
.iframe-wrapper.mobile iframe {
width: 375px;
height: 667px;
max-height: 100%;
}
/* Keyframes */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
</style>
<meta http-equiv="refresh" content="0; url=./lit-showcase/index.html" />
<script>
window.location.replace("./lit-showcase/index.html");
</script>
</head>
<body>
<!-- Sidebar -->
<div class="sidebar">
<div class="sidebar-header">
<h1>Lit Showcase</h1>
<p>Multi-Page App Playground</p>
</div>
<div class="search-box">
<input type="text" class="search-input" placeholder="Search examples..." id="search">
</div>
<div class="project-list" id="projectList">
<div class="project-item" data-path="./lit-3d-piano/index.html" data-name="Lit 3D Piano">
<span class="project-emoji">🎹</span>
<div class="project-info">
<div class="project-title">Lit 3D Piano</div>
<div class="project-meta">WebGL Instrument</div>
</div>
</div>
<div class="project-item" data-path="./lit-calculator/docs/index.html" data-name="Lit Calculator">
<span class="project-emoji">🧮</span>
<div class="project-info">
<div class="project-title">Lit Calculator</div>
<div class="project-meta">Mathematical Engine</div>
</div>
</div>
<div class="project-item" data-path="./lit-code-editor/index.html" data-name="Lit Code Editor">
<span class="project-emoji">💻</span>
<div class="project-info">
<div class="project-title">Lit Code Editor</div>
<div class="project-meta">Monaco Editor Integrator</div>
</div>
</div>
<div class="project-item" data-path="./lit-draggable-dom/index.html" data-name="Lit Draggable Dom">
<span class="project-emoji">🖐️</span>
<div class="project-info">
<div class="project-title">Lit Draggable Dom</div>
<div class="project-meta">Layout Manager</div>
</div>
</div>
<div class="project-item" data-path="./lit-file-based-routing/index.html" data-name="Lit File Based Routing">
<span class="project-emoji">🚦</span>
<div class="project-info">
<div class="project-title">Lit File Based Routing</div>
<div class="project-meta">Application Router</div>
</div>
</div>
<div class="project-item" data-path="./lit-force-graph/index.html" data-name="Lit Force Graph">
<span class="project-emoji">🕸️</span>
<div class="project-info">
<div class="project-title">Lit Force Graph</div>
<div class="project-meta">3D Networking Engine</div>
</div>
</div>
<div class="project-item" data-path="./lit-html-editor/index.html" data-name="Lit HTML Editor">
<span class="project-emoji">✍️</span>
<div class="project-info">
<div class="project-title">Lit HTML Editor</div>
<div class="project-meta">Real-time Markdown & code</div>
</div>
</div>
<div class="project-item" data-path="./lit-html-table/index.html" data-name="Lit HTML Table">
<span class="project-emoji">📊</span>
<div class="project-info">
<div class="project-title">Lit HTML Table</div>
<div class="project-meta">Spreadsheet Grid View</div>
</div>
</div>
<div class="project-item" data-path="./lit-modules/index.html" data-name="Lit Modules">
<span class="project-emoji">📦</span>
<div class="project-info">
<div class="project-title">Lit Modules</div>
<div class="project-meta">NPM Packaging Harness</div>
</div>
</div>
<div class="project-item" data-path="./lit-native/index.html" data-name="Lit Native">
<span class="project-emoji">📱</span>
<div class="project-info">
<div class="project-title">Lit Native</div>
<div class="project-meta">Mobile UI Mockups</div>
</div>
</div>
<div class="project-item" data-path="./lit-node-editor/index.html" data-name="Lit Node Editor">
<span class="project-emoji">🪢</span>
<div class="project-info">
<div class="project-title">Lit Node Editor</div>
<div class="project-meta">Visual Shader graph</div>
</div>
</div>
<div class="project-item" data-path="./lit-sheet-music/index.html" data-name="Lit Sheet Music">
<span class="project-emoji">🎼</span>
<div class="project-info">
<div class="project-title">Lit Sheet Music</div>
<div class="project-meta">OSMD Renderer</div>
</div>
</div>
<div class="project-item" data-path="./lit-starter-ts" data-name="Lit Starter TS">
<span class="project-emoji">🚀</span>
<div class="project-info">
<div class="project-title">Lit Starter TS</div>
<div class="project-meta">TypeScript Project Boilerplate</div>
</div>
</div>
<div class="project-item" data-path="./lit-vscode-extension/index.html" data-name="Lit VSCode Extension">
<span class="project-emoji">🔌</span>
<div class="project-info">
<div class="project-title">Lit VSCode Extension</div>
<div class="project-meta">Webview Core</div>
</div>
</div>
<div class="project-item" data-path="./lit-wmr/public/index.html" data-name="Lit WMR">
<span class="project-emoji">⚡</span>
<div class="project-info">
<div class="project-title">Lit WMR</div>
<div class="project-meta">WMR Bundled Prototype</div>
</div>
</div>
<div class="project-item" data-path="./vite-lit-capacitor/index.html" data-name="Vite Lit Capacitor">
<span class="project-emoji">🔋</span>
<div class="project-info">
<div class="project-title">Vite Lit Capacitor</div>
<div class="project-meta">Hybrid Mobile Container</div>
</div>
</div>
<div class="project-item" data-path="./vite-lit-element-starter/index.html" data-name="Vite Lit Element Starter">
<span class="project-emoji">🌱</span>
<div class="project-info">
<div class="project-title">Vite Lit Element Starter</div>
<div class="project-meta">Vite Bundled Boilerplate</div>
</div>
</div>
<div class="project-item" data-path="./vite-rxdb-lit/index.html" data-name="Vite RxDB Lit">
<span class="project-emoji">💾</span>
<div class="project-info">
<div class="project-title">Vite RxDB Lit</div>
<div class="project-meta">Offline Sync Database</div>
</div>
</div>
<div class="project-item" data-path="./figma-to-lit/ui.html" data-name="Figma To Lit">
<span class="project-emoji">🎨</span>
<div class="project-info">
<div class="project-title">Figma To Lit</div>
<div class="project-meta">Figma Exporter Plugin</div>
</div>
</div>
<div class="project-item" data-path="./figma_lit_example/ui.html" data-name="Figma Lit Example">
<span class="project-emoji">📐</span>
<div class="project-info">
<div class="project-title">Figma Lit Example</div>
<div class="project-meta">Assembly Figma Plugin</div>
</div>
</div>
</div>
</div>
<!-- Main Showcase Content -->
<div class="main-content">
<!-- Hero State -->
<div class="hero-state" id="heroState">
<div class="hero-card">
<span class="hero-icon">⚡</span>
<h2 class="hero-title">Lit Showcase Hub</h2>
<p class="hero-desc">Explore a rich collection of modular Lit Web Components, prototypes, interactive instruments, databases, and custom UI modules. Select any example from the sidebar to preview in real-time with responsive viewport sandboxing.</p>
<div class="hero-stats">
<div class="stat-item">
<div class="stat-val">20</div>
<div class="stat-lbl">Projects</div>
</div>
<div class="stat-item">
<div class="stat-val">100%</div>
<div class="stat-lbl">Vite MPA</div>
</div>
<div class="stat-item">
<div class="stat-val">Nginx</div>
<div class="stat-lbl">Deploy</div>
</div>
</div>
</div>
</div>
<!-- Iframe Viewport -->
<div class="viewport" id="viewport">
<div class="viewport-header">
<div class="viewport-title-area">
<button class="back-btn" id="backBtn">←</button>
<span class="viewport-title" id="viewportTitle">Project Name</span>
</div>
<div class="viewport-controls">
<button class="size-btn active" data-size="desktop">💻 Desktop</button>
<button class="size-btn" data-size="tablet">📟 Tablet</button>
<button class="size-btn" data-size="mobile">📱 Mobile</button>
<a href="#" target="_blank" class="external-link-btn" id="extLink">🌐 Open Tab</a>
</div>
</div>
<div class="iframe-wrapper desktop" id="iframeWrapper">
<iframe id="previewIframe" src="about:blank"></iframe>
</div>
</div>
</div>
<script>
const items = document.querySelectorAll('.project-item');
const heroState = document.getElementById('heroState');
const viewport = document.getElementById('viewport');
const iframe = document.getElementById('previewIframe');
const viewportTitle = document.getElementById('viewportTitle');
const extLink = document.getElementById('extLink');
const backBtn = document.getElementById('backBtn');
const sizeBtns = document.querySelectorAll('.size-btn');
const iframeWrapper = document.getElementById('iframeWrapper');
// Click handler for project showcase selection
items.forEach(item => {
item.addEventListener('click', () => {
items.forEach(i => i.classList.remove('active'));
item.classList.add('active');
const path = item.getAttribute('data-path');
const name = item.getAttribute('data-name');
heroState.style.display = 'none';
viewport.style.display = 'flex';
iframe.src = path;
viewportTitle.textContent = name;
extLink.href = path;
});
});
// Back to main showcase
backBtn.addEventListener('click', () => {
items.forEach(i => i.classList.remove('active'));
iframe.src = 'about:blank';
viewport.style.display = 'none';
heroState.style.display = 'flex';
});
// Viewport resizing controls
sizeBtns.forEach(btn => {
btn.addEventListener('click', () => {
sizeBtns.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
const size = btn.getAttribute('data-size');
iframeWrapper.className = 'iframe-wrapper ' + size;
});
});
// Live search filtering
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', (e) => {
const val = e.target.value.toLowerCase();
items.forEach(item => {
const title = item.getAttribute('data-name').toLowerCase();
if (title.includes(val)) {
item.style.display = 'flex';
} else {
item.style.display = 'none';
}
});
});
</script>
Redirecting to <a href="./lit-showcase/index.html">Lit Web Components Showcase</a>...
</body>
</html>
</html>