Design transparent resource flows with sufficiency-based cascading.
Funnels fill to their threshold, then overflow routes surplus to the next layer —
- ensuring every level has enough before abundance cascades forward.
+ ensuring every level has enough before abundance cascades forward.
@@ -1060,8 +1060,8 @@ class FolkFlowsApp extends HTMLElement {
const icon = icons[d.sourceType] || "\u{1F4B0}";
return `
${icon}
- ${this.esc(d.label)}
+ ${icon}
+ ${this.esc(d.label)}
$${d.flowRate.toLocaleString()}/mo
${this.renderAllocBar(d.targetAllocations, w, h - 6)}
${this.renderPortsSvg(n)}
@@ -1148,22 +1148,22 @@ class FolkFlowsApp extends HTMLElement {
- ${this.esc(d.label)}
+ ${this.esc(d.label)}
${statusLabel}
- ${satLabel}
- $${Math.floor(d.currentValue).toLocaleString()} / $${Math.floor(threshold).toLocaleString()}
- ${satLabel}
+ $${Math.floor(d.currentValue).toLocaleString()} / $${Math.floor(threshold).toLocaleString()}
+ `;
@@ -1182,9 +1182,9 @@ class FolkFlowsApp extends HTMLElement {
const phaseW = (w - 20) / d.phases.length;
phaseBars = d.phases.map((p, i) => {
const unlocked = d.fundingReceived >= p.fundingThreshold;
- return `
`;
+ return `
`;
}).join("");
- phaseBars += `
${d.phases.filter((p) => d.fundingReceived >= p.fundingThreshold).length}/${d.phases.length} phases `;
+ phaseBars += `
${d.phases.filter((p) => d.fundingReceived >= p.fundingThreshold).length}/${d.phases.length} phases `;
}
// Enhanced progress bar (8px height, green funded portion + grey gap)
@@ -1194,12 +1194,12 @@ class FolkFlowsApp extends HTMLElement {
const dollarLabel = `${this.formatDollar(d.fundingReceived)} / ${this.formatDollar(d.fundingTarget)}`;
return `
- ${this.esc(d.label)}
- ${this.esc(d.label)}
+ ${Math.round(fillPct * 100)}% — ${dollarLabel}
+ ${Math.round(fillPct * 100)}% — ${dollarLabel}
${phaseBars}
${this.renderPortsSvg(n)}
`;
@@ -1361,15 +1361,15 @@ class FolkFlowsApp extends HTMLElement {
return `
- ${label}
- −
+ −
- +
+ +
`;
@@ -1383,15 +1383,15 @@ class FolkFlowsApp extends HTMLElement {
- ${label}
- −
+ −
- +
+ +
`;
@@ -1777,7 +1777,7 @@ class FolkFlowsApp extends HTMLElement {
Done
Delete
- ...
+ ...
`;
@@ -2000,7 +2000,7 @@ class FolkFlowsApp extends HTMLElement {
Done
Delete
- ...
+ ...
`;
@@ -2037,7 +2037,7 @@ class FolkFlowsApp extends HTMLElement {
if (d.sourceType === "card") {
html += `
+ style="width:100%;padding:10px;background:var(--rs-primary);color:white;border:none;border-radius:8px;cursor:pointer;font-weight:600">
Fund with Card
`;
@@ -2086,9 +2086,9 @@ class FolkFlowsApp extends HTMLElement {
html += `
Phases
`;
for (const p of d.phases) {
const unlocked = d.fundingReceived >= p.fundingThreshold;
- html += `
-
${this.esc(p.name)} — $${p.fundingThreshold.toLocaleString()}
- ${p.tasks.map((t) => `
${t.completed ? "✅" : "⬜"} ${this.esc(t.label)}
`).join("")}
+ html += `
+
${this.esc(p.name)} — $${p.fundingThreshold.toLocaleString()}
+ ${p.tasks.map((t) => `
${t.completed ? "✅" : "⬜"} ${this.esc(t.label)}
`).join("")}
`;
}
html += `
`;
@@ -2106,7 +2106,7 @@ class FolkFlowsApp extends HTMLElement {
html += `
${this.esc(this.getNodeLabel(a.targetId))}
- ${a.percentage}%
+ ${a.percentage}%
`;
}
html += `
`;
@@ -2147,7 +2147,7 @@ class FolkFlowsApp extends HTMLElement {
modal.id = "transak-modal";
modal.style.cssText = `position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;`;
modal.innerHTML = `
-