@protolabsai/ui 0.11.0 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protolabsai/ui",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"

package/src/AppShell.full.stories.tsx

@@ -1,11 +1,15 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { Badge, Button } from "./primitives";
+import { Badge, Button, Logo } from "./primitives";
 import { PanelHeader } from "./navigation";
 import { StatusDot } from "./data";
-import { AppShell, MobileNav, SurfaceRail, UtilityBar } from "./app-shell";
+import { AppShell, Header, MobileNav, SurfaceRail, UtilityBar } from "./app-shell";
 import type { MobileItem, RailItem } from "./app-shell";
 
+const LOGO =
+  "data:image/svg+xml," +
+  encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect width="24" height="24" rx="6" fill="#9b87f2"/></svg>');
+
 const meta: Meta = { title: "Components/AppShell" };
 export default meta;
 type Story = StoryObj;
@@ -84,6 +88,19 @@ export const Full: Story = {
                 {surfaceBody(activeRight)}
               </>
             }
+            header={
+              <Header
+                logo={<Logo src={LOGO} alt="" />}
+                name="protoAgent"
+                org="protoLabs.studio"
+                status={<StatusDot status="success" pulse />}
+                actions={
+                  <Button size="sm" variant="ghost">
+                    Settings
+                  </Button>
+                }
+              />
+            }
             utilityBar={
               <UtilityBar
                 start={<StatusDot status="success" pulse label="connected · 3 agents" />}

package/src/Changelog.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Changelog, ChangelogChange, ChangelogEntry, Heading, Lead } from "./marketing";
+import { TextLink } from "./primitives";
+
+const meta: Meta = { title: "Components/Marketing/Changelog", parameters: { layout: "fullscreen" } };
+export default meta;
+type Story = StoryObj;
+
+const Page = ({ children }: { children: React.ReactNode }) => (
+  <div style={{ maxWidth: 680, margin: "0 auto", padding: "64px 24px" }}>
+    <Heading style={{ fontSize: "2rem" }}>Changelog</Heading>
+    <Lead>Every release, newest first.</Lead>
+    {children}
+    <div style={{ marginTop: 48, paddingTop: 24, borderTop: "1px solid var(--pl-color-border)" }}>
+      <p style={{ fontSize: 13, color: "var(--pl-color-fg-subtle)" }}>
+        Full release notes and source on <TextLink href="#" external>GitHub Releases</TextLink>.
+      </p>
+    </div>
+  </div>
+);
+
+/** User-facing — flat bullets, LLM-summarized voice. The marketing-site layout. */
+export const UserFacing: Story = {
+  render: () => (
+    <Page>
+      <Changelog>
+        <ChangelogEntry version="@protolabsai/ui@0.11.0" date="Jun 9, 2026" latest href="#">
+          <ChangelogChange>Avatars and removable tags for identity and filters</ChangelogChange>
+          <ChangelogChange>A bottom utility bar in the app shell for global status and actions</ChangelogChange>
+          <ChangelogChange>Form toggles now associate with external labels</ChangelogChange>
+        </ChangelogEntry>
+        <ChangelogEntry version="@protolabsai/ui@0.10.0" date="Jun 9, 2026" href="#">
+          <ChangelogChange>Popover — anchored floating content for filters and pickers</ChangelogChange>
+        </ChangelogEntry>
+        <ChangelogEntry version="@protolabsai/ui@0.9.0" date="Jun 9, 2026" href="#">
+          <ChangelogChange>Drag a rail icon to reorder, or across to the other rail</ChangelogChange>
+        </ChangelogEntry>
+        <ChangelogEntry version="@protolabsai/design@0.5.0" date="Jun 9, 2026" href="#">
+          <ChangelogChange>Light mode, OS-driven, with a white-label token set</ChangelogChange>
+        </ChangelogEntry>
+      </Changelog>
+    </Page>
+  ),
+};
+
+/** Technical — typed entries (Keep-a-Changelog style) off the same layout. */
+export const Technical: Story = {
+  render: () => (
+    <Page>
+      <Changelog>
+        <ChangelogEntry version="ui@0.11.0" date="2026-06-09" latest href="#">
+          <ChangelogChange tag="added">Avatar, AvatarGroup, Tag (removable chip)</ChangelogChange>
+          <ChangelogChange tag="added">AppShell utilityBar slot + UtilityBar container</ChangelogChange>
+          <ChangelogChange tag="fixed">Checkbox/Switch spread ...rest for external-label association (#155)</ChangelogChange>
+        </ChangelogEntry>
+        <ChangelogEntry version="ui@0.10.0" date="2026-06-09" href="#">
+          <ChangelogChange tag="added">Popover + PopoverClose (Radix)</ChangelogChange>
+        </ChangelogEntry>
+        <ChangelogEntry version="ui@0.9.0" date="2026-06-09" href="#">
+          <ChangelogChange tag="added">AppShell rail drag-and-drop + cross-rail (dnd-kit)</ChangelogChange>
+          <ChangelogChange tag="changed">Drag overlay reuses the rail-item renderer (keeps badge/dot)</ChangelogChange>
+        </ChangelogEntry>
+      </Changelog>
+    </Page>
+  ),
+};

package/src/app-shell.tsx

@@ -280,6 +280,9 @@ export type AppShellProps = {
   onMobileSelect?: (id: string) => void;
   quickBarIds?: string[];
   mobileBreakpoint?: number;
+  /** Top 48px bar — brand lockup + status/actions. Presentation only; the host
+   *  fills it (compose a `Header`). Renders on both desktop and mobile. */
+  header?: ReactNode;
   /** Bottom 40px track — global utility actions / status / tickers. Presentation
    *  only; the host fills it (compose a `UtilityBar`). Desktop only. */
   utilityBar?: ReactNode;
@@ -311,6 +314,7 @@ export function AppShell({
   onMobileSelect,
   quickBarIds,
   mobileBreakpoint = 768,
+  header,
   utilityBar,
   className,
 }: AppShellProps) {
@@ -433,6 +437,7 @@ export function AppShell({
   if (isMobile && mobileItems && onMobileSelect && quickBarIds) {
     return (
       <div className={cx("pl-appshell", "pl-appshell--mobile", className)}>
+        {header != null && <div className="pl-appshell__header">{header}</div>}
         <div className="pl-appshell__mobile-stage">{leftContent}</div>
         <MobileNav
           items={mobileItems}
@@ -450,6 +455,7 @@ export function AppShell({
 
   const renderShell = (leftRail: ReactNode, rightRail: ReactNode) => (
     <div className={cx("pl-appshell-frame", className)}>
+      {header != null && <div className="pl-appshell__header">{header}</div>}
       <div className="pl-appshell">
         {leftRail}
         <main className="pl-appshell__col pl-appshell__col--left">{leftContent}</main>
@@ -539,3 +545,41 @@ export function UtilityBar({
     </div>
   );
 }
+
+/** White-label top-bar chrome (48px header row) — brand lockup (logo · name ·
+ *  org) on the left, status + actions on the right. Pass to AppShell's `header`
+ *  slot. `dragRegion` marks it as the desktop window drag region (Tauri). */
+export function Header({
+  logo,
+  name,
+  org,
+  status,
+  actions,
+  dragRegion,
+  className,
+}: {
+  logo?: ReactNode;
+  name?: ReactNode;
+  org?: ReactNode;
+  status?: ReactNode;
+  actions?: ReactNode;
+  dragRegion?: boolean;
+  className?: string;
+}) {
+  return (
+    <div className={cx("pl-header", className)} {...(dragRegion ? { "data-tauri-drag-region": "" } : {})}>
+      <div className="pl-header__brand">
+        {logo}
+        {(name != null || org != null) && (
+          <div className="pl-header__lockup">
+            {name != null && <span className="pl-header__name">{name}</span>}
+            {org != null && <span className="pl-header__org">{org}</span>}
+          </div>
+        )}
+      </div>
+      <div className="pl-header__spacer" />
+      {status != null && <div className="pl-header__status">{status}</div>}
+      {actions != null && <div className="pl-header__actions">{actions}</div>}
+    </div>
+  );
+}

package/src/marketing.tsx

@@ -93,3 +93,70 @@ export function PostItem({ meta, title, excerpt, href }: PostItemProps) {
 export function Prose({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
   return <div className={cx("pl-prose", className)} {...rest} />;
 }
+
+// ── Changelog (release timeline) — the standard marketing changelog layout ────
+
+/** Changelog timeline — newest first. Wrap ChangelogEntry children. */
+export function Changelog({ className, ...rest }: HTMLAttributes<HTMLOListElement>) {
+  return <ol className={cx("pl-changelog", className)} {...rest} />;
+}
+
+/** One release on the timeline. `latest` accents the dot + version pill. Put
+ *  ChangelogChange children inside. */
+export function ChangelogEntry({
+  version,
+  date,
+  latest,
+  href,
+  children,
+}: {
+  version: ReactNode;
+  date?: ReactNode;
+  latest?: boolean;
+  /** Links the version pill (e.g. to the GitHub release / download). */
+  href?: string;
+  children: ReactNode;
+}) {
+  return (
+    <li className={cx("pl-changelog__entry", latest && "pl-changelog__entry--latest")}>
+      <span className="pl-changelog__dot" aria-hidden />
+      <div className="pl-changelog__body">
+        <div className="pl-changelog__meta">
+          {href ? (
+            <a className="pl-changelog__version" href={href}>
+              {version}
+            </a>
+          ) : (
+            <span className="pl-changelog__version">{version}</span>
+          )}
+          {date != null && <span className="pl-changelog__date">{date}</span>}
+          {latest && <span className="pl-changelog__latest">latest</span>}
+        </div>
+        <div className="pl-changelog__changes">{children}</div>
+      </div>
+    </li>
+  );
+}
+
+/** A single change line. Flat (em-dash) for user-facing notes, or pass a `tag`
+ *  (added / changed / fixed / removed) for a technical changelog. */
+export function ChangelogChange({
+  tag,
+  children,
+}: {
+  tag?: "added" | "changed" | "fixed" | "removed";
+  children: ReactNode;
+}) {
+  return (
+    <div className="pl-changelog__change">
+      {tag ? (
+        <span className={cx("pl-changelog__tag", `pl-changelog__tag--${tag}`)}>{tag}</span>
+      ) : (
+        <span className="pl-changelog__bullet" aria-hidden>
+          —
+        </span>
+      )}
+      <span>{children}</span>
+    </div>
+  );
+}

package/src/primitives.tsx

@@ -154,3 +154,19 @@ export function Tag({
     </span>
   );
 }
+
+/** Brand mark — a token-sized, contained `<img>` (square by default). The
+ *  white-label logo primitive (vs Avatar, which is a person/initials affordance). */
+export function Logo({
+  src,
+  alt = "",
+  size = 22,
+  className,
+}: {
+  src: string;
+  alt?: string;
+  size?: number;
+  className?: string;
+}) {
+  return <img className={cx("pl-logo", className)} src={src} alt={alt} width={size} height={size} />;
+}

package/src/styles/app-shell.css

@@ -274,3 +274,59 @@
   box-shadow: var(--pl-shadow-popover);
   cursor: grabbing;
 }
+
+/* ── Header (top bar) ─────────────────────────────────────────────────────────── */
+.pl-appshell__header {
+  flex: 0 0 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  border-bottom: var(--pl-border-width) solid var(--pl-color-border);
+  background: var(--pl-color-bg-raised);
+}
+.pl-header {
+  display: flex;
+  align-items: center;
+  gap: var(--pl-space-3);
+  width: 100%;
+  height: 100%;
+  padding: 0 var(--pl-space-3);
+}
+.pl-header__brand {
+  display: flex;
+  align-items: center;
+  gap: var(--pl-space-2);
+  min-width: 0;
+}
+.pl-header__lockup {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+  line-height: 1.15;
+}
+.pl-header__name {
+  overflow: hidden;
+  font-size: 13px;
+  font-weight: var(--pl-font-weight-medium);
+  color: var(--pl-color-fg);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pl-header__org {
+  font-family: var(--pl-font-mono);
+  font-size: 10px;
+  color: var(--pl-color-fg-muted);
+}
+.pl-header__spacer {
+  flex: 1;
+}
+.pl-header__status {
+  display: flex;
+  align-items: center;
+}
+.pl-header__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--pl-space-2);
+}

package/src/styles/marketing.css

@@ -247,3 +247,145 @@
   margin: 1.5rem 0;
   color: var(--pl-color-fg-muted);
 }
+
+/* ── Changelog (release timeline) ─────────────────────────────────────────────── */
+.pl-changelog {
+  position: relative;
+  display: grid;
+  gap: 40px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+/* the timeline spine */
+.pl-changelog::before {
+  content: "";
+  position: absolute;
+  left: 12px;
+  top: 8px;
+  bottom: 0;
+  width: 1px;
+  background: var(--pl-color-border);
+}
+.pl-changelog__entry {
+  position: relative;
+  display: flex;
+  gap: 20px;
+}
+.pl-changelog__dot {
+  position: relative;
+  z-index: 1;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 25px;
+  height: 25px;
+  margin-top: 2px;
+  border-radius: 50%;
+  background: var(--pl-color-bg-raised);
+  border: var(--pl-border-width) solid var(--pl-color-border);
+}
+.pl-changelog__dot::after {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--pl-color-fg-subtle);
+}
+.pl-changelog__entry--latest .pl-changelog__dot {
+  background: color-mix(in oklch, var(--pl-color-accent) 15%, transparent);
+  border-color: color-mix(in oklch, var(--pl-color-accent) 50%, transparent);
+}
+.pl-changelog__entry--latest .pl-changelog__dot::after {
+  background: var(--pl-color-accent);
+}
+.pl-changelog__body {
+  flex: 1;
+  min-width: 0;
+  padding-bottom: 8px;
+}
+.pl-changelog__meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+.pl-changelog__version {
+  padding: 2px 8px;
+  font-family: var(--pl-font-mono);
+  font-size: 13px;
+  color: var(--pl-color-fg-muted);
+  background: var(--pl-color-bg-raised);
+  border: var(--pl-border-width) solid var(--pl-color-border);
+  border-radius: var(--pl-radius);
+  text-decoration: none;
+  transition: border-color var(--pl-motion-fast) var(--pl-motion-ease);
+}
+a.pl-changelog__version:hover {
+  border-color: var(--pl-color-accent);
+}
+.pl-changelog__entry--latest .pl-changelog__version {
+  color: var(--pl-color-accent-fg);
+  background: color-mix(in oklch, var(--pl-color-accent) 10%, transparent);
+  border-color: color-mix(in oklch, var(--pl-color-accent) 35%, transparent);
+}
+.pl-changelog__date {
+  font-size: 13px;
+  color: var(--pl-color-fg-subtle);
+}
+.pl-changelog__latest {
+  padding: 1px 6px;
+  font-family: var(--pl-font-mono);
+  font-size: 11px;
+  color: var(--pl-color-accent-fg);
+  background: color-mix(in oklch, var(--pl-color-accent) 8%, transparent);
+  border: var(--pl-border-width) solid color-mix(in oklch, var(--pl-color-accent) 25%, transparent);
+  border-radius: var(--pl-radius);
+}
+.pl-changelog__changes {
+  display: grid;
+  gap: 6px;
+}
+.pl-changelog__change {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--pl-color-fg);
+}
+.pl-changelog__bullet {
+  flex-shrink: 0;
+  margin-top: 1px;
+  color: var(--pl-color-fg-subtle);
+}
+.pl-changelog__tag {
+  flex-shrink: 0;
+  min-width: 52px;
+  padding: 0 6px;
+  font-family: var(--pl-font-mono);
+  font-size: 10px;
+  line-height: 18px;
+  text-align: center;
+  text-transform: lowercase;
+  border: var(--pl-border-width) solid var(--pl-color-border);
+  border-radius: var(--pl-radius);
+}
+.pl-changelog__tag--added {
+  color: var(--pl-color-status-success);
+  border-color: color-mix(in oklch, var(--pl-color-status-success) 35%, transparent);
+}
+.pl-changelog__tag--fixed {
+  color: var(--pl-color-status-info);
+  border-color: color-mix(in oklch, var(--pl-color-status-info) 35%, transparent);
+}
+.pl-changelog__tag--changed {
+  color: var(--pl-color-status-warning);
+  border-color: color-mix(in oklch, var(--pl-color-status-warning) 35%, transparent);
+}
+.pl-changelog__tag--removed {
+  color: var(--pl-color-status-error);
+  border-color: color-mix(in oklch, var(--pl-color-status-error) 35%, transparent);
+}

package/src/styles/primitives.css

@@ -285,3 +285,10 @@
   color: var(--pl-color-fg);
   background: var(--pl-color-bg-hover);
 }
+
+/* ── Logo ────────────────────────────────────────────────────────────────────── */
+.pl-logo {
+  display: block;
+  flex-shrink: 0;
+  object-fit: contain;
+}