code-node-graph 0.2.0__tar.gz → 0.3.0__tar.gz

{code_node_graph-0.2.0 → code_node_graph-0.3.0}/CHANGELOG.md

@@ -4,6 +4,15 @@ Every change a user would notice, newest first ([Keep a Changelog](https://keepa
 follow [Semantic Versioning](https://semver.org/); before 1.0, a minor version may change what a command does.
 ## [Unreleased]
 
+## [0.3.0] - 2026-10-20
+
+### Changed
+
+- Step by step's list folds like a tree: the arrow beside a function, loop or branch hides the steps under it and
+  shows how many it hid. The tab also moves more: a new step's card comes in a line at a time, the lit row and its
+  number ease in, a dot pings when its step is reached, the code fades in when the walk goes into another function,
+  and the lit line glows as it lands. None of it moves for readers who ask for less motion.
+
 ## [0.2.0] - 2026-10-20
 
 ### Changed
@@ -162,6 +171,7 @@ follow [Semantic Versioning](https://semver.org/); before 1.0, a minor version m
 - `--platform NAME` runs a platform's checks whatever the entry point is; `--lambda` is short for
   `--platform lambda`. `EntryPoint.is_lambda` and `PageOptions.is_lambda` are now `platform` (`"lambda"` or `""`).
 
-[Unreleased]: https://github.com/utkarsh5026/code-node/compare/v0.2.0...HEAD
+[Unreleased]: https://github.com/utkarsh5026/code-node/compare/v0.3.0...HEAD
+[0.3.0]: https://github.com/utkarsh5026/code-node/compare/v0.2.0...v0.3.0
 [0.2.0]: https://github.com/utkarsh5026/code-node/compare/v0.1.0...v0.2.0
 [0.1.0]: https://github.com/utkarsh5026/code-node/releases/tag/v0.1.0

{code_node_graph-0.2.0 → code_node_graph-0.3.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.5
 Name: code-node-graph
-Version: 0.2.0
+Version: 0.3.0
 Summary: See how Python code works without running it: a graph of who calls whom from an entry point, and what each path reaches.
 Project-URL: Homepage, https://github.com/utkarsh5026/code-node
 Project-URL: Documentation, https://utkarsh5026.github.io/code-node/

{code_node_graph-0.2.0 → code_node_graph-0.3.0}/src/code_node/__init__.py

@@ -13,7 +13,7 @@ from .libraries import Library, register_library
 from .platforms import Platform, get_platform, register_platform
 from .project import EntryPoint, Project, entry_points, read_project
 
-__version__ = "0.2.0"
+__version__ = "0.3.0"
 
 __all__ = [
     "CodeGraph",

{code_node_graph-0.2.0 → code_node_graph-0.3.0}/src/code_node/report/style.py

@@ -298,13 +298,27 @@ _EXTRA_CSS = """\
 .cnd .walk .ws{border-left:1px solid rgba(127,127,127,.2)}
 .cnd .walk .wch{position:sticky;top:0;z-index:2;padding:12px 16px 9px;font-size:12.5px;font-weight:650;background:var(--bg);border-bottom:1px solid rgba(127,127,127,.14)}
 .cnd .walk .wr{display:block;width:0;height:0;margin:0;border:0;padding:0;opacity:0;appearance:none;-webkit-appearance:none;pointer-events:none}
-.cnd .walk .wil{display:flex;align-items:center;gap:10px;min-height:30px;padding:0 14px 0 4px;cursor:pointer;white-space:nowrap;user-select:none;-webkit-user-select:none;transition:background-color .15s}
+.cnd .walk .wil{display:flex;align-items:center;gap:10px;min-height:30px;padding:0 14px 0 4px;cursor:pointer;white-space:nowrap;user-select:none;-webkit-user-select:none;transition:background-color .2s,box-shadow .2s;animation:cnd-row .22s ease-out}
+@keyframes cnd-row{from{opacity:0;transform:translateY(-3px)}}
+.cnd .walk .wcx{position:absolute;width:0;height:0;margin:0;opacity:0;pointer-events:none}
+.cnd .walk .wtg{position:relative;z-index:1;display:block;height:0}
+.cnd .walk .wtg i{position:absolute;top:0;left:calc(40px + var(--d)*16px);width:16px;height:30px;border-radius:4px;cursor:pointer;opacity:.45;transition:opacity .15s,background-color .15s}
+.cnd .walk .wtg i::before{content:"";position:absolute;left:5px;top:12px;width:5px;height:5px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);transition:transform .2s cubic-bezier(.3,.7,.3,1)}
+.cnd .walk .wtg:hover i{opacity:1;background:rgba(127,127,127,.14)}
+.cnd .walk .wcx:checked+.wtg i{opacity:.8}
+.cnd .walk .wcx:checked+.wtg i::before{transform:translate(-1px,1px) rotate(-45deg)}
+.cnd .walk .wcnt{display:none;flex:none;font-size:11px;padding:0 7px;border-radius:9px;line-height:17px;background:rgba(127,127,127,.14);opacity:.75;animation:cnd-in .2s ease}
+.cnd .walk .wcx:checked+.wtg+.wr+.wil .wcnt{display:inline-block}
 .cnd .walk .wil:hover{background-color:rgba(127,127,127,.08)}
 .cnd .walk .wr:checked+.wil{background-color:rgba(245,158,11,.16);box-shadow:inset 3px 0 #f59e0b}
 .cnd .walk .wr:focus-visible+.wil{outline:2px solid var(--blue);outline-offset:-2px}
 .cnd .walk .wno{flex:0 0 26px;text-align:right;font:11px var(--mono);opacity:.4;font-variant-numeric:tabular-nums}
-.cnd .walk .wr:checked+.wil .wno{opacity:.8}
-.cnd .walk .wx{display:flex;align-items:center;align-self:stretch;gap:8px;min-width:0;flex:1;padding-left:calc(var(--d)*16px);background:repeating-linear-gradient(90deg,rgba(127,127,127,.18) 0 1px,transparent 1px 16px) 5px 0/calc(var(--d)*16px) 100% no-repeat}
+.cnd .walk .wr:checked+.wil .wno{opacity:.9;color:#d97706;font-weight:600}
+.cnd .walk .wtx{transition:transform .2s ease}
+.cnd .walk .wr:checked+.wil .wtx{transform:translateX(2px)}
+.cnd .walk .wr:checked+.wil .wdot{animation:cnd-ping 1s ease-out 2}
+@keyframes cnd-ping{from{box-shadow:0 0 0 0 var(--c,rgba(127,127,127,.6))}to{box-shadow:0 0 0 6px transparent}}
+.cnd .walk .wx{display:flex;align-items:center;align-self:stretch;gap:8px;min-width:0;flex:1;padding-left:calc(var(--d)*16px + 18px);background:repeating-linear-gradient(90deg,rgba(127,127,127,.18) 0 1px,transparent 1px 16px) 8px 0/calc(var(--d)*16px) 100% no-repeat}
 .cnd .walk .wtx{min-width:0;overflow:hidden;text-overflow:ellipsis}
 .cnd .walk .wtx code{font:12px var(--mono);background:none;padding:0}
 .cnd .walk :is(.k-def,.k-module) .wtx b{font:650 12.5px var(--mono)}
@@ -312,7 +326,10 @@ _EXTRA_CSS = """\
 .cnd .walk .wdot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--c,rgba(127,127,127,.6))}
 .cnd .walk :is(.d-aws-reads,.d-lib-reads){--c:#3b82f6}.cnd .walk :is(.d-aws-writes,.d-lib-writes){--c:#ea580c}
 .cnd .walk :is(.d-aws-sends,.d-lib-sends,.d-http){--c:#db2777}.cnd .walk :is(.d-aws-runs,.d-lib-runs){--c:#9333ea}.cnd .walk .d-aws-signs{--c:#64748b}
-.cnd .walk .wc{display:none;position:absolute;left:var(--lw);right:0;top:0;height:var(--ch);box-sizing:border-box;overflow:auto;padding:14px 22px 12px;white-space:normal;cursor:auto;border-left:1px solid rgba(127,127,127,.2);border-bottom:1px solid rgba(127,127,127,.18);background:var(--bg);animation:cnd-in .18s ease}
+.cnd .walk .wc{display:none;position:absolute;left:var(--lw);right:0;top:0;height:var(--ch);box-sizing:border-box;overflow:auto;padding:14px 22px 12px;white-space:normal;cursor:auto;border-left:1px solid rgba(127,127,127,.2);border-bottom:1px solid rgba(127,127,127,.18);background:var(--bg)}
+.cnd .walk .wc>*{animation:cnd-in .24s ease both}
+.cnd .walk .wc>.whead{animation-delay:.03s}.cnd .walk .wc>.wstk{animation-delay:.06s}.cnd .walk .wc>.wsay{animation-delay:.09s}.cnd .walk .wc>.wthen{animation-delay:.12s}
+.cnd .walk .wfacts li{animation:cnd-in .24s ease both;animation-delay:.12s}.cnd .walk .wfacts li:nth-child(2){animation-delay:.15s}.cnd .walk .wfacts li:nth-child(n+3){animation-delay:.18s}
 .cnd .walk .wr:checked+.wil+.wc{display:block}
 .cnd .walk .wnav{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
 .cnd .walk .wbt{display:inline-flex;align-items:center;gap:5px;padding:4px 14px;border:1px solid rgba(127,127,127,.32);border-radius:8px;font-size:13px;font-weight:600;line-height:20px;cursor:pointer;user-select:none;-webkit-user-select:none;transition:background-color .12s,transform .06s}
@@ -348,7 +365,9 @@ _EXTRA_CSS = """\
 .cnd .walk :is(.wfm,.wfv){opacity:.6}
 .cnd .walk .wthen{margin-top:10px;font-size:12px;opacity:.6}
 .cnd .walk .wf{display:none;position:absolute;left:var(--lw);right:0;top:var(--ch);bottom:0;flex-direction:column;border-left:1px solid rgba(127,127,127,.2);background:var(--bg)}
-.cnd .walk .wfn>.wr:checked~.wf{display:flex}
+.cnd .walk .wfn>.wr:checked~.wf{display:flex;animation:cnd-fade .25s ease}
+.cnd .walk .wfh{animation:cnd-in .25s ease}
+@keyframes cnd-fade{from{opacity:0}}
 .cnd .walk .wfh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:8px 22px;font-size:12px;border-bottom:1px solid rgba(127,127,127,.12)}
 .cnd .walk .wfh b{font:650 12.5px var(--mono)}
 .cnd .walk .wfh span{opacity:.62}
@@ -356,15 +375,16 @@ _EXTRA_CSS = """\
 .cnd .walk .wfw{position:relative;flex:1;min-height:0;overflow-x:auto;overflow-y:hidden;container-type:size;background:rgba(127,127,127,.03)}
 .cnd .walk .wfp{position:relative;box-sizing:border-box;width:max-content;min-width:100%;padding:var(--pad) 0;font:12.5px/var(--lh) var(--mono);
  translate:0 min(0px,max(calc(100cqh - var(--n)*var(--lh) - 2*var(--pad)),calc(36cqh - var(--k,0)*var(--lh))));transition:translate .32s cubic-bezier(.25,.8,.25,1)}
-.cnd .walk .wbar{position:absolute;left:0;right:0;top:calc(var(--pad) + var(--k,-9)*var(--lh));height:var(--lh);background:rgba(245,158,11,.2);box-shadow:inset 3px 0 #f59e0b;transition:top .32s cubic-bezier(.25,.8,.25,1)}
+.cnd .walk .wbar{position:absolute;left:0;right:0;top:calc(var(--pad) + var(--k,-9)*var(--lh));height:var(--lh);background:rgba(245,158,11,.2);box-shadow:inset 3px 0 #f59e0b;transition:top .32s cubic-bezier(.25,.8,.25,1);animation:cnd-glow 1.2s ease-in-out 2}
+@keyframes cnd-glow{50%{background:rgba(245,158,11,.3)}}
 .cnd .walk .sl{position:relative;display:block;padding-right:16px;white-space:pre}
 .cnd .walk span.sl{opacity:.6}
-.cnd .walk label.sl{cursor:pointer}
+.cnd .walk label.sl{cursor:pointer;transition:background-color .15s}
 .cnd .walk label.sl:hover{background:rgba(127,127,127,.1)}
 .cnd .walk .sn{display:inline-block;width:3.2em;padding-right:14px;text-align:right;opacity:.42;user-select:none;-webkit-user-select:none}
 .cnd .walk label.sl .sn{opacity:.8}
 @media (max-width:860px){.cnd .walk{--lt:40vh;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--lt) 1fr;height:calc(var(--lt) + var(--ch) + 380px)}.cnd .walk .wl{max-height:none}.cnd .walk :is(.wc,.wf){left:0;border-left:0}.cnd .walk .wc{top:var(--lt);border-top:1px solid rgba(127,127,127,.2);padding:12px 16px}.cnd .walk .wf{top:calc(var(--lt) + var(--ch))}.cnd .walk .ws{border-left:0}}
-@media (prefers-reduced-motion:reduce){.cnd .walk .wfp,.cnd .walk .wbar,.cnd .walk .wc,.cnd .tabs>.tp{transition:none;animation:none}}"""
+@media (prefers-reduced-motion:reduce){.cnd .walk :is(.wfp,.wbar,.wc,.wc>*,.wfacts li,.wil,.wtx,.wdot,.wcnt,.wf,.wfh,.wtg i,.wtg i::before),.cnd .tabs>.tp{transition:none;animation:none}}"""
 
 _CSS = _base_css(_ROOT, _EXTRA_CSS)
 

{code_node_graph-0.2.0 → code_node_graph-0.3.0}/src/code_node/report/walk.py

@@ -7,6 +7,11 @@ No JavaScript: each step is a radio button (one group, so once one has focus the
 Each function's steps sit in a box of their own, with the function's code drawn once at the end of it; the CSS shows
 the card after the checked button and the code of its box with sibling selectors, so the light slides from line to
 line as you step, and a step costs the same however many there are.
+
+The list folds like a tree: a step with steps under it has a checkbox before it, and its arrow folds them away. Each
+step under it carries the class `wu<step>`, so one rule per fold hides them, whether they sit beside it or inside the
+box of a function it calls (`#cx5:checked ~ .wu5, #cx5:checked ~ * .wu5`). Only the steps' rows are hidden: the
+current one's card and code still show when it's folded away.
 """
 
 from __future__ import annotations
@@ -523,11 +528,29 @@ def _frame_html(index: int, frame: _Frame, rows: list[tuple[int, str]]) -> str:
     )
 
 
-def _item_html(stops: list[_Stop], i: int, card: str) -> str:
+def _folds(stops: list[_Stop]) -> tuple[list[int], list[list[int]]]:
+    """
+    How many steps sit under each stop in the list, and the stops each one sits under, outermost first.
+    """
+    under = [0] * len(stops)
+    above: list[list[int]] = []
+    opened: list[int] = []
+    for i, stop in enumerate(stops):
+        while opened and (stops[opened[-1]].depth >= stop.depth or stops[opened[-1]].chapter != stop.chapter):
+            opened.pop()
+        for j in opened:
+            under[j] += 1
+        above.append(list(opened))
+        opened.append(i)
+    return under, above
+
+
+def _item_html(stops: list[_Stop], i: int, card: str, under: int = 0, above: tuple[int, ...] = ()) -> str:
     """
     A step in the list: its radio button, then its number and what it does in a few words (or, for a function it goes
     into, the function's name and file, as a heading over its steps) as the button's label, then its card, which shows
-    (beside the list) while the button is checked.
+    (beside the list) while the button is checked. under: how many steps sit under it, folded away by the checkbox and
+    arrow before it; above: the steps it sits under, whose folds hide it.
     """
     stop = stops[i]
     step = stop.step
@@ -543,10 +566,18 @@ def _item_html(stops: list[_Stop], i: int, card: str) -> str:
         dot = f'<span class="wdot d-{said}" title="{_esc(_NOTE_TIPS.get(said, ""))}"></span>' if said in _DOTS else ""
         text = f'<span class="wtx">{headline}</span>{dot}'
     checked = " checked" if i == 0 else ""
+    hidden_by = "".join(f" wu{j}" for j in above)
+    fold = ""
+    if under:
+        fold = (
+            f'<input type="checkbox" class="wcx" id="cx{i}" tabindex="-1"><label class="wtg{hidden_by}" for="cx{i}" '
+            f'style="--d:{stop.depth}" title="Fold or unfold the {_plural(under, "step")} under it"><i></i></label>'
+        )
+        text += f'<span class="wcnt">{_plural(under, "step")}</span>'
     return (
-        f'<input type="radio" class="wr" name="{_GROUP}" id="cw{i}"{checked}><label class="wil k-{_esc(step.kind)}" '
-        f'for="cw{i}" style="--d:{stop.depth}"><span class="wno">{i + 1}</span><span class="wx">{text}</span>'
-        f"</label>{card}"
+        f'{fold}<input type="radio" class="wr" name="{_GROUP}" id="cw{i}"{checked}><label class="wil '
+        f'k-{_esc(step.kind)}{hidden_by}" for="cw{i}" style="--d:{stop.depth}"><span class="wno">{i + 1}</span>'
+        f'<span class="wx">{text}</span></label>{card}'
     )
 
 
@@ -576,6 +607,7 @@ def _walk_html(block: _Walk, report: _Report) -> str:
         rows = _frame_rows(frame, highlighted.get(frame.file, []), stops)
         rows_of.append({number: n for n, (number, _) in enumerate(rows) if number})
         drawn.append(_frame_html(k, frame, rows))
+    under, above = _folds(stops)
     out: list[str] = []
     opened: list[int] = []  # the frames whose boxes are open, innermost last
     chapter = -1
@@ -593,7 +625,9 @@ def _walk_html(block: _Walk, report: _Report) -> str:
         if not opened or opened[-1] != stop.frame:  # into a call
             out.append('<div class="wfn">')
             opened.append(stop.frame)
-        out.append(_item_html(stops, i, _card_html(stops, i, first, docs, block.editor)))
+        out.append(_item_html(stops, i, _card_html(stops, i, first, docs, block.editor), under[i], tuple(above[i])))
+        if under[i]:  # its fold hides the steps under it, beside it or in the boxes of what it calls
+            report.rules.add(f".{root} #cx{i}:checked~.wu{i},.{root} #cx{i}:checked~* .wu{i}{{display:none}}")
         at = rows_of[stop.frame].get(stop.lit)
         if at is not None:  # the line its code lights
             report.rules.add(f".{root} #cw{i}:checked~.wf{stop.frame}{{--k:{at}}}")
@@ -601,7 +635,8 @@ def _walk_html(block: _Walk, report: _Report) -> str:
         out.append(drawn[opened.pop()] + "</div>")
     sub = (
         f'<div class="wsub">{_plural(len(stops), "step")}, in the order the code runs. Press Next or click a step to '
-        "light its line in the code; after a click, <kbd>↑</kbd> <kbd>↓</kbd> move through them.</div>"
+        "light its line in the code; after a click, <kbd>↑</kbd> <kbd>↓</kbd> move through them. The arrow beside a "
+        "step folds the steps under it away.</div>"
     )
     return (
         f'{title}{sub}<div class="walk"><div class="wl" role="radiogroup" aria-label="The steps">{"".join(out)}'

{code_node_graph-0.2.0 → code_node_graph-0.3.0}/tests/test_code_node.py

@@ -148,6 +148,8 @@ def test_the_steps_are_walked_in_the_order_the_code_runs(tmp_path: Path) -> None
         "Finish <code>load()</code>"
     ) in html  # from inside load()
     assert '<div class="whead">Makes an S3 client</div>' in html  # each step said in plain words
+    assert 'id="cx1"' in html and 'id="cx0"' not in html  # lambda_handler() folds; the import line has nothing under it
+    assert "#cx1:checked~.wu1" in html and 'class="wil k-def wu1 wu2 wu3"' in html  # load(), inside its caller's fold
     assert '<span class="wtx">Goes through each <code>record</code> in <code>event[&#x27;Records&#x27;]</code>' in html
     assert '<label class="sl" for="cw5"><span class="sn">10</span>' in html  # load()'s line 10 jumps to its step
     assert ".cnd #cw5:checked~.wf2{--k:1}" in html  # and lights the second line of load()