@jsenv/navi 0.8.0 → 0.9.1

package/src/components/layout/spacing.jsx

@@ -1,97 +1,19 @@
 import { withPropsStyle } from "../props_composition/with_props_style.js";
-
-export const consumeSpacingProps = (props) => {
-  const style = {};
-
-  outer_spacing: {
-    const margin = props.margin;
-    const marginX = props.marginX;
-    const marginY = props.marginY;
-    const marginLeft = props.marginLeft;
-    const marginRight = props.marginRight;
-    const marginTop = props.marginTop;
-    const marginBottom = props.marginBottom;
-    delete props.margin;
-    delete props.marginX;
-    delete props.marginY;
-    delete props.marginLeft;
-    delete props.marginRight;
-    delete props.marginTop;
-    delete props.marginBottom;
-
-    if (margin !== undefined) {
-      style.margin = margin;
-    }
-    if (marginLeft !== undefined) {
-      style.marginLeft = marginLeft;
-    } else if (marginX !== undefined) {
-      style.marginLeft = marginX;
-    }
-    if (marginRight !== undefined) {
-      style.marginRight = marginRight;
-    } else if (marginX !== undefined) {
-      style.marginRight = marginX;
-    }
-    if (marginTop !== undefined) {
-      style.marginTop = marginTop;
-    } else if (marginY !== undefined) {
-      style.marginTop = marginY;
-    }
-    if (marginBottom !== undefined) {
-      style.marginBottom = marginBottom;
-    } else if (marginY !== undefined) {
-      style.marginBottom = marginY;
-    }
-  }
-
-  inner_spacing: {
-    const padding = props.padding;
-    const paddingX = props.paddingX;
-    const paddingY = props.paddingY;
-    const paddingLeft = props.paddingLeft;
-    const paddingRight = props.paddingRight;
-    const paddingTop = props.paddingTop;
-    const paddingBottom = props.paddingBottom;
-    delete props.padding;
-    delete props.paddingX;
-    delete props.paddingY;
-    delete props.paddingLeft;
-    delete props.paddingRight;
-    delete props.paddingTop;
-    delete props.paddingBottom;
-
-    if (padding !== undefined) {
-      style.padding = padding;
-    }
-    if (paddingLeft !== undefined) {
-      style.paddingLeft = paddingLeft;
-    } else if (paddingX !== undefined) {
-      style.paddingLeft = paddingX;
-    }
-    if (paddingRight !== undefined) {
-      style.paddingRight = paddingRight;
-    } else if (paddingX !== undefined) {
-      style.paddingRight = paddingX;
-    }
-    if (paddingTop !== undefined) {
-      style.paddingTop = paddingTop;
-    } else if (paddingY !== undefined) {
-      style.paddingTop = paddingY;
-    }
-    if (paddingBottom !== undefined) {
-      style.paddingBottom = paddingBottom;
-    } else if (paddingY !== undefined) {
-      style.paddingBottom = paddingY;
-    }
-  }
-
-  return style;
-};
+import { useLayoutStyle } from "./use_layout_style.js";
 
 export const Spacing = ({ style, children, ...rest }) => {
-  const styleForSpacing = consumeSpacingProps(rest);
+  const { padding, margin } = useLayoutStyle(rest);
   return (
-    <div {...rest} style={withPropsStyle(styleForSpacing, style)}>
+    <div
+      {...rest}
+      style={withPropsStyle(
+        {
+          ...margin,
+          ...padding,
+        },
+        style,
+      )}
+    >
       {children}
     </div>
   );

package/src/components/layout/use_layout_style.js

@@ -0,0 +1,249 @@
+/**
+ * Layout Style Hook
+ *
+ * This hook processes layout-related props and converts them into CSS styles.
+ * It handles spacing (margin/padding), alignment (alignX/alignY), and expansion behavior.
+ * The hook is context-aware and adapts behavior based on flex direction.
+ *
+ * Key features:
+ * - Spacing: margin/padding with X/Y shortcuts and directional variants
+ * - Alignment: alignX/alignY using align-self and auto margins
+ * - Expansion: expand prop for taking remaining space (flexGrow or width: 100%)
+ * - Context-aware: behavior changes based on FlexDirectionContext (row/column/none)
+ */
+
+import { useContext } from "preact/hooks";
+
+import { FlexDirectionContext } from "./layout_context.jsx";
+
+/**
+ * Converts layout props into CSS styles
+ * @param {Object} props - Component props containing layout properties
+ * @param {string|number} [props.margin] - All-sides margin
+ * @param {string|number} [props.marginX] - Horizontal margin (left + right)
+ * @param {string|number} [props.marginY] - Vertical margin (top + bottom)
+ * @param {string|number} [props.marginLeft] - Left margin
+ * @param {string|number} [props.marginRight] - Right margin
+ * @param {string|number} [props.marginTop] - Top margin
+ * @param {string|number} [props.marginBottom] - Bottom margin
+ * @param {string|number} [props.padding] - All-sides padding
+ * @param {string|number} [props.paddingX] - Horizontal padding (left + right)
+ * @param {string|number} [props.paddingY] - Vertical padding (top + bottom)
+ * @param {string|number} [props.paddingLeft] - Left padding
+ * @param {string|number} [props.paddingRight] - Right padding
+ * @param {string|number} [props.paddingTop] - Top padding
+ * @param {string|number} [props.paddingBottom] - Bottom padding
+ * @param {"start"|"center"|"end"|"stretch"} [props.alignX] - Horizontal alignment
+ * @param {"start"|"center"|"end"|"stretch"} [props.alignY] - Vertical alignment
+ * @param {boolean} [props.expandX] - Whether element should expand horizontally to fill available space
+ * @param {boolean} [props.expandY] - Whether element should expand vertically to fill available space
+ * @returns {Object} Object with categorized styles: { margin, padding, alignment, expansion, all }
+ */
+export const useLayoutStyle = (props) => {
+  const flexDirection = useContext(FlexDirectionContext);
+
+  const marginStyle = {};
+  const paddingStyle = {};
+  const alignmentStyle = {};
+  const expansionStyle = {};
+
+  spacing: {
+    outer_spacing: {
+      const margin = props.margin;
+      const marginX = props.marginX;
+      const marginY = props.marginY;
+      const marginLeft = props.marginLeft;
+      const marginRight = props.marginRight;
+      const marginTop = props.marginTop;
+      const marginBottom = props.marginBottom;
+      delete props.margin;
+      delete props.marginX;
+      delete props.marginY;
+      delete props.marginLeft;
+      delete props.marginRight;
+      delete props.marginTop;
+      delete props.marginBottom;
+
+      if (margin !== undefined) {
+        marginStyle.margin = margin;
+      }
+      if (marginLeft !== undefined) {
+        marginStyle.marginLeft = marginLeft;
+      } else if (marginX !== undefined) {
+        marginStyle.marginLeft = marginX;
+      }
+      if (marginRight !== undefined) {
+        marginStyle.marginRight = marginRight;
+      } else if (marginX !== undefined) {
+        marginStyle.marginRight = marginX;
+      }
+      if (marginTop !== undefined) {
+        marginStyle.marginTop = marginTop;
+      } else if (marginY !== undefined) {
+        marginStyle.marginTop = marginY;
+      }
+      if (marginBottom !== undefined) {
+        marginStyle.marginBottom = marginBottom;
+      } else if (marginY !== undefined) {
+        marginStyle.marginBottom = marginY;
+      }
+    }
+    inner_spacing: {
+      const padding = props.padding;
+      const paddingX = props.paddingX;
+      const paddingY = props.paddingY;
+      const paddingLeft = props.paddingLeft;
+      const paddingRight = props.paddingRight;
+      const paddingTop = props.paddingTop;
+      const paddingBottom = props.paddingBottom;
+      delete props.padding;
+      delete props.paddingX;
+      delete props.paddingY;
+      delete props.paddingLeft;
+      delete props.paddingRight;
+      delete props.paddingTop;
+      delete props.paddingBottom;
+
+      if (padding !== undefined) {
+        paddingStyle.padding = padding;
+      }
+      if (paddingLeft !== undefined) {
+        paddingStyle.paddingLeft = paddingLeft;
+      } else if (paddingX !== undefined) {
+        paddingStyle.paddingLeft = paddingX;
+      }
+      if (paddingRight !== undefined) {
+        paddingStyle.paddingRight = paddingRight;
+      } else if (paddingX !== undefined) {
+        paddingStyle.paddingRight = paddingX;
+      }
+      if (paddingTop !== undefined) {
+        paddingStyle.paddingTop = paddingTop;
+      } else if (paddingY !== undefined) {
+        paddingStyle.paddingTop = paddingY;
+      }
+      if (paddingBottom !== undefined) {
+        paddingStyle.paddingBottom = paddingBottom;
+      } else if (paddingY !== undefined) {
+        paddingStyle.paddingBottom = paddingY;
+      }
+    }
+  }
+
+  align: {
+    const alignX = props.alignX;
+    const alignY = props.alignY;
+    delete props.alignX;
+    delete props.alignY;
+
+    // flex
+    if (flexDirection === "row") {
+      // In row direction: alignX controls justify-content, alignY controls align-self
+      if (alignY !== undefined && alignY !== "start") {
+        alignmentStyle.alignSelf = alignY;
+      }
+      // For row, alignX uses auto margins for positioning
+      // NOTE: Auto margins only work effectively for positioning individual items.
+      // When multiple adjacent items have the same auto margin alignment (e.g., alignX="end"),
+      // only the first item will be positioned as expected because subsequent items
+      // will be positioned relative to the previous item's margins, not the container edge.
+      if (alignX !== undefined) {
+        if (alignX === "start") {
+          alignmentStyle.marginRight = "auto";
+        } else if (alignX === "end") {
+          alignmentStyle.marginLeft = "auto";
+        } else if (alignX === "center") {
+          alignmentStyle.marginLeft = "auto";
+          alignmentStyle.marginRight = "auto";
+        }
+      }
+    } else if (flexDirection === "column") {
+      // In column direction: alignX controls align-self, alignY uses auto margins
+      if (alignX !== undefined && alignX !== "start") {
+        alignmentStyle.alignSelf = alignX;
+      }
+      // For column, alignY uses auto margins for positioning
+      // NOTE: Same auto margin limitation applies - multiple adjacent items with
+      // the same alignY won't all position relative to container edges.
+      if (alignY !== undefined) {
+        if (alignY === "start") {
+          alignmentStyle.marginBottom = "auto";
+        } else if (alignY === "end") {
+          alignmentStyle.marginTop = "auto";
+        } else if (alignY === "center") {
+          alignmentStyle.marginTop = "auto";
+          alignmentStyle.marginBottom = "auto";
+        }
+      }
+    }
+    // non flex
+    else {
+      if (alignX === "start") {
+        alignmentStyle.marginRight = "auto";
+      } else if (alignX === "center") {
+        alignmentStyle.marginLeft = "auto";
+        alignmentStyle.marginRight = "auto";
+      } else if (alignX === "end") {
+        alignmentStyle.marginLeft = "auto";
+      }
+
+      if (alignY === "start") {
+        alignmentStyle.marginBottom = "auto";
+      } else if (alignY === "center") {
+        alignmentStyle.marginTop = "auto";
+        alignmentStyle.marginBottom = "auto";
+      } else if (alignY === "end") {
+        alignmentStyle.marginTop = "auto";
+      }
+    }
+  }
+
+  expand: {
+    const expand = props.expand;
+    delete props.expand;
+
+    expandX: {
+      const expandX = props.expandX || expand;
+      delete props.expandX;
+      if (expandX) {
+        if (flexDirection === "row") {
+          expansionStyle.flexGrow = 1; // Grow horizontally in row
+        } else if (flexDirection === "column") {
+          expansionStyle.width = "100%"; // Take full width in column
+        } else {
+          expansionStyle.width = "100%"; // Take full width outside flex
+        }
+      }
+    }
+
+    expandY: {
+      const expandY = props.expandY || expand;
+      delete props.expandY;
+      if (expandY) {
+        if (flexDirection === "row") {
+          expansionStyle.height = "100%"; // Take full height in row
+        } else if (flexDirection === "column") {
+          expansionStyle.flexGrow = 1; // Grow vertically in column
+        } else {
+          expansionStyle.height = "100%"; // Take full height outside flex
+        }
+      }
+    }
+  }
+
+  // Merge all styles for convenience
+  const allStyles = {
+    ...marginStyle,
+    ...paddingStyle,
+    ...alignmentStyle,
+    ...expansionStyle,
+  };
+
+  return {
+    margin: marginStyle,
+    padding: paddingStyle,
+    alignment: alignmentStyle,
+    expansion: expansionStyle,
+    all: allStyles,
+  };
+};

package/src/components/link/link.jsx

@@ -12,7 +12,10 @@ import { useConstraints } from "../../validation/hooks/use_constraints.js";
 import { renderActionableComponent } from "../action_execution/render_actionable_component.jsx";
 import { useRequestedActionStatus } from "../field/use_action_events.js";
 import { useKeyboardShortcuts } from "../keyboard_shortcuts/keyboard_shortcuts.js";
+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";
 import {
   SelectionContext,
   useSelectableElement,
@@ -90,7 +93,6 @@ const LinkBasic = forwardRef((props, ref) => {
 });
 const LinkPlain = forwardRef((props, ref) => {
   const {
-    className = "",
     loading,
     readOnly,
     disabled,
@@ -103,6 +105,10 @@ const LinkPlain = forwardRef((props, ref) => {
     onClick,
     onKeyDown,
     href,
+
+    // visual
+    className,
+    style,
     ...rest
   } = props;
   const innerRef = useRef();
@@ -114,6 +120,10 @@ const LinkPlain = forwardRef((props, ref) => {
   const shouldDimColor = readOnly || disabled;
   useDimColorWhen(innerRef, shouldDimColor);
 
+  const innerClassName = withPropsClassName("navi_link", className);
+  const { all } = useLayoutStyle(rest);
+  const innerStyle = withPropsStyle(all, style);
+
   return (
     <LoadableInlineElement
       loading={loading}
@@ -123,7 +133,8 @@ const LinkPlain = forwardRef((props, ref) => {
         {...rest}
         ref={innerRef}
         href={href}
-        className={["navi_link", ...className.split(" ")].join(" ")}
+        className={innerClassName}
+        style={innerStyle}
         aria-busy={loading}
         inert={disabled}
         data-field=""

package/src/components/text/text.jsx

@@ -1,4 +1,4 @@
-import { consumeSpacingProps } from "../layout/spacing.jsx";
+import { useLayoutStyle } from "../layout/use_layout_style.js";
 import { withPropsStyle } from "../props_composition/with_props_style.js";
 
 import.meta.css = /* css */ `
@@ -31,28 +31,16 @@ export const Text = ({
   italic,
   underline,
   style,
-  alignX,
   ...rest
 }) => {
+  const { all } = useLayoutStyle(rest);
   const innerStyle = withPropsStyle(
     {
+      ...all,
       color,
       fontWeight: bold ? "bold" : undefined,
       fontStyle: italic ? "italic" : undefined,
       textDecoration: underline ? "underline" : undefined,
-      ...consumeSpacingProps(rest),
-      ...(alignX === "start"
-        ? {}
-        : alignX === "center"
-          ? {
-              alignSelf: "center",
-              marginLeft: "auto",
-              marginRight: "auto",
-            }
-          : {
-              alignSelf: "end",
-              marginLeft: "auto",
-            }),
     },
     style,
   );