@protolabsai/ui 0.4.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protolabsai/ui",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -19,6 +19,7 @@
     "src"
   ],
   "dependencies": {
+    "@radix-ui/react-dropdown-menu": "^2.1.17",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@protolabsai/design": "0.4.0"

package/src/AppShell.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { Badge, Button, PanelHeader, Tabs } from "./index";
+
+const meta: Meta = { title: "Components/AppShell" };
+export default meta;
+type Story = StoryObj;
+
+const Glyph = () => (
+  <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
+    <rect x="2.5" y="2.5" width="11" height="11" rx="2" />
+  </svg>
+);
+
+export const Panel: Story = {
+  render: () => (
+    <div style={{ display: "grid", gap: 20, maxWidth: 560 }}>
+      <div style={{ border: "1px solid var(--pl-color-border)", borderRadius: 4 }}>
+        <PanelHeader
+          kicker="agent · streaming-router"
+          title="Activity"
+          actions={
+            <>
+              <Button>Filter</Button>
+              <Button variant="primary">New run</Button>
+            </>
+          }
+        />
+        <div style={{ padding: 16, color: "var(--pl-color-fg-muted)", fontSize: 13 }}>panel body…</div>
+      </div>
+
+      <div style={{ border: "1px solid var(--pl-color-border)", borderRadius: 4 }}>
+        <PanelHeader compact title="Inbox" actions={<Badge status="warning">3 unread</Badge>} />
+        <div style={{ padding: 12, color: "var(--pl-color-fg-muted)", fontSize: 13 }}>compact, nested panel…</div>
+      </div>
+    </div>
+  ),
+};
+
+export const TabsWithSlots: Story = {
+  render: () => {
+    function Demo() {
+      const [active, setActive] = useState("activity");
+      return (
+        <Tabs
+          active={active}
+          onSelect={setActive}
+          items={[
+            { id: "chat", label: "Chat", icon: <Glyph /> },
+            { id: "activity", label: "Activity", icon: <Glyph />, badge: 12 },
+            { id: "knowledge", label: "Knowledge", icon: <Glyph /> },
+            { id: "plugins", label: "Plugins", icon: <Glyph />, badge: "new" },
+            { id: "settings", label: "Settings", icon: <Glyph /> },
+            { id: "billing", label: "Billing", icon: <Glyph />, locked: true, disabled: true },
+          ]}
+        />
+      );
+    }
+    return <Demo />;
+  },
+};

package/src/Button.stories.tsx

@@ -5,7 +5,7 @@ const meta: Meta<typeof Button> = {
   title: "Components/Button",
   component: Button,
   args: { children: "Breakdowns" },
-  argTypes: { variant: { control: "inline-radio", options: ["default", "primary"] } },
+  argTypes: { variant: { control: "inline-radio", options: ["default", "primary", "ghost", "danger"] } },
 };
 export default meta;
 type Story = StoryObj<typeof Button>;
@@ -13,3 +13,48 @@ type Story = StoryObj<typeof Button>;
 export const Default: Story = {};
 export const Primary: Story = { args: { variant: "primary", children: "Get started" } };
 export const Disabled: Story = { args: { disabled: true, children: "Disabled" } };
+
+const Sq = () => (
+  <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
+    <path d="M8 3v10M3 8h10" strokeLinecap="round" />
+  </svg>
+);
+
+export const Variants: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center" }}>
+      <Button>default</Button>
+      <Button variant="primary">primary</Button>
+      <Button variant="ghost">ghost</Button>
+      <Button variant="danger">danger</Button>
+    </div>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
+      <Button size="sm">small</Button>
+      <Button>medium</Button>
+      <Button size="sm" variant="primary">
+        small primary
+      </Button>
+    </div>
+  ),
+};
+
+export const IconOnly: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
+      <Button icon aria-label="Add">
+        <Sq />
+      </Button>
+      <Button icon variant="ghost" aria-label="Add">
+        <Sq />
+      </Button>
+      <Button icon size="sm" aria-label="Add">
+        <Sq />
+      </Button>
+    </div>
+  ),
+};

package/src/Menu.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useRef } from "react";
+import { Button, Menu, MenuHandle, MenuItem, MenuLabel, MenuSeparator, MenuSub } from "./index";
+
+const meta: Meta = { title: "Components/Menu" };
+export default meta;
+type Story = StoryObj;
+
+// Tiny inline icon so stories stay dependency-free.
+const Dot = () => (
+  <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
+    <circle cx="8" cy="8" r="3" />
+  </svg>
+);
+
+const Items = () => (
+  <>
+    <MenuLabel>Rail surface</MenuLabel>
+    <MenuItem icon={<Dot />}>Move up</MenuItem>
+    <MenuItem icon={<Dot />}>Move down</MenuItem>
+    <MenuSub label="Move to other rail" icon={<Dot />}>
+      <MenuItem>Left rail</MenuItem>
+      <MenuItem>Right rail</MenuItem>
+    </MenuSub>
+    <MenuSeparator />
+    <MenuItem disabled icon={<Dot />}>
+      Pin (coming soon)
+    </MenuItem>
+    <MenuItem destructive icon={<Dot />}>
+      Remove surface
+    </MenuItem>
+  </>
+);
+
+export const Trigger: Story = {
+  render: () => (
+    <Menu trigger={<Button>Surface actions ▾</Button>}>
+      <Items />
+    </Menu>
+  ),
+};
+
+export const RightClickAtCoords: Story = {
+  render: () => {
+    function Demo() {
+      const menu = useRef<MenuHandle>(null);
+      return (
+        <>
+          <div
+            onContextMenu={(e) => {
+              e.preventDefault();
+              menu.current?.open({ x: e.clientX, y: e.clientY });
+            }}
+            style={{
+              height: 180,
+              display: "grid",
+              placeItems: "center",
+              border: "1px dashed var(--pl-color-border-strong)",
+              borderRadius: 4,
+              color: "var(--pl-color-fg-muted)",
+              fontFamily: "var(--pl-font-mono)",
+              fontSize: 13,
+              userSelect: "none",
+            }}
+          >
+            right-click anywhere in this box
+          </div>
+          <Menu ref={menu}>
+            <Items />
+          </Menu>
+        </>
+      );
+    }
+    return <Demo />;
+  },
+};

package/src/Skeleton.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Skeleton, SkeletonGroup } from "./index";
+
+const meta: Meta = { title: "Components/Skeleton" };
+export default meta;
+type Story = StoryObj;
+
+export const Bars: Story = {
+  render: () => (
+    <div style={{ display: "grid", gap: 12, maxWidth: 360 }}>
+      <Skeleton />
+      <Skeleton width={200} />
+      <Skeleton width={120} height={28} />
+    </div>
+  ),
+};
+
+export const TextLines: Story = {
+  render: () => (
+    <div style={{ maxWidth: 360 }}>
+      <Skeleton lines={4} />
+    </div>
+  ),
+};
+
+export const PanelSkeleton: Story = {
+  render: () => (
+    <SkeletonGroup style={{ maxWidth: 420, padding: 16, border: "1px solid var(--pl-color-border)", borderRadius: 4 }}>
+      <Skeleton width={140} height={16} />
+      <Skeleton lines={3} />
+      <div style={{ display: "flex", gap: 8 }}>
+        <Skeleton width={80} height={28} />
+        <Skeleton width={80} height={28} />
+      </div>
+    </SkeletonGroup>
+  ),
+};

package/src/index.tsx

@@ -15,17 +15,43 @@ import type {
   TextareaHTMLAttributes,
   ThHTMLAttributes,
 } from "react";
-import { createContext, useCallback, useContext, useEffect, useId, useRef, useState } from "react";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
+import * as RDropdown from "@radix-ui/react-dropdown-menu";
 import "./styles.css";
 
 const cx = (...parts: Array<string | false | undefined>) => parts.filter(Boolean).join(" ");
 
 export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
-  /** "primary" reads as a stronger border, not a fill (brand restraint). */
-  variant?: "default" | "primary";
+  /** "primary"/"danger" read as a stronger border, not a fill (brand restraint);
+   *  "ghost" is transparent until hover. */
+  variant?: "default" | "primary" | "ghost" | "danger";
+  size?: "sm" | "md";
+  /** Icon-only: square, centered glyph. Pass `aria-label` for a11y. */
+  icon?: boolean;
 };
-export function Button({ variant = "default", className, ...rest }: ButtonProps) {
-  return <button className={cx("pl-btn", variant === "primary" && "pl-btn--primary", className)} {...rest} />;
+export function Button({ variant = "default", size = "md", icon, className, ...rest }: ButtonProps) {
+  return (
+    <button
+      className={cx(
+        "pl-btn",
+        variant !== "default" && `pl-btn--${variant}`,
+        size === "sm" && "pl-btn--sm",
+        icon && "pl-btn--icon",
+        className,
+      )}
+      {...rest}
+    />
+  );
 }
 
 export type Status = "neutral" | "success" | "warning" | "error" | "info";
@@ -240,9 +266,19 @@ export function TextLink({
 
 // ── App primitives (cockpit + future studio apps) ────────────────────────────
 
-export type TabItem = { id: string; label: ReactNode; disabled?: boolean; locked?: boolean };
+export type TabItem = {
+  id: string;
+  label: ReactNode;
+  /** Leading icon (e.g. a Lucide glyph). */
+  icon?: ReactNode;
+  /** Trailing badge / count (e.g. unread inbox count). */
+  badge?: ReactNode;
+  disabled?: boolean;
+  locked?: boolean;
+};
 
-/** A horizontal tab strip with disabled/locked support (gated workflows). */
+/** A horizontal tab strip with optional icon/badge slots + disabled/locked
+ *  support (gated workflows). */
 export function Tabs({ items, active, onSelect }: { items: TabItem[]; active: string; onSelect: (id: string) => void }) {
   return (
     <div className="pl-tabs" role="tablist">
@@ -256,7 +292,13 @@ export function Tabs({ items, active, onSelect }: { items: TabItem[]; active: st
           disabled={t.disabled}
           onClick={() => onSelect(t.id)}
         >
-          {t.label}
+          {t.icon != null && (
+            <span className="pl-tab__icon" aria-hidden>
+              {t.icon}
+            </span>
+          )}
+          <span className="pl-tab__label">{t.label}</span>
+          {t.badge != null && <span className="pl-tab__badge">{t.badge}</span>}
           {t.locked ? (
             <span className="pl-tab__lock" aria-hidden>
               🔒
@@ -322,6 +364,33 @@ export function Field({
   );
 }
 
+/** Dense operator-console panel header — title + optional kicker eyebrow +
+ *  right-aligned actions slot. `compact` tightens it for nested/secondary
+ *  panels. The most-used console composite. */
+export function PanelHeader({
+  title,
+  kicker,
+  actions,
+  compact,
+  className,
+}: {
+  title: ReactNode;
+  kicker?: ReactNode;
+  actions?: ReactNode;
+  compact?: boolean;
+  className?: string;
+}) {
+  return (
+    <div className={cx("pl-panel-header", compact && "pl-panel-header--compact", className)}>
+      <div className="pl-panel-header__titles">
+        {kicker != null && <div className="pl-panel-header__kicker">{kicker}</div>}
+        <h2 className="pl-panel-header__title">{title}</h2>
+      </div>
+      {actions != null && <div className="pl-panel-header__actions">{actions}</div>}
+    </div>
+  );
+}
+
 // ── Overlays & feedback ──────────────────────────────────────────────────────
 
 /** Esc-to-close + body scroll-lock while `open`. Shared by Dialog + Drawer. */
@@ -461,11 +530,7 @@ export function ConfirmDialog({
       footer={
         <>
           <Button onClick={onClose}>{cancelLabel}</Button>
-          <Button
-            variant="primary"
-            className={cx(destructive && "pl-btn--danger")}
-            onClick={() => onConfirm?.()}
-          >
+          <Button variant={destructive ? "danger" : "primary"} onClick={() => onConfirm?.()}>
             {confirmLabel}
           </Button>
         </>
@@ -691,9 +756,16 @@ export function Spinner({ size = 16, className }: { size?: number; className?: s
   );
 }
 
-/** Scroll container with brand-styled thin scrollbars. */
-export function ScrollArea({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
-  return <div className={cx("pl-scroll", className)} {...rest} />;
+/** Scroll container with brand-styled thin scrollbars. Carries `min-height:0`
+ *  (so it scrolls inside flex/grid parents) + overscroll containment. Pass
+ *  `ariaLabel` to make it a keyboard-focusable, labelled scroll region. */
+export function ScrollArea({
+  ariaLabel,
+  className,
+  ...rest
+}: HTMLAttributes<HTMLDivElement> & { ariaLabel?: string }) {
+  const a11y = ariaLabel != null ? { role: "region", "aria-label": ariaLabel, tabIndex: 0 } : {};
+  return <div className={cx("pl-scroll", className)} {...a11y} {...rest} />;
 }
 
 // ── Form controls (compose with Field, or use standalone) ────────────────────
@@ -771,3 +843,182 @@ export function Checkbox({
     </label>
   );
 }
+
+// ── Menu / DropdownMenu (Radix-backed) ───────────────────────────────────────
+// Radix owns keyboard nav, focus management, and collision-aware positioning —
+// the reason this lives in the DS rather than being re-rolled per app. Styling
+// is token-only over --pl-*. Supports a standard click trigger AND imperative
+// open-at-coordinates for right-click / context menus.
+
+export type MenuHandle = {
+  /** Open the menu. Pass viewport coords (e.g. from a contextmenu event) to
+   *  open at a point; omit to open at the default anchor. */
+  open: (coords?: { x: number; y: number }) => void;
+  close: () => void;
+};
+
+export type MenuProps = {
+  /** Standard trigger (click to open). Omit and drive via the ref's
+   *  open({x,y}) for right-click / imperative menus. */
+  trigger?: ReactNode;
+  children: ReactNode;
+  align?: "start" | "center" | "end";
+  /** Fires on open/close — e.g. to clear the app's context state on dismiss. */
+  onOpenChange?: (open: boolean) => void;
+};
+
+export const Menu = forwardRef<MenuHandle, MenuProps>(function Menu(
+  { trigger, children, align = "start", onOpenChange },
+  ref,
+) {
+  const [open, setOpen] = useState(false);
+  const [coords, setCoords] = useState<{ x: number; y: number } | null>(null);
+  const setOpenState = useCallback(
+    (o: boolean) => {
+      setOpen(o);
+      onOpenChange?.(o);
+    },
+    [onOpenChange],
+  );
+  useImperativeHandle(
+    ref,
+    () => ({
+      open: (c) => {
+        setCoords(c ?? null);
+        setOpenState(true);
+      },
+      close: () => setOpenState(false),
+    }),
+    [setOpenState],
+  );
+  return (
+    <RDropdown.Root open={open} onOpenChange={setOpenState} modal={false}>
+      {trigger != null ? (
+        <RDropdown.Trigger asChild>{trigger}</RDropdown.Trigger>
+      ) : (
+        <RDropdown.Trigger asChild>
+          <span
+            aria-hidden
+            className="pl-menu__anchor"
+            style={coords ? { position: "fixed", left: coords.x, top: coords.y } : undefined}
+          />
+        </RDropdown.Trigger>
+      )}
+      <RDropdown.Portal>
+        <RDropdown.Content className="pl-menu" align={align} sideOffset={4} collisionPadding={8} loop>
+          {children}
+        </RDropdown.Content>
+      </RDropdown.Portal>
+    </RDropdown.Root>
+  );
+});
+
+export function MenuItem({
+  icon,
+  disabled,
+  destructive,
+  onSelect,
+  children,
+}: {
+  icon?: ReactNode;
+  disabled?: boolean;
+  /** Error-toned (delete, remove, etc.). */
+  destructive?: boolean;
+  onSelect?: () => void;
+  children: ReactNode;
+}) {
+  return (
+    <RDropdown.Item
+      className={cx("pl-menu__item", destructive && "pl-menu__item--destructive")}
+      disabled={disabled}
+      onSelect={onSelect}
+    >
+      {icon != null && (
+        <span className="pl-menu__icon" aria-hidden>
+          {icon}
+        </span>
+      )}
+      <span className="pl-menu__label">{children}</span>
+    </RDropdown.Item>
+  );
+}
+
+export function MenuSeparator() {
+  return <RDropdown.Separator className="pl-menu__sep" />;
+}
+
+export function MenuLabel({ children }: { children: ReactNode }) {
+  return <RDropdown.Label className="pl-menu__group-label">{children}</RDropdown.Label>;
+}
+
+/** Nested submenu — put MenuItem/MenuSeparator children inside. */
+export function MenuSub({
+  label,
+  icon,
+  children,
+}: {
+  label: ReactNode;
+  icon?: ReactNode;
+  children: ReactNode;
+}) {
+  return (
+    <RDropdown.Sub>
+      <RDropdown.SubTrigger className="pl-menu__item pl-menu__subtrigger">
+        {icon != null && (
+          <span className="pl-menu__icon" aria-hidden>
+            {icon}
+          </span>
+        )}
+        <span className="pl-menu__label">{label}</span>
+        <span className="pl-menu__subarrow" aria-hidden>
+          ›
+        </span>
+      </RDropdown.SubTrigger>
+      <RDropdown.Portal>
+        <RDropdown.SubContent className="pl-menu" sideOffset={2} alignOffset={-4} collisionPadding={8}>
+          {children}
+        </RDropdown.SubContent>
+      </RDropdown.Portal>
+    </RDropdown.Sub>
+  );
+}
+
+// ── Skeleton (loading placeholder) ───────────────────────────────────────────
+
+/** Shimmering content-shaped loading placeholder. `lines>1` stacks text bars
+ *  (last one short). Token-driven; static fill under reduced-motion. */
+export function Skeleton({
+  width,
+  height = 14,
+  lines,
+  className,
+  style,
+  ...rest
+}: HTMLAttributes<HTMLDivElement> & {
+  width?: number | string;
+  height?: number | string;
+  /** Stack N text-line bars instead of a single bar. */
+  lines?: number;
+}) {
+  if (lines != null && lines > 1) {
+    return (
+      <div className={cx("pl-skel-lines", className)} style={style} {...rest}>
+        {Array.from({ length: lines }, (_, i) => (
+          <div
+            key={i}
+            className="pl-skel"
+            style={{ height, width: i === lines - 1 ? "65%" : (width ?? "100%") }}
+          />
+        ))}
+      </div>
+    );
+  }
+  return (
+    <div className={cx("pl-skel", className)} style={{ width: width ?? "100%", height, ...style }} {...rest} />
+  );
+}
+
+/** Optional wrapper to group related skeletons (shared layout gap). */
+export function SkeletonGroup({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cx("pl-skel-group", className)} {...rest} />;
+}

package/src/styles.css

@@ -472,6 +472,9 @@ a.pl-row:hover {
   border-bottom: var(--pl-border-width) solid var(--pl-color-border);
 }
 .pl-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
   background: none;
   border: none;
   border-bottom: 2px solid transparent;
@@ -482,6 +485,32 @@ a.pl-row:hover {
   cursor: pointer;
   border-radius: var(--pl-radius) var(--pl-radius) 0 0;
 }
+.pl-tab__icon {
+  display: inline-flex;
+  align-items: center;
+}
+.pl-tab__icon svg {
+  width: 15px;
+  height: 15px;
+}
+.pl-tab__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 5px;
+  font-family: var(--pl-font-mono);
+  font-size: 10px;
+  line-height: 1;
+  color: var(--pl-color-fg-muted);
+  background: var(--pl-color-bg-subtle);
+  border: var(--pl-border-width) solid var(--pl-color-border);
+  border-radius: 999px;
+}
+.pl-tab--active .pl-tab__badge {
+  color: var(--pl-color-fg);
+}
 .pl-tab:hover:not(:disabled) {
   color: var(--pl-color-fg);
 }
@@ -579,6 +608,43 @@ a.pl-row:hover {
   border-color: var(--pl-color-fg);
 }
 
+/* ── PanelHeader (console panel header) ──────────────────────────────────────── */
+.pl-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--pl-space-3);
+  padding: var(--pl-space-3) var(--pl-space-4);
+  border-bottom: var(--pl-border-width) solid var(--pl-color-border);
+}
+.pl-panel-header__kicker {
+  font-family: var(--pl-font-mono);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--pl-color-fg-muted);
+  margin-bottom: 2px;
+}
+.pl-panel-header__title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: var(--pl-font-weight-medium);
+  line-height: 1.2;
+  color: var(--pl-color-fg);
+}
+.pl-panel-header__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--pl-space-2);
+  flex-shrink: 0;
+}
+.pl-panel-header--compact {
+  padding: var(--pl-space-2) var(--pl-space-3);
+}
+.pl-panel-header--compact .pl-panel-header__title {
+  font-size: 13px;
+}
+
 /* ── Overlay scrim (Dialog + Drawer) ─────────────────────────────────────────── */
 .pl-overlay {
   position: fixed;
@@ -668,6 +734,33 @@ a.pl-row:hover {
   border-color: var(--pl-color-status-error);
   color: var(--pl-color-bg);
 }
+/* Ghost — transparent until hover, for toolbars / inline actions. */
+.pl-btn--ghost {
+  border-color: transparent;
+}
+.pl-btn--ghost:hover {
+  border-color: var(--pl-color-border-strong);
+  background: var(--pl-color-bg-hover);
+}
+.pl-btn--sm {
+  padding: 0.3rem 0.6rem;
+  font-size: 12px;
+}
+/* Icon-only — square, centered glyph. */
+.pl-btn--icon {
+  padding: 0;
+  width: 30px;
+  height: 30px;
+  justify-content: center;
+}
+.pl-btn--icon.pl-btn--sm {
+  width: 26px;
+  height: 26px;
+}
+.pl-btn--icon svg {
+  width: 16px;
+  height: 16px;
+}
 
 /* ── Drawer (slide-in sheet) ─────────────────────────────────────────────────── */
 .pl-drawer {
@@ -941,9 +1034,18 @@ a.pl-row:hover {
 /* ── ScrollArea (thin brand scrollbars) ──────────────────────────────────────── */
 .pl-scroll {
   overflow: auto;
+  /* min-height:0 lets the region actually scroll inside a flex/grid parent
+     (the classic min-size trap) instead of overflowing it. */
+  min-height: 0;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
   scrollbar-width: thin;
   scrollbar-color: var(--pl-color-border-strong) transparent;
 }
+.pl-scroll:focus-visible {
+  outline: 1px solid var(--pl-color-fg);
+  outline-offset: -2px;
+}
 .pl-scroll::-webkit-scrollbar {
   width: 8px;
   height: 8px;
@@ -1097,6 +1199,113 @@ a.pl-row:hover {
   color: var(--pl-color-fg);
 }
 
+/* ── Menu / DropdownMenu (Radix-backed) ──────────────────────────────────────── */
+.pl-menu__anchor {
+  width: 0;
+  height: 0;
+  pointer-events: none;
+}
+.pl-menu {
+  min-width: 180px;
+  padding: 4px;
+  background: var(--pl-color-bg-raised);
+  border: var(--pl-border-width) solid var(--pl-color-border-strong);
+  border-radius: var(--pl-radius);
+  box-shadow: var(--pl-shadow-popover);
+  z-index: 1200;
+}
+.pl-menu__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  font-size: 13px;
+  color: var(--pl-color-fg);
+  border-radius: calc(var(--pl-radius) - 1px);
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+}
+/* Radix sets data-highlighted on the keyboard/pointer-focused item. */
+.pl-menu__item[data-highlighted] {
+  background: var(--pl-color-bg-hover);
+}
+.pl-menu__item[data-disabled] {
+  color: var(--pl-color-fg-muted);
+  opacity: 0.5;
+  pointer-events: none;
+}
+.pl-menu__item--destructive {
+  color: var(--pl-color-status-error);
+}
+.pl-menu__item--destructive[data-highlighted] {
+  background: color-mix(in oklch, var(--pl-color-status-error) 16%, transparent);
+}
+.pl-menu__icon {
+  display: inline-flex;
+  align-items: center;
+  color: var(--pl-color-fg-muted);
+}
+.pl-menu__icon svg {
+  width: 15px;
+  height: 15px;
+}
+.pl-menu__item--destructive .pl-menu__icon {
+  color: var(--pl-color-status-error);
+}
+.pl-menu__label {
+  flex: 1;
+}
+.pl-menu__subarrow {
+  color: var(--pl-color-fg-muted);
+  font-size: 14px;
+  line-height: 1;
+}
+.pl-menu__sep {
+  height: 1px;
+  margin: 4px 0;
+  background: var(--pl-color-border);
+}
+.pl-menu__group-label {
+  padding: 4px 8px;
+  font-family: var(--pl-font-mono);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--pl-color-fg-muted);
+}
+
+/* ── Skeleton (loading placeholder) ──────────────────────────────────────────── */
+.pl-skel {
+  display: block;
+  border-radius: var(--pl-radius);
+  background-color: var(--pl-color-bg-subtle);
+  background-image: linear-gradient(
+    90deg,
+    var(--pl-color-bg-subtle) 25%,
+    var(--pl-color-bg-hover) 50%,
+    var(--pl-color-bg-subtle) 75%
+  );
+  background-size: 200% 100%;
+  animation: pl-skel-shimmer 1.4s var(--pl-motion-ease-in-out) infinite;
+}
+@keyframes pl-skel-shimmer {
+  from {
+    background-position: 200% 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
+}
+.pl-skel-lines {
+  display: grid;
+  gap: 8px;
+}
+.pl-skel-group {
+  display: grid;
+  gap: var(--pl-space-3);
+}
+
 /* Respect reduced-motion for every animation this package introduces. */
 @media (prefers-reduced-motion: reduce) {
   .pl-drawer,
@@ -1105,4 +1314,9 @@ a.pl-row:hover {
   .pl-spinner {
     animation: none;
   }
+  /* Skeletons go static (solid fill, no shimmer). */
+  .pl-skel {
+    animation: none;
+    background-image: none;
+  }
 }