@jsenv/navi 0.15.3 → 0.15.5

package/README.md

@@ -0,0 +1,110 @@
+# @jsenv/navi
+
+> ⚠️ **Work in Progress** - This framework is being actively developed and APIs may change.
+
+> Helps to build modern web application
+
+**@jsenv/navi** is a comprehensive frontend framework designed to simplify navigation, state management, and UI development. Named after Navi, the fairy guide from Zelda, it helps you navigate through the complexities of building modern web applications.
+
+## What it provides
+
+### 🧭 Navigation & Routing
+
+- **Client-side routing** with URL synchronization and code splitting
+- **Link components** that enhance standard anchor tags
+- **Route components** with nested routing support
+- **History management** and navigation state hooks
+- **Keyboard navigation** with keyboard shortcuts
+
+### 🔄 State Management & Actions
+
+- **Signal-based reactive state** with local storage integration
+- **Action system** for async operations with lifecycle management
+- **Resource management** with caching and request deduplication
+- **Form validation** with custom constraints and real-time feedback
+- **State synchronization** utilities and debugging tools
+
+### 🎨 UI Components
+
+#### Form & Input Controls
+
+- **Input, Button, Label** - Enhanced form elements with validation
+- **Radio/RadioList, Checkbox/CheckboxList** - Selection controls with icons and custom appearances
+- **Select, Form** - Complete form building blocks
+- **Field validation** with constraint validation API integration
+- **Editable components** with inline editing capabilities
+
+#### Data Visualization
+
+- **Table** - Complete table system with selection, sorting, and column management
+- **Selection system** - Multi-selection with keyboard shortcuts
+- **Error boundaries** - Graceful error handling components
+
+#### Layout & Structure
+
+- **Box** - Flexible layout container with spacing and alignment
+- **Details** - Collapsible content with navigation state persistence
+- **Dialog, Viewport layouts** - Modal and full-screen layouts
+- **Separator** - Visual content dividers
+- **UI Transitions** - Smooth component transitions
+
+#### Typography & Graphics
+
+- **Text, Title, Paragraph** - Typography components with theming
+- **Code, Caption** - Specialized text displays
+- **Icon, Image, Svg** - Graphics with built-in icon library
+- **Badge, MessageBox** - Status and notification displays
+- **Address** - Semantic contact information component
+
+#### Interactive Features
+
+- **Keyboard shortcuts** - Global and component-level hotkeys
+- **Focus management** - Accessibility-focused navigation
+- **Callouts & popovers** - Contextual overlays and tooltips
+- **Copy to clipboard** - One-click content copying
+
+## Quick Example
+
+```jsx
+import { render } from "preact";
+import { Link, Button, Box } from "@jsenv/navi";
+
+const userSignal = signal();
+const requestUser = async ({ id }) => {
+  const response = await fetch(`/api/users/${id}`);
+  const user = response.json();
+  userSignal.value = user;
+};
+
+const App = () => {
+  const user = userSignal.value;
+
+  return (
+    <Box row spacing="lg">
+      <Link href="/profile">Go to Profile</Link>
+
+      <Button
+        action={async () => {
+          await requestUser();
+        }}
+      >
+        Load User Data
+      </Button>
+
+      {user && <div>Welcome, {user.name}!</div>}
+    </Box>
+  );
+};
+
+render(<App />, document.querySelector("#root"));
+```
+
+## Architecture
+
+The framework is built around three core concepts:
+
+1. **Signals** - Reactive state primitives that automatically update the UI
+2. **Actions** - Async operations with built-in lifecycle management
+3. **Components** - Composable UI building blocks with consistent APIs
+
+This combination provides a powerful yet simple foundation for building interactive web applications that scale from simple pages to complex SPAs.

package/dist/jsenv_navi.js

@@ -11401,10 +11401,9 @@ import.meta.css = /* css */ `
 
         .navi_callout_message {
           position: relative;
-          display: inline-flex;
+          display: block;
           box-sizing: border-box;
           box-decoration-break: clone;
-          min-width: 0;
           align-self: center;
           word-break: break-word;
           overflow-wrap: anywhere;
@@ -13044,11 +13043,13 @@ const TYPE_NUMBER_CONSTRAINT = {
     if (field.type !== "number") {
       return null;
     }
-    if (field.value === "" && !field.required) {
+    if (field.validity.valueMissing) {
+      // let required handle that
       return null;
     }
-    const value = field.valueAsNumber;
-    if (isNaN(value)) {
+    const valueAsNumber = field.valueAsNumber;
+    const valueAsNumberIsNaN = isNaN(valueAsNumber);
+    if (valueAsNumberIsNaN) {
       return generateFieldInvalidMessage(`{field} doit être un nombre.`, {
         field,
       });
@@ -13132,7 +13133,7 @@ const MAX_CONSTRAINT = {
       }
       if (valueAsNumber > maxNumber) {
         return generateFieldInvalidMessage(
-          `{field} être <strong>${maxAttribute}</strong> ou plus.`,
+          `{field} doit être <strong>${maxAttribute}</strong> ou moins.`,
           { field },
         );
       }
@@ -18754,6 +18755,11 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
         border-style: solid;
         border-color: var(--x-border-color);
         border-radius: var(--button-border-radius);
+
+        .navi_icon,
+        img {
+          border-radius: inherit;
+        }
       }
 
       &[data-hover] {
@@ -19695,6 +19701,9 @@ const InputTextualBasic = props => {
         let inputValue;
         if (type === "number") {
           inputValue = e.target.valueAsNumber;
+          if (isNaN(inputValue)) {
+            inputValue = e.target.value;
+          }
         } else if (type === "datetime-local") {
           inputValue = convertToUTCTimezone(e.target.value);
         } else {
@@ -20165,8 +20174,8 @@ const FormBasic = props => {
   const defaultRef = useRef();
   const ref = props.ref || defaultRef;
 
-  // instantiation validation to:
-  // - receive "requestsubmit" custom event ensure submit is prevented
+  // instantiate validation via useConstraints hook:
+  // - receive "actionrequested" custom event ensure submit is prevented
   // (and also execute action without validation if form.submit() is ever called)
   const remainingProps = useConstraints(ref, rest);
   const innerReadOnly = readOnly || loading;
@@ -23130,10 +23139,10 @@ const initMoveStickyFrontierViaPointer = (pointerdownEvent, {
 installImportMetaCss(import.meta);import.meta.css = /* css */`
   .navi_table_ui {
     position: fixed;
-    z-index: ${Z_INDEX_TABLE_UI};
-    overflow: hidden; /* Ensure UI elements cannot impact scrollbars of the document  */
     inset: 0;
+    z-index: ${Z_INDEX_TABLE_UI};
     pointer-events: none; /* UI elements must use pointer-events: auto if they need to be interactive */
+    overflow: hidden; /* Ensure UI elements cannot impact scrollbars of the document  */
     /* background: rgba(0, 255, 0, 0.2); */
   }
 `;
@@ -23774,16 +23783,17 @@ const TableCell = forwardRef((props, ref) => {
 });
 const RowNumberCol = ({
   width = 50,
-  minWidth = 30,
-  maxWidth = 100,
+  // minWidth = 30,
+  // maxWidth = 100,
   immovable = true,
   ...rest
 }) => {
   return jsx(Col, {
     id: "row_number",
-    width: width,
-    minWidth: minWidth,
-    maxWidth: maxWidth,
+    width: width
+    // minWidth={minWidth}
+    // maxWidth={maxWidth}
+    ,
     immovable: immovable,
     ...rest
   });
@@ -23954,8 +23964,8 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
     position: absolute;
     width: 1px;
     height: 1px;
-    padding: 0;
     margin: -1px;
+    padding: 0;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
@@ -23971,8 +23981,8 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
     position: absolute;
     width: 1px;
     height: 1px;
-    padding: 0;
     margin: -1px;
+    padding: 0;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
@@ -24689,12 +24699,12 @@ const Svg = props => {
 
 installImportMetaCss(import.meta);import.meta.css = /* css */`
   .svg_mask_content * {
+    color: black !important;
+    opacity: 1 !important;
     fill: black !important;
-    stroke: black !important;
     fill-opacity: 1 !important;
+    stroke: black !important;
     stroke-opacity: 1 !important;
-    color: black !important;
-    opacity: 1 !important;
   }
 `;
 const SVGMaskOverlay = ({