-
-
- setSearch(e.target.value)}
- className="glass-library-search"
- autoFocus
- />
- {search && (
-
- )}
-
-
-
- Sort:
-
-
-
-
- {/* Color Filter Pills */}
-
-
Color:
-
- {COLOR_FAMILIES.map(col => (
-
- ))}
-
-
-
- {/* Manufacturer Filter Pills */}
-
-
Brand:
-
- {manufacturers.map(mfg => (
-
- ))}
-
-
-
- {/* Category Filter Pills */}
-
-
Type:
-
- {categories.map(cat => (
-
- ))}
-
-
-
- {loading ? (
-
-
-
Loading glass formulas...
-
- ) : loadError || library.length === 0 ? (
-
-
Glass library data not present.
-
- Run python3 scripts/build_swatch_library.py from the repo root to fetch
- the swatch registry and catalog images (see the Glass swatch library section in the README).
-
-
- ) : paginatedItems.length === 0 ? (
-
-
No glass swatches match your criteria.
-
- ) : (
- <>
-
- {paginatedItems.map(item => (
-
handleSelect(item)}
- >
-
-

{
- // Catalog images are untracked local data -- on a clean
- // checkout they 404. Show a hint instead of a broken image.
- const wrapper = e.currentTarget.closest('.glass-library-card-thumb-wrapper');
- if (wrapper && !wrapper.querySelector('.glass-library-thumb-missing')) {
- e.currentTarget.style.display = 'none';
- const note = document.createElement('div');
- note.className = 'glass-library-thumb-missing';
- note.textContent = 'Image not fetched — run scripts/build_swatch_library.py';
- wrapper.prepend(note);
- }
- }}
- />
-
- {item.manufacturer}
-
- {(item.lighting === 'front-lit' || item.front_lit) && (
-
- ⚠️ Front-Lit
-
- )}
-
-
-
-
- {item.name}
-
-
- {item.category}
-
- {item.real_world_width_in}"×{item.real_world_height_in}"
-
-
-
-
- ))}
-
-
- {filteredItems.length > visibleCount && (
-
-
-
- )}
- >
- )}
-