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/components/demos/action/8_editable_text_demo.html ADDED Viewed

@@ -0,0 +1,442 @@
+<!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>Editable Text Demo</title>
+    <style>
+      body {
+        font-family:
+          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+        max-width: 1400px;
+        margin: 0 auto;
+        padding: 20px;
+        background-color: #f8f9fa;
+      }
+      h1 {
+        text-align: center;
+        color: #333;
+        margin-bottom: 30px;
+      }
+      .demo-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+        gap: 20px;
+      }
+      .demo-card {
+        background: white;
+        border-radius: 8px;
+        padding: 20px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        border: 1px solid #e1e8ed;
+      }
+      .demo-title {
+        color: #2c3e50;
+        margin-top: 0;
+        margin-bottom: 15px;
+        font-size: 18px;
+        font-weight: 600;
+        border-bottom: 2px solid #3498db;
+        padding-bottom: 8px;
+      }
+      .control-group {
+        margin-bottom: 15px;
+      }
+      label {
+        display: block;
+        margin-bottom: 5px;
+        font-weight: 500;
+        color: #555;
+      }
+      .button-group {
+        display: flex;
+        gap: 8px;
+        margin-top: 12px;
+        flex-wrap: wrap;
+      }
+      button {
+        padding: 6px 12px;
+        border: 1px solid #3498db;
+        background: #3498db;
+        color: white;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 14px;
+        transition: all 0.2s ease;
+        box-sizing: border-box;
+      }
+      button:hover {
+        background: #2980b9;
+        border-color: #2980b9;
+      }
+      button:disabled {
+        background: #95a5a6;
+        border-color: #95a5a6;
+        cursor: not-allowed;
+      }
+      .editable-container {
+        margin: 15px 0;
+        padding: 15px;
+        background: #f8f9fa;
+        border: 1px solid #dee2e6;
+        border-radius: 6px;
+        min-height: 40px;
+        font-size: 16px;
+        line-height: 1.4;
+      }
+      .result-display {
+        background: #f8f9fa;
+        border: 1px solid #dee2e6;
+        border-radius: 4px;
+        padding: 12px;
+        margin-top: 15px;
+        font-family:
+          "SF Mono", "Monaco", "Inconsolata", "Fira Code", "Fira Mono",
+          "Droid Sans Mono", "Courier New", monospace;
+        font-size: 13px;
+        color: #495057;
+        min-height: 20px;
+        white-space: pre-wrap;
+      }
+      .result-success {
+        background: #d4edda;
+        border-color: #c3e6cb;
+        color: #155724;
+      }
+      .result-error {
+        background: #f8d7da;
+        border-color: #f5c6cb;
+        color: #721c24;
+      }
+      .result-loading {
+        background: #d1ecf1;
+        border-color: #bee5eb;
+        color: #0c5460;
+        animation: pulse 1.5s ease-in-out infinite;
+      }
+      @keyframes pulse {
+        0%,
+        100% {
+          opacity: 1;
+        }
+        50% {
+          opacity: 0.7;
+        }
+      }
+      @media (max-width: 768px) {
+        .demo-grid {
+          grid-template-columns: 1fr;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Editable Text Demo</h1>
+    <div id="root"></div>
+    <script type="module" jsenv-type="module/jsx">
+      import { render } from "preact";
+      import { useState } from "preact/hooks";
+      import { signal } from "@preact/signals";
+      import { SINGLE_SPACE_CONSTRAINT } from "@jsenv/validation";
+      import {
+        useEditableController,
+        // eslint-disable-next-line no-unused-vars
+        EditableText,
+        createAction,
+      } from "@jsenv/navi";
+      // eslint-disable-next-line no-unused-vars
+      const App = () => {
+        return (
+          <div className="demo-grid">
+            <BasicDemo />
+            <LoadingDemo />
+            <ErrorDemo />
+            <CustomStyleDemo />
+            <SignalControlDemo />
+          </div>
+        );
+      };
+      // eslint-disable-next-line no-unused-vars
+      const BasicDemo = () => {
+        const { editable, startEditing, stopEditing } = useEditableController();
+        const [value, setValue] = useState("Click edit to change this text");
+        const [result, setResult] = useState("");
+        return (
+          <div className="demo-card">
+            <h3 className="demo-title">Basic Editable Text</h3>
+            <div className="control-group">
+              <label>Editable Content:</label>
+              <div className="editable-container">
+                <EditableText
+                  editable={editable}
+                  onEditEnd={() => {
+                    stopEditing();
+                    setResult(``);
+                  }}
+                  name="test"
+                  action={({ test }) => {
+                    setValue(test);
+                    return `Updated to: "${test}"`;
+                  }}
+                  value={value}
+                  constraints={[SINGLE_SPACE_CONSTRAINT]}
+                />
+              </div>
+            </div>
+            <div className="button-group">
+              <button onClick={() => startEditing()} disabled={editable}>
+                {editable ? "Editing..." : "Start Editing"}
+              </button>
+            </div>
+            <div
+              className={`result-display ${result.startsWith("✅") ? "result-success" : result.startsWith("❌") ? "result-error" : ""}`}
+            >
+              Current value: "{value}"
+              <br />
+              {result || "Click 'Start Editing' to modify the text..."}
+            </div>
+          </div>
+        );
+      };
+      // eslint-disable-next-line no-unused-vars
+      const LoadingDemo = () => {
+        const { editable, startEditing, stopEditing } = useEditableController();
+        const [value, setValue] = useState("This will take 2 seconds to save");
+        const [result, setResult] = useState("");
+        const [isLoading, setIsLoading] = useState(false);
+        return (
+          <div className="demo-card">
+            <h3 className="demo-title">Editable Text with Loading</h3>
+            <div className="control-group">
+              <label>Editable Content (2s delay):</label>
+              <div className="editable-container">
+                <EditableText
+                  editable={editable}
+                  onEditEnd={() => {
+                    stopEditing();
+                    setIsLoading(false);
+                    setResult();
+                  }}
+                  name="test"
+                  action={async ({ test }) => {
+                    setIsLoading(true);
+                    setResult("Saving...");
+                    await new Promise((resolve) => setTimeout(resolve, 2000));
+                    setValue(test);
+                    return `Saved: "${test}"`;
+                  }}
+                  value={value}
+                  constraints={[SINGLE_SPACE_CONSTRAINT]}
+                />
+              </div>
+            </div>
+            <div className="button-group">
+              <button
+                onClick={() => startEditing()}
+                disabled={editable || isLoading}
+              >
+                {isLoading
+                  ? "Saving..."
+                  : editable
+                    ? "Editing..."
+                    : "Start Editing"}
+              </button>
+            </div>
+            <div
+              className={`result-display ${isLoading ? "result-loading" : result.startsWith("✅") ? "result-success" : result.startsWith("❌") ? "result-error" : ""}`}
+            >
+              Current value: "{value}"
+              <br />
+              {result || "This demo simulates a 2-second save operation..."}
+            </div>
+          </div>
+        );
+      };
+      // eslint-disable-next-line no-unused-vars
+      const ErrorDemo = () => {
+        const { editable, startEditing, stopEditing } = useEditableController();
+        const [value] = useState("This edit will always fail");
+        const [result, setResult] = useState("");
+        return (
+          <div className="demo-card">
+            <h3 className="demo-title">Editable Text with Error Handling</h3>
+            <div className="control-group">
+              <label>Editable Content (always fails):</label>
+              <div className="editable-container">
+                <EditableText
+                  editable={editable}
+                  onEditEnd={() => {
+                    stopEditing();
+                    setResult("");
+                  }}
+                  name="test"
+                  action={async ({ test }) => {
+                    setResult("Processing...");
+                    await new Promise((resolve) => setTimeout(resolve, 500));
+                    throw new Error(`Cannot save "${test}" - simulated error`);
+                  }}
+                  value={value}
+                  constraints={[SINGLE_SPACE_CONSTRAINT]}
+                />
+              </div>
+            </div>
+            <div className="button-group">
+              <button onClick={() => startEditing()} disabled={editable}>
+                {editable ? "Editing..." : "Start Editing (Will Fail)"}
+              </button>
+            </div>
+            <div
+              className={`result-display ${result === "Processing..." ? "result-loading" : result.startsWith("✅") ? "result-success" : result.startsWith("❌") ? "result-error" : ""}`}
+            >
+              Current value: "{value}"
+              <br />
+              {result || "This demo always throws an error when saving..."}
+            </div>
+          </div>
+        );
+      };
+      // eslint-disable-next-line no-unused-vars
+      const CustomStyleDemo = () => {
+        const { editable, startEditing, stopEditing } = useEditableController();
+        const [value, setValue] = useState("Bold styled text");
+        const [result, setResult] = useState("");
+        return (
+          <div className="demo-card">
+            <h3 className="demo-title">Editable Text with Custom Styling</h3>
+            <div className="control-group">
+              <label>Styled Editable Content:</label>
+              <div className="editable-container">
+                <EditableText
+                  editable={editable}
+                  onEditEnd={() => {
+                    stopEditing();
+                    setResult("");
+                  }}
+                  name="test"
+                  action={({ test }) => {
+                    setValue(test);
+                    return `Updated styled text: "${test}"`;
+                  }}
+                  value={value}
+                  constraints={[SINGLE_SPACE_CONSTRAINT]}
+                >
+                  <strong style={{ color: "#e74c3c", fontSize: "18px" }}>
+                    {value}
+                  </strong>
+                </EditableText>
+              </div>
+            </div>
+            <div className="button-group">
+              <button onClick={() => startEditing()} disabled={editable}>
+                {editable ? "Editing..." : "Start Editing"}
+              </button>
+            </div>
+            <div
+              className={`result-display ${result.startsWith("✅") ? "result-success" : result.startsWith("❌") ? "result-error" : ""}`}
+            >
+              Current value: "{value}"
+              <br />
+              {result || "This demo shows custom styling with bold red text..."}
+            </div>
+          </div>
+        );
+      };
+      // Create signal outside component to persist across renders
+      const valueSignal = signal("Signal-controlled editable text");
+      const action = createAction(async ({ test }) => {
+        await new Promise((resolve) => setTimeout(resolve, 800));
+        return `Signal update: "${test}"`;
+      });
+      const boundAction = action.bindParams({ test: valueSignal });
+      // eslint-disable-next-line no-unused-vars
+      const SignalControlDemo = () => {
+        const [result, setResult] = useState("");
+        const { editable, startEditing, stopEditing } = useEditableController();
+        return (
+          <div className="demo-card">
+            <h3 className="demo-title">Signal-Controlled Editable Text</h3>
+            <div className="control-group">
+              <label>Signal-Controlled Content:</label>
+              <div className="editable-container">
+                <EditableText
+                  valueSignal={valueSignal}
+                  editable={editable}
+                  onEditEnd={() => {
+                    stopEditing();
+                    setResult("");
+                  }}
+                  onActionStart={() => {
+                    setResult("Saving via signal...");
+                  }}
+                  name="coucou"
+                  action={boundAction}
+                  cancelOnEscape
+                  cancelOnBlurInvalid
+                  constraints={[SINGLE_SPACE_CONSTRAINT]}
+                >
+                  <span
+                    onClick={() => {
+                      startEditing();
+                    }}
+                  >
+                    {valueSignal.value}
+                  </span>
+                </EditableText>
+              </div>
+            </div>
+            <div className="button-group">
+              <button
+                onClick={() => {
+                  console.log("Setting editable signal to true");
+                  valueSignal.value = "toto";
+                }}
+              >
+                Set signal value to "toto"
+              </button>
+            </div>
+            <div
+              className={`result-display ${result === "Saving via signal..." ? "result-loading" : result.startsWith("✅") ? "result-success" : result.startsWith("❌") ? "result-error" : ""}`}
+            >
+              Signal value: {valueSignal.value}
+              <br />
+              {result || "Use buttons to control edit mode via signal..."}
+            </div>
+          </div>
+        );
+      };
+      render(<App />, document.querySelector("#root"));
+    </script>
+  </body>
+</html>

package/src/components/demos/action/9_link_demo.html ADDED Viewed

@@ -0,0 +1,172 @@
+<!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>Link demo</title>
+  </head>
+  <body>
+    <div id="root" style="position: relative"></div>
+    <script type="module" jsenv-type="module/jsx">
+      import { render } from "preact";
+      import { useState } from "preact/hooks";
+      // eslint-disable-next-line no-unused-vars
+      import { Link, SelectionProvider, defineRoutes } from "@jsenv/navi";
+      defineRoutes({});
+      // eslint-disable-next-line no-unused-vars
+      const App = () => {
+        const [contextSelectedItems, setContextSelectedItems] = useState([]);
+        return (
+          <div style="padding: 20px; font-family: system-ui, sans-serif; max-width: 800px;">
+            <h1>Link Component Demo</h1>
+            <section style="margin-bottom: 40px;">
+              <h2>Basic Links</h2>
+              <div style="display: flex; flex-direction: column; gap: 12px;">
+                <Link href="#default">Default link</Link>
+                <Link href="#active" active>
+                  Active link
+                </Link>
+                <Link href="#visited" visited>
+                  Visited link
+                </Link>
+                <Link href="#readonly" readOnly>
+                  Read-only link
+                </Link>
+                <Link href="#disabled" disabled>
+                  Disabled link
+                </Link>
+                <Link href="#loading" loading readOnly>
+                  Loading link
+                </Link>
+              </div>
+            </section>
+            <section style="margin-bottom: 40px;">
+              <h2>Styled Links</h2>
+              <div style="border: 1px solid #e0e0e0; border-radius: 8px; padding: 16px; background: #f8f9fa;">
+                <div style="display: flex; flex-direction: column; gap: 12px;">
+                  <Link
+                    href="#"
+                    style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 12px 20px; border-radius: 6px; text-decoration: none; font-weight: 500; display: inline-block; transition: transform 0.2s;"
+                  >
+                    Gradient button link
+                  </Link>
+                  <Link
+                    href="#"
+                    style="background: #28a745; color: white; padding: 12px 20px; border-radius: 6px; text-decoration: none; font-weight: 500; display: inline-block; transition: transform 0.2s;"
+                  >
+                    Success button link
+                  </Link>
+                  <Link
+                    href="#"
+                    style="background: #dc3545; color: white; padding: 12px 20px; border-radius: 6px; text-decoration: none; font-weight: 500; display: inline-block; transition: transform 0.2s;"
+                    data-outline-inset
+                    loading
+                  >
+                    Loading button link
+                  </Link>
+                </div>
+              </div>
+            </section>
+            <section style="margin-bottom: 40px;">
+              <h2>Selectable Links</h2>
+              <p style="color: #666; margin-bottom: 16px;">
+                Using Selection context for centralized state management.{" "}
+                <kbd style="background: #f0f0f0; padding: 2px 6px; border-radius: 3px; font-size: 0.9em;">
+                  Cmd/Ctrl + Click
+                </kbd>{" "}
+                to multi-select,{" "}
+                <kbd style="background: #f0f0f0; padding: 2px 6px; border-radius: 3px; font-size: 0.9em;">
+                  Shift + Click
+                </kbd>{" "}
+                for range selection, and{" "}
+                <kbd style="background: #f0f0f0; padding: 2px 6px; border-radius: 3px; font-size: 0.9em;">
+                  Cmd/Ctrl + Delete
+                </kbd>{" "}
+                to show selected items.
+              </p>
+              <SelectionProvider
+                value={contextSelectedItems}
+                onChange={setContextSelectedItems}
+              >
+                <div style="border: 1px solid #e0e0e0; border-radius: 8px; padding: 16px; background: white;">
+                  <div style="display: flex; flex-direction: column; gap: 8px;">
+                    <Link href="#doc_report" name="doc" value="doc-1">
+                      📋 Annual Report 2024
+                    </Link>
+                    <Link href="#doc_budget" name="doc" value="doc-2">
+                      💰 Budget Proposal
+                    </Link>
+                    <Link href="#doc_presentation" name="doc" value="doc-3">
+                      🎯 Marketing Presentation
+                    </Link>
+                    <Link href="#doc_manual" name="doc" value="doc-4">
+                      📖 User Manual v2.0
+                    </Link>
+                  </div>
+                  {contextSelectedItems.length > 0 && (
+                    <div style="margin-top: 16px; padding: 12px; background: #e3f2fd; border-radius: 6px; border-left: 4px solid #1976d2;">
+                      <strong>Selected items:</strong>{" "}
+                      {contextSelectedItems.join(", ")}
+                      <br />
+                      <button
+                        onClick={() => setContextSelectedItems([])}
+                        style="margin-top: 8px; padding: 4px 12px; background: #1976d2; color: white; border: none; border-radius: 4px; font-size: 0.9em; cursor: pointer;"
+                      >
+                        Clear selection
+                      </button>
+                    </div>
+                  )}
+                </div>
+              </SelectionProvider>
+            </section>
+            <section>
+              <h2>Navigation Instructions</h2>
+              <div style="background: #f8f9fa; padding: 16px; border-radius: 6px; color: #666;">
+                <ul style="margin: 0; padding-left: 20px;">
+                  <li>
+                    <strong>Normal click:</strong> Navigate to the link
+                  </li>
+                  <li>
+                    <strong>Cmd/Ctrl + click:</strong> Toggle selection (for
+                    selectable links)
+                  </li>
+                  <li>
+                    <strong>Shift + click:</strong> Range selection (for
+                    selectable links)
+                  </li>
+                  <li>
+                    <strong>Cmd/Ctrl + Delete/Backspace:</strong> Show alert
+                    with selected items (when focused on a selectable link)
+                  </li>
+                </ul>
+              </div>
+            </section>
+          </div>
+        );
+      };
+      render(<App />, document.querySelector("#root"));
+    </script>
+  </body>
+</html>

package/src/components/demos/demo.md ADDED Viewed

File without changes

package/src/components/demos/route/basic/basic.html ADDED Viewed

@@ -0,0 +1,14 @@
+<!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>Routing demo</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./basic_route_demo.jsx"></script>
+  </body>
+</html>