deploy: leporello-js/app@ec57fdc389

docs/examples/todos-preact/index.js

@@ -9,13 +9,6 @@ import * as React from "preact/compat"
 // Global application state
 let state
 
-// Preserve state (list of TODOs) when editing code
-if (globalThis.leporello) {
-  // Retrieve initial state from Leporello storage
-  // See: https://github.com/leporello-js/leporello-js?tab=readme-ov-file#saving-state-between-page-reloads
-  state = globalThis.leporello.storage.get("state")
-}
-
 /*
   Application logic is structured as pure functions with the signature `(state, ...args) => state`.
   This helper function wraps such a function so that its result updates the global state
@@ -25,10 +18,6 @@ const handler =
   fn =>
   (...args) => {
     state = fn(state, ...args)
-    if (globalThis.leporello) {
-      // Persist state to Leporello storage to restore it after page reloads
-      globalThis.leporello.storage.set("state", state)
-    }
     render()
   }
 

styles.css

@@ -291,6 +291,7 @@ dialog {
 
 .files .file {
   margin-left: 1em;
+  cursor: pointer;
 }
 
 .files > .file {
@@ -533,8 +534,9 @@ dialog {
 .open_app_window_button {
   position: relative;
 }
-.open_app_window_tooltip {
+.onboarding_tooltip {
   padding: 1em;
+  min-width: 10em;
   position: absolute;
   margin-bottom: 20px;
   bottom: 100%;
@@ -542,13 +544,14 @@ dialog {
   font-size: 1.7em;
   background-color: rgb(120 206 247);
   border-radius: 21px;
-  transform: scale(0);
+  left: 50%;
+  transform: translate(-50%) scale(0);
   transition: transform 0.3s;
 }
-.open_app_window_tooltip.on {
-  transform: scale(1);
+.onboarding_tooltip.on {
+  transform: translate(-50%) scale(1);
 }
-.open_app_window_tooltip:after {
+.onboarding_tooltip:after {
   content: '';
   width: 0;
   height: 0;
@@ -579,6 +582,35 @@ dialog {
   color: linktext;
 }
 
+.inspect_jsx {
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+  display: flex;
+  align-self: stretch;
+  flex-direction: row;
+  flex: 0;
+  align-items: center;
+  padding: 0em 0.5em;
+
+
+  input {
+    display: none;
+  }
+
+  &:hover {
+    background-color: rgb(0, 0, 0, 0.1);
+  }
+
+  &:has(input:checked) {
+    background-color: #0000ee14;
+    color: linktext;
+  }
+  .onboarding_tooltip {
+    font-size: 1em;
+  }
+}
+
 .statusbar_button, .upload_button {
   border: none;
   color: white;