From f7ecf505887b4c5da9ce04443961409d630b688d Mon Sep 17 00:00:00 2001 From: Jeff Emmett Date: Sun, 1 Mar 2026 14:10:52 -0800 Subject: [PATCH] feat: upgrade 6 module demos to use real interactive components MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace static HTML mockups and WebSocket skeleton demos with the actual self-contained web components (with built-in demo data) for rcart, rtube, rfunds, rnotes, rtrips, and rvote — matching the rcal demo pattern. Co-Authored-By: Claude Opus 4.6 --- modules/rcart/demo.ts | 278 +++++++----------------- modules/rcart/mod.ts | 2 +- modules/rfunds/demo.ts | 298 +++++++------------------- modules/rfunds/mod.ts | 3 +- modules/rnotes/demo.ts | 404 +++++++---------------------------- modules/rnotes/mod.ts | 3 +- modules/rtrips/demo.ts | 466 ++++++++--------------------------------- modules/rtrips/mod.ts | 2 +- modules/rtube/demo.ts | 355 ++++++++----------------------- modules/rtube/mod.ts | 2 +- modules/rvote/demo.ts | 134 ++++++++---- modules/rvote/mod.ts | 3 +- 12 files changed, 505 insertions(+), 1445 deletions(-) diff --git a/modules/rcart/demo.ts b/modules/rcart/demo.ts index 14084c4..b0092a7 100644 --- a/modules/rcart/demo.ts +++ b/modules/rcart/demo.ts @@ -1,230 +1,112 @@ /** - * rCart demo page — static community garden shopping cart. + * rCart demo page — server-rendered HTML body. * - * Renders a fully server-side demo with 8 cart items, funding progress bars, - * member activity, and summary stats. No WebSocket needed (all static data). + * Embeds the full component for + * real interactivity (catalog browsing, order tracking, filtering) + * plus showcase sections explaining the rCart vision. */ -/* ─── Mock Data ─────────────────────────────────────────────── */ - -const members = [ - { name: "Alice", color: "#10b981" }, - { name: "Bob", color: "#0ea5e9" }, - { name: "Carol", color: "#f59e0b" }, - { name: "Dave", color: "#8b5cf6" }, +const FEATURES = [ + { + icon: "\u{1F30D}", + title: "Cosmolocal Fulfillment", + desc: "Orders are matched to the nearest capable print shop or makerspace. Design global, manufacture local.", + }, + { + icon: "\u{1F6D2}", + title: "Group Shopping", + desc: "Communities pool resources and split costs. Transparent funding progress for every item in the cart.", + }, + { + icon: "\u{1F4B0}", + title: "Revenue Splits", + desc: "Every order automatically splits revenue between provider, creator, and community fund via rFunds flows.", + }, + { + icon: "\u{1F4E6}", + title: "Order Tracking", + desc: "Follow orders from pending through production to delivery. Real-time status updates across the community.", + }, ]; -interface CartItem { - name: string; - price: number; - requestedBy: string; - funded: number; - status: "Funded" | "In Cart" | "Needs Funding"; -} - -const cartItems: CartItem[] = [ - { name: "Raised Garden Bed Kit (4x8 ft)", price: 89.99, requestedBy: "Alice", funded: 89.99, status: "Funded" }, - { name: "Organic Seed Variety Pack (30 types)", price: 34.5, requestedBy: "Carol", funded: 34.5, status: "Funded" }, - { name: "Premium Potting Soil (40 qt, 3-pack)", price: 47.99, requestedBy: "Bob", funded: 32.0, status: "In Cart" }, - { name: "Stainless Steel Garden Tool Set", price: 62.0, requestedBy: "Dave", funded: 62.0, status: "Funded" }, - { name: "Drip Irrigation Kit (100 ft)", price: 54.95, requestedBy: "Alice", funded: 20.0, status: "Needs Funding" }, - { name: "Compost Tumbler (45 gal)", price: 109.0, requestedBy: "Bob", funded: 109.0, status: "Funded" }, - { name: "Garden Kneeling Pad & Gloves Set", price: 28.5, requestedBy: "Carol", funded: 12.0, status: "Needs Funding" }, - { name: "Solar-Powered Pest Repeller (4-pack)", price: 39.99, requestedBy: "Dave", funded: 39.99, status: "In Cart" }, +const INTEGRATIONS = [ + { icon: "\u{1F30A}", name: "rFunds", desc: "Revenue from orders flows through TBFF budget funnels with enoughness thresholds." }, + { icon: "\u{1F3A8}", name: "rDesign", desc: "Design artifacts become print-ready catalog entries with one click." }, + { icon: "\u{1F465}", name: "rNetwork", desc: "Provider registry matches orders to the closest maker in your network." }, + { icon: "\u{1F5FA}", name: "rMaps", desc: "See provider locations and delivery zones on the map." }, + { icon: "\u{1F4DD}", name: "rNotes", desc: "Link product specs, sizing guides, and design notes to catalog items." }, + { icon: "\u2615\uFE0F", name: "rSpace", desc: "Each space has its own shop. Nest catalogs across spaces for cross-community commerce." }, ]; -/* ─── Helpers ──────────────────────────────────────────────── */ - -function getMemberColor(name: string): string { - return members.find((m) => m.name === name)?.color || "#64748b"; -} - -function statusBadgeClass(status: CartItem["status"]): string { - switch (status) { - case "Funded": - return "rd-badge--emerald"; - case "In Cart": - return "rd-badge--sky"; - case "Needs Funding": - return "rd-badge--amber"; - } -} - -function progressFillClass(pct: number): string { - if (pct >= 100) return "rd-progress__fill--emerald"; - if (pct >= 50) return "rd-progress__fill--sky"; - return "rd-progress__fill--amber"; -} - -/* ─── Render ─────────────────────────────────────────────── */ - export function renderDemo(): string { - const totalCost = cartItems.reduce((sum, item) => sum + item.price, 0); - const totalFunded = cartItems.reduce((sum, item) => sum + item.funded, 0); - const perPerson = totalCost / members.length; - const fundedCount = cartItems.filter((i) => i.status === "Funded").length; - const overallPct = Math.round((totalFunded / totalCost) * 100); - const uniqueRequesters = new Set(cartItems.map((i) => i.requestedBy)).size; - return ` -
+
- +
- Group Shopping, Together + Cosmolocal Print-on-Demand
-

See how rCart works

-

- A community garden project where neighbors pool resources to buy everything they need together. -

+

rCart Demo

+

Group shopping with cosmolocal fulfillment, revenue splits, and transparent funding

- 8 items + \u{1F6D2} Catalog & Orders | - $${totalCost.toFixed(2)} total + \u{1F30D} Local Fulfillment | - ${fundedCount}/${cartItems.length} funded -
-
- ${members - .map( - (m) => - `
${m.name[0]}
`, - ) - .join("\n ")} - ${members.length} members + \u{1F4B0} Revenue Splits + | + \u{1F4E6} Order Tracking
- +
-
-
-
-

Community Garden Project

-

Shared cart for our neighborhood garden setup

-
-
-

$${totalFunded.toFixed(2)}

-

of $${totalCost.toFixed(2)} funded

-
-
-
-
-
-
- ${overallPct}% funded - $${(totalCost - totalFunded).toFixed(2)} remaining -
-
- - -
-
-
🛒 Cart Items
-
- - Funded - - - In Cart - - - Needs Funding - -
-
- ${cartItems - .map((item) => { - const pct = Math.round((item.funded / item.price) * 100); - const memberColor = getMemberColor(item.requestedBy); - return ` -
-
-
-
- ${item.name} - ${item.status} -
-
- - ${item.requestedBy[0]} - ${item.requestedBy} - - requested this -
-
-
-

$${item.price.toFixed(2)}

- ${item.status !== "Funded" ? `

$${item.funded.toFixed(2)} funded

` : ""} -
-
-
-
-
-
`; - }) - .join("")} -
- - -
-
-

Total Cost

-

$${totalCost.toFixed(2)}

-

${cartItems.length} items across ${uniqueRequesters} requesters

-
-
-

Amount Funded

-

$${totalFunded.toFixed(2)}

-

${fundedCount} of ${cartItems.length} items fully funded

-
-
-

Per-Person Split

-

$${perPerson.toFixed(2)}

-

split equally among ${members.length} members

-
-
- - -
-

Member Activity

-
- ${members - .map((member) => { - const requested = cartItems.filter((i) => i.requestedBy === member.name); - const requestedTotal = requested.reduce((sum, i) => sum + i.price, 0); - return ` -
-
${member.name[0]}
-
-

${member.name}

-

- ${requested.length} item${requested.length !== 1 ? "s" : ""} requested - · - $${requestedTotal.toFixed(2)} total -

-
-
-

$${perPerson.toFixed(2)}

-

share

-
-
`; - }) - .join("")} -
+
+
- + +
+
+ ${FEATURES.map( + (f) => ` +
+
${f.icon}
+

${f.title}

+

${f.desc}

+
`, + ).join("")} +
+
+ + +
+

+ r* Ecosystem Integrations +

+
+ ${INTEGRATIONS.map( + (i) => ` +
+
${i.icon}
+

${i.name}

+

${i.desc}

+
`, + ).join("")} +
+
+ +

Ready to shop together?

- Create a shared cart for your group, community, or team. Add items from any store, - split costs fairly, and check out together. + rCart gives your community a shared catalog with cosmolocal fulfillment, + transparent funding, and automatic revenue splits.

- + Create Your First Cart
diff --git a/modules/rcart/mod.ts b/modules/rcart/mod.ts index b38d413..915ca15 100644 --- a/modules/rcart/mod.ts +++ b/modules/rcart/mod.ts @@ -451,7 +451,7 @@ routes.get("/", (c) => { modules: getModuleInfoList(), theme: "dark", body: renderDemo(), - scripts: ``, + scripts: ``, styles: ``, })); } diff --git a/modules/rfunds/demo.ts b/modules/rfunds/demo.ts index 9ab2e75..6b52950 100644 --- a/modules/rfunds/demo.ts +++ b/modules/rfunds/demo.ts @@ -1,256 +1,116 @@ /** - * rFunds demo page — group expense tracking for "Alpine Explorer 2026". + * rFunds demo page — server-rendered HTML body. * - * Renders server-side HTML skeleton with budget overview, expense list, - * balances, settlements, category breakdown, and per-person stats. - * The client-side funds-demo.ts hydrates via WebSocket (DemoSync). + * Embeds the full component + * for real interactivity (flow listing, river visualization, TBFF diagrams) + * plus showcase sections explaining the rFunds vision. */ -/* ─── Constants ─────────────────────────────────────────────── */ - -const MEMBERS = [ - { name: "Maya", initial: "M", color: "#10b981", bgClass: "rd-bg-emerald" }, - { name: "Liam", initial: "L", color: "#06b6d4", bgClass: "rd-bg-cyan" }, - { name: "Priya", initial: "P", color: "#8b5cf6", bgClass: "rd-bg-violet" }, - { name: "Omar", initial: "O", color: "#f59e0b", bgClass: "rd-bg-amber" }, +const FEATURES = [ + { + icon: "\u{1F30A}", + title: "River Visualization", + desc: "Watch resources flow through animated Sankey rivers. Sources feed into funnels, funnels feed outcomes, and surplus overflows to where it's needed most.", + }, + { + icon: "\u{1F4CA}", + title: "TBFF Flows", + desc: "Threshold-Based Funding Flows distribute resources based on enoughness. When a funnel is sufficient, surplus flows to the next highest-need area.", + }, + { + icon: "\u{1F4B8}", + title: "Treasury Management", + desc: "Track deposits, withdrawals, and allocations across all community funnels. Transparent financial governance in real time.", + }, + { + icon: "\u2696\uFE0F", + title: "Enoughness Layer", + desc: "Each funnel has a sufficiency threshold. Golden glow indicates a funded funnel. Resources keep flowing until everyone has enough.", + }, ]; -const CATEGORIES = [ - { key: "transport", icon: "\u{1F682}", label: "Transport", colorClass: "rd-progress__fill--cyan", badgeClass: "rd-badge--sky", textClass: "rd-cyan" }, - { key: "accommodation", icon: "\u{1F3E8}", label: "Accommodation", colorClass: "rd-progress__fill--violet", badgeClass: "rd-badge--teal", textClass: "rd-violet" }, - { key: "activity", icon: "\u26F7", label: "Activities", colorClass: "rd-progress__fill--amber", badgeClass: "rd-badge--amber", textClass: "rd-amber" }, - { key: "food", icon: "\u{1F372}", label: "Food & Drink", colorClass: "rd-progress__fill--rose", badgeClass: "rd-badge--rose", textClass: "rd-rose" }, +const INTEGRATIONS = [ + { icon: "\u{1F6D2}", name: "rCart", desc: "Order revenue flows through TBFF funnels with automatic creator/provider/community splits." }, + { icon: "\u{1F5F3}", name: "rVote", desc: "Governance votes determine funding priorities and threshold adjustments." }, + { icon: "\u{2708}\uFE0F", name: "rTrips", desc: "Group expenses feed into shared budget flows with per-person tracking." }, + { icon: "\u{1F4DD}", name: "rNotes", desc: "Attach budget rationales, meeting minutes, and audit logs to flows." }, + { icon: "\u{1F4C5}", name: "rCal", desc: "Budget reviews, treasury snapshots, and governance votes on the calendar timeline." }, + { icon: "\u2615\uFE0F", name: "rSpace", desc: "Each space has its own treasury. Nest flows across spaces for multi-community coordination." }, ]; -/* ─── Render ─────────────────────────────────────────────── */ - export function renderDemo(): string { return ` -
+
- +
-

Alpine Explorer 2026

-

Group Expenses

+
+ Threshold-Based Funding Flows +
+

rFunds Demo

+

Budget flows, river visualization, and treasury management with enoughness thresholds

- \u{1F4C5} Jul 6-20, 2026 + \u{1F30A} River Visualization | - \u{1F465} ${MEMBERS.length} travelers + \u{1F4CA} TBFF Flows | - \u{1F3D4} Chamonix \u2192 Zermatt \u2192 Dolomites -
-
- ${MEMBERS.map( - (m) => - `
${m.initial}
`, - ).join("\n ")} - ${MEMBERS.length} members + \u{1F4B8} Treasury + | + \u2696\uFE0F Enoughness
- -
-
-
- Disconnected - Live — synced across all r* demos -
- -
-
- - -
- - - - - -
- - -
`; } diff --git a/modules/rvote/mod.ts b/modules/rvote/mod.ts index 87a7583..c0dfd53 100644 --- a/modules/rvote/mod.ts +++ b/modules/rvote/mod.ts @@ -337,8 +337,7 @@ routes.get("/", (c) => { modules: getModuleInfoList(), theme: "dark", body: renderDemo(), - demoScripts: ` - `, + scripts: ``, styles: ``, })); }