;; AUTO-GENERATED from spec/tests/hyperscript-upstream-tests.json
;; DO NOT EDIT — regenerate with:
;;   python3 tests/playwright/generate-sx-tests.py --emit-pages

(defcomp ()
  (~docs/page :title "Hyperscript: live (23 tests — 0 runnable)"
    (p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream live tests. 0 of 23 are reproducible in-browser; the remainder show their source for reference.")
    (p :style "color:#78716c;font-size:0.875rem;margin-bottom:1rem"
      "Theme: " (a :href "/sx/(applications.(hyperscript.gallery-reactivity))"
        :style "color:#7c3aed" "reactivity"))
    (div :style "display:flex;flex-direction:column"
      (~hyperscript/hs-test-card
  :name "derives a variable from a computed expression"
  :html "<div _=\"live set $total to ($price * $qty) end
			         when $total changes put it into me\"></div>"
  :action "await run(\"set $price to 10\"; await run(\"set $qty to 3\"; await run(\"set $price to 25\""
  :check "toHaveText('30')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "updates DOM text reactively with put"
  :html "<div _=\"live put 'hello ' + $greeting into me\"></div>"
  :action "await run(\"set $greeting to '; await run(\"set $greeting to '"
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "sets an attribute reactively"
  :html "<div _=\"live set my @data-theme to $theme\"></div>"
  :action "await run(\"set $theme to '; await run(\"set $theme to '"
  :check "toHaveAttribute('data-theme', 'light')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "sets a style reactively"
  :html "<div _=\"live set *opacity to $opacity\">visible</div>"
  :action "await run(\"set $opacity to 1\"; await run(\"set $opacity to 0.5\""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "puts a computed dollar amount into the DOM"
  :html "<div _=\"live put '$' + ($price * $qty) into me\"></div>"
  :action "await run(\"set $price to 10\"; await run(\"set $qty to 2\"; await run(\"set $qty to 5\""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "block form re-runs all commands when any dependency changes"
  :html "<span id=\"w\" _=\"when $doubleWidth changes put it into me\"></span><span id=\"h\" _=\"when $doubleHeight changes put it into me\"></span><div _=\"live
			           set $doubleWidth to ($width * 2)
			           set $doubleHeight to ($height * 2)
			         end\"></div>"
  :action "await run(\"set $width to 100\"; await run(\"set $height to 200\"; await run(\"set $height to 300\""
  :check "toHaveText('200')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "separate live statements create independent effects"
  :html "<span id=\"w\" _=\"when $doubleWidth changes put it into me\"></span><span id=\"h\" _=\"when $doubleHeight changes put it into me\"></span><div _=\"live set $doubleWidth to ($width * 2) end
			         live set $doubleHeight to ($height * 2)\"></div>"
  :action "await run(\"set $width to 100\"; await run(\"set $height to 200\"; await run(\"set $height to 300\""
  :check "toHaveText('200')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "block form cascades inter-dependent commands"
  :html "<div _=\"live
			           set $subtotal to ($price * $qty)
			           set $total to ($subtotal + $tax)
			         end
			         when $total changes put it into me\"></div>"
  :action "await run(\"set $price to 10\"; await run(\"set $qty to 3\"; await run(\"set $tax to 5\"; await run(\"set $price to 20\"; await run(\"set $tax to 10\""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "toggles a class based on a boolean variable"
  :html "<div _=\"live
			           if $isActive add .active to me else remove .active from me end
			         end\">test</div>"
  :action "await run(\"set $isActive to false\"; await run(\"set $isActive to true\"; await run(\"set $isActive to false\""
  :check "toHaveClass('active')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "toggles display style based on a boolean variable"
  :html "<div _=\"live
			           if $isVisible set *display to 'block' else set *display to 'none' end
			         end\">content</div>"
  :action "await run(\"set $isVisible to true\"; await run(\"set $isVisible to false\"; await run(\"set $isVisible to true\""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "effects stop when element is removed from DOM"
  :html "<div _=\"live put $message into me\"></div>"
  :action "await run(\"set $message to '; await run(\"set $message to '"
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "conditional branch only tracks the active dependency"
  :html "<div _=\"live
			           if $showFirst put $firstName into me else put $lastName into me end
			         end\"></div>"
  :action "await run(\"set $showFirst to true\"; await run(\"set $firstName to '; await run(\"set $lastName to '; await run(\"set $firstName to '; await run(\"set $lastName to '"
  :check "toHaveText('Bob'); toHaveText('Jones')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "multiple live on same element work independently"
  :html "<div _=\"live set my @data-name to $firstName end
			         live set my @data-age to $age\"></div>"
  :action "await run(\"set $firstName to '; await run(\"set $age to 30\"; await run(\"set $firstName to '"
  :check "toHaveAttribute('data-name', 'Alice'); toHaveAttribute('data-age', '30'); toHaveAttribute('data-age', '30')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "live and when on same element do not interfere"
  :html "<div _=\"live set my @data-status to $status end
			         when $status changes put 'Status: ' + it into me\"></div>"
  :action "await run(\"set $status to '; await run(\"set $status to '"
  :check "toHaveAttribute('data-status', 'online'); toHaveText('Status: online')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "bind and live on same element do not interfere"
  :html "<input type=\"text\" value=\"alice\"
			        _=\"bind $username to me end
			           live set my @data-mirror to $username\" /><span _=\"when $username changes put it into me\"></span>"
  :action "find('input').fill('bob'); await run(\"set $username to '"
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "reactive effects are stopped on cleanup"
  :html "<div id=\"d1\" _=\"live put $count into me\"></div>"
  :action "await run(\"set $count to 0\"; await run(\"set $count to 99\""
  :check "toHaveText('cleaned')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "append triggers live block"
  :html "<div _=\"live put $items.join(', ') into me\"></div>"
  :action "await run(\"set $items to ['; await run(\"append '"
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "push via pseudo-command triggers live block"
  :html "<div _=\"live put $items.join(', ') into me\"></div>"
  :action "await run(\"set $items to ['; await run(\"$items.push('"
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "push via call triggers live block"
  :html "<div _=\"live put $items.join(', ') into me\"></div>"
  :action "await run(\"set $items to ['; await run(\"call $items.push('"
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "array + still works with live"
  :html "<div _=\"live put $items.join(', ') into me\"></div>"
  :action "await run(\"set $items to ['; await run(\"set $items to $items + ['"
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "set property still works with live"
  :html "<div _=\"live put $obj.name into me\"></div>"
  :action "await run(\"set $obj to {name: '; await run(\"set $obj.name to '"
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "property change on object in array triggers live re-render"
  :html "<template id=\"people-tmpl\">#for p in people\\n<span>\\${p.name}</span>\\n#end</template><div _=\"live render #people-tmpl with people: $people then put it into my.innerHTML end\"></div>"
  :action "await run(\"set $people to [{name: '; await run(\"set $people[0].name to '"
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "push object then modify its property both trigger live"
  :html "<template id=\"items-tmpl\">#for item in items\\n<span>\\${item.label}</span>\\n#end</template><div _=\"live render #items-tmpl with items: $items then put it into my.innerHTML end\"></div>"
  :action "await run(\"set $items to [{label: '; await run(\"call $items.push({label: '; await run(\"set $items[1].label to '"
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
