@lateralus-ai/shipping-ui 2.0.0-dev.15 → 2.0.0-dev.17

package/dist/patterns/Sidebar/sidebar-styles.d.ts

@@ -15,7 +15,8 @@ export declare const sidebarSectionShellCollapsed = "relative box-border flex w-
 export declare const sidebarUnreadOverlay = "pointer-events-none absolute left-0 top-0 size-6";
 /** Figma unread dot — ~6px, top-right of the 24px indicator overlay. */
 export declare const sidebarUnreadDot = "absolute right-0 top-0 size-1.5 rounded-full bg-[#802c20]";
-export declare const sidebarSectionContent = "flex w-full min-w-0 items-center gap-2 pl-1";
+/** Icon + label row inside a section shell — no extra inset (shell already has p-2). */
+export declare const sidebarSectionContent = "flex w-full min-w-0 items-center gap-2";
 export declare const sidebarSectionIconClass = "shrink-0 [&>svg]:size-4";
 export declare const sidebarSectionLabelClass = "min-w-0 flex-1 truncate text-caption-2 tracking-[0.01em]";
 /** Figma sidebar icon buttons — transparent idle, grey hover (no white fill). */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lateralus-ai/shipping-ui",
-  "version": "2.0.0-dev.15",
+  "version": "2.0.0-dev.17",
   "description": "Shared UI theme and components for Lateralus shipping applications",
   "main": "dist/index.cjs",
   "module": "dist/index.esm.js",

package/src/components/PageHeader.tsx

@@ -0,0 +1,132 @@
+import {
+  type ComponentPropsWithoutRef,
+  type MouseEvent,
+  type ReactNode,
+} from "react";
+import { cn } from "../utils/cn";
+
+export type PageHeaderCrumb = {
+  label: string;
+  /** Renders a real `<a href>` so native browser controls work. */
+  href: string;
+  /**
+   * Optional SPA handler. Callers should `preventDefault` only for unmodified
+   * primary clicks; modifier / middle-click keep native anchor behavior.
+   */
+  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+};
+
+export type PageHeaderProps = {
+  /** Leading icon (Figma 24×24). */
+  icon?: ReactNode;
+  /** Standard title, or current (last) segment when `crumbs` is set. */
+  title: ReactNode;
+  /**
+   * Parent breadcrumb links. When present, renders Nested: icon + parents + `/`
+   * + current `title` (non-link).
+   */
+  crumbs?: PageHeaderCrumb[];
+  /** Right-hand actions slot (buttons, menus, etc.). */
+  actions?: ReactNode;
+  className?: string;
+};
+
+export type PageHeaderShellProps = ComponentPropsWithoutRef<"div">;
+
+export type PageHeaderBodyProps = ComponentPropsWithoutRef<"div">;
+
+/**
+ * Page title row — Figma `Header` (389:8850).
+ * Variants: Standard (icon + title) | Nested (icon + crumb trail).
+ */
+function PageHeaderRoot({
+  icon,
+  title,
+  crumbs,
+  actions,
+  className,
+}: PageHeaderProps) {
+  const isNested = Boolean(crumbs?.length);
+
+  return (
+    <div
+      data-variant={isNested ? "nested" : "standard"}
+      className={cn(
+        "flex w-full shrink-0 items-center justify-between gap-4",
+        "min-h-10",
+        className,
+      )}
+    >
+      <div className="flex min-w-0 flex-1 items-center gap-2">
+        {icon != null && (
+          <span className="inline-flex size-6 shrink-0 items-center justify-center [&>svg]:size-6">
+            {icon}
+          </span>
+        )}
+
+        {isNested ? (
+          <nav aria-label="Breadcrumb" className="min-w-0">
+            <ol className="flex min-w-0 flex-wrap items-center gap-2">
+              {crumbs!.map((crumb) => (
+                <li key={`${crumb.href}-${crumb.label}`} className="contents">
+                  <a
+                    href={crumb.href}
+                    onClick={crumb.onClick}
+                    className="truncate text-caption-1-em text-display-on-light-secondary transition-colors hover:text-display-on-light-primary"
+                  >
+                    {crumb.label}
+                  </a>
+                  <span
+                    aria-hidden
+                    className="text-caption-1-em text-display-on-light-secondary"
+                  >
+                    /
+                  </span>
+                </li>
+              ))}
+              <li
+                aria-current="page"
+                className="min-w-0 truncate text-caption-1-em text-display-on-light-primary"
+              >
+                {title}
+              </li>
+            </ol>
+          </nav>
+        ) : (
+          <h1 className="min-w-0 truncate text-caption-1-em text-display-on-light-primary">
+            {title}
+          </h1>
+        )}
+      </div>
+
+      {actions != null && (
+        <div className="flex shrink-0 items-center gap-2">{actions}</div>
+      )}
+    </div>
+  );
+}
+
+/** Flex column shell — pin header, scroll body (avoids brittle CSS sticky). */
+function PageHeaderShell({ className, ...props }: PageHeaderShellProps) {
+  return (
+    <div
+      className={cn("flex h-full min-h-0 flex-col", className)}
+      {...props}
+    />
+  );
+}
+
+/** Scrollable page content under a pinned PageHeader. */
+function PageHeaderBody({ className, ...props }: PageHeaderBodyProps) {
+  return (
+    <div
+      className={cn("min-h-0 flex-1 overflow-y-auto", className)}
+      {...props}
+    />
+  );
+}
+
+export const PageHeader = Object.assign(PageHeaderRoot, {
+  Shell: PageHeaderShell,
+  Body: PageHeaderBody,
+});

package/src/components/index.ts

@@ -18,6 +18,13 @@ export {
   type TabsAppearance,
 } from "./Tabs";
 export { Header, type HeaderProps, type HeaderVariant } from "./Header";
+export {
+  PageHeader,
+  type PageHeaderProps,
+  type PageHeaderCrumb,
+  type PageHeaderShellProps,
+  type PageHeaderBodyProps,
+} from "./PageHeader";
 export { Entry, type EntryProps, type EntryType, type EntryState, type EntryVariant } from "./Entry";
 export { EmptyState, type EmptyStateProps } from "./EmptyState";
 export {

package/src/index.ts

@@ -19,6 +19,7 @@ export {
   TabsTrigger,
   TabsContent,
   Header,
+  PageHeader,
   Entry,
   EmptyState,
   Modal,
@@ -59,6 +60,10 @@ export type {
   TabsAppearance,
   HeaderProps,
   HeaderVariant,
+  PageHeaderProps,
+  PageHeaderCrumb,
+  PageHeaderShellProps,
+  PageHeaderBodyProps,
   EntryProps,
   EntryType,
   EntryState,

package/src/patterns/Sidebar/CollapsibleNavGroup.tsx

@@ -45,7 +45,6 @@ export const CollapsibleNavGroup = ({
       href={href}
       label={label}
       icon={icon}
-      tall
       onNavigate={onNavigate}
       trailing={
         <IconButton

package/src/patterns/Sidebar/SidebarAction.tsx

@@ -4,9 +4,10 @@ import { cn } from "../../utils/cn";
 import {
   sidebarLinkActive,
   sidebarLinkIdle,
-  sidebarRowClass,
   sidebarRowInteractiveHover,
   sidebarSectionIconClass,
+  sidebarSectionShell,
+  sidebarSectionShellCollapsed,
 } from "./sidebar-styles";
 
 export type SidebarActionProps = {
@@ -33,20 +34,23 @@ export const SidebarAction = ({
       type="button"
       onClick={onClick}
       aria-label={label}
-      className={sidebarRowClass(
-        cn(
-          "cursor-pointer text-left",
-          active ? sidebarLinkActive : sidebarLinkIdle,
-          !active && sidebarRowInteractiveHover,
-          collapsed ? "justify-center" : "gap-2",
-          className,
-        ),
+      className={cn(
+        collapsed ? sidebarSectionShellCollapsed : sidebarSectionShell,
+        "cursor-pointer text-left",
+        active ? sidebarLinkActive : sidebarLinkIdle,
+        !active && sidebarRowInteractiveHover,
+        !collapsed && "gap-2",
+        className,
       )}
       data-active={active}
       data-collapsed={collapsed}
     >
       {icon && <span className={sidebarSectionIconClass}>{icon}</span>}
-      {!collapsed && <span className="min-w-0 flex-1 truncate">{label}</span>}
+      {!collapsed && (
+        <span className="min-w-0 flex-1 truncate text-caption-2 tracking-[0.01em]">
+          {label}
+        </span>
+      )}
     </button>
   );
 

package/src/patterns/Sidebar/SidebarEntry.tsx

@@ -75,9 +75,7 @@ export const SidebarEntry = ({
       />
 
       <div className="pointer-events-none relative z-10 flex min-w-0 flex-1 items-center gap-2 text-caption-2">
-        {icon && (
-          <span className="shrink-0 px-1 py-0.5 [&>svg]:size-4">{icon}</span>
-        )}
+        {icon && <span className="shrink-0 [&>svg]:size-4">{icon}</span>}
         <span className="truncate">{label}</span>
       </div>
 

package/src/patterns/Sidebar/sidebar-styles.ts

@@ -30,7 +30,8 @@ export const sidebarUnreadOverlay =
 export const sidebarUnreadDot =
   "absolute right-0 top-0 size-1.5 rounded-full bg-[#802c20]";
 
-export const sidebarSectionContent = "flex w-full min-w-0 items-center gap-2 pl-1";
+/** Icon + label row inside a section shell — no extra inset (shell already has p-2). */
+export const sidebarSectionContent = "flex w-full min-w-0 items-center gap-2";
 
 export const sidebarSectionIconClass = "shrink-0 [&>svg]:size-4";
 

package/src/stories/canvases/ContentCanvas.tsx

@@ -1,15 +1,16 @@
-import { Badge, Button } from "../../primitives";
+import { Badge, Button, IconButton } from "../../primitives";
 import {
   EmptyState,
   Entry,
   Header,
+  PageHeader,
   Tab,
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
 } from "../../components";
-import { TickIcon } from "../../icons";
+import { MoreIcon, ShipIcon, TickIcon } from "../../icons";
 import { WorkflowsIllustration } from "../../illustrations";
 import {
   FigmaContent,
@@ -20,6 +21,15 @@ import {
 } from "../_layout";
 import { FIGMA_WIDTHS } from "./figma-widths";
 
+const demoActions = (
+  <>
+    <Button hierarchy="secondary">Button</Button>
+    <IconButton hierarchy="tertiary" size="small" aria-label="More">
+      <MoreIcon size="small" />
+    </IconButton>
+  </>
+);
+
 export const ContentCanvas = () => (
   <FigmaPage title="Content" width={FIGMA_WIDTHS.content}>
     <FigmaContent>
@@ -40,13 +50,22 @@ export const ContentCanvas = () => (
                 <TabsTrigger value="reports">Reports</TabsTrigger>
                 <TabsTrigger value="issues">Issues</TabsTrigger>
               </TabsList>
-              <TabsContent value="all" className="pt-3 text-caption-2 text-display-on-light-secondary">
+              <TabsContent
+                value="all"
+                className="pt-3 text-caption-2 text-display-on-light-secondary"
+              >
                 All content
               </TabsContent>
-              <TabsContent value="reports" className="pt-3 text-caption-2 text-display-on-light-secondary">
+              <TabsContent
+                value="reports"
+                className="pt-3 text-caption-2 text-display-on-light-secondary"
+              >
                 Reports content
               </TabsContent>
-              <TabsContent value="issues" className="pt-3 text-caption-2 text-display-on-light-secondary">
+              <TabsContent
+                value="issues"
+                className="pt-3 text-caption-2 text-display-on-light-secondary"
+              >
                 Issues content
               </TabsContent>
             </Tabs>
@@ -60,10 +79,16 @@ export const ContentCanvas = () => (
                   <Badge color="blue">3</Badge>
                 </TabsTrigger>
               </TabsList>
-              <TabsContent value="active" className="pt-3 text-caption-2 text-display-on-light-secondary">
+              <TabsContent
+                value="active"
+                className="pt-3 text-caption-2 text-display-on-light-secondary"
+              >
                 Active content
               </TabsContent>
-              <TabsContent value="completed" className="pt-3 text-caption-2 text-display-on-light-secondary">
+              <TabsContent
+                value="completed"
+                className="pt-3 text-caption-2 text-display-on-light-secondary"
+              >
                 Completed content
               </TabsContent>
             </Tabs>
@@ -92,7 +117,44 @@ export const ContentCanvas = () => (
         </div>
       </FigmaSection>
 
-      <FigmaSection label="Header">
+      <FigmaSection label="PageHeader">
+        <div className="max-w-[1120px] space-y-8">
+          <FigmaVariant label="Standard">
+            <PageHeader
+              icon={<ShipIcon size="large" />}
+              title="Title"
+              actions={demoActions}
+            />
+          </FigmaVariant>
+          <FigmaVariant label="Nested">
+            <PageHeader
+              icon={<ShipIcon size="large" />}
+              title="Title"
+              crumbs={[{ label: "Parent", href: "#parent" }]}
+              actions={demoActions}
+            />
+          </FigmaVariant>
+          <FigmaVariant label="Shell (pinned header)">
+            <div className="h-64 overflow-hidden rounded-control border border-divider-primary">
+              <PageHeader.Shell className="bg-background-primary p-4">
+                <PageHeader
+                  icon={<ShipIcon size="large" />}
+                  title="Fleet"
+                  crumbs={[{ label: "Ships", href: "#ships" }]}
+                  actions={demoActions}
+                />
+                <PageHeader.Body className="mt-4 space-y-2 text-caption-2 text-display-on-light-secondary">
+                  {Array.from({ length: 20 }, (_, i) => (
+                    <p key={i}>Scrollable body line {i + 1}</p>
+                  ))}
+                </PageHeader.Body>
+              </PageHeader.Shell>
+            </div>
+          </FigmaVariant>
+        </div>
+      </FigmaSection>
+
+      <FigmaSection label="Header (legacy)">
         <div className="max-w-xl space-y-4">
           <Header title="Fleet overview" />
           <Header
@@ -115,7 +177,9 @@ export const ContentCanvas = () => (
             state="active"
             title="Ballast Pump Not Starting"
             subtitle="The fuel pump won’t start consistently."
-            trailing={<span className="text-display-on-light-secondary">···</span>}
+            trailing={
+              <span className="text-display-on-light-secondary">···</span>
+            }
           />
           <Entry
             variant="issue"
@@ -145,7 +209,9 @@ export const ContentCanvas = () => (
             <div className="w-80">
               <EmptyState
                 title="No reports"
-                illustration={<WorkflowsIllustration className="mx-auto h-24 w-32" />}
+                illustration={
+                  <WorkflowsIllustration className="mx-auto h-24 w-32" />
+                }
                 action={{ children: "Create report", hierarchy: "primary" }}
               />
             </div>