@jsenv/navi 0.6.2 → 0.7.0

package/dist/jsenv_navi.js

@@ -11735,7 +11735,7 @@ const openCallout = (
     level = "warning",
     onClose,
     closeOnClickOutside = level === "info",
-    hideErrorStack,
+    showErrorStack,
     debug = false,
   } = {},
 ) => {
@@ -11803,7 +11803,7 @@ const openCallout = (
     if (Error.isError(newMessage)) {
       const error = newMessage;
       newMessage = error.message;
-      if (!hideErrorStack && error.stack) {
+      if (showErrorStack && error.stack) {
         newMessage += `<pre class="navi_callout_error_stack">${escapeHtml(String(error.stack))}</pre>`;
       }
     }
@@ -13766,6 +13766,7 @@ const useExecuteAction = (
   elementRef,
   {
     errorEffect = "show_validation_message", // "show_validation_message" or "throw"
+    errorMapping,
   } = {},
 ) => {
   // see https://medium.com/trabe/catching-asynchronous-errors-in-react-using-error-boundaries-5e8a5fd7b971
@@ -13783,7 +13784,8 @@ const useExecuteAction = (
   const validationMessageTargetRef = useRef(null);
   const addErrorMessage = (error) => {
     const validationMessageTarget = validationMessageTargetRef.current;
-    addCustomMessage(validationMessageTarget, "action_error", error, {
+    const errorMapped = errorMapping ? errorMapping(error) : error;
+    addCustomMessage(validationMessageTarget, "action_error", errorMapped, {
       // This error should not prevent <form> submission
       // so whenever user tries to submit the form the error is cleared
       // (Hitting enter key, clicking on submit button, etc. would allow to re-submit the form in error state)
@@ -18594,74 +18596,84 @@ const parseStyleString = (styleString) => {
 };
 
 const consumeSpacingProps = props => {
-  const consume = name => {
-    if (Object.hasOwn(props, name)) {
-      const value = props[name];
-      delete props[name];
-      return value;
-    }
-    return undefined;
-  };
-  const margin = consume("margin");
-  const marginX = consume("marginX");
-  const marginY = consume("marginY");
-  const marginLeft = consume("marginLeft");
-  const marginRight = consume("marginRight");
-  const marginTop = consume("marginTop");
-  const marginBottom = consume("marginBottom");
   const style = {};
-  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;
-  }
-  const padding = consume("padding");
-  const paddingX = consume("paddingX");
-  const paddingY = consume("paddingY");
-  const paddingLeft = consume("paddingLeft");
-  const paddingRight = consume("paddingRight");
-  const paddingTop = consume("paddingTop");
-  const paddingBottom = consume("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;
+  {
+    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;
+    }
+  }
+  {
+    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;
 };
@@ -21352,6 +21364,153 @@ const Editable = forwardRef((props, ref) => {
   });
 });
 
+installImportMetaCss(import.meta);import.meta.css = /* css */`
+  .navi_flex_row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0;
+  }
+
+  .navi_flex_column {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0;
+  }
+
+  .navi_flex_item {
+    flex-shrink: 0;
+  }
+`;
+const FlexDirectionContext = createContext();
+const FlexRow = ({
+  alignY,
+  gap,
+  style,
+  children,
+  ...rest
+}) => {
+  const innerStyle = withPropsStyle({
+    alignItems: alignY,
+    gap,
+    ...consumeSpacingProps(rest)
+  }, style);
+  return jsx("div", {
+    ...rest,
+    className: "navi_flex_row",
+    style: innerStyle,
+    children: jsx(FlexDirectionContext.Provider, {
+      value: "row",
+      children: children
+    })
+  });
+};
+const FlexColumn = ({
+  alignX,
+  gap,
+  style,
+  children,
+  ...rest
+}) => {
+  const innerStyle = withPropsStyle({
+    alignItems: alignX,
+    gap,
+    ...consumeSpacingProps(rest)
+  }, style);
+  return jsx("div", {
+    ...rest,
+    className: "navi_flex_column",
+    style: innerStyle,
+    children: jsx(FlexDirectionContext.Provider, {
+      value: "column",
+      children: children
+    })
+  });
+};
+const useConsumAlignProps = props => {
+  const flexDirection = useContext(FlexDirectionContext);
+  const alignX = props.alignX;
+  const alignY = props.alignY;
+  delete props.alignX;
+  delete props.alignY;
+  const style = {};
+  if (flexDirection === "row") {
+    // In row direction: alignX controls justify-content, alignY controls align-self
+    // Default alignY is "center" from CSS, so only set alignSelf when different
+    if (alignY !== undefined && alignY !== "center") {
+      style.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") {
+        style.marginRight = "auto";
+      } else if (alignX === "end") {
+        style.marginLeft = "auto";
+      } else if (alignX === "center") {
+        style.marginLeft = "auto";
+        style.marginRight = "auto";
+      }
+    }
+  } else if (flexDirection === "column") {
+    // In column direction: alignX controls align-self, alignY uses auto margins
+    // Default alignX is "center" from CSS, so only set alignSelf when different
+    if (alignX !== undefined && alignX !== "center") {
+      style.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") {
+        style.marginBottom = "auto";
+      } else if (alignY === "end") {
+        style.marginTop = "auto";
+      } else if (alignY === "center") {
+        style.marginTop = "auto";
+        style.marginBottom = "auto";
+      }
+    }
+  }
+  return style;
+};
+const FlexItem = ({
+  alignX,
+  alignY,
+  grow,
+  shrink,
+  className,
+  style,
+  children,
+  ...rest
+}) => {
+  const flexDirection = useContext(FlexDirectionContext);
+  if (!flexDirection) {
+    console.warn("FlexItem must be used within a FlexRow or FlexColumn component.");
+  }
+  const innerClassName = withPropsClassName("navi_flex_item", className);
+  const alignStyle = useConsumAlignProps({
+    alignX,
+    alignY
+  });
+  const innerStyle = withPropsStyle({
+    flexGrow: grow ? 1 : undefined,
+    flexShrink: shrink ? 1 : undefined,
+    ...consumeSpacingProps(rest),
+    ...alignStyle
+  }, style);
+  return jsx("div", {
+    ...rest,
+    className: innerClassName,
+    style: innerStyle,
+    children: children
+  });
+};
+
 const useFormEvents = (
   elementRef,
   {
@@ -21573,7 +21732,8 @@ const ButtonBasic = forwardRef((props, ref) => {
     autoFocus,
     // visual
     appearance = "navi",
-    alignX = "start",
+    alignX,
+    alignY,
     discrete,
     className,
     style,
@@ -21599,13 +21759,9 @@ const ButtonBasic = forwardRef((props, ref) => {
   const innerClassName = withPropsClassName(appearance === "navi" ? "navi_button" : undefined, className);
   const innerStyle = withPropsStyle({
     ...consumeSpacingProps(rest),
-    ...(alignX === "start" ? {} : alignX === "center" ? {
-      alignSelf: "center",
-      marginLeft: "auto",
-      marginRight: "auto"
-    } : {
-      alignSelf: "end",
-      marginLeft: "auto"
+    ...useConsumAlignProps({
+      alignX,
+      alignY
     })
   }, style);
   return jsx("button", {
@@ -22171,6 +22327,7 @@ const FormWithAction = forwardRef((props, ref) => {
     method,
     actionErrorEffect = "show_validation_message",
     // "show_validation_message" or "throw"
+    errorMapping,
     onActionPrevented,
     onActionStart,
     onActionAbort,
@@ -22184,7 +22341,8 @@ const FormWithAction = forwardRef((props, ref) => {
   useImperativeHandle(ref, () => innerRef.current);
   const [actionBoundToUIState] = useActionBoundToOneParam(action, uiState);
   const executeAction = useExecuteAction(innerRef, {
-    errorEffect: actionErrorEffect
+    errorEffect: actionErrorEffect,
+    errorMapping
   });
   const {
     actionPending,
@@ -28212,4 +28370,4 @@ const useDependenciesDiff = (inputs) => {
   return diffRef.current;
 };
 
-export { ActionRenderer, ActiveKeyboardShortcuts, Button, Checkbox, CheckboxList, Col, Colgroup, Details, Editable, ErrorBoundaryContext, FontSizedSvg, Form, Icon, IconAndText, Input, Label, Link, LinkWithIcon, Overflow, Radio, RadioList, Route, RowNumberCol, RowNumberTableCell, SINGLE_SPACE_CONSTRAINT, SVGMaskOverlay, Select, SelectionContext, Spacing, SummaryMarker, Tab, TabList, Table, TableCell, Tbody, Text, TextAndCount, Thead, Tr, UITransition, actionIntegratedVia, addCustomMessage, createAction, createSelectionKeyboardShortcuts, createUniqueValueConstraint, defineRoutes, enableDebugActions, enableDebugOnDocumentLoading, goBack, goForward, goTo, isCellSelected, isColumnSelected, isRowSelected, openCallout, rawUrlPart, reload, removeCustomMessage, rerunActions, resource, setBaseUrl, stopLoad, stringifyTableSelectionValue, updateActions, useActionData, useActionStatus, useCellsAndColumns, useDependenciesDiff, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useKeyboardShortcuts, useNavState, useRouteStatus, useRunOnMount, useSelectableElement, useSelectionController, useSignalSync, useStateArray, valueInLocalStorage };
+export { ActionRenderer, ActiveKeyboardShortcuts, Button, Checkbox, CheckboxList, Col, Colgroup, Details, Editable, ErrorBoundaryContext, FlexColumn, FlexItem, FlexRow, FontSizedSvg, Form, Icon, IconAndText, Input, Label, Link, LinkWithIcon, Overflow, Radio, RadioList, Route, RowNumberCol, RowNumberTableCell, SINGLE_SPACE_CONSTRAINT, SVGMaskOverlay, Select, SelectionContext, Spacing, SummaryMarker, Tab, TabList, Table, TableCell, Tbody, Text, TextAndCount, Thead, Tr, UITransition, actionIntegratedVia, addCustomMessage, createAction, createSelectionKeyboardShortcuts, createUniqueValueConstraint, defineRoutes, enableDebugActions, enableDebugOnDocumentLoading, goBack, goForward, goTo, isCellSelected, isColumnSelected, isRowSelected, openCallout, rawUrlPart, reload, removeCustomMessage, rerunActions, resource, setBaseUrl, stopLoad, stringifyTableSelectionValue, updateActions, useActionData, useActionStatus, useCellsAndColumns, useDependenciesDiff, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useKeyboardShortcuts, useNavState, useRouteStatus, useRunOnMount, useSelectableElement, useSelectionController, useSignalSync, useStateArray, valueInLocalStorage };

package/index.js

@@ -93,6 +93,11 @@ export { TextAndCount } from "./src/components/text/text_and_count.jsx";
 // Callout, dialogs, ...
 export { openCallout } from "./src/components/callout/callout.js";
 // Layout
+export {
+  FlexColumn,
+  FlexItem,
+  FlexRow,
+} from "./src/components/layout/flex.jsx";
 export { Spacing } from "./src/components/layout/spacing.jsx";
 
 // Validation

package/package.json

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

package/src/components/action_execution/use_execute_action.js

@@ -11,6 +11,7 @@ export const useExecuteAction = (
   elementRef,
   {
     errorEffect = "show_validation_message", // "show_validation_message" or "throw"
+    errorMapping,
   } = {},
 ) => {
   // see https://medium.com/trabe/catching-asynchronous-errors-in-react-using-error-boundaries-5e8a5fd7b971
@@ -28,7 +29,8 @@ export const useExecuteAction = (
   const validationMessageTargetRef = useRef(null);
   const addErrorMessage = (error) => {
     const validationMessageTarget = validationMessageTargetRef.current;
-    addCustomMessage(validationMessageTarget, "action_error", error, {
+    const errorMapped = errorMapping ? errorMapping(error) : error;
+    addCustomMessage(validationMessageTarget, "action_error", errorMapped, {
       // This error should not prevent <form> submission
       // so whenever user tries to submit the form the error is cleared
       // (Hitting enter key, clicking on submit button, etc. would allow to re-submit the form in error state)

package/src/components/callout/callout.js

@@ -48,7 +48,7 @@ export const openCallout = (
     level = "warning",
     onClose,
     closeOnClickOutside = level === "info",
-    hideErrorStack,
+    showErrorStack,
     debug = false,
   } = {},
 ) => {
@@ -116,7 +116,7 @@ export const openCallout = (
     if (Error.isError(newMessage)) {
       const error = newMessage;
       newMessage = error.message;
-      if (!hideErrorStack && error.stack) {
+      if (showErrorStack && error.stack) {
         newMessage += `<pre class="navi_callout_error_stack">${escapeHtml(String(error.stack))}</pre>`;
       }
     }

package/src/components/field/button.jsx

@@ -14,6 +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 { LoaderBackground } from "../loader/loader_background.jsx";
 import { withPropsClassName } from "../props_composition/with_props_class_name.js";
@@ -211,7 +212,8 @@ const ButtonBasic = forwardRef((props, ref) => {
 
     // visual
     appearance = "navi",
-    alignX = "start",
+    alignX,
+    alignY,
     discrete,
     className,
     style,
@@ -243,18 +245,7 @@ const ButtonBasic = forwardRef((props, ref) => {
   const innerStyle = withPropsStyle(
     {
       ...consumeSpacingProps(rest),
-      ...(alignX === "start"
-        ? {}
-        : alignX === "center"
-          ? {
-              alignSelf: "center",
-              marginLeft: "auto",
-              marginRight: "auto",
-            }
-          : {
-              alignSelf: "end",
-              marginLeft: "auto",
-            }),
+      ...useConsumAlignProps({ alignX, alignY }),
     },
     style,
   );

package/src/components/field/form.jsx

@@ -121,6 +121,7 @@ const FormWithAction = forwardRef((props, ref) => {
     action,
     method,
     actionErrorEffect = "show_validation_message", // "show_validation_message" or "throw"
+    errorMapping,
     onActionPrevented,
     onActionStart,
     onActionAbort,
@@ -135,6 +136,7 @@ const FormWithAction = forwardRef((props, ref) => {
   const [actionBoundToUIState] = useActionBoundToOneParam(action, uiState);
   const executeAction = useExecuteAction(innerRef, {
     errorEffect: actionErrorEffect,
+    errorMapping,
   });
   const { actionPending, actionRequester: formActionRequester } =
     useRequestedActionStatus(innerRef);

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

@@ -0,0 +1,506 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Flex Layout Demo</title>
+    <style>
+      .demo-box {
+        min-width: 60px;
+        padding: 10px;
+        text-align: center;
+        background: #e3f2fd;
+        border: 1px solid #90caf9;
+        border-radius: 4px;
+      }
+      .demo-section {
+        margin-bottom: 30px;
+        padding: 20px;
+        background: #f8f9fa;
+        border-radius: 8px;
+      }
+    </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, FlexItem, 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>Flex Layout Demo</h1>
+
+            <h2>FlexRow</h2>
+
+            <section className="demo-section">
+              <h3>1. Basic FlexRow</h3>
+              <FlexRow>
+                <DemoBox>Item 1</DemoBox>
+                <DemoBox>Item 2</DemoBox>
+                <DemoBox>Item 3</DemoBox>
+              </FlexRow>
+            </section>
+
+            <section className="demo-section">
+              <h3>2. FlexRow with Gap</h3>
+              <FlexRow gap="15px">
+                <DemoBox>Item 1</DemoBox>
+                <DemoBox>Item 2</DemoBox>
+                <DemoBox>Item 3</DemoBox>
+              </FlexRow>
+            </section>
+
+            <section className="demo-section">
+              <h3>3. FlexRow with Vertical Alignment</h3>
+
+              <h4>alignY="start"</h4>
+              <FlexRow
+                alignY="start"
+                gap="10px"
+                style={{
+                  height: "80px",
+                  background: "#fff3e0",
+                  padding: "10px",
+                }}
+              >
+                <DemoBox>Short</DemoBox>
+                <DemoBox style={{ height: "60px", lineHeight: "60px" }}>
+                  Tall Item
+                </DemoBox>
+                <DemoBox>Short</DemoBox>
+              </FlexRow>
+
+              <h4>alignY="center" (default)</h4>
+              <FlexRow
+                alignY="center"
+                gap="10px"
+                style={{
+                  height: "80px",
+                  background: "#e8f5e8",
+                  padding: "10px",
+                }}
+              >
+                <DemoBox>Short</DemoBox>
+                <DemoBox style={{ height: "60px", lineHeight: "60px" }}>
+                  Tall Item
+                </DemoBox>
+                <DemoBox>Short</DemoBox>
+              </FlexRow>
+
+              <h4>alignY="end"</h4>
+              <FlexRow
+                alignY="end"
+                gap="10px"
+                style={{
+                  height: "80px",
+                  background: "#ffebee",
+                  padding: "10px",
+                }}
+              >
+                <DemoBox>Short</DemoBox>
+                <DemoBox style={{ height: "60px", lineHeight: "60px" }}>
+                  Tall Item
+                </DemoBox>
+                <DemoBox>Short</DemoBox>
+              </FlexRow>
+            </section>
+
+            <h2>FlexRow + FlexItem</h2>
+
+            <section className="demo-section">
+              <h3>4. FlexItem Basic Usage</h3>
+
+              <FlexRow gap="10px">
+                <FlexItem>
+                  <DemoBox>FlexItem 1</DemoBox>
+                </FlexItem>
+                <FlexItem>
+                  <DemoBox>FlexItem 2</DemoBox>
+                </FlexItem>
+                <FlexItem>
+                  <DemoBox>FlexItem 3</DemoBox>
+                </FlexItem>
+              </FlexRow>
+            </section>
+
+            <section className="demo-section">
+              <h3>5. FlexItem with Growth</h3>
+
+              <FlexRow gap="10px">
+                <FlexItem>
+                  <DemoBox>Fixed</DemoBox>
+                </FlexItem>
+                <FlexItem grow>
+                  <DemoBox>Grows to fill</DemoBox>
+                </FlexItem>
+                <FlexItem>
+                  <DemoBox>Fixed</DemoBox>
+                </FlexItem>
+              </FlexRow>
+            </section>
+
+            <section className="demo-section">
+              <h3>6. FlexItem with alignY</h3>
+
+              <FlexRow
+                gap="10px"
+                style={{
+                  height: "100px",
+                  background: "#e1f5fe",
+                  padding: "10px",
+                }}
+              >
+                <FlexItem>
+                  <DemoBox>Default (center)</DemoBox>
+                </FlexItem>
+                <FlexItem alignY="start">
+                  <DemoBox>alignY="start"</DemoBox>
+                </FlexItem>
+                <FlexItem alignY="end">
+                  <DemoBox>alignY="end"</DemoBox>
+                </FlexItem>
+                <FlexItem alignY="stretch">
+                  <DemoBox style={{ height: "100%" }}>alignY="stretch"</DemoBox>
+                </FlexItem>
+              </FlexRow>
+            </section>
+
+            <section className="demo-section">
+              <h3>7. FlexItem with alignX</h3>
+
+              <FlexRow
+                gap="10px"
+                style={{
+                  background: "#f3e5f5",
+                  padding: "10px",
+                }}
+              >
+                <FlexItem>
+                  <DemoBox>Default</DemoBox>
+                </FlexItem>
+                <FlexItem alignX="start">
+                  <DemoBox>alignX="start"</DemoBox>
+                </FlexItem>
+                <FlexItem alignX="center">
+                  <DemoBox>alignX="center"</DemoBox>
+                </FlexItem>
+                <FlexItem alignX="end">
+                  <DemoBox>alignX="end"</DemoBox>
+                </FlexItem>
+              </FlexRow>
+            </section>
+
+            <section className="demo-section">
+              <h3>8. Auto Margin Examples</h3>
+
+              <h4>Single item pushed to end</h4>
+              <FlexRow
+                gap="10px"
+                style={{ background: "#fff3e0", padding: "10px" }}
+              >
+                <DemoBox>Item 1</DemoBox>
+                <DemoBox>Item 2</DemoBox>
+                <FlexItem alignX="end">
+                  <DemoBox>Pushed to end</DemoBox>
+                </FlexItem>
+              </FlexRow>
+
+              <h4>Single item centered</h4>
+              <FlexRow
+                gap="10px"
+                style={{ background: "#e8f5e8", padding: "10px" }}
+              >
+                <DemoBox>Item 1</DemoBox>
+                <FlexItem alignX="center">
+                  <DemoBox>Centered</DemoBox>
+                </FlexItem>
+                <DemoBox>Item 3</DemoBox>
+              </FlexRow>
+
+              <h4>Multiple items pushed to end</h4>
+              <FlexRow
+                gap="10px"
+                style={{ background: "#f0f4ff", padding: "10px" }}
+              >
+                <DemoBox>Item 1</DemoBox>
+                <FlexItem alignX="end">
+                  <DemoBox>Pushed A</DemoBox>
+                </FlexItem>
+                <FlexItem alignX="end">
+                  <DemoBox>Pushed B</DemoBox>
+                </FlexItem>
+                <FlexItem alignX="end">
+                  <DemoBox>Pushed C</DemoBox>
+                </FlexItem>
+              </FlexRow>
+
+              <h4>Multiple items with different alignments</h4>
+              <FlexRow
+                gap="10px"
+                style={{ background: "#ffebee", padding: "10px" }}
+              >
+                <FlexItem alignX="start">
+                  <DemoBox>Start</DemoBox>
+                </FlexItem>
+                <DemoBox>Normal</DemoBox>
+                <FlexItem alignX="center">
+                  <DemoBox>Center</DemoBox>
+                </FlexItem>
+                <DemoBox>Normal</DemoBox>
+                <FlexItem alignX="end">
+                  <DemoBox>End</DemoBox>
+                </FlexItem>
+              </FlexRow>
+            </section>
+
+            <section className="demo-section">
+              <h3>9. Combined Growth and Alignment</h3>
+
+              <FlexRow
+                gap="10px"
+                style={{ background: "#e1f5fe", padding: "10px" }}
+              >
+                <DemoBox>Fixed</DemoBox>
+                <FlexItem grow>
+                  <DemoBox>Grows</DemoBox>
+                </FlexItem>
+                <FlexItem alignX="end">
+                  <DemoBox>Pushed to end</DemoBox>
+                </FlexItem>
+              </FlexRow>
+            </section>
+
+            <section className="demo-section">
+              <h3>10. Real-World Example: Button with alignX</h3>
+
+              <FlexRow
+                gap="10px"
+                style={{ background: "#f5f5f5", padding: "10px" }}
+              >
+                <DemoBox>Content</DemoBox>
+                <DemoBox>More content</DemoBox>
+                <Button alignX="end">Action Button</Button>
+              </FlexRow>
+            </section>
+
+            <h2>FlexColumn</h2>
+
+            <section className="demo-section">
+              <h3>10. Basic FlexColumn</h3>
+              <FlexColumn style={{ height: "200px" }}>
+                <DemoBox>Item 1</DemoBox>
+                <DemoBox>Item 2</DemoBox>
+                <DemoBox>Item 3</DemoBox>
+              </FlexColumn>
+            </section>
+
+            <section className="demo-section">
+              <h3>11. FlexColumn with Gap</h3>
+              <FlexColumn gap="15px" style={{ height: "200px" }}>
+                <DemoBox>Item 1</DemoBox>
+                <DemoBox>Item 2</DemoBox>
+                <DemoBox>Item 3</DemoBox>
+              </FlexColumn>
+            </section>
+
+            <section className="demo-section">
+              <h3>12. FlexColumn with Horizontal Alignment</h3>
+
+              <h4>alignX="start"</h4>
+              <FlexColumn
+                alignX="start"
+                gap="10px"
+                style={{
+                  height: "150px",
+                  width: "300px",
+                  background: "#fff3e0",
+                  padding: "10px",
+                }}
+              >
+                <DemoBox>Short</DemoBox>
+                <DemoBox style={{ width: "200px" }}>Wide Item</DemoBox>
+                <DemoBox>Short</DemoBox>
+              </FlexColumn>
+
+              <h4>alignX="center" (default)</h4>
+              <FlexColumn
+                alignX="center"
+                gap="10px"
+                style={{
+                  height: "150px",
+                  width: "300px",
+                  background: "#e8f5e8",
+                  padding: "10px",
+                }}
+              >
+                <DemoBox>Short</DemoBox>
+                <DemoBox style={{ width: "200px" }}>Wide Item</DemoBox>
+                <DemoBox>Short</DemoBox>
+              </FlexColumn>
+
+              <h4>alignX="end"</h4>
+              <FlexColumn
+                alignX="end"
+                gap="10px"
+                style={{
+                  height: "150px",
+                  width: "300px",
+                  background: "#ffebee",
+                  padding: "10px",
+                }}
+              >
+                <DemoBox>Short</DemoBox>
+                <DemoBox style={{ width: "200px" }}>Wide Item</DemoBox>
+                <DemoBox>Short</DemoBox>
+              </FlexColumn>
+            </section>
+
+            <section className="demo-section">
+              <h3>13. FlexItem with alignX in Column</h3>
+
+              <FlexColumn
+                gap="10px"
+                style={{
+                  height: "200px",
+                  width: "300px",
+                  background: "#f3e5f5",
+                  padding: "10px",
+                }}
+              >
+                <FlexItem>
+                  <DemoBox>Default</DemoBox>
+                </FlexItem>
+                <FlexItem alignX="start">
+                  <DemoBox>alignX="start"</DemoBox>
+                </FlexItem>
+                <FlexItem alignX="center">
+                  <DemoBox>alignX="center"</DemoBox>
+                </FlexItem>
+                <FlexItem alignX="end">
+                  <DemoBox>alignX="end"</DemoBox>
+                </FlexItem>
+              </FlexColumn>
+            </section>
+
+            <section className="demo-section">
+              <h3>14. FlexItem with alignY in Column</h3>
+
+              <FlexColumn
+                gap="10px"
+                style={{
+                  height: "300px",
+                  width: "200px",
+                  background: "#e1f5fe",
+                  padding: "10px",
+                }}
+              >
+                <FlexItem>
+                  <DemoBox>Default</DemoBox>
+                </FlexItem>
+                <FlexItem alignY="start">
+                  <DemoBox>alignY="start"</DemoBox>
+                </FlexItem>
+                <FlexItem alignY="center">
+                  <DemoBox>alignY="center"</DemoBox>
+                </FlexItem>
+                <FlexItem alignY="end">
+                  <DemoBox>alignY="end"</DemoBox>
+                </FlexItem>
+              </FlexColumn>
+            </section>
+
+            <section className="demo-section">
+              <h3>15. Column Auto Margin Examples</h3>
+
+              <h4>Single item pushed to bottom</h4>
+              <FlexColumn
+                gap="10px"
+                style={{
+                  height: "200px",
+                  background: "#fff3e0",
+                  padding: "10px",
+                }}
+              >
+                <DemoBox>Item 1</DemoBox>
+                <DemoBox>Item 2</DemoBox>
+                <FlexItem alignY="end">
+                  <DemoBox>Pushed to bottom</DemoBox>
+                </FlexItem>
+              </FlexColumn>
+
+              <h4>Multiple items pushed to bottom</h4>
+              <FlexColumn
+                gap="10px"
+                style={{
+                  height: "250px",
+                  background: "#f0f4ff",
+                  padding: "10px",
+                }}
+              >
+                <DemoBox>Item 1</DemoBox>
+                <FlexItem alignY="end">
+                  <DemoBox>Pushed A</DemoBox>
+                </FlexItem>
+                <FlexItem alignY="end">
+                  <DemoBox>Pushed B</DemoBox>
+                </FlexItem>
+                <FlexItem alignY="end">
+                  <DemoBox>Pushed C</DemoBox>
+                </FlexItem>
+              </FlexColumn>
+
+              <h4>Item centered vertically</h4>
+              <FlexColumn
+                gap="10px"
+                style={{
+                  height: "200px",
+                  background: "#e8f5e8",
+                  padding: "10px",
+                }}
+              >
+                <DemoBox>Item 1</DemoBox>
+                <FlexItem alignY="center">
+                  <DemoBox>Centered</DemoBox>
+                </FlexItem>
+                <DemoBox>Item 3</DemoBox>
+              </FlexColumn>
+            </section>
+
+            <section className="demo-section">
+              <h3>16. Combined Growth and Alignment in Column</h3>
+
+              <FlexColumn
+                gap="10px"
+                style={{
+                  height: "250px",
+                  background: "#e1f5fe",
+                  padding: "10px",
+                }}
+              >
+                <DemoBox>Fixed</DemoBox>
+                <FlexItem grow>
+                  <DemoBox style="height: 100%; box-sizing: border-box;">
+                    Grows
+                  </DemoBox>
+                </FlexItem>
+                <FlexItem alignY="end">
+                  <DemoBox>Pushed to bottom</DemoBox>
+                </FlexItem>
+              </FlexColumn>
+            </section>
+          </div>
+        );
+      };
+
+      render(<Demo />, document.getElementById("app"));
+    </script>
+  </body>
+</html>

package/src/components/layout/flex.jsx

@@ -0,0 +1,154 @@
+import { createContext } from "preact";
+import { useContext } from "preact/hooks";
+
+import { withPropsClassName } from "../props_composition/with_props_class_name.js";
+import { withPropsStyle } from "../props_composition/with_props_style.js";
+import { consumeSpacingProps } from "./spacing.jsx";
+
+import.meta.css = /* css */ `
+  .navi_flex_row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0;
+  }
+
+  .navi_flex_column {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0;
+  }
+
+  .navi_flex_item {
+    flex-shrink: 0;
+  }
+`;
+
+const FlexDirectionContext = createContext();
+
+export const FlexRow = ({ alignY, gap, style, children, ...rest }) => {
+  const innerStyle = withPropsStyle(
+    {
+      alignItems: alignY,
+      gap,
+      ...consumeSpacingProps(rest),
+    },
+    style,
+  );
+
+  return (
+    <div {...rest} className="navi_flex_row" style={innerStyle}>
+      <FlexDirectionContext.Provider value="row">
+        {children}
+      </FlexDirectionContext.Provider>
+    </div>
+  );
+};
+export const FlexColumn = ({ alignX, gap, style, children, ...rest }) => {
+  const innerStyle = withPropsStyle(
+    {
+      alignItems: alignX,
+      gap,
+      ...consumeSpacingProps(rest),
+    },
+    style,
+  );
+
+  return (
+    <div {...rest} className="navi_flex_column" style={innerStyle}>
+      <FlexDirectionContext.Provider value="column">
+        {children}
+      </FlexDirectionContext.Provider>
+    </div>
+  );
+};
+export const useConsumAlignProps = (props) => {
+  const flexDirection = useContext(FlexDirectionContext);
+
+  const alignX = props.alignX;
+  const alignY = props.alignY;
+  delete props.alignX;
+  delete props.alignY;
+
+  const style = {};
+
+  if (flexDirection === "row") {
+    // In row direction: alignX controls justify-content, alignY controls align-self
+    // Default alignY is "center" from CSS, so only set alignSelf when different
+    if (alignY !== undefined && alignY !== "center") {
+      style.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") {
+        style.marginRight = "auto";
+      } else if (alignX === "end") {
+        style.marginLeft = "auto";
+      } else if (alignX === "center") {
+        style.marginLeft = "auto";
+        style.marginRight = "auto";
+      }
+    }
+  } else if (flexDirection === "column") {
+    // In column direction: alignX controls align-self, alignY uses auto margins
+    // Default alignX is "center" from CSS, so only set alignSelf when different
+    if (alignX !== undefined && alignX !== "center") {
+      style.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") {
+        style.marginBottom = "auto";
+      } else if (alignY === "end") {
+        style.marginTop = "auto";
+      } else if (alignY === "center") {
+        style.marginTop = "auto";
+        style.marginBottom = "auto";
+      }
+    }
+  }
+
+  return style;
+};
+export const FlexItem = ({
+  alignX,
+  alignY,
+  grow,
+  shrink,
+  className,
+  style,
+  children,
+  ...rest
+}) => {
+  const flexDirection = useContext(FlexDirectionContext);
+  if (!flexDirection) {
+    console.warn(
+      "FlexItem must be used within a FlexRow or FlexColumn component.",
+    );
+  }
+
+  const innerClassName = withPropsClassName("navi_flex_item", className);
+  const alignStyle = useConsumAlignProps({ alignX, alignY });
+  const innerStyle = withPropsStyle(
+    {
+      flexGrow: grow ? 1 : undefined,
+      flexShrink: shrink ? 1 : undefined,
+      ...consumeSpacingProps(rest),
+      ...alignStyle,
+    },
+    style,
+  );
+
+  return (
+    <div {...rest} className={innerClassName} style={innerStyle}>
+      {children}
+    </div>
+  );
+};

package/src/components/layout/spacing.jsx

@@ -1,77 +1,88 @@
 import { withPropsStyle } from "../props_composition/with_props_style.js";
 
 export const consumeSpacingProps = (props) => {
-  const consume = (name) => {
-    if (Object.hasOwn(props, name)) {
-      const value = props[name];
-      delete props[name];
-      return value;
-    }
-    return undefined;
-  };
-  const margin = consume("margin");
-  const marginX = consume("marginX");
-  const marginY = consume("marginY");
-  const marginLeft = consume("marginLeft");
-  const marginRight = consume("marginRight");
-  const marginTop = consume("marginTop");
-  const marginBottom = consume("marginBottom");
-
   const style = {};
-  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;
-  }
 
-  const padding = consume("padding");
-  const paddingX = consume("paddingX");
-  const paddingY = consume("paddingY");
-  const paddingLeft = consume("paddingLeft");
-  const paddingRight = consume("paddingRight");
-  const paddingTop = consume("paddingTop");
-  const paddingBottom = consume("paddingBottom");
+  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 (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 (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;
+    }
   }
-  if (paddingBottom !== undefined) {
-    style.paddingBottom = paddingBottom;
-  } else if (paddingY !== undefined) {
-    style.paddingBottom = paddingY;
+
+  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;