@kolkrabbi/kol-component 0.323.0 → 0.325.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.323.0",
+  "version": "0.325.0",
   "description": "The core component library",
   "license": "MIT",
   "type": "module",
@@ -26,8 +26,8 @@
     "embla-carousel-react": "^8.6.0",
     "pdfjs-dist": "^6.3.289",
     "react-syntax-highlighter": "^16.1.1",
-    "@kolkrabbi/kol-growth": "^0.4.0",
     "@kolkrabbi/kol-search": "^0.3.0",
+    "@kolkrabbi/kol-growth": "^0.4.0",
     "@kolkrabbi/kol-markdown": "^0.2.0"
   },
   "peerDependencies": {
@@ -39,7 +39,7 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-icons": "^0.55.0"
+    "@kolkrabbi/kol-icons": "^0.56.0"
   },
   "files": [
     "src",

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>
   )
 }
 

package/src/molecules/SectionText.jsx

@@ -37,7 +37,8 @@
  *                                 stamps `reveal` on each part; nothing animates in the DS)
  * @param {object}    slotStyle    inline style per slot — `{ headline: { '--reveal-delay': '0.1s' } }`
  * @param {string}    className    extra classes on the block
- * @param {'page'|'app'|'section'|'content'|'document'} [level]  THE HEADER LEVELS (2026-10-22, user: *"rename PageHeader to
+ * @param {'page'|'app'|'section'|'content'|'document'} [variant]  THE HEADER VARIANTS (was `level` until 2026-10-31 — user: `variant`
+ *                    is the only word for a variant; `level` stays a deprecated alias on the retirement ledger) (2026-10-22, user: *"rename PageHeader to
  *                    something that describes section text elements"* — PageHeader is now an alias of this). A
  *                    level fills the role defaults; any explicit prop still wins. page = h1 display-01 over
  *                    `.kol-header-lede` — the hero; app = h1 display-01 at 46/60 over `.kol-header-lede-app`;
@@ -119,11 +120,14 @@ export default function SectionText({
      (PageHeader's `--kol-page-header-mb`). `slotStyle` reaches the slots; this
      was the one box it could not reach. */
   style,
+  variant: variantProp,
+  /* deprecated alias of `variant` (2026-10-31) */
   level,
   media,
 }) {
   /* a LEVEL fills the header defaults; an explicit prop always wins */
-  const L = level ? SECTION_TEXT_LEVELS[level] ?? SECTION_TEXT_LEVELS.page : null
+  const variant = variantProp ?? level
+  const L = variant ? SECTION_TEXT_LEVELS[variant] ?? SECTION_TEXT_LEVELS.page : null
   const Headline = headlineAs ?? L?.as ?? (L ? 'h1' : 'h2')
   if (L) {
     headlineClass = `text-fg-96 ${headlineClass ?? L.title}`