@kolkrabbi/kol-component 0.324.0 → 0.325.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.324.0",
+  "version": "0.325.0",
   "description": "The core component library",
   "license": "MIT",
   "type": "module",

package/src/molecules/Menu.jsx

@@ -76,7 +76,7 @@ function Rows({ items }) {
         <Rows items={it.items} />
       </MenuFlyout>
     ) : (
-      <MenuRow disabled={it.disabled} rowClass={cls} onClick={it.onClick} iconLeft={icon} shortcut={trailingOf(it)}>
+      <MenuRow href={it.href} disabled={it.disabled} rowClass={cls} onClick={it.onClick} iconLeft={icon} shortcut={trailingOf(it)}>
         {it.label}
       </MenuRow>
     )

package/src/molecules/MenuItem.jsx

@@ -134,15 +134,17 @@ const ROW_BY_SIZE = { xs: 'kol-mono-8 px-2 h-5', sm: 'kol-helper-12 px-2 h-8', m
 /* `flex`, not `inline-flex` (MenuDropdownItemBlockRow, kol-fxr 2026-10-13): as bare children of a
  * content-sized (`w-max`) panel, inline rows measured as ONE line — five starters ≈ 795px. A block
  * row still fills a fixed panel through `w-full` and lets a content-sized one hug its longest label. */
-export function MenuRow({ onClick, onPointerEnter, onPointerLeave, disabled, prefix, iconLeft, shortcut, hover = true, height, size = 'sm', rowClass, children }) {
+export function MenuRow({ href, onClick, onPointerEnter, onPointerLeave, disabled, prefix, iconLeft, shortcut, hover = true, height, size = 'sm', rowClass, children }) {
+  /* `href` makes the row a real link — cmd/ctrl-click and middle-click open a new tab (DocumentHeader, 2026-10-31);
+   * a plain click still runs `onClick` (the app's router), which may preventDefault */
+  const Row = href && !disabled ? 'a' : 'button'
   return (
-    <button
-      type="button"
+    <Row
+      {...(Row === 'a' ? { href, onClick: (e) => { if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) return; onClick?.(e) } } : { type: 'button', onClick })}
       data-menu-item
-      onClick={onClick}
       onPointerEnter={onPointerEnter}
       onPointerLeave={onPointerLeave}
-      disabled={disabled}
+      disabled={Row === 'button' ? disabled : undefined}
       role="menuitem"
       style={height != null ? { height } : undefined}
       className={`kol-menu-btn w-full ${rowClass ?? ROW_BY_SIZE[size] ?? ROW_BY_SIZE.sm} shrink-0 flex items-center gap-2 text-body ${hover ? 'hover:text-emphasis' : ''} disabled:opacity-40 disabled:cursor-not-allowed text-left`}
@@ -155,7 +157,7 @@ export function MenuRow({ onClick, onPointerEnter, onPointerLeave, disabled, pre
         * zero layout shift (MenuItemDescenderClip, 2026-08-12). */}
       <span className="flex-1 truncate leading-normal">{children}</span>
       {shortcut && <span className="kol-helper-10 text-emphasis shrink-0 inline-flex items-center">{shortcut}</span>}
-    </button>
+    </Row>
   )
 }