@jsenv/navi 0.12.13 → 0.12.14

package/dist/jsenv_navi.js

@@ -10074,6 +10074,44 @@ const renderActionableComponent = (props, {
   });
 };
 
+/**
+ * Merges a component's base className with className received from props.
+ *
+ * ```jsx
+ * const MyButton = ({ className, children }) => (
+ *   <button className={withPropsClassName("btn", className)}>
+ *     {children}
+ *   </button>
+ * );
+ *
+ * // Usage:
+ * <MyButton className="primary large" /> // Results in "btn primary large"
+ * <MyButton /> // Results in "btn"
+ * ```
+ *
+ * @param {string} baseClassName - The component's base CSS class name
+ * @param {string} [classNameFromProps] - Additional className from props (optional)
+ * @returns {string} The merged className string
+ */
+const withPropsClassName = (baseClassName, classNameFromProps) => {
+  if (!classNameFromProps) {
+    return baseClassName;
+  }
+
+  // Trim and normalize whitespace from the props className
+  const trimmedPropsClassName = classNameFromProps.trim();
+  if (!trimmedPropsClassName) {
+    return baseClassName;
+  }
+
+  // Normalize multiple spaces to single spaces and combine
+  const normalizedPropsClassName = trimmedPropsClassName.replace(/\s+/g, " ");
+  if (!baseClassName) {
+    return normalizedPropsClassName;
+  }
+  return `${baseClassName} ${normalizedPropsClassName}`;
+};
+
 /**
  * Processes component props to extract and generate styles for layout, spacing, alignment, expansion, and typography.
  * Returns remaining props and styled objects based on configuration.
@@ -10429,13 +10467,7 @@ const CONTENT_PROPS = {
       }
       return { justifyContent: value };
     }
-    if (layout === "inline-block" || layout === "table-cell") {
-      if (value === "start") {
-        return undefined; // this is the default
-      }
-      return { textAlign: value };
-    }
-    return undefined;
+    return { textAlign: value };
   },
   contentAlignY: (value, { layout }) => {
     if (layout === "row" || layout === "inline-row") {
@@ -10452,13 +10484,7 @@ const CONTENT_PROPS = {
       }
       return { alignItems: value };
     }
-    if (layout === "inline-block" || layout === "table-cell") {
-      if (value === "start") {
-        return undefined;
-      }
-      return { verticalAlign: value };
-    }
-    return undefined;
+    return { verticalAlign: value };
   },
   contentSpacing: (value, { layout }) => {
     if (
@@ -11138,44 +11164,6 @@ const updateStyle = (element, style) => {
   return;
 };
 
-/**
- * Merges a component's base className with className received from props.
- *
- * ```jsx
- * const MyButton = ({ className, children }) => (
- *   <button className={withPropsClassName("btn", className)}>
- *     {children}
- *   </button>
- * );
- *
- * // Usage:
- * <MyButton className="primary large" /> // Results in "btn primary large"
- * <MyButton /> // Results in "btn"
- * ```
- *
- * @param {string} baseClassName - The component's base CSS class name
- * @param {string} [classNameFromProps] - Additional className from props (optional)
- * @returns {string} The merged className string
- */
-const withPropsClassName = (baseClassName, classNameFromProps) => {
-  if (!classNameFromProps) {
-    return baseClassName;
-  }
-
-  // Trim and normalize whitespace from the props className
-  const trimmedPropsClassName = classNameFromProps.trim();
-  if (!trimmedPropsClassName) {
-    return baseClassName;
-  }
-
-  // Normalize multiple spaces to single spaces and combine
-  const normalizedPropsClassName = trimmedPropsClassName.replace(/\s+/g, " ");
-  if (!baseClassName) {
-    return normalizedPropsClassName;
-  }
-  return `${baseClassName} ${normalizedPropsClassName}`;
-};
-
 installImportMetaCss(import.meta);import.meta.css = /* css */`
   [data-layout-inline] {
     display: inline;
@@ -13485,12 +13473,121 @@ const useAutoFocus = (
   }, []);
 };
 
+const useInitialTextSelection = (ref, textSelection) => {
+  const deps = [];
+  if (Array.isArray(textSelection)) {
+    deps.push(...textSelection);
+  } else {
+    deps.push(textSelection);
+  }
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el || !textSelection) {
+      return;
+    }
+    const range = document.createRange();
+    const selection = window.getSelection();
+    if (Array.isArray(textSelection)) {
+      if (textSelection.length === 2) {
+        const [start, end] = textSelection;
+        if (typeof start === "number" && typeof end === "number") {
+          // Format: [0, 10] - character indices
+          selectByCharacterIndices(el, range, start, end);
+        } else if (typeof start === "string" && typeof end === "string") {
+          // Format: ["Click on the", "button to return"] - text strings
+          selectByTextStrings(el, range, start, end);
+        }
+      }
+    } else if (typeof textSelection === "string") {
+      // Format: "some text" - select the entire string occurrence
+      selectSingleTextString(el, range, textSelection);
+    }
+    selection.removeAllRanges();
+    selection.addRange(range);
+  }, deps);
+};
+const selectByCharacterIndices = (element, range, startIndex, endIndex) => {
+  const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);
+  let currentIndex = 0;
+  let startNode = null;
+  let startOffset = 0;
+  let endNode = null;
+  let endOffset = 0;
+  while (walker.nextNode()) {
+    const textContent = walker.currentNode.textContent;
+    const nodeLength = textContent.length;
+
+    // Check if start position is in this text node
+    if (!startNode && currentIndex + nodeLength > startIndex) {
+      startNode = walker.currentNode;
+      startOffset = startIndex - currentIndex;
+    }
+
+    // Check if end position is in this text node
+    if (currentIndex + nodeLength >= endIndex) {
+      endNode = walker.currentNode;
+      endOffset = endIndex - currentIndex;
+      break;
+    }
+    currentIndex += nodeLength;
+  }
+  if (startNode && endNode) {
+    range.setStart(startNode, startOffset);
+    range.setEnd(endNode, endOffset);
+  }
+};
+const selectSingleTextString = (element, range, text) => {
+  const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);
+  while (walker.nextNode()) {
+    const textContent = walker.currentNode.textContent;
+    const index = textContent.indexOf(text);
+    if (index !== -1) {
+      range.setStart(walker.currentNode, index);
+      range.setEnd(walker.currentNode, index + text.length);
+      return;
+    }
+  }
+};
+const selectByTextStrings = (element, range, startText, endText) => {
+  const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);
+  let startNode = null;
+  let endNode = null;
+  let foundStart = false;
+  while (walker.nextNode()) {
+    const textContent = walker.currentNode.textContent;
+    if (!foundStart && textContent.includes(startText)) {
+      startNode = walker.currentNode;
+      foundStart = true;
+    }
+    if (foundStart && textContent.includes(endText)) {
+      endNode = walker.currentNode;
+      break;
+    }
+  }
+  if (startNode && endNode) {
+    const startOffset = startNode.textContent.indexOf(startText);
+    const endOffset = endNode.textContent.indexOf(endText) + endText.length;
+    range.setStart(startNode, startOffset);
+    range.setEnd(endNode, endOffset);
+  }
+};
+
 installImportMetaCss(import.meta);import.meta.css = /* css */`
+  *[data-navi-space] {
+    /* user-select: none; */
+  }
+
   .navi_text {
     position: relative;
     color: inherit;
   }
 
+  .navi_text_overflow {
+    flex-wrap: wrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
   .navi_text_overflow_wrapper {
     display: flex;
     width: 0;
@@ -13504,6 +13601,59 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
     overflow: hidden;
   }
 `;
+const INSERTED_SPACE = jsx("span", {
+  "data-navi-space": "",
+  children: " "
+});
+const applyContentSpacingOnTextChildren = (children, contentSpacing) => {
+  if (contentSpacing === "pre") {
+    return children;
+  }
+  if (!children) {
+    return children;
+  }
+  const childArray = toChildArray(children);
+  const childCount = childArray.length;
+  if (childCount <= 1) {
+    return children;
+  }
+
+  // Helper function to check if a value ends with whitespace
+  const endsWithWhitespace = value => {
+    if (typeof value === "string") {
+      return /\s$/.test(value);
+    }
+    return false;
+  };
+
+  // Helper function to check if a value starts with whitespace
+  const startsWithWhitespace = value => {
+    if (typeof value === "string") {
+      return /^\s/.test(value);
+    }
+    return false;
+  };
+  const separator = contentSpacing === undefined || contentSpacing === " " ? INSERTED_SPACE : contentSpacing;
+  const childrenWithGap = [];
+  let i = 0;
+  while (true) {
+    const child = childArray[i];
+    childrenWithGap.push(child);
+    i++;
+    if (i === childCount) {
+      break;
+    }
+
+    // Check if we should skip adding contentSpacing
+    const currentChild = childArray[i - 1];
+    const nextChild = childArray[i];
+    const shouldSkipSpacing = endsWithWhitespace(currentChild) || startsWithWhitespace(nextChild);
+    if (!shouldSkipSpacing) {
+      childrenWithGap.push(separator);
+    }
+  }
+  return childrenWithGap;
+};
 const OverflowPinnedElementContext = createContext(null);
 const Text = props => {
   const {
@@ -13525,8 +13675,6 @@ const Text = props => {
   });
 };
 const TextOverflow = ({
-  as = "div",
-  contentSpacing = " ",
   noWrap,
   pre = !noWrap,
   children,
@@ -13534,21 +13682,20 @@ const TextOverflow = ({
 }) => {
   const [OverflowPinnedElement, setOverflowPinnedElement] = useState(null);
   return jsx(Text, {
-    ...rest,
-    as: as,
-    box: true,
-    expandX: true,
+    as: "div",
     pre: pre,
     nowWrap: noWrap,
+    ...rest,
+    className: "navi_text_overflow",
+    expandX: true,
     contentSpacing: "pre",
-    style: "text-overflow: ellipsis; overflow: hidden; flex-wrap: wrap;",
     children: jsxs("span", {
       className: "navi_text_overflow_wrapper",
-      children: [jsx("span", {
-        className: "navi_text_overflow_text",
-        children: jsx(OverflowPinnedElementContext.Provider, {
-          value: setOverflowPinnedElement,
-          children: applyContentSpacingOnTextChildren(children, contentSpacing)
+      children: [jsx(OverflowPinnedElementContext.Provider, {
+        value: setOverflowPinnedElement,
+        children: jsx(Text, {
+          className: "navi_text_overflow_text",
+          children: children
         })
       }), OverflowPinnedElement]
     })
@@ -13574,80 +13721,22 @@ const TextOverflowPinned = ({
   return text;
 };
 const TextBasic = ({
-  as = "span",
   contentSpacing = " ",
+  selectRange,
   children,
   ...rest
 }) => {
-  const text = jsx(Box, {
-    ...rest,
-    baseClassName: "navi_text",
-    as: as,
-    children: applyContentSpacingOnTextChildren(children, contentSpacing)
-  });
-  return text;
-};
-const Paragraph = ({
-  contentSpacing = " ",
-  marginTop = "md",
-  children,
-  ...rest
-}) => {
+  const defaultRef = useRef();
+  const ref = rest.ref || defaultRef;
+  useInitialTextSelection(ref, selectRange);
   return jsx(Box, {
+    ref: ref,
+    as: "span",
     ...rest,
-    as: "p",
-    marginTop: marginTop,
+    baseClassName: "navi_text",
     children: applyContentSpacingOnTextChildren(children, contentSpacing)
   });
 };
-const applyContentSpacingOnTextChildren = (children, contentSpacing) => {
-  if (contentSpacing === "pre") {
-    return children;
-  }
-  if (!children) {
-    return children;
-  }
-  const childArray = toChildArray(children);
-  const childCount = childArray.length;
-  if (childCount <= 1) {
-    return children;
-  }
-
-  // Helper function to check if a value ends with whitespace
-  const endsWithWhitespace = value => {
-    if (typeof value === "string") {
-      return /\s$/.test(value);
-    }
-    return false;
-  };
-
-  // Helper function to check if a value starts with whitespace
-  const startsWithWhitespace = value => {
-    if (typeof value === "string") {
-      return /^\s/.test(value);
-    }
-    return false;
-  };
-  const childrenWithGap = [];
-  let i = 0;
-  while (true) {
-    const child = childArray[i];
-    childrenWithGap.push(child);
-    i++;
-    if (i === childCount) {
-      break;
-    }
-
-    // Check if we should skip adding contentSpacing
-    const currentChild = childArray[i - 1];
-    const nextChild = childArray[i];
-    const shouldSkipSpacing = endsWithWhitespace(currentChild) || startsWithWhitespace(nextChild);
-    if (!shouldSkipSpacing) {
-      childrenWithGap.push(contentSpacing);
-    }
-  }
-  return childrenWithGap;
-};
 
 installImportMetaCss(import.meta);import.meta.css = /* css */`
   .navi_icon {
@@ -13657,6 +13746,8 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
 
   .navi_icon_char_slot {
     opacity: 0;
+    cursor: default;
+    user-select: none;
   }
   .navi_icon_foreground {
     position: absolute;
@@ -13741,6 +13832,7 @@ const Icon = ({
     ...ariaProps,
     box: box,
     className: withPropsClassName("navi_icon", className),
+    contentSpacing: "pre",
     "data-icon-char": "",
     "data-width": width,
     "data-height": height,
@@ -13751,6 +13843,7 @@ const Icon = ({
     }), jsx("span", {
       className: "navi_icon_foreground",
       children: jsx(Text, {
+        contentSpacing: "pre",
         children: innerChildren
       })
     })]
@@ -13898,7 +13991,7 @@ const LinkPlain = props => {
     blankTargetIcon,
     anchorIcon,
     icon,
-    contentSpacing = " ",
+    contentSpacing,
     children,
     ...rest
   } = props;
@@ -13950,7 +14043,8 @@ const LinkPlain = props => {
     rel: innerRel,
     target: innerTarget === "_self" ? undefined : target,
     "aria-busy": loading,
-    inert: disabled
+    inert: disabled,
+    contentSpacing: "pre"
     // Visual
     ,
     baseClassName: "navi_link",
@@ -16661,7 +16755,10 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
   }
   .navi_button_content {
     position: relative;
+    display: inherit;
     box-sizing: border-box;
+    width: 100%;
+    height: 100%;
     padding-top: var(
       --button-padding-top,
       var(--button-padding-y, var(--button-padding, 1px))
@@ -16678,6 +16775,8 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
       --button-padding-left,
       var(--button-padding-x, var(--button-padding, 6px))
     );
+    align-items: inherit;
+    justify-content: inherit;
     color: var(--x-button-color);
     background-color: var(--x-button-background-color);
     border-width: var(--x-button-outer-width);
@@ -16824,7 +16923,6 @@ const ButtonBasic = props => {
     autoFocus,
     // visual
     discrete,
-    contentSpacing = " ",
     children,
     ...rest
   } = props;
@@ -16835,13 +16933,11 @@ const ButtonBasic = props => {
   const innerLoading = loading || contextLoading && contextLoadingElement === ref.current;
   const innerReadOnly = readOnly || contextReadOnly || innerLoading;
   const innerDisabled = disabled || contextDisabled;
-  const innerChildren = applyContentSpacingOnTextChildren(children, contentSpacing);
   const renderButtonContent = buttonProps => {
-    return jsxs(Box, {
+    return jsxs(Text, {
       ...buttonProps,
-      as: "span",
       className: "navi_button_content",
-      children: [innerChildren, jsx("span", {
+      children: [children, jsx("span", {
         className: "navi_button_shadow"
       })]
     });
@@ -21338,10 +21434,6 @@ const useSignalSync = (value, initialValue = value) => {
   return signal;
 };
 
-const FontSizedSvg = () => {};
-
-const IconAndText = () => {};
-
 installImportMetaCss(import.meta);import.meta.css = /* css */`
   .svg_mask_content * {
     fill: black !important;
@@ -21435,11 +21527,11 @@ const useContrastingColor = (ref) => {
 
 installImportMetaCss(import.meta);import.meta.css = /* css */`
   @layer navi {
-    .navi_badge {
+    .navi_badge_count {
       --border-radius: 1em;
     }
   }
-  .navi_badge {
+  .navi_badge_count {
     display: inline-block;
     box-sizing: border-box;
     min-width: 1.5em;
@@ -21495,34 +21587,21 @@ const BadgeCount = ({
   return jsx(Text, {
     ...props,
     ref: ref,
-    className: "navi_badge",
+    className: "navi_badge_count",
     bold: bold,
     managedByCSSVars: BadgeManagedByCSSVars,
+    contentSpacing: "pre",
     children: displayValue
   });
 };
 
-const Code = ({
-  contentSpacing = " ",
-  children,
-  ...rest
-}) => {
-  return jsx(Box, {
-    ...rest,
-    as: "code",
-    children: applyContentSpacingOnTextChildren(children, contentSpacing)
-  });
-};
-
-const Image = props => {
-  return jsx(Box, {
+const Code = props => {
+  return jsx(Text, {
     ...props,
-    as: "img"
+    as: "code"
   });
 };
 
-const LinkWithIcon = () => {};
-
 installImportMetaCss(import.meta);import.meta.css = /* css */`
   @layer navi {
     .navi_message_box {
@@ -21615,19 +21694,19 @@ const MessageBoxReportTitleChildContext = createContext();
 const MessageBox = ({
   level = "info",
   padding = "sm",
-  contentSpacing = " ",
   leftStripe,
   children,
+  contentSpacing,
   ...rest
 }) => {
   const [hasTitleChild, setHasTitleChild] = useState(false);
   const innerLeftStripe = leftStripe === undefined ? hasTitleChild : leftStripe;
-  return jsx(Box, {
+  return jsx(Text, {
     as: "div",
     role: level === "info" ? "status" : "alert",
     "data-left-stripe": innerLeftStripe ? "" : undefined,
     ...rest,
-    baseClassName: "navi_message_box",
+    className: withPropsClassName("navi_message_box", rest.className),
     padding: padding,
     pseudoClasses: MessageBoxPseudoClasses,
     basePseudoState: {
@@ -21646,38 +21725,46 @@ const MessageBox = ({
   });
 };
 
-const Svg = props => {
-  return jsx(Box, {
+const Paragraph = props => {
+  return jsx(Text, {
+    marginTop: "md",
     ...props,
-    as: "svg"
+    as: "p",
+    ...props
   });
 };
 
-const Title = ({
-  as,
-  bold = true,
-  contentSpacing = " ",
-  color,
-  children,
-  marginTop,
-  marginBottom,
-  ...rest
-}) => {
+const Title = props => {
   const messageBoxLevel = useContext(MessageBoxLevelContext);
   const reportTitleToMessageBox = useContext(MessageBoxReportTitleChildContext);
-  const innerColor = color === undefined ? messageBoxLevel ? `var(--x-color)` : undefined : color;
-  const innerAs = as === undefined ? messageBoxLevel ? "h4" : "h1" : as;
   reportTitleToMessageBox?.(true);
-  const innerMarginTop = marginTop === undefined ? messageBoxLevel ? "0" : undefined : marginTop;
-  const innerMarginBottom = marginBottom === undefined ? messageBoxLevel ? "8px" : undefined : marginBottom;
+  return jsx(Text, {
+    bold: true,
+    as: messageBoxLevel ? "h4" : "h1",
+    marginTop: messageBoxLevel ? "0" : undefined,
+    marginBottom: messageBoxLevel ? "sm" : undefined,
+    color: messageBoxLevel ? `var(--x-color)` : undefined,
+    ...props
+  });
+};
+
+const FontSizedSvg = () => {};
+
+const IconAndText = () => {};
+
+const LinkWithIcon = () => {};
+
+const Image = props => {
   return jsx(Box, {
-    ...rest,
-    as: innerAs,
-    bold: bold,
-    color: innerColor,
-    marginTop: innerMarginTop,
-    marginBottom: innerMarginBottom,
-    children: applyContentSpacingOnTextChildren(children, contentSpacing)
+    ...props,
+    as: "img"
+  });
+};
+
+const Svg = props => {
+  return jsx(Box, {
+    ...props,
+    as: "svg"
   });
 };