@lateralus-ai/shipping-ui 2.0.0-dev.16 → 2.0.0-dev.18

package/dist/tailwind-theme.d.ts

@@ -82,6 +82,10 @@ export declare const theme: {
         md: "6px";
         sm: "4px";
     };
+    /** Extends Tailwind’s max-width scale (7xl = 1280px). */
+    maxWidth: {
+        "8xl": string;
+    };
     colors: {
         grey: {
             readonly 50: "#fdfdfc";

package/dist/theme-entry-Dwr2mV7_.js

@@ -0,0 +1 @@
+"use strict";const n={50:"#fdfdfc",100:"#f4f2ea",200:"#e1ddce",300:"#bfb9a5",400:"#969080",500:"#6e6960",600:"#524e47",700:"#3a3733",800:"#312e2a",900:"#262420"},o={50:"#f5f8f2",100:"#dde6d2",200:"#c5d4b3",300:"#a8bf8f",400:"#7a9a5e",500:"#5a7a42",600:"#456332",700:"#304624",800:"#223018",900:"#141c0e"},d={50:"#eef1f8",100:"#dae0ef",200:"#b8c4e0",300:"#8fa3cc",400:"#5274ae",500:"#3a5d96",600:"#154199",700:"#103480",800:"#0c2860",900:"#081c42"},c={50:"#faf3f1",100:"#f0d3cc",200:"#e4b0a5",300:"#c97a6b",400:"#b85a48",500:"#a0392a",600:"#802c20",700:"#621f16",800:"#45150f",900:"#2a0c08"},l={50:"#faf1de",100:"#f5e4c0",200:"#efd49a",300:"#e4bc6a",400:"#d9a03e",500:"#c48820",600:"#8f6318",700:"#5a3d0d",800:"#3d2a09",900:"#261a05"},s={50:"#f6f2f8",100:"#e2d9e8",200:"#cbbad6",300:"#b09bc3",400:"#957cb0",500:"#7a5d9d",600:"#5e4680",700:"#3d2e4a",800:"#2a2033",900:"#18121c"},p="#ffffff",a={grey:n,green:o,blue:d,red:c,orange:l,purple:s},t={raise1:"0 1px 2px rgba(38, 36, 32, 0.06), 0 1px 3px rgba(38, 36, 32, 0.04)",raise2:"0 2px 8px rgba(38, 36, 32, 0.08), 0 1px 2px rgba(38, 36, 32, 0.04)",raise3:"0 8px 24px rgba(38, 36, 32, 0.12), 0 2px 8px rgba(38, 36, 32, 0.06)"},r={control:"8px",lg:"8px",md:"6px",sm:"4px"},e=(v,i)=>[v,{lineHeight:i.lineHeight,letterSpacing:i.letterSpacing,...i.fontWeight?{fontWeight:String(i.fontWeight)}:{}}],g={fontFamily:{heading:['"TRY Vesterbro"',"Libre Baskerville","Georgia","serif"],sans:['"Matter-TRIAL"',"DM Sans","system-ui","sans-serif"],mono:["Roboto Mono","monospace"]},fontSize:{title:e("28px",{lineHeight:"34px",letterSpacing:"-0.02em"}),"title-em":e("28px",{lineHeight:"34px",letterSpacing:"-0.02em",fontWeight:500}),heading:e("22px",{lineHeight:"28px",letterSpacing:"0",fontWeight:500}),subheader:e("18px",{lineHeight:"28px",letterSpacing:"-0.01em"}),"subheader-em":e("18px",{lineHeight:"28px",letterSpacing:"-0.01em",fontWeight:500}),body:e("16px",{lineHeight:"24px",letterSpacing:"-0.01em"}),"body-em":e("16px",{lineHeight:"24px",letterSpacing:"-0.01em",fontWeight:500}),"caption-1":e("16px",{lineHeight:"22px",letterSpacing:"0.02em"}),"caption-1-em":e("16px",{lineHeight:"22px",letterSpacing:"0.02em",fontWeight:500}),"caption-2":e("14px",{lineHeight:"20px",letterSpacing:"0.01em"}),"caption-2-em":e("14px",{lineHeight:"20px",letterSpacing:"0.01em",fontWeight:500}),footnote:e("13px",{lineHeight:"17px",letterSpacing:"0"}),"footnote-em":e("13px",{lineHeight:"17px",letterSpacing:"0",fontWeight:500})},boxShadow:{raise1:t.raise1,raise2:t.raise2,raise3:t.raise3},borderRadius:{control:r.control,lg:r.lg,md:r.md,sm:r.sm},maxWidth:{"8xl":"1640px"},colors:{grey:a.grey,gray:a.grey,green:a.green,blue:a.blue,red:a.red,orange:a.orange,purple:a.purple,white:"#ffffff",action:{primary:{idle:"var(--action-primary-idle)","on-idle":"var(--action-primary-on-idle)",hover:"var(--action-primary-hover)","on-hover":"var(--action-primary-on-hover)",disabled:"var(--action-primary-disabled)","on-disabled":"var(--action-primary-on-disabled)"},secondary:{idle:"var(--action-secondary-idle)","on-idle":"var(--action-secondary-on-idle)",hover:"var(--action-secondary-hover)","on-hover":"var(--action-secondary-on-hover)",disabled:"var(--action-secondary-disabled)","on-disabled":"var(--action-secondary-on-disabled)"},tertiary:{idle:"var(--action-tertiary-idle)","on-idle":"var(--action-tertiary-on-idle)",hover:"var(--action-tertiary-hover)","on-hover":"var(--action-tertiary-on-hover)",disabled:"var(--action-tertiary-disabled)","on-disabled":"var(--action-tertiary-on-disabled)"},quaternary:{idle:"var(--action-quaternary-idle)","on-idle":"var(--action-quaternary-on-idle)",hover:"var(--action-quaternary-hover)","on-hover":"var(--action-quaternary-on-hover)",disabled:"var(--action-quaternary-disabled)","on-disabled":"var(--action-quaternary-on-disabled)"},destructive:{idle:"var(--action-destructive-idle)","on-idle":"var(--action-destructive-on-idle)",hover:"var(--action-destructive-hover)","on-hover":"var(--action-destructive-on-hover)",disabled:"var(--action-destructive-disabled)","on-disabled":"var(--action-destructive-on-disabled)"}},background:{primary:"var(--background-primary)",secondary:"var(--background-secondary)",tertiary:"var(--background-tertiary)",hover:"var(--background-hover)",selected:"var(--background-selected)",overlay:"var(--background-overlay)"},display:{"on-light":{primary:"var(--display-on-light-primary)",secondary:"var(--display-on-light-secondary)",tertiary:"var(--display-on-light-tertiary)",quaternary:"var(--display-on-light-quaternary)"},"on-dark":{primary:"var(--display-on-dark-primary)",secondary:"var(--display-on-dark-secondary)",tertiary:"var(--display-on-dark-tertiary)",quaternary:"var(--display-on-dark-quaternary)"}},accent:{"on-light":"var(--accent-on-light)","on-dark":"var(--accent-on-dark)","bg-light":"var(--accent-bg-light)","bg-lighter":"var(--accent-bg-lighter)"},divider:{primary:"var(--divider-primary)",secondary:"var(--divider-secondary)"},meta:{green:"var(--meta-green)",onGreen:"var(--meta-on-green)",orange:"var(--meta-orange)",onOrange:"var(--meta-on-orange)",red:"var(--meta-red)",onRed:"var(--meta-on-red)",blue:"var(--meta-blue)",onBlue:"var(--meta-on-blue)",purple:"var(--meta-purple)",onPurple:"var(--meta-on-purple)"},"text-primary":"var(--display-on-light-primary)","text-secondary":"var(--display-on-light-secondary)","text-tertiary":"var(--display-on-light-tertiary)","surface-primary":"var(--background-primary)","surface-secondary":"var(--background-secondary)","surface-hover":"var(--background-secondary)","border-light":"var(--divider-primary)","border-medium":"var(--divider-secondary)"}};exports.blue=d;exports.borderRadius=r;exports.colorScales=a;exports.elevation=t;exports.green=o;exports.grey=n;exports.orange=l;exports.purple=s;exports.red=c;exports.theme=g;exports.white=p;

package/dist/{theme-entry-BUK3MJUJ.mjs → theme-entry-tLBc6zGT.mjs}

@@ -53,7 +53,7 @@ const o = {
   700: "#5a3d0d",
   800: "#3d2a09",
   900: "#261a05"
-}, v = {
+}, p = {
   50: "#f6f2f8",
   100: "#e2d9e8",
   200: "#cbbad6",
@@ -64,7 +64,7 @@ const o = {
   700: "#3d2e4a",
   800: "#2a2033",
   900: "#18121c"
-}, p = "#ffffff", a = { grey: o, green: d, blue: c, red: l, orange: s, purple: v }, t = {
+}, v = "#ffffff", a = { grey: o, green: d, blue: c, red: l, orange: s, purple: p }, t = {
   raise1: "0 1px 2px rgba(38, 36, 32, 0.06), 0 1px 3px rgba(38, 36, 32, 0.04)",
   raise2: "0 2px 8px rgba(38, 36, 32, 0.08), 0 1px 2px rgba(38, 36, 32, 0.04)",
   raise3: "0 8px 24px rgba(38, 36, 32, 0.12), 0 2px 8px rgba(38, 36, 32, 0.06)"
@@ -140,6 +140,10 @@ const o = {
     md: i.md,
     sm: i.sm
   },
+  /** Extends Tailwind’s max-width scale (7xl = 1280px). */
+  maxWidth: {
+    "8xl": "1640px"
+  },
   colors: {
     grey: a.grey,
     gray: a.grey,
@@ -254,8 +258,8 @@ export {
   t as e,
   o as g,
   s as o,
-  v as p,
+  p,
   l as r,
   g as t,
-  p as w
+  v as w
 };

package/dist/theme.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./theme-entry-ygTpGaNC.js");exports.tailwindTheme=e.theme;exports.theme=e.theme;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./theme-entry-Dwr2mV7_.js");exports.tailwindTheme=e.theme;exports.theme=e.theme;

package/dist/theme.esm.js

@@ -1,4 +1,4 @@
-import { t as a, t as m } from "./theme-entry-BUK3MJUJ.mjs";
+import { t as a, t as m } from "./theme-entry-tLBc6zGT.mjs";
 export {
   a as tailwindTheme,
   m as theme

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lateralus-ai/shipping-ui",
-  "version": "2.0.0-dev.16",
+  "version": "2.0.0-dev.18",
   "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/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>