Collapse imports behind toggle, bump v0.2.1

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: clanker-lover

codedocent/templates/base.html

@@ -240,7 +240,21 @@
     text-transform: uppercase;
     letter-spacing: 0.08em;
     color: var(--text-imports-label);
-    margin-bottom: 4px;
+    cursor: pointer;
+    list-style: none;
+}
+
+.cd-imports__label::-webkit-details-marker {
+    display: none;
+}
+
+.cd-imports__label::before {
+    content: "▶ ";
+    font-size: 9px;
+}
+
+.cd-imports[open] > .cd-imports__label::before {
+    content: "▼ ";
 }
 
 .cd-imports__item {
@@ -398,12 +412,12 @@
     </div>
     <div class="cd-node__body">
         {% if node.imports %}
-        <div class="cd-imports">
-            <div class="cd-imports__label">IMPORTS</div>
+        <details class="cd-imports">
+            <summary class="cd-imports__label">IMPORTS ({{ node.imports | length }})</summary>
             {% for imp in node.imports %}
             <div class="cd-imports__item">→ {{ imp }}</div>
             {% endfor %}
-        </div>
+        </details>
         {% endif %}
         {% if node.summary %}
         <div class="cd-summary">{{ node.summary }}</div>

codedocent/templates/interactive.html

@@ -293,7 +293,21 @@
     text-transform: uppercase;
     letter-spacing: 0.08em;
     color: var(--text-imports-label);
-    margin-bottom: 4px;
+    cursor: pointer;
+    list-style: none;
+}
+
+.cd-imports__label::-webkit-details-marker {
+    display: none;
+}
+
+.cd-imports__label::before {
+    content: "▶ ";
+    font-size: 9px;
+}
+
+.cd-imports[open] > .cd-imports__label::before {
+    content: "▼ ";
 }
 
 .cd-imports__item {
@@ -827,9 +841,9 @@ <h1 class="cd-header__title">codedocent</h1>
 
     // Imports
     if (node.imports && node.imports.length > 0) {
-        const imp = document.createElement('div');
+        const imp = document.createElement('details');
         imp.className = 'cd-imports';
-        imp.innerHTML = '<div class="cd-imports__label">IMPORTS</div>' +
+        imp.innerHTML = '<summary class="cd-imports__label">IMPORTS (' + node.imports.length + ')</summary>' +
             node.imports.map(i => '<div class="cd-imports__item">\u2192 ' + escapeHtml(i) + '</div>').join('');
         body.appendChild(imp);
     }

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "codedocent"
-version = "0.2.0"
+version = "0.2.1"
 description = "Code visualization for non-programmers"
 license = "MIT"
 requires-python = ">=3.10"