Catalog block flowchart triggers HF lint rule template_literal_selector

[sidorovanthon]

Summary

The catalog block flowchart (installed via npx hyperframes add flowchart) triggers HF's own lint rule template_literal_selector as an error. Catalog blocks should be lint-clean out of the box.

Repro

mkdir t && cd t && npm init -y && npm install hyperframes@0.4.34
./node_modules/.bin/hyperframes init . --example blank
./node_modules/.bin/hyperframes add flowchart
# add a minimal index.html that embeds flowchart, then:
./node_modules/.bin/hyperframes lint .

Output:

✗ [compositions/flowchart.html] template_literal_selector: querySelector uses a template literal variable (e.g. `${compId}`). The HTML bundler's CSS parser crashes on these. Use a hardcoded string instead.
  Fix: Replace the template literal variable with a hardcoded string. The bundler's CSS parser cannot handle interpolated variables in script content.

Offending lines (current 0.4.34 install)

compositions/flowchart.html around lines 311–313:

const S = '[data-composition-id="flowchart"]';
const nodePython = document.querySelector(`${S} #node-python`);
const pythonText = document.querySelector(`${S} #python-text`);

S is itself a hardcoded string, but the querySelector(${S} #node-python) invocation embeds it via template literal, which is what the lint rule rejects. Many subsequent tl.to(${S} #node-foo, ...) calls follow the same pattern through the rest of the block.

Why this matters

• Operators running hyperframes lint on a project that contains flowchart see an error that is not their fault and that they can only resolve by editing third-party catalog content.
• If the lint rule is correct that the bundler's CSS parser crashes on these, then the block may be subtly broken at render time as well — though I haven't reproduced a crash, only the lint failure.

Suggested fix

Replace the ${S} interpolations with S + string concatenation, or hardcode the selectors fully. Either form passes the lint rule.

Independent of #556

This is a catalog-authoring issue distinct from #556 (which is a runtime CSS-scoping isolation gap). The two issues happen to live in the same block file but have different root causes and fixes.

---

Generated by Claude Code (Opus 4.7).