@jsenv/navi 0.10.1 → 0.11.0

package/src/components/layout/use_layout_style.js

@@ -1,249 +0,0 @@
-/**
- * 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

@@ -1,267 +0,0 @@
-import { forwardRef } from "preact/compat";
-import {
-  useContext,
-  useImperativeHandle,
-  useLayoutEffect,
-  useRef,
-} from "preact/hooks";
-
-import { useIsVisited } from "../../browser_integration/use_is_visited.js";
-import { closeValidationMessage } from "../../validation/custom_constraint_validation.js";
-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,
-} from "../selection/selection.jsx";
-import { useTypographyStyle } from "../text/text.jsx";
-import { useAutoFocus } from "../use_auto_focus.js";
-
-/*
- * Apply opacity to child content, not the link element itself.
- *
- * Why not apply opacity directly to .navi_link?
- * - Would make focus outlines semi-transparent too (accessibility issue)
- * - We want dimmed text but full-opacity focus indicators for visibility
- *
- * This approach dims the content while preserving focus outline visibility.
- */
-import.meta.css = /* css */ `
-  .navi_link {
-    border-radius: 2px;
-  }
-  /* Focus */
-  .navi_link:focus {
-    position: relative;
-    z-index: 1; /* Ensure focus outline is above other elements */
-  }
-  /* Visited */
-  .navi_link[data-visited] {
-    color: light-dark(#6a1b9a, #ab47bc);
-  }
-  /* Selected */
-  .navi_link[aria-selected] {
-    position: relative;
-  }
-  .navi_link[aria-selected="true"] {
-    background-color: light-dark(#bbdefb, #2563eb);
-  }
-  .navi_link[aria-selected] input[type="checkbox"] {
-    position: absolute;
-    opacity: 0;
-  }
-  /* Active */
-  .navi_link[data-active] {
-    font-weight: bold;
-  }
-  /* Readonly */
-  .navi_link[data-readonly] > * {
-    opacity: 0.5;
-  }
-  /* Disabled */
-  .navi_link[inert] {
-    pointer-events: none;
-  }
-  .navi_link[inert] > * {
-    opacity: 0.5;
-  }
-`;
-
-export const Link = forwardRef((props, ref) => {
-  return renderActionableComponent(props, ref, {
-    Basic: LinkBasic,
-    WithAction: LinkWithAction,
-  });
-});
-
-const LinkBasic = forwardRef((props, ref) => {
-  const selectionContext = useContext(SelectionContext);
-  if (selectionContext) {
-    return <LinkWithSelection ref={ref} {...props} />;
-  }
-  return <LinkPlain ref={ref} {...props} />;
-});
-const LinkPlain = forwardRef((props, ref) => {
-  const {
-    loading,
-    readOnly,
-    disabled,
-    children,
-    autoFocus,
-    active,
-    visited,
-    spaceToClick = true,
-    constraints = [],
-    onClick,
-    onKeyDown,
-    href,
-
-    // visual
-    className,
-    style,
-    ...rest
-  } = props;
-  const innerRef = useRef();
-  useImperativeHandle(ref, () => innerRef.current);
-  const isVisited = useIsVisited(href);
-
-  useAutoFocus(innerRef, autoFocus);
-  useConstraints(innerRef, constraints);
-  const shouldDimColor = readOnly || disabled;
-  useDimColorWhen(innerRef, shouldDimColor);
-
-  const innerClassName = withPropsClassName("navi_link", className);
-  const { all } = useLayoutStyle(rest);
-  const innerStyle = withPropsStyle(
-    {
-      ...all,
-      ...useTypographyStyle(rest),
-    },
-    style,
-  );
-
-  return (
-    <LoadableInlineElement
-      loading={loading}
-      color="light-dark(#355fcc, #3b82f6)"
-    >
-      <a
-        {...rest}
-        ref={innerRef}
-        href={href}
-        className={innerClassName}
-        style={innerStyle}
-        aria-busy={loading}
-        inert={disabled}
-        data-disabled={disabled ? "" : undefined}
-        data-readonly={readOnly ? "" : undefined}
-        data-active={active ? "" : undefined}
-        data-visited={visited || isVisited ? "" : undefined}
-        onClick={(e) => {
-          closeValidationMessage(e.target, "click");
-          if (readOnly) {
-            e.preventDefault();
-            return;
-          }
-          onClick?.(e);
-        }}
-        onKeyDown={(e) => {
-          if (spaceToClick && e.key === " ") {
-            e.preventDefault(); // Prevent page scroll
-            if (!readOnly && !disabled) {
-              e.target.click();
-            }
-          }
-          onKeyDown?.(e);
-        }}
-      >
-        {children}
-      </a>
-    </LoadableInlineElement>
-  );
-});
-const LinkWithSelection = forwardRef((props, ref) => {
-  const { selection, selectionController } = useContext(SelectionContext);
-  const { value = props.href, children, ...rest } = props;
-  const innerRef = useRef();
-  useImperativeHandle(ref, () => innerRef.current);
-  const { selected } = useSelectableElement(innerRef, {
-    selection,
-    selectionController,
-  });
-
-  return (
-    <LinkPlain
-      {...rest}
-      ref={innerRef}
-      data-value={value}
-      aria-selected={selected}
-    >
-      {children}
-    </LinkPlain>
-  );
-});
-
-/*
- * Custom hook to apply semi-transparent color when an element should be dimmed.
- *
- * Why we do it this way:
- * 1. **Precise timing**: Captures the element's natural color exactly when transitioning
- *    from normal to dimmed state (not before, not after)
- * 2. **Avoids CSS inheritance issues**: CSS `currentColor` and `color-mix()` don't work
- *    reliably for creating true transparency that matches `opacity: 0.5`
- * 3. **Performance**: Only executes when the dimmed state actually changes, not on every render
- * 4. **Color accuracy**: Uses `color(from ... / 0.5)` syntax to preserve the exact visual
- *    appearance of `opacity: 0.5` but applied only to color
- * 5. **Works with any color**: Handles default blue, visited purple, inherited colors, etc.
- * 6. **Maintains focus outline**: Since we only dim the text color, focus outlines remain
- *    fully visible for accessibility
- */
-const useDimColorWhen = (elementRef, shouldDim) => {
-  const shouldDimPreviousRef = useRef();
-  useLayoutEffect(() => {
-    const element = elementRef.current;
-    const shouldDimPrevious = shouldDimPreviousRef.current;
-
-    if (shouldDim === shouldDimPrevious) {
-      return;
-    }
-    shouldDimPreviousRef.current = shouldDim;
-    if (shouldDim) {
-      // Capture color just before applying disabled state
-      const computedStyle = getComputedStyle(element);
-      const currentColor = computedStyle.color;
-      element.style.color = `color(from ${currentColor} srgb r g b / 0.5)`;
-    } else {
-      // Clear the inline style to let CSS take over
-      element.style.color = "";
-    }
-  });
-};
-
-const LinkWithAction = forwardRef((props, ref) => {
-  const {
-    shortcuts = [],
-    readOnly,
-    onActionPrevented,
-    onActionStart,
-    onActionAbort,
-    onActionError,
-    onActionEnd,
-    children,
-    loading,
-    ...rest
-  } = props;
-  const innerRef = useRef();
-  useImperativeHandle(ref, () => innerRef.current);
-  const { actionPending } = useRequestedActionStatus(innerRef);
-  const innerLoading = Boolean(loading || actionPending);
-
-  useKeyboardShortcuts(innerRef, shortcuts, {
-    onActionPrevented,
-    onActionStart,
-    onActionAbort,
-    onActionError,
-    onActionEnd,
-  });
-
-  return (
-    <LinkBasic
-      {...rest}
-      ref={innerRef}
-      loading={innerLoading}
-      readOnly={readOnly || actionPending}
-      data-readonly-silent={actionPending && !readOnly ? "" : undefined}
-      /* When we have keyboard shortcuts the link outline is visible on focus (not solely on focus-visible) */
-      data-focus-visible=""
-    >
-      {children}
-    </LinkBasic>
-  );
-});

package/src/components/link/link_with_icon.jsx

@@ -1,52 +0,0 @@
-import { FontSizedSvg } from "../svg/font_sized_svg.jsx";
-import { Link } from "./link.jsx";
-
-import.meta.css = /* css */ `
-  .link_with_icon {
-    white-space: nowrap;
-    align-items: center;
-    gap: 0.3em;
-    min-width: 0;
-    display: inline-flex;
-    flex-grow: 1;
-  }
-`;
-
-export const LinkWithIcon = ({
-  icon,
-  isCurrent,
-  children,
-  className = "",
-  ...rest
-}) => {
-  return (
-    <Link
-      className={["link_with_icon", ...className.split(" ")].join(" ")}
-      {...rest}
-    >
-      <FontSizedSvg>{icon}</FontSizedSvg>
-      {isCurrent && (
-        <FontSizedSvg>
-          <CurrentSvg />
-        </FontSizedSvg>
-      )}
-      {children}
-    </Link>
-  );
-};
-
-const CurrentSvg = () => {
-  return (
-    <svg
-      viewBox="0 0 16 16"
-      width="100%"
-      height="100%"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="m 8 0 c -3.3125 0 -6 2.6875 -6 6 c 0.007812 0.710938 0.136719 1.414062 0.386719 2.078125 l -0.015625 -0.003906 c 0.636718 1.988281 3.78125 5.082031 5.625 6.929687 h 0.003906 v -0.003906 c 1.507812 -1.507812 3.878906 -3.925781 5.046875 -5.753906 c 0.261719 -0.414063 0.46875 -0.808594 0.585937 -1.171875 l -0.019531 0.003906 c 0.25 -0.664063 0.382813 -1.367187 0.386719 -2.078125 c 0 -3.3125 -2.683594 -6 -6 -6 z m 0 3.691406 c 1.273438 0 2.308594 1.035156 2.308594 2.308594 s -1.035156 2.308594 -2.308594 2.308594 c -1.273438 -0.003906 -2.304688 -1.035156 -2.304688 -2.308594 c -0.003906 -1.273438 1.03125 -2.304688 2.304688 -2.308594 z m 0 0"
-        fill="#2e3436"
-      />
-    </svg>
-  );
-};