@jsenv/navi 0.0.1 → 0.1.0

package/src/components/demos/action/{8_editable_text_demo.html → 8_editable_demo.html}

@@ -95,6 +95,7 @@
         min-height: 40px;
         font-size: 16px;
         line-height: 1.4;
+        position: relative;
       }
 
       .result-display {
@@ -156,11 +157,11 @@
       import { render } from "preact";
       import { useState } from "preact/hooks";
       import { signal } from "@preact/signals";
-      import { SINGLE_SPACE_CONSTRAINT } from "@jsenv/validation";
       import {
-        useEditableController,
+        SINGLE_SPACE_CONSTRAINT,
+        useEditionController,
         // eslint-disable-next-line no-unused-vars
-        EditableText,
+        Editable,
         createAction,
       } from "@jsenv/navi";
 
@@ -172,14 +173,14 @@
             <LoadingDemo />
             <ErrorDemo />
             <CustomStyleDemo />
-            <SignalControlDemo />
+            <ActionObjectDemo />
           </div>
         );
       };
 
       // eslint-disable-next-line no-unused-vars
       const BasicDemo = () => {
-        const { editable, startEditing, stopEditing } = useEditableController();
+        const { editing, startEditing, stopEditing } = useEditionController();
         const [value, setValue] = useState("Click edit to change this text");
         const [result, setResult] = useState("");
 
@@ -189,25 +190,24 @@
             <div className="control-group">
               <label>Editable Content:</label>
               <div className="editable-container">
-                <EditableText
-                  editable={editable}
+                <Editable
+                  editing={editing}
                   onEditEnd={() => {
                     stopEditing();
                     setResult(``);
                   }}
-                  name="test"
-                  action={({ test }) => {
-                    setValue(test);
-                    return `Updated to: "${test}"`;
-                  }}
                   value={value}
+                  action={(newText) => {
+                    setValue(newText);
+                    return `Updated to: "${newText}"`;
+                  }}
                   constraints={[SINGLE_SPACE_CONSTRAINT]}
                 />
               </div>
             </div>
             <div className="button-group">
-              <button onClick={() => startEditing()} disabled={editable}>
-                {editable ? "Editing..." : "Start Editing"}
+              <button onClick={() => startEditing()} disabled={editing}>
+                {editing ? "Editing..." : "Start Editing"}
               </button>
             </div>
             <div
@@ -223,7 +223,7 @@
 
       // eslint-disable-next-line no-unused-vars
       const LoadingDemo = () => {
-        const { editable, startEditing, stopEditing } = useEditableController();
+        const { editing, startEditing, stopEditing } = useEditionController();
         const [value, setValue] = useState("This will take 2 seconds to save");
         const [result, setResult] = useState("");
         const [isLoading, setIsLoading] = useState(false);
@@ -234,22 +234,21 @@
             <div className="control-group">
               <label>Editable Content (2s delay):</label>
               <div className="editable-container">
-                <EditableText
-                  editable={editable}
+                <Editable
+                  editing={editing}
                   onEditEnd={() => {
                     stopEditing();
                     setIsLoading(false);
                     setResult();
                   }}
-                  name="test"
-                  action={async ({ test }) => {
+                  value={value}
+                  action={async (newText) => {
                     setIsLoading(true);
                     setResult("Saving...");
                     await new Promise((resolve) => setTimeout(resolve, 2000));
-                    setValue(test);
-                    return `Saved: "${test}"`;
+                    setValue(newText);
+                    return `Saved: "${newText}"`;
                   }}
-                  value={value}
                   constraints={[SINGLE_SPACE_CONSTRAINT]}
                 />
               </div>
@@ -257,11 +256,11 @@
             <div className="button-group">
               <button
                 onClick={() => startEditing()}
-                disabled={editable || isLoading}
+                disabled={editing || isLoading}
               >
                 {isLoading
                   ? "Saving..."
-                  : editable
+                  : editing
                     ? "Editing..."
                     : "Start Editing"}
               </button>
@@ -279,7 +278,7 @@
 
       // eslint-disable-next-line no-unused-vars
       const ErrorDemo = () => {
-        const { editable, startEditing, stopEditing } = useEditableController();
+        const { editing, startEditing, stopEditing } = useEditionController();
         const [value] = useState("This edit will always fail");
         const [result, setResult] = useState("");
 
@@ -289,26 +288,28 @@
             <div className="control-group">
               <label>Editable Content (always fails):</label>
               <div className="editable-container">
-                <EditableText
-                  editable={editable}
+                <Editable
+                  editing={editing}
                   onEditEnd={() => {
                     stopEditing();
                     setResult("");
                   }}
-                  name="test"
-                  action={async ({ test }) => {
+                  value={value}
+                  name="errorText"
+                  action={async (newText) => {
                     setResult("Processing...");
                     await new Promise((resolve) => setTimeout(resolve, 500));
-                    throw new Error(`Cannot save "${test}" - simulated error`);
+                    throw new Error(
+                      `Cannot save "${newText}" - 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 onClick={() => startEditing()} disabled={editing}>
+                {editing ? "Editing..." : "Start Editing (Will Fail)"}
               </button>
             </div>
             <div
@@ -324,7 +325,7 @@
 
       // eslint-disable-next-line no-unused-vars
       const CustomStyleDemo = () => {
-        const { editable, startEditing, stopEditing } = useEditableController();
+        const { editing, startEditing, stopEditing } = useEditionController();
         const [value, setValue] = useState("Bold styled text");
         const [result, setResult] = useState("");
 
@@ -334,29 +335,28 @@
             <div className="control-group">
               <label>Styled Editable Content:</label>
               <div className="editable-container">
-                <EditableText
-                  editable={editable}
+                <Editable
+                  editing={editing}
                   onEditEnd={() => {
                     stopEditing();
                     setResult("");
                   }}
-                  name="test"
-                  action={({ test }) => {
-                    setValue(test);
-                    return `Updated styled text: "${test}"`;
-                  }}
                   value={value}
+                  action={(newText) => {
+                    setValue(newText);
+                    return `Updated styled text: "${newText}"`;
+                  }}
                   constraints={[SINGLE_SPACE_CONSTRAINT]}
                 >
                   <strong style={{ color: "#e74c3c", fontSize: "18px" }}>
                     {value}
                   </strong>
-                </EditableText>
+                </Editable>
               </div>
             </div>
             <div className="button-group">
-              <button onClick={() => startEditing()} disabled={editable}>
-                {editable ? "Editing..." : "Start Editing"}
+              <button onClick={() => startEditing()} disabled={editing}>
+                {editing ? "Editing..." : "Start Editing"}
               </button>
             </div>
             <div
@@ -371,38 +371,37 @@
       };
 
       // Create signal outside component to persist across renders
-      const valueSignal = signal("Signal-controlled editable text");
-      const action = createAction(async ({ test }) => {
+      const editableTextSignal = signal("Click me to edit");
+      const updateTextAction = createAction(async (newText) => {
         await new Promise((resolve) => setTimeout(resolve, 800));
-        return `Signal update: "${test}"`;
+        editableTextSignal.value = newText;
+        return `Signal update: "${newText}"`;
       });
-      const boundAction = action.bindParams({ test: valueSignal });
-
       // eslint-disable-next-line no-unused-vars
-      const SignalControlDemo = () => {
+      const ActionObjectDemo = () => {
         const [result, setResult] = useState("");
-        const { editable, startEditing, stopEditing } = useEditableController();
+        const { editing, startEditing, stopEditing } = useEditionController();
 
         return (
           <div className="demo-card">
-            <h3 className="demo-title">Signal-Controlled Editable Text</h3>
+            <h3 className="demo-title">Action object editable Text</h3>
             <div className="control-group">
-              <label>Signal-Controlled Content:</label>
+              <label>Content:</label>
               <div className="editable-container">
-                <EditableText
-                  valueSignal={valueSignal}
-                  editable={editable}
+                <Editable
+                  editing={editing}
                   onEditEnd={() => {
                     stopEditing();
                     setResult("");
                   }}
+                  value={editableTextSignal.value}
+                  name="signalText"
+                  action={(newText) => {
+                    updateTextAction(newText);
+                  }}
                   onActionStart={() => {
-                    setResult("Saving via signal...");
+                    setResult("Saving...");
                   }}
-                  name="coucou"
-                  action={boundAction}
-                  cancelOnEscape
-                  cancelOnBlurInvalid
                   constraints={[SINGLE_SPACE_CONSTRAINT]}
                 >
                   <span
@@ -410,27 +409,17 @@
                       startEditing();
                     }}
                   >
-                    {valueSignal.value}
+                    {editableTextSignal.value}
                   </span>
-                </EditableText>
+                </Editable>
               </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" : ""}`}
+              className={`result-display ${result === "Saving..." ? "result-loading" : result.startsWith("✅") ? "result-success" : result.startsWith("❌") ? "result-error" : ""}`}
             >
-              Signal value: {valueSignal.value}
+              Current value: {editableTextSignal.value}
               <br />
-              {result || "Use buttons to control edit mode via signal..."}
+              {result || "Use buttons to control edit mode..."}
             </div>
           </div>
         );

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

@@ -11,16 +11,21 @@
 
     <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";
+      import { useState, useRef } from "preact/hooks";
+
+      import {
+        // eslint-disable-next-line no-unused-vars
+        Link,
+        useSelectionController,
+        // eslint-disable-next-line no-unused-vars
+        SelectionContext,
+        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>
@@ -82,63 +87,7 @@
               </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>
+            <SelectableLinkDemo />
 
             <section>
               <h2>Navigation Instructions</h2>
@@ -166,6 +115,79 @@
         );
       };
 
+      // eslint-disable-next-line no-unused-vars
+      const SelectableLinkDemo = () => {
+        const [selection, setSelection] = useState([]);
+        const linkContainerRef = useRef(null);
+        const selectionController = useSelectionController({
+          elementRef: linkContainerRef,
+          layout: "vertical",
+          value: selection,
+          onChange: setSelection,
+        });
+
+        return (
+          <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>
+
+            <SelectionContext.Provider
+              value={{ selection, selectionController }}
+            >
+              <div style="border: 1px solid #e0e0e0; border-radius: 8px; padding: 16px; background: white;">
+                <div
+                  style="display: flex; flex-direction: column; gap: 8px;"
+                  ref={linkContainerRef}
+                >
+                  <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>
+
+                {selection.length > 0 && (
+                  <div style="margin-top: 16px; padding: 12px; background: #e3f2fd; border-radius: 6px; border-left: 4px solid #1976d2;">
+                    <strong>Selected items:</strong> {selection.join(", ")}
+                    <br />
+                    <button
+                      onClick={() => setSelection([])}
+                      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>
+            </SelectionContext.Provider>
+          </section>
+        );
+      };
+
       render(<App />, document.querySelector("#root"));
     </script>
   </body>