@kolkrabbi/kol-component 0.327.0 → 0.328.0

package/package.json

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

package/src/organisms/NavRail.jsx

@@ -82,6 +82,7 @@ import NavRailSite from './NavRailSite.jsx'
  * EXPANDS (its rows open under it in place) and COLLAPSES. No other words, in code or docs.
  *
  * @param {'app'|'site'|'workshop'} preset  which rail (default `app`); `variant="site"` is the old spelling of `preset="site"`
+ * @param {'top'} variant  `top` — the horizontal top rail (TopRail): logomark · items · `actions` (the right slot)
  * @param {Array}  items        `{ icon, path, label, sub?: [{ icon?, path, label }] }`
  *   a section (`sub`) with `to` is a FOLDER NOTE: its icon and label open `to`, its chevron expands or enters
  * @param {Array}  bottomItems  pinned below the rule (Settings)
@@ -133,8 +134,8 @@ const openWidth = () => {
  * a snap reports its target once at the start of the tween (as before) — the sub rows render only while it is true,
  * because closed they would still take their height and push the rungs below them.
  *
- * ONE AXIS: the gesture reads `pos` and `size` only. A side rail reads x and width; a top rail (variant="top", not
- * built) swaps them for y and height — nothing else in here assumes a side. */
+ * ONE AXIS: the gesture reads `pos` and `size` only. A side rail reads x and width; a top rail (variant="top" — built
+ * 2026-10-31 as `TopRail`, without a drag) would swap them for y and height — nothing else in here assumes a side. */
 const RAIL_MAX = 560
 const RAIL_LABELS = 160
 function useRailDrag(railRef, grabRef, onSnap, snapRef, enabled = true) {
@@ -321,6 +322,7 @@ export const RAIL_PRESETS = {
 export function registerRailPreset(name, Component) { RAIL_PRESETS[name] = { ...(RAIL_PRESETS[name] ?? {}), component: Component } }
 
 export default function NavRail({ variant, preset, ...props }) {
+  if (variant === 'top') return <TopRail {...props} />
   const name = preset ?? (variant === 'site' ? 'site' : 'app')
   if (name === 'app') return <AppRail {...props} sections={props.sections ?? RAIL_PRESETS.app.sections} />
   const Named = RAIL_PRESETS[name]?.component
@@ -328,6 +330,37 @@ export default function NavRail({ variant, preset, ...props }) {
   return <Named {...props} />
 }
 
+/* THE TOP RAIL (`variant="top"`, 2026-10-31 — user: *"it would have to be a TopNavRail? and completely rebuilt with Rail
+ * Component? so we wouldnt ever import this, but make something in its stead"*). Replaces Atlas's /lab header ("Lab bar"
+ * in Figma): the rail's own parts laid out on a row, 48 tall — the mark and the app name (the side rail's logomark row),
+ * the items as rail rows (a nav Button rung + the rail label), then `actions` on the right (views / menus — a `Menu` with
+ * a `MenuTrigger`). Same type and inks as the side rail; no grab, no drag. A row's `sub` is not drawn here. */
+function TopRail({ items = [], logomark, currentPath = '', onNavigate, iconComponent, actions, hidden = false, className = '' }) {
+  if (hidden) return null
+  return (
+    <header className={`kol-shell-rail kol-shell-rail--top bg-surface-primary sticky top-0 flex h-12 w-full items-center gap-6 px-4 border-b border-fg-08 ${className}`.trim()}>
+      {logomark && (
+        <div onClick={() => onNavigate?.('/')} className="text-oq-96 cursor-pointer flex items-center gap-3 shrink-0">
+          {logomark.svgUrl && <VectorLoader src={logomark.svgUrl} size={20} />}
+          <span className="kol-helper-12 uppercase">{logomark.title}</span>
+        </div>
+      )}
+      <nav className="flex min-w-0 flex-1 items-center gap-2 overflow-x-auto">
+        {items.map(({ icon, path, label }) => {
+          const active = path === '/' ? currentPath === '/' : currentPath.startsWith(path)
+          return (
+            <div key={path} className="flex items-center gap-2 shrink-0 cursor-pointer" onClick={() => onNavigate?.(path)}>
+              {icon && <Button iconOnly={icon} iconSize={RAIL_ROW.glyph} iconComponent={iconComponent} variant="nav" size="md" aria-current={active ? 'page' : undefined} aria-label={label} />}
+              <span className={`${RAIL_ROW.label} text-oq-96`}>{label}</span>
+            </div>
+          )
+        })}
+      </nav>
+      {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
+    </header>
+  )
+}
+
 function AppRail({
   items = [],
   bottomItems = [],