Skip to content

Add UI to navigate and manage modifiers #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
TrySound wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Add UI to navigate and manage modifiers #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bb97abc
Add UI to navigate and manage modifiers
TrySound Feb 16, 2026
ad1f041
Reset selection when toggle "Configure modifiers"
TrySound Feb 17, 2026
0b418ec
tmp
TrySound Feb 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
195 changes: 157 additions & 38 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,157 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Engramma - design tokens app</title>
<meta
name="description"
content="An app to manage standard based design tokens and convert them to CSS or SCSS variables"
/>
<meta property="og:type" content="website" />
<meta property="og:url" content="https://engramma.dev/" />
<meta property="og:image" content="./logo.png" />
<meta name="twitter:card" content="summary_large_image" />
<link rel="stylesheet" href="./src/app.css" />
<!-- Privacy-friendly analytics by Plausible -->
<script
async
src="https://plausible.io/js/pa-lqFhwhQS8pPxKZ9mW4uH-.js"
></script>
<script>
((window.plausible =
window.plausible ||
function () {
(plausible.q = plausible.q || []).push(arguments);
}),
(plausible.init =
plausible.init ||
function (i) {
plausible.o = i || {};
}));
plausible.init();
</script>
</head>
<body>
<script type="module" src="./src/main.ts"></script>
</body>
</html>
<style>
body {
background-color: black;
font-family: sans-serif;
display: grid;
height: 100%;
height: stretch;
justify-content: center;
align-items: center;
}

.nav {
border: 1px solid #585a5e;
width: 60dvw;
margin: 0 auto;
border-radius: 2rem;
}

.menu {
color: gray;
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: end;
padding: 0 1rem;
}

.item {
position: relative;
}

@keyframes bounce {
from {
translate: 0 30px;
}
80% {
scale: 1.2;
}
to {
scale: 1;
translate: 0 0px;
}
}

@keyframes bounceIn {
0% {
scale: 1;
translate: 0 30px;
}
40% {
scale: 1.2;
translate: 0 0;
}
60% {
scale: 0.95;
}
80% {
scale: 1.05;
}
100% {
scale: 1;
translate: 0 0;
}
}

@keyframes bounceOut {
0% {
scale: 1;
translate: 0 0;
}
40% {
scale: 0.9;
translate: 0 30px;
}
60% {
scale: 1.02;
}
80% {
scale: 0.98;
}
100% {
scale: 1;
translate: 0 30px;
}
}

.item::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
width: 100px;
height: 30px;
margin: 0 auto;
background-color: white;
pointer-events: none;
clip-path: path("M0,30 S-20,30,0,30 S30,15,50,15 S80,30,100,30 Z");
translate: 0 30px;
transform-origin: center bottom;
}

.item:has(.link:target)::before {
translate: 0 0;
}

.item:has(.link.ready)::before {
animation: bounceOut 0.8s ease forwards;
}

.item:has(.link.ready:target)::before {
animation: bounceIn 0.8s ease forwards;
}

.link {
color: inherit;
text-decoration: none;
display: block;
padding: 2rem 1.5rem;
}

.link:hover,
.link:focus-visible,
.link:target {
color: #2b75ed;
}

.content {
background-color: white;
border-radius: 2rem;
height: 300px;
}
</style>

<nav class="nav">
<ul class="menu">
<li class="item">
<a class="link" id="item-1" href="#item-1">Menu Item</a>
</li>
<li class="item">
<a class="link" id="item-2" href="#item-2">Menu Item</a>
</li>
</ul>
<div class="content"></div>
</nav>

<script>
// activate
document.addEventListener("click", (event) => {
if (event.target.closest(".link")) {
for (const link of document.querySelectorAll(".link")) {
link.classList.add("ready");
}
}
});
</script>
Comment on lines +1 to +157
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Feb 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Check git history for index.html to see previous content
echo "=== Git history for index.html ==="
git log --oneline -10 -- index.html 2>/dev/null || echo "No git history available"

echo ""
echo "=== Previous version of index.html (last 5 commits) ==="
git show HEAD~1:index.html 2>/dev/null | head -30 || echo "Cannot access previous version"

echo ""
echo "=== Vite config files ==="
fd -t f "vite.config\." 2>/dev/null | while read f; do
  echo "File: $f"
  cat "$f"
  echo ""
done

echo ""
echo "=== All HTML files in repository ==="
fd -e html -t f 2>/dev/null

echo ""
echo "=== Directory structure (first 2 levels) ==="
tree -L 2 -I 'node_modules' 2>/dev/null || find . -maxdepth 2 -type d | head -20

Repository: TrySound/engramma

Length of output: 2294

🏁 Script executed:

#!/bin/bash
echo "=== Content of src/main.ts ==="
head -50 src/main.ts

echo ""
echo "=== Content of packages/engramma/index.html ==="
cat packages/engramma/index.html

echo ""
echo "=== Recent commits (all) ==="
git log --oneline | head -20

echo ""
echo "=== Current status of index.html ==="
git status --short index.html || echo "No git status available"

echo ""
echo "=== Check if index.html exists in git ==="
git ls-files | grep index.html

Repository: TrySound/engramma

Length of output: 3173

index.html is missing the app bootstrap script — application won't load.

The current index.html contains only a CSS animation demo and is missing the <script> tag needed to load the Svelte app entry point (src/main.ts). The root vite.config.ts uses the default SPA configuration (entry defaults to index.html), so this file is responsible for bootstrapping the application. Without the script loader, the app will not mount.

This needs the app bootstrap script (e.g., <script type="module" src="/src/main.ts"></script>) to be added back, unless this demo is intentionally meant for a different purpose and should be moved to a separate file.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@index.html` around lines 1 - 157, The file index.html lacks the SPA bootstrap
script so the Svelte app never mounts; add the module loader that imports your
app entry (e.g., the equivalent of <script type="module"
src="/src/main.ts"></script>) into index.html (place it after the existing
markup or before </body>) so the Svelte/Vite entrypoint (src/main.ts) is
executed; if this page is only a standalone demo, instead move this demo to a
separate HTML file and restore the bootstrap script in the main index.html used
by the app.

6 changes: 6 additions & 0 deletions src/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -359,4 +359,10 @@ body {
anchor-name: --a-selected-tab;
}
}

.a-tab-action {
position: sticky;
right: 8px;
margin: 0 8px;
}
}
Loading