@jsenv/navi 0.8.0 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/navi",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Library of components including navigation to create frontend applications",
   "repository": {
     "type": "git",

package/src/components/field/button.jsx

@@ -14,8 +14,7 @@ import { FormActionContext } from "../action_execution/form_context.js";
 import { renderActionableComponent } from "../action_execution/render_actionable_component.jsx";
 import { useAction } from "../action_execution/use_action.js";
 import { useExecuteAction } from "../action_execution/use_execute_action.js";
-import { useConsumAlignProps } from "../layout/flex.jsx";
-import { consumeSpacingProps } from "../layout/spacing.jsx";
+import { useLayoutStyle } from "../layout/use_layout_style.js";
 import { LoaderBackground } from "../loader/loader_background.jsx";
 import { withPropsClassName } from "../props_composition/with_props_class_name.js";
 import { withPropsStyle } from "../props_composition/with_props_style.js";
@@ -89,6 +88,7 @@ import.meta.css = /* css */ `
     .navi_button_content {
       position: relative;
       display: inline-flex;
+      width: 100%;
       padding-top: var(--padding-y);
       padding-right: var(--padding-x);
       padding-bottom: var(--padding-y);
@@ -212,8 +212,6 @@ const ButtonBasic = forwardRef((props, ref) => {
 
     // visual
     appearance = "navi",
-    alignX,
-    alignY,
     discrete,
     className,
     style,
@@ -242,13 +240,8 @@ const ButtonBasic = forwardRef((props, ref) => {
     appearance === "navi" ? "navi_button" : undefined,
     className,
   );
-  const innerStyle = withPropsStyle(
-    {
-      ...consumeSpacingProps(rest),
-      ...useConsumAlignProps({ alignX, alignY }),
-    },
-    style,
-  );
+  const { all } = useLayoutStyle(rest);
+  const innerStyle = withPropsStyle(all, style);
 
   return (
     <button

package/src/components/field/input_checkbox.jsx

@@ -13,7 +13,7 @@ import { useConstraints } from "../../validation/hooks/use_constraints.js";
 import { renderActionableComponent } from "../action_execution/render_actionable_component.jsx";
 import { useActionBoundToOneParam } from "../action_execution/use_action.js";
 import { useExecuteAction } from "../action_execution/use_execute_action.js";
-import { consumeSpacingProps } from "../layout/spacing.jsx";
+import { useLayoutStyle } from "../layout/use_layout_style.js";
 import {
   LoadableInlineElement,
   LoaderBackground,
@@ -333,10 +333,11 @@ const NaviCheckbox = ({
     return initCustomField(ref.current, inputRef.current);
   }, []);
 
+  const { all } = useLayoutStyle(rest);
   const innerStyle = withPropsStyle(
     {
+      ...all,
       ...(accentColor ? { "--accent-color": accentColor } : {}),
-      ...consumeSpacingProps(rest),
     },
     style,
   );

package/src/components/field/input_radio.jsx

@@ -8,7 +8,7 @@ import {
 
 import { useConstraints } from "../../validation/hooks/use_constraints.js";
 import { renderActionableComponent } from "../action_execution/render_actionable_component.jsx";
-import { consumeSpacingProps } from "../layout/spacing.jsx";
+import { useLayoutStyle } from "../layout/use_layout_style.js";
 import {
   LoadableInlineElement,
   LoaderBackground,
@@ -372,10 +372,11 @@ const NaviRadio = ({
     return initCustomField(ref.current, inputRef.current);
   }, []);
 
+  const { all } = useLayoutStyle(rest);
   const innerStyle = withPropsStyle(
     {
+      ...all,
       ...(accentColor ? { "--accent-color": accentColor } : {}),
-      ...consumeSpacingProps(rest),
     },
     style,
   );

package/src/components/field/input_textual.jsx

@@ -31,7 +31,7 @@ import { useConstraints } from "../../validation/hooks/use_constraints.js";
 import { renderActionableComponent } from "../action_execution/render_actionable_component.jsx";
 import { useActionBoundToOneParam } from "../action_execution/use_action.js";
 import { useExecuteAction } from "../action_execution/use_execute_action.js";
-import { consumeSpacingProps } from "../layout/spacing.jsx";
+import { useLayoutStyle } from "../layout/use_layout_style.js";
 import { LoadableInlineElement } from "../loader/loader_background.jsx";
 import { withPropsClassName } from "../props_composition/with_props_class_name.js";
 import { withPropsStyle } from "../props_composition/with_props_style.js";
@@ -88,6 +88,8 @@ import.meta.css = /* css */ `
       --color: currentColor;
       --color-readonly: color-mix(in srgb, currentColor 60%, transparent);
       --color-disabled: var(--color-readonly);
+
+      width: 100%;
       color: var(--color);
 
       background-color: var(--background-color);
@@ -170,8 +172,6 @@ const InputTextualBasic = forwardRef((props, ref) => {
     // visual
     appearance = "navi",
     accentColor,
-    width,
-    height,
     className,
     style,
 
@@ -199,14 +199,8 @@ const InputTextualBasic = forwardRef((props, ref) => {
     appearance === "navi" ? "navi_input" : undefined,
     className,
   );
-  const innerStyle = withPropsStyle(
-    {
-      width,
-      height,
-      ...consumeSpacingProps(rest),
-    },
-    style,
-  );
+  const { margin, padding, alignment, expansion } = useLayoutStyle(rest);
+  const innerStyle = withPropsStyle(padding, style);
   const inputTextual = (
     <input
       {...rest}
@@ -254,11 +248,12 @@ const InputTextualBasic = forwardRef((props, ref) => {
     <LoadableInlineElement
       loading={innerLoading}
       style={{
+        ...margin,
+        ...alignment,
+        ...expansion,
         "--accent-color": accentColor || "light-dark(#355fcc, #4476ff)",
       }}
       color="var(--accent-color)"
-      width={width}
-      height={height}
       inset={-1}
     >
       {inputTextual}

package/src/components/layout/demos/demo_use_layout_style.html

@@ -0,0 +1,226 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>useLayoutStyle Demo</title>
+    <style>
+      .demo-container {
+        margin-bottom: 30px;
+        padding: 20px;
+        background: #f8f9fa;
+        border-radius: 8px;
+      }
+
+      .demo-box {
+        min-width: 60px;
+        padding: 10px;
+        text-align: center;
+        background: #e3f2fd;
+        border: 1px solid #90caf9;
+        border-radius: 4px;
+      }
+
+      .visual-container {
+        margin: 10px 0;
+        padding: 10px;
+        background: #fff3e0;
+        border: 2px dashed #ff9800;
+      }
+
+      h3 {
+        margin-top: 0;
+      }
+
+      /* Helper to visualize the container boundaries */
+      .bounded {
+        width: 400px;
+        height: 100px;
+        padding: 10px;
+        background: #f0f4ff;
+        border: 1px solid #6366f1;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" jsenv-type="module/jsx">
+      /* eslint-disable no-unused-vars */
+      import { render } from "preact";
+      import { FlexRow, FlexColumn, Input, Button } from "@jsenv/navi";
+
+      const DemoBox = ({ children, ...props }) => (
+        <div className="demo-box" {...props}>
+          {children}
+        </div>
+      );
+
+      const Demo = () => {
+        return (
+          <div style={{ padding: "20px", fontFamily: "system-ui, sans-serif" }}>
+            <h1>useLayoutStyle Demo - Input Elements</h1>
+            <p>
+              Testing spacing (margin/padding), alignment, and expand behavior
+              specifically with Input components in various layout contexts.
+            </p>
+
+            <div className="demo-container">
+              <h3>1. Input with Expand in FlexRow</h3>
+              <div className="visual-container">
+                <FlexRow gap="10px">
+                  <Button>Start</Button>
+                  <Input placeholder="Expanding input" expand />
+                  <Button>End</Button>
+                </FlexRow>
+              </div>
+            </div>
+
+            <div className="demo-container">
+              <h3>2. Input with Expand in FlexColumn</h3>
+              <div className="visual-container">
+                <FlexColumn gap="10px" style={{ height: "200px" }}>
+                  <Input placeholder="Fixed input" />
+                  <Input placeholder="Expanding input (height)" expand />
+                  <Input placeholder="Fixed input" />
+                </FlexColumn>
+              </div>
+            </div>
+
+            <div className="demo-container">
+              <h3>3. Input with Expand outside Flex context</h3>
+              <div className="visual-container">
+                <div
+                  style={{
+                    width: "300px",
+                    border: "1px solid #ccc",
+                    padding: "10px",
+                  }}
+                >
+                  <Input placeholder="Normal input" />
+                  <br />
+                  <br />
+                  <Input
+                    placeholder="Expanding input (should take full width)"
+                    expand
+                  />
+                </div>
+              </div>
+            </div>
+
+            <div className="demo-container">
+              <h3>4. Multiple Expand Elements</h3>
+              <div className="visual-container">
+                <FlexRow gap="10px">
+                  <Input placeholder="Expand 1" expand />
+                  <Input placeholder="Expand 2" expand />
+                  <Input placeholder="Expand 3" expand />
+                </FlexRow>
+              </div>
+            </div>
+
+            <div className="demo-container">
+              <h3>5. Basic Spacing - Input with margins</h3>
+              <div className="visual-container">
+                <Input placeholder="Default input" margin="10px" />
+                <Input placeholder="MarginX only" marginX="20px" />
+                <Input placeholder="MarginY only" marginY="15px" />
+              </div>
+            </div>
+
+            <div className="demo-container">
+              <h3>6. Input with Padding</h3>
+              <div className="visual-container">
+                <Input placeholder="Default padding" />
+                <Input placeholder="Extra padding" padding="20px" />
+                <Input placeholder="PaddingX only" paddingX="30px" />
+              </div>
+            </div>
+
+            <div className="demo-container">
+              <h3>7. Directional Margins and Padding</h3>
+              <div className="visual-container">
+                <FlexColumn gap="5px">
+                  <Input placeholder="marginLeft: 20px" marginLeft="20px" />
+                  <Input placeholder="marginRight: 30px" marginRight="30px" />
+                  <Input
+                    placeholder="marginTop: 15px, marginBottom: 25px"
+                    marginTop="15px"
+                    marginBottom="25px"
+                  />
+                  <Input placeholder="paddingLeft: 25px" paddingLeft="25px" />
+                </FlexColumn>
+              </div>
+            </div>
+
+            <div className="demo-container">
+              <h3>8. AlignX Test: FlexRow + alignX="end"</h3>
+              <div className="visual-container">
+                <div className="bounded">
+                  <FlexRow gap="10px" style={{ height: "100%" }}>
+                    <Input placeholder="Default" />
+                    <Input placeholder="Pushed to end" alignX="end" />
+                  </FlexRow>
+                </div>
+              </div>
+            </div>
+
+            <div className="demo-container">
+              <h3>9. Combined Spacing and Expand</h3>
+              <div className="visual-container">
+                <FlexRow gap="10px">
+                  <Button>Label</Button>
+                  <Input
+                    placeholder="Margin + Expand"
+                    expand
+                    marginY="5px"
+                    paddingX="15px"
+                  />
+                  <Button>Action</Button>
+                </FlexRow>
+              </div>
+            </div>
+
+            <div className="demo-container">
+              <h3>10. Complex Layout: Form with Expand</h3>
+              <div className="visual-container">
+                <FlexColumn gap="15px">
+                  <FlexRow gap="10px">
+                    <label style={{ minWidth: "80px", alignSelf: "center" }}>
+                      Name:
+                    </label>
+                    <Input placeholder="Enter your name" expand />
+                  </FlexRow>
+
+                  <FlexRow gap="10px">
+                    <label style={{ minWidth: "80px", alignSelf: "center" }}>
+                      Email:
+                    </label>
+                    <Input placeholder="Enter your email" expand />
+                    <Button>Verify</Button>
+                  </FlexRow>
+
+                  <FlexRow gap="10px">
+                    <label style={{ minWidth: "80px", alignSelf: "center" }}>
+                      Message:
+                    </label>
+                    <Input
+                      placeholder="Enter your message"
+                      expand
+                      paddingY="10px"
+                    />
+                  </FlexRow>
+
+                  <FlexRow gap="10px" alignX="end">
+                    <Button>Cancel</Button>
+                    <Button>Submit</Button>
+                  </FlexRow>
+                </FlexColumn>
+              </div>
+            </div>
+          </div>
+        );
+      };
+
+      render(<Demo />, document.getElementById("app"));
+    </script>
+  </body>
+</html>

package/src/components/layout/demos/demo_use_layout_style_buttons.html

@@ -0,0 +1,260 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>useLayoutStyle Demo - Buttons</title>
+    <style>
+      .demo-container {
+        margin-bottom: 30px;
+        padding: 20px;
+        background: #f8f9fa;
+        border-radius: 8px;
+      }
+
+      .demo-box {
+        min-width: 60px;
+        padding: 10px;
+        text-align: center;
+        background: #e3f2fd;
+        border: 1px solid #90caf9;
+        border-radius: 4px;
+      }
+
+      .visual-container {
+        margin: 10px 0;
+        padding: 10px;
+        background: #fff3e0;
+        border: 2px dashed #ff9800;
+      }
+
+      h3 {
+        margin-top: 0;
+      }
+
+      /* Helper to visualize the container boundaries */
+      .bounded {
+        width: 400px;
+        height: 100px;
+        padding: 10px;
+        background: #f0f4ff;
+        border: 1px solid #6366f1;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" jsenv-type="module/jsx">
+      /* eslint-disable no-unused-vars */
+      import { render } from "preact";
+      import { FlexRow, FlexColumn, Input, Button } from "@jsenv/navi";
+
+      const DemoBox = ({ children, ...props }) => (
+        <div className="demo-box" {...props}>
+          {children}
+        </div>
+      );
+
+      const Demo = () => {
+        return (
+          <div style={{ padding: "20px", fontFamily: "system-ui, sans-serif" }}>
+            <h1>useLayoutStyle Demo - Button Elements</h1>
+            <p>
+              Testing spacing (margin/padding), alignment, and expand behavior
+              specifically with Button components in various layout contexts.
+            </p>
+
+            <div className="demo-container">
+              <h3>1. Button with Expand in FlexRow</h3>
+              <div className="visual-container">
+                <FlexRow gap="10px">
+                  <Button>Fixed</Button>
+                  <Button expand>Expanding Button</Button>
+                  <Button>Fixed</Button>
+                </FlexRow>
+              </div>
+            </div>
+
+            <div className="demo-container">
+              <h3>2. Button with Expand in FlexColumn</h3>
+              <div className="visual-container">
+                <FlexColumn gap="10px" style={{ height: "200px" }}>
+                  <Button>Fixed Button</Button>
+                  <Button expand>Expanding Button (height)</Button>
+                  <Button>Fixed Button</Button>
+                </FlexColumn>
+              </div>
+            </div>
+
+            <div className="demo-container">
+              <h3>3. Button with Expand outside Flex context</h3>
+              <div className="visual-container">
+                <div
+                  style={{
+                    width: "300px",
+                    border: "1px solid #ccc",
+                    padding: "10px",
+                  }}
+                >
+                  <Button>Normal Button</Button>
+                  <br />
+                  <br />
+                  <Button expand>
+                    Expanding Button (should take full width)
+                  </Button>
+                </div>
+              </div>
+            </div>
+
+            <div className="demo-container">
+              <h3>4. Multiple Expand Buttons</h3>
+              <div className="visual-container">
+                <FlexRow gap="10px">
+                  <Button expand>Expand 1</Button>
+                  <Button expand>Expand 2</Button>
+                  <Button expand>Expand 3</Button>
+                </FlexRow>
+              </div>
+            </div>
+
+            <div className="demo-container">
+              <h3>5. Button Spacing - Margins</h3>
+              <div className="visual-container">
+                <FlexColumn gap="5px">
+                  <Button margin="10px">Margin All Sides</Button>
+                  <Button marginX="20px">MarginX Only</Button>
+                  <Button marginY="15px">MarginY Only</Button>
+                  <Button marginLeft="30px">MarginLeft Only</Button>
+                  <Button marginRight="25px">MarginRight Only</Button>
+                </FlexColumn>
+              </div>
+            </div>
+
+            <div className="demo-container">
+              <h3>6. Button Spacing - Padding</h3>
+              <div className="visual-container">
+                <FlexColumn gap="5px">
+                  <Button>Default Padding</Button>
+                  <Button padding="20px">Extra Padding</Button>
+                  <Button paddingX="30px">PaddingX Only</Button>
+                  <Button paddingY="15px">PaddingY Only</Button>
+                  <Button paddingLeft="25px">PaddingLeft Only</Button>
+                </FlexColumn>
+              </div>
+            </div>
+
+            <div className="demo-container">
+              <h3>7. Button AlignX Test: FlexRow + alignX="end"</h3>
+              <div className="visual-container">
+                <div className="bounded">
+                  <FlexRow gap="10px" style={{ height: "100%" }}>
+                    <Button>Default</Button>
+                    <Button alignX="end">Pushed to End</Button>
+                  </FlexRow>
+                </div>
+              </div>
+            </div>
+
+            <div className="demo-container">
+              <h3>8. Combined Spacing and Expand</h3>
+              <div className="visual-container">
+                <FlexRow gap="10px">
+                  <Button>Label</Button>
+                  <Button expand marginY="5px" paddingX="20px">
+                    Margin + Padding + Expand
+                  </Button>
+                  <Button>End</Button>
+                </FlexRow>
+              </div>
+            </div>
+
+            <div className="demo-container">
+              <h3>9. Button Toolbar Layout</h3>
+              <div className="visual-container">
+                <FlexRow gap="10px">
+                  <Button>New</Button>
+                  <Button>Open</Button>
+                  <Button>Save</Button>
+                  <Button expand>Status Message Area</Button>
+                  <Button alignX="end">Settings</Button>
+                </FlexRow>
+              </div>
+            </div>
+
+            <div className="demo-container">
+              <h3>10. Button Group with Various Alignments</h3>
+              <div className="visual-container">
+                <FlexColumn gap="10px">
+                  <FlexRow gap="10px">
+                    <Button>Start</Button>
+                    <Button alignX="center">Center</Button>
+                    <Button alignX="end">End</Button>
+                  </FlexRow>
+
+                  <FlexRow gap="10px">
+                    <Button expand>Primary Action</Button>
+                    <Button>Cancel</Button>
+                  </FlexRow>
+
+                  <FlexRow gap="10px" alignX="end">
+                    <Button>Back</Button>
+                    <Button>Next</Button>
+                  </FlexRow>
+                </FlexColumn>
+              </div>
+            </div>
+
+            <div className="demo-container">
+              <h3>11. Card Layout with Button Actions</h3>
+              <div className="visual-container">
+                <div
+                  style={{
+                    border: "1px solid #ddd",
+                    borderRadius: "8px",
+                    padding: "20px",
+                    width: "350px",
+                  }}
+                >
+                  <h4 style={{ margin: "0 0 10px 0" }}>Card Title</h4>
+                  <p style={{ margin: "0 0 20px 0", color: "#666" }}>
+                    This is some card content that describes the item or action.
+                  </p>
+
+                  <FlexRow gap="10px">
+                    <Button expand>Primary Action</Button>
+                    <Button alignX="end">More</Button>
+                  </FlexRow>
+                </div>
+              </div>
+            </div>
+
+            <div className="demo-container">
+              <h3>12. Navigation Button Layout</h3>
+              <div className="visual-container">
+                <FlexColumn gap="15px">
+                  <FlexRow gap="10px">
+                    <Button>Home</Button>
+                    <Button expand>Current Page Title</Button>
+                    <Button alignX="end">Profile</Button>
+                  </FlexRow>
+
+                  <FlexRow gap="10px" alignX="center">
+                    <Button marginX="5px">Tab 1</Button>
+                    <Button marginX="5px">Tab 2</Button>
+                    <Button marginX="5px">Tab 3</Button>
+                  </FlexRow>
+
+                  <FlexRow gap="10px" alignX="space-between">
+                    <Button>Previous</Button>
+                    <Button>Next</Button>
+                  </FlexRow>
+                </FlexColumn>
+              </div>
+            </div>
+          </div>
+        );
+      };
+
+      render(<Demo />, document.getElementById("app"));
+    </script>
+  </body>
+</html>