npm - @jsenv/navi - Versions diffs - 0.0.1 - Mend

@jsenv/navi 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (123) hide show

package/index.js +51 -0
package/package.json +38 -0
package/src/action_private_properties.js +11 -0
package/src/action_proxy_test.html +353 -0
package/src/action_run_states.js +5 -0
package/src/actions.js +1377 -0
package/src/browser_integration/browser_integration.js +191 -0
package/src/browser_integration/document_back_and_forward.js +17 -0
package/src/browser_integration/document_loading_signal.js +100 -0
package/src/browser_integration/document_state_signal.js +9 -0
package/src/browser_integration/document_url_signal.js +9 -0
package/src/browser_integration/use_is_visited.js +19 -0
package/src/browser_integration/via_history.js +199 -0
package/src/browser_integration/via_navigation.js +168 -0
package/src/components/action_execution/form_context.js +8 -0
package/src/components/action_execution/render_actionable_component.jsx +27 -0
package/src/components/action_execution/use_action.js +330 -0
package/src/components/action_execution/use_execute_action.js +161 -0
package/src/components/action_renderer.jsx +136 -0
package/src/components/collect_form_element_values.js +79 -0
package/src/components/demos/0_button_demo.html +155 -0
package/src/components/demos/1_checkbox_demo.html +257 -0
package/src/components/demos/2_input_textual_demo.html +354 -0
package/src/components/demos/3_radio_demo.html +222 -0
package/src/components/demos/4_select_demo.html +104 -0
package/src/components/demos/5_list_scrollable_demo.html +153 -0
package/src/components/demos/action/0_button_demo.html +204 -0
package/src/components/demos/action/10_shortcuts_demo.html +189 -0
package/src/components/demos/action/11_nested_shortcuts_demo.html +401 -0
package/src/components/demos/action/1_input_text_demo.html +461 -0
package/src/components/demos/action/2_form_multiple.html +303 -0
package/src/components/demos/action/3_details_demo.html +172 -0
package/src/components/demos/action/4_input_checkbox_demo.html +611 -0
package/src/components/demos/action/6_checkbox_list_demo.html +109 -0
package/src/components/demos/action/7_radio_list_demo.html +217 -0
package/src/components/demos/action/8_editable_text_demo.html +442 -0
package/src/components/demos/action/9_link_demo.html +172 -0
package/src/components/demos/demo.md +0 -0
package/src/components/demos/route/basic/basic.html +14 -0
package/src/components/demos/route/basic/basic_route_demo.jsx +224 -0
package/src/components/demos/route/multi/multi.html +14 -0
package/src/components/demos/route/multi/multi_route_demo.jsx +277 -0
package/src/components/details/details.jsx +248 -0
package/src/components/details/summary_marker.jsx +141 -0
package/src/components/editable_text/editable_text.jsx +96 -0
package/src/components/error_boundary_context.js +9 -0
package/src/components/form.jsx +144 -0
package/src/components/input/button.jsx +333 -0
package/src/components/input/checkbox_list.jsx +294 -0
package/src/components/input/field.jsx +61 -0
package/src/components/input/field_css.js +118 -0
package/src/components/input/input.jsx +15 -0
package/src/components/input/input_checkbox.jsx +370 -0
package/src/components/input/input_radio.jsx +299 -0
package/src/components/input/input_textual.jsx +338 -0
package/src/components/input/radio_list.jsx +283 -0
package/src/components/input/select.jsx +273 -0
package/src/components/input/use_form_event.js +20 -0
package/src/components/input/use_on_change.js +12 -0
package/src/components/link/link.jsx +291 -0
package/src/components/loader/loader_background.jsx +324 -0
package/src/components/loader/loading_spinner.jsx +68 -0
package/src/components/loader/network_speed.js +83 -0
package/src/components/loader/rectangle_loading.jsx +225 -0
package/src/components/route.jsx +15 -0
package/src/components/selection/selection.js +5 -0
package/src/components/selection/selection_context.jsx +262 -0
package/src/components/shortcut/os.js +9 -0
package/src/components/shortcut/shortcut_context.jsx +390 -0
package/src/components/use_action_events.js +37 -0
package/src/components/use_auto_focus.js +43 -0
package/src/components/use_debounce_true.js +31 -0
package/src/components/use_focus_group.js +19 -0
package/src/components/use_initial_value.js +104 -0
package/src/components/use_is_visited.js +19 -0
package/src/components/use_ref_array.js +38 -0
package/src/components/use_signal_sync.js +50 -0
package/src/components/use_state_array.js +40 -0
package/src/docs/actions.md +228 -0
package/src/docs/demos/resource/action_status.jsx +42 -0
package/src/docs/demos/resource/demo.md +1 -0
package/src/docs/demos/resource/resource_demo_0.html +84 -0
package/src/docs/demos/resource/resource_demo_10_post_gc.html +364 -0
package/src/docs/demos/resource/resource_demo_11_describe_many.html +362 -0
package/src/docs/demos/resource/resource_demo_2.html +173 -0
package/src/docs/demos/resource/resource_demo_3_filtered_users.html +415 -0
package/src/docs/demos/resource/resource_demo_4_details.html +284 -0
package/src/docs/demos/resource/resource_demo_5_renderer_lazy.html +115 -0
package/src/docs/demos/resource/resource_demo_6_gc.html +217 -0
package/src/docs/demos/resource/resource_demo_7_child_gc.html +240 -0
package/src/docs/demos/resource/resource_demo_8_proxy_gc.html +319 -0
package/src/docs/demos/resource/resource_demo_9_describe_one.html +472 -0
package/src/docs/demos/resource/tata.jsx +3 -0
package/src/docs/demos/resource/toto.jsx +3 -0
package/src/docs/demos/user_nav/user_nav.html +12 -0
package/src/docs/demos/user_nav/user_nav.jsx +330 -0
package/src/docs/resource_dependencies.md +103 -0
package/src/docs/resource_with_params.md +80 -0
package/src/notes.md +13 -0
package/src/route/route.js +518 -0
package/src/route/route.test.html +228 -0
package/src/store/array_signal_store.js +537 -0
package/src/store/local_storage_signal.js +17 -0
package/src/store/resource_graph.js +1303 -0
package/src/store/tests/resource_graph_autoreload_demo.html +12 -0
package/src/store/tests/resource_graph_autoreload_demo.jsx +964 -0
package/src/store/tests/resource_graph_dependencies.test.js +95 -0
package/src/store/value_in_local_storage.js +187 -0
package/src/symbol_object_signal.js +1 -0
package/src/use_action_data.js +10 -0
package/src/use_action_status.js +47 -0
package/src/utils/add_many_event_listeners.js +15 -0
package/src/utils/array_add_remove.js +61 -0
package/src/utils/array_signal.js +15 -0
package/src/utils/compare_two_js_values.js +172 -0
package/src/utils/execute_with_cleanup.js +21 -0
package/src/utils/get_caller_info.js +85 -0
package/src/utils/iterable_weak_set.js +62 -0
package/src/utils/js_value_weak_map.js +162 -0
package/src/utils/js_value_weak_map_demo.html +690 -0
package/src/utils/merge_two_js_values.js +53 -0
package/src/utils/stringify_for_display.js +150 -0
package/src/utils/weak_effect.js +48 -0

package/src/docs/demos/resource/resource_demo_3_filtered_users.html ADDED Viewed

@@ -0,0 +1,415 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="data:," />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Resource Demo 3 - Filtered Users</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        padding: 20px;
+      }
+      .filters {
+        background: #f5f5f5;
+        padding: 15px;
+        margin-bottom: 20px;
+        border-radius: 5px;
+      }
+      .user-list {
+        margin: 20px 0;
+      }
+      .user-item {
+        padding: 10px;
+        margin: 5px 0;
+        border: 1px solid #ddd;
+        border-radius: 3px;
+        background: white;
+      }
+      .user-item.loaded {
+        border-color: #28a745;
+        background: #f8fff8;
+      }
+      .button-group {
+        margin: 10px 0;
+      }
+      button {
+        margin: 2px;
+        padding: 5px 10px;
+      }
+      .create-user {
+        background: #e9ecef;
+        padding: 15px;
+        margin: 20px 0;
+        border-radius: 5px;
+      }
+      input,
+      select {
+        margin: 5px;
+        padding: 5px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" jsenv-type="module/jsx">
+      import { render } from "preact";
+      import { signal } from "@preact/signals";
+      import { useState } from "preact/hooks";
+      import {
+        useActionStatus,
+        resource,
+        // eslint-disable-next-line no-unused-vars
+        ActionRenderer,
+      } from "@jsenv/navi";
+      import {
+        // eslint-disable-next-line no-unused-vars
+        ActionStatus,
+      } from "./action_status.jsx";
+      // Base de données simulée
+      const allUsers = [
+        {
+          id: 1,
+          name: "Alice",
+          gender: "female",
+          age: 25,
+          department: "Engineering",
+        },
+        {
+          id: 2,
+          name: "Bob",
+          gender: "male",
+          age: 30,
+          department: "Marketing",
+        },
+        {
+          id: 3,
+          name: "Charlie",
+          gender: "male",
+          age: 35,
+          department: "Engineering",
+        },
+        {
+          id: 4,
+          name: "Diana",
+          gender: "female",
+          age: 28,
+          department: "Sales",
+        },
+        {
+          id: 5,
+          name: "Eve",
+          gender: "female",
+          age: 32,
+          department: "Marketing",
+        },
+      ];
+      const USER = resource("user", {
+        idKey: "id",
+        mutableIdKey: "name",
+        GET_MANY: async (filters) => {
+          console.log("Loading users", filters);
+          await new Promise((resolve) => setTimeout(resolve, 500));
+          return allUsers.filter((user) => {
+            if (
+              filters.gender !== undefined &&
+              user.gender !== filters.gender
+            ) {
+              return false;
+            }
+            if (
+              filters.department !== undefined &&
+              user.department !== filters.department
+            ) {
+              return false;
+            }
+            return true;
+          });
+        },
+        GET: async ({ id }) => {
+          await new Promise((resolve) => setTimeout(resolve, 300));
+          const foundUser = allUsers.find((u) => u.id === id);
+          if (!foundUser) {
+            throw new Error(`User ${id} not found`);
+          }
+          return {
+            ...foundUser,
+            loadedAt: new Date().toLocaleTimeString(),
+          };
+        },
+        POST: async (newUser) => {
+          await new Promise((resolve) => setTimeout(resolve, 500));
+          return newUser;
+        },
+        PUT: async ({ id, field, value }) => {
+          await new Promise((resolve) => setTimeout(resolve, 500));
+          return { id, [field]: value };
+        },
+      });
+      USER.RENAME = USER.PUT.bindParams({
+        field: "name",
+      });
+      // Signal pour les filtres
+      const filtersSignal = signal({
+        gender: undefined,
+        department: undefined,
+      });
+      USER.GET_MANY_FILTERED = USER.GET_MANY.bindParams(filtersSignal);
+      USER.GET_MANY_FILTERED.load();
+      USER.store.observeProperties((mutations) => {
+        const nameMutation = mutations.name;
+        if (nameMutation) {
+          const { target, oldValue, newValue } = nameMutation;
+          console.log(
+            `user ${target.id} name changed from "${oldValue}" to "${newValue}"`,
+          );
+        }
+      });
+      // eslint-disable-next-line no-unused-vars
+      const App = () => {
+        const { data: serverUsers, pending: loadingUsers } = useActionStatus(
+          USER.GET_MANY_FILTERED,
+        );
+        const [newUserName, setNewUserName] = useState("");
+        const [newUserGender, setNewUserGender] = useState("male");
+        const [newUserAge, setNewUserAge] = useState(25);
+        const [newUserDept, setNewUserDept] = useState("Engineering");
+        const createUser = () => {
+          if (!newUserName.trim()) {
+            return;
+          }
+          const newUser = {
+            id: Math.max(...allUsers.map((u) => u.id)) + 1,
+            name: newUserName,
+            gender: newUserGender,
+            age: parseInt(newUserAge),
+            department: newUserDept,
+          };
+          setNewUserName("");
+          allUsers.push(newUser);
+          const createUser = USER.POST.bindParams(newUser);
+          createUser.load();
+        };
+        return (
+          <div>
+            <h1>Users Management Demo</h1>
+            <button
+              onClick={() => {
+                USER.GET_MANY_FILTERED.reload();
+              }}
+            >
+              Reload
+            </button>
+            <div className="filters">
+              <h3>Filters</h3>
+              <fieldset>
+                <legend>Gender</legend>
+                <label>
+                  All:
+                  <input
+                    name="gender"
+                    type="radio"
+                    value="all"
+                    checked={filtersSignal.value.gender === undefined}
+                    onChange={(e) => {
+                      if (e.target.checked) {
+                        filtersSignal.value = {
+                          ...filtersSignal.value,
+                          gender: undefined,
+                        };
+                      }
+                    }}
+                  />
+                </label>
+                <label>
+                  Male:
+                  <input
+                    name="gender"
+                    type="radio"
+                    value="male"
+                    checked={filtersSignal.value.gender === "male"}
+                    onChange={(e) => {
+                      if (e.target.checked) {
+                        filtersSignal.value = {
+                          ...filtersSignal.value,
+                          gender: e.target.value,
+                        };
+                      }
+                    }}
+                  />
+                </label>
+                <label>
+                  Female:
+                  <input
+                    name="gender"
+                    type="radio"
+                    value="female"
+                    checked={filtersSignal.value.gender === "female"}
+                    onChange={(e) => {
+                      if (e.target.checked) {
+                        filtersSignal.value = {
+                          ...filtersSignal.value,
+                          gender: e.target.value,
+                        };
+                      }
+                    }}
+                  />
+                </label>
+              </fieldset>
+              <label>
+                Department:
+                <select
+                  value={filtersSignal.value.department}
+                  onChange={(e) => {
+                    filtersSignal.value = {
+                      ...filtersSignal.value,
+                      department: e.target.value,
+                    };
+                  }}
+                >
+                  <option value="all">All</option>
+                  <option value="Engineering">Engineering</option>
+                  <option value="Marketing">Marketing</option>
+                  <option value="Sales">Sales</option>
+                </select>
+              </label>
+            </div>
+            {/* Liste des utilisateurs du serveur - LA SEULE LISTE */}
+            <div className="user-list">
+              <h3>
+                Filtered Users from Server {loadingUsers && "- Loading..."}
+              </h3>
+              <p>Count: {serverUsers.length}</p>
+              {serverUsers.map((user) => {
+                return (
+                  <UserItem
+                    key={user}
+                    user={user}
+                    onUpdateName={async (name) => {
+                      const renameAction = USER.RENAME.bindParams({
+                        id: user.id,
+                        value: name,
+                      });
+                      await renameAction.load();
+                      const harcodedUser = allUsers.find(
+                        (u) => u.id === user.id,
+                      );
+                      harcodedUser.name = name;
+                    }}
+                  />
+                );
+              })}
+            </div>
+            {/* Création d'utilisateur */}
+            <div className="create-user">
+              <h3>Create New User</h3>
+              <p>
+                <em>
+                  Note: Les nouveaux utilisateurs n'apparaîtront que s'ils
+                  matchent les filtres actuels
+                </em>
+              </p>
+              <input
+                type="text"
+                placeholder="Name"
+                value={newUserName}
+                onChange={(e) => setNewUserName(e.target.value)}
+              />
+              <select
+                value={newUserGender}
+                onChange={(e) => setNewUserGender(e.target.value)}
+              >
+                <option value="male">Male</option>
+                <option value="female">Female</option>
+              </select>
+              <input
+                type="number"
+                placeholder="Age"
+                value={newUserAge}
+                onChange={(e) => setNewUserAge(e.target.value)}
+              />
+              <select
+                value={newUserDept}
+                onChange={(e) => setNewUserDept(e.target.value)}
+              >
+                <option value="Engineering">Engineering</option>
+                <option value="Marketing">Marketing</option>
+                <option value="Sales">Sales</option>
+              </select>
+              <button onClick={createUser}>Create User</button>
+            </div>
+            <ActionStatus action={USER.GET_MANY_FILTERED} />
+          </div>
+        );
+      };
+      // eslint-disable-next-line no-unused-vars
+      const UserItem = ({ user, onUpdateName }) => {
+        const userAction = USER.GET.bindParams({
+          id: user.id,
+        });
+        const { pending, loaded } = useActionStatus(userAction);
+        const [editingName, setEditingName] = useState(false);
+        const [newName, setNewName] = useState(user.name);
+        const handleNameUpdate = async () => {
+          await onUpdateName(newName);
+          setEditingName(false);
+        };
+        return (
+          <div className={`user-item ${loaded ? "loaded" : ""}`}>
+            <div>
+              <strong>
+                {editingName ? (
+                  <span>
+                    <input
+                      value={newName}
+                      onChange={(e) => setNewName(e.target.value)}
+                      onKeyDown={(e) => e.key === "Enter" && handleNameUpdate()}
+                    />
+                    <button onClick={handleNameUpdate}>✓</button>
+                    <button onClick={() => setEditingName(false)}>✗</button>
+                  </span>
+                ) : (
+                  <span
+                    onClick={() => setEditingName(true)}
+                    style={{ cursor: "pointer" }}
+                  >
+                    {user.name}
+                    {user.loadedAt && ` (loaded at ${user.loadedAt})`}
+                  </span>
+                )}
+              </strong>
+              - {user.gender}, {user.age}y, {user.department}
+            </div>
+            <div className="button-group">
+              <button onClick={() => userAction.reload()}>Reload</button>
+              <button onClick={() => userAction.unload()}>Unload</button>
+              <button onClick={() => userAction.preload()}>Preload</button>
+              {pending && <span>Loading...</span>}
+            </div>
+          </div>
+        );
+      };
+      render(<App />, document.querySelector("#root"));
+    </script>
+  </body>
+</html>

package/src/docs/demos/resource/resource_demo_4_details.html ADDED Viewed

@@ -0,0 +1,284 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="data:," />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Resource demo - Details with localStorage</title>
+  </head>
+  <body>
+    <div
+      id="root"
+      style="position: relative; width: 400px; padding: 20px"
+    ></div>
+    <script type="module" jsenv-type="module/jsx">
+      import { render } from "preact";
+      import { useState, useEffect } from "preact/hooks";
+      import {
+        createAction,
+        useActionStatus,
+        // eslint-disable-next-line no-unused-vars
+        ActionRenderer,
+      } from "@jsenv/navi";
+      // Mock API calls
+      const fetchUser = async ({ userId }) => {
+        await new Promise((resolve) => setTimeout(resolve, 800));
+        return {
+          id: userId,
+          name: `User ${userId}`,
+          email: `user${userId}@example.com`,
+        };
+      };
+      const fetchUserFriends = async ({ userId }, { signal }) => {
+        console.log(`Fetching friends for user ${userId}`);
+        await new Promise((resolve) => {
+          const timeout = setTimeout(resolve, 1200);
+          signal.addEventListener("abort", () => {
+            clearTimeout(timeout);
+          });
+        });
+        return [
+          { id: 1, name: "Alice Johnson" },
+          { id: 2, name: "Bob Smith" },
+          { id: 3, name: "Carol Davis" },
+        ];
+      };
+      const fetchUserSettings = async ({ userId }) => {
+        console.log(`Fetching settings for user ${userId}`);
+        await new Promise((resolve) => setTimeout(resolve, 600));
+        return {
+          theme: "dark",
+          notifications: true,
+          privacy: "friends-only",
+        };
+      };
+      // Action templates
+      const GET_USER = createAction(fetchUser, {
+        params: {
+          name: "getUser",
+        },
+      });
+      const GET_USER_FRIENDS = createAction(fetchUserFriends, {
+        params: {
+          name: "getUserFriends",
+        },
+      });
+      const GET_USER_SETTINGS = createAction(fetchUserSettings, {
+        params: {
+          name: "getUserSettings",
+        },
+      });
+      // Hook pour gérer l'état des details avec localStorage
+      const useToggleableAction = (action, storageKey) => {
+        const [isOpen, setIsOpen] = useState(() => {
+          return localStorage.getItem(storageKey) !== null;
+        });
+        const handleToggle = (e) => {
+          const open = e.target.open;
+          setIsOpen(open);
+          if (open) {
+            action.load();
+            localStorage.setItem(storageKey, "1");
+          } else {
+            action.abort();
+            localStorage.removeItem(storageKey);
+          }
+        };
+        // Charger au montage si c'était ouvert
+        useEffect(() => {
+          if (isOpen) {
+            action.load();
+          }
+        }, []);
+        return [isOpen, handleToggle];
+      };
+      // Composant principal
+      // eslint-disable-next-line no-unused-vars
+      const UserProfile = ({ userId = 123 }) => {
+        const getUser = GET_USER.bindParams({ userId });
+        const getUserFriends = GET_USER_FRIENDS.bindParams({ userId });
+        const getUserSettings = GET_USER_SETTINGS.bindParams({ userId });
+        const [friendsOpen, handleFriendsToggle] = useToggleableAction(
+          getUserFriends,
+          `user_${userId}_friends_open`,
+        );
+        const { data: friends } = useActionStatus(getUserFriends);
+        const [settingsOpen, handleSettingsToggle] = useToggleableAction(
+          getUserSettings,
+          `user_${userId}_settings_open`,
+        );
+        // Charger les données de base de l'utilisateur
+        useEffect(() => {
+          getUser.load();
+        }, []);
+        return (
+          <div style={{ fontFamily: "system-ui", lineHeight: "1.5" }}>
+            <h2 style={{ margin: "0 0 20px 0", color: "#333" }}>
+              👤 User Profile
+            </h2>
+            {/* Données de base de l'utilisateur */}
+            <div style={{ marginBottom: "20px" }}>
+              <ActionRenderer action={getUser}>
+                {(user) => (
+                  <div
+                    style={{
+                      padding: "12px",
+                      backgroundColor: "#e3f2fd",
+                      borderRadius: "4px",
+                    }}
+                  >
+                    <strong>{user.name}</strong>
+                    <br />
+                    📧 {user.email}
+                  </div>
+                )}
+              </ActionRenderer>
+            </div>
+            {/* Details Friends */}
+            <details
+              open={friendsOpen}
+              onToggle={handleFriendsToggle}
+              style={{ marginBottom: "16px" }}
+            >
+              <summary
+                style={{
+                  cursor: "pointer",
+                  display: "flex",
+                  padding: "8px",
+                  backgroundColor: "#fff3e0",
+                  borderRadius: "4px",
+                  fontWeight: "bold",
+                }}
+              >
+                👥 Friends {friends ? `(${friends.length})` : ""}
+                <span style="flex:1"></span>
+                <button
+                  onClick={() => {
+                    getUserFriends.reload();
+                  }}
+                >
+                  Refresh
+                </button>
+              </summary>
+              <div style={{ padding: "12px", borderLeft: "3px solid #ff9800" }}>
+                <ActionRenderer action={getUserFriends}>
+                  {(friends) => (
+                    <ul style={{ margin: 0, paddingLeft: "20px" }}>
+                      {friends.map((friend) => (
+                        <li key={friend.id}>
+                          <strong>{friend.name}</strong>
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </ActionRenderer>
+              </div>
+            </details>
+            {/* Details Settings */}
+            <details
+              open={settingsOpen}
+              onToggle={handleSettingsToggle}
+              style={{ marginBottom: "16px" }}
+            >
+              <summary
+                style={{
+                  cursor: "pointer",
+                  padding: "8px",
+                  backgroundColor: "#f3e5f5",
+                  borderRadius: "4px",
+                  fontWeight: "bold",
+                }}
+              >
+                ⚙️ Settings
+              </summary>
+              <div style={{ padding: "12px", borderLeft: "3px solid #9c27b0" }}>
+                <ActionRenderer action={getUserSettings}>
+                  {(settings) => (
+                    <div>
+                      <div>
+                        <strong>Theme:</strong> {settings.theme}
+                      </div>
+                      <div>
+                        <strong>Notifications:</strong>{" "}
+                        {settings.notifications ? "On" : "Off"}
+                      </div>
+                      <div>
+                        <strong>Privacy:</strong> {settings.privacy}
+                      </div>
+                    </div>
+                  )}
+                </ActionRenderer>
+              </div>
+            </details>
+            {/* Debug info */}
+            <div
+              style={{
+                marginTop: "20px",
+                padding: "12px",
+                backgroundColor: "#f8f9fa",
+                borderRadius: "4px",
+                fontSize: "12px",
+                color: "#666",
+              }}
+            >
+              <strong>Debug Info:</strong>
+              <br />
+              Friends Details: {friendsOpen ? "Open" : "Closed"}
+              <br />
+              Settings Details: {settingsOpen ? "Open" : "Closed"}
+              <br />
+              localStorage: Check DevTools → Application → Local Storage
+            </div>
+            {/* Actions de test */}
+            <div style={{ marginTop: "16px" }}>
+              <button
+                onClick={() => {
+                  try {
+                    localStorage.clear();
+                    window.location.reload();
+                  } catch (error) {
+                    console.warn("Failed to clear localStorage:", error);
+                  }
+                }}
+                style={{
+                  padding: "8px 16px",
+                  backgroundColor: "#dc3545",
+                  color: "white",
+                  border: "none",
+                  borderRadius: "4px",
+                  cursor: "pointer",
+                }}
+              >
+                🗑️ Clear localStorage & Reload
+              </button>
+            </div>
+          </div>
+        );
+      };
+      // Render
+      render(<UserProfile userId={123} />, document.getElementById("root"));
+    </script>
+  </body>
+</html>