@bearmenu/ui 0.8.38 → 0.8.39

package/dist/{chunk-XLHMF6F5.js → chunk-NF5UMLSL.js}

@@ -4,20 +4,30 @@ import * as React from 'react';
 import { Drawer as Drawer$1 } from 'vaul';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var DrawerDirectionContext = React.createContext("bottom");
+var DrawerContext = React.createContext({
+  direction: "bottom",
+  modal: true
+});
 var Drawer = (_a) => {
   var _b = _a, {
     shouldScaleBackground = false,
-    direction = "bottom"
+    direction = "bottom",
+    modal = true,
+    autoFocus = true
   } = _b, props = __objRest(_b, [
     "shouldScaleBackground",
-    "direction"
+    "direction",
+    "modal",
+    "autoFocus"
   ]);
-  return /* @__PURE__ */ jsx(DrawerDirectionContext.Provider, { value: direction, children: /* @__PURE__ */ jsx(
+  const context = React.useMemo(() => ({ direction, modal }), [direction, modal]);
+  return /* @__PURE__ */ jsx(DrawerContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
     Drawer$1.Root,
     __spreadValues({
       shouldScaleBackground,
-      direction
+      direction,
+      modal,
+      autoFocus
     }, props)
   ) });
 };
@@ -39,7 +49,7 @@ var DrawerOverlay = React.forwardRef((_a, ref) => {
 DrawerOverlay.displayName = Drawer$1.Overlay.displayName;
 var DrawerContent = React.forwardRef((_a, ref) => {
   var _b = _a, { className, variant = "flush", showHandle, overlayClassName, children } = _b, props = __objRest(_b, ["className", "variant", "showHandle", "overlayClassName", "children"]);
-  const direction = React.useContext(DrawerDirectionContext);
+  const { direction, modal } = React.useContext(DrawerContext);
   const isVertical = direction === "top" || direction === "bottom";
   const handleEnabled = showHandle != null ? showHandle : direction === "bottom";
   const positionClasses = direction === "bottom" ? "inset-x-0 bottom-0 flex-col rounded-t-2xl border-t [padding-bottom:max(env(safe-area-inset-bottom),0px)]" : direction === "top" ? "inset-x-0 top-0 flex-col rounded-b-2xl border-b [padding-top:max(env(safe-area-inset-top),0px)]" : direction === "left" ? "inset-y-0 left-0 h-full w-3/4 max-w-sm flex-col rounded-r-2xl border-r [padding-left:max(env(safe-area-inset-left),0px)]" : "inset-y-0 right-0 h-full w-3/4 max-w-sm flex-col rounded-l-2xl border-l [padding-right:max(env(safe-area-inset-right),0px)]";
@@ -50,6 +60,7 @@ var DrawerContent = React.forwardRef((_a, ref) => {
       __spreadProps(__spreadValues({
         ref,
         "data-slot": "drawer-content",
+        "aria-modal": modal ? true : void 0,
         className: cn(
           "fixed z-[1000] flex border-border bg-card shadow-[var(--shadow-overlay)]",
           positionClasses,

package/dist/components/drawer.d.ts

@@ -4,8 +4,15 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 
+/**
+ * `autoFocus` defaults to `true` here, where vaul defaults it to `false`.
+ * vaul's default cancels Radix's open auto-focus, so focus never enters the
+ * sheet, Radix's FocusScope never engages, and Tab walks the page behind a
+ * modal drawer. A caller that must not move focus on open passes
+ * `autoFocus={false}`.
+ */
 declare const Drawer: {
-    ({ shouldScaleBackground, direction, ...props }: React.ComponentProps<typeof Drawer$1.Root>): react_jsx_runtime.JSX.Element;
+    ({ shouldScaleBackground, direction, modal, autoFocus, ...props }: React.ComponentProps<typeof Drawer$1.Root>): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 declare const DrawerTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/drawer.js

@@ -1,3 +1,3 @@
-export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from '../chunk-XLHMF6F5.js';
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from '../chunk-NF5UMLSL.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';

package/dist/components/empty-state.d.ts

@@ -4,6 +4,7 @@ type EmptyStateAction = {
     label: string;
     onClick: () => void;
 };
+type EmptyStateVariant = "default" | "search" | "error";
 interface EmptyStateProps {
     title: string;
     description: string;
@@ -11,10 +12,34 @@ interface EmptyStateProps {
     illustration?: React.ReactNode;
     action?: EmptyStateAction;
     secondaryAction?: EmptyStateAction;
-    variant?: "default" | "search" | "error";
+    /**
+     * The primary action's style. Defaults by variant: `outline` for `error`
+     * (try again) and `search` (clear filters) — a recovery step, not the page's
+     * main call to action — and a filled `default` for the plain empty state,
+     * where the action is usually "create the first one".
+     */
+    actionVariant?: "default" | "outline";
+    variant?: EmptyStateVariant;
     size?: "sm" | "md" | "lg";
+    /**
+     * `card` draws the booking pages' whole-body state card (reports/02-p4,
+     * calendar/02-c2): a 16px-radius card surface with the resting card shadow.
+     * `none` (the default) leaves the surface to the container it sits in.
+     */
+    surface?: "none" | "card";
     className?: string;
 }
+/**
+ * EmptyState — an icon tile, a title, one line of body and an optional action,
+ * spaced as the booking frames draw them (reports/02-p4, calendar/02-c2): a
+ * 64px tile (72px from `sm`) with a 28px glyph, 16px to the title, 12px from
+ * title to body, 16px from body to the action. The action is full-width on a
+ * phone and hugs its label from `sm`.
+ *
+ * The error variant says "error" with its glyph and its tile's wash, not by
+ * painting the title and body red: red body copy is both harder to read and
+ * louder than a load failure the user can retry.
+ */
 declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
 declare const SearchEmptyState: React.ForwardRefExoticComponent<Omit<EmptyStateProps, "icon" | "variant"> & React.RefAttributes<HTMLDivElement>>;
 declare const ErrorEmptyState: React.ForwardRefExoticComponent<Omit<EmptyStateProps, "icon" | "variant"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/empty-state.js

@@ -5,7 +5,7 @@ import { Text } from '../chunk-ZLMRVBD7.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadProps, __spreadValues } from '../chunk-MMUBH76A.js';
 import * as React from 'react';
-import { FileX, AlertCircle, Search } from 'lucide-react';
+import { AlertCircle, Search, FileX } from 'lucide-react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var sizeStyles = {
@@ -13,6 +13,16 @@ var sizeStyles = {
   md: "py-12 px-6",
   lg: "py-16 px-8"
 };
+var DEFAULT_ACTION_VARIANT = {
+  default: "default",
+  search: "outline",
+  error: "outline"
+};
+var DEFAULT_ICON = {
+  default: /* @__PURE__ */ jsx(FileX, { className: "text-muted-foreground", "aria-hidden": true }),
+  search: /* @__PURE__ */ jsx(Search, { className: "text-muted-foreground", "aria-hidden": true }),
+  error: /* @__PURE__ */ jsx(AlertCircle, { className: "text-destructive", "aria-hidden": true })
+};
 var EmptyState = React.forwardRef(
   (_a, ref) => {
     var _b = _a, {
@@ -22,8 +32,10 @@ var EmptyState = React.forwardRef(
       illustration,
       action,
       secondaryAction,
+      actionVariant,
       variant = "default",
       size = "md",
+      surface = "none",
       className
     } = _b, props = __objRest(_b, [
       "title",
@@ -32,21 +44,12 @@ var EmptyState = React.forwardRef(
       "illustration",
       "action",
       "secondaryAction",
+      "actionVariant",
       "variant",
       "size",
+      "surface",
       "className"
     ]);
-    const getDefaultIcon = () => {
-      switch (variant) {
-        case "search":
-          return /* @__PURE__ */ jsx(Search, { className: "h-12 w-12 text-muted-foreground/50" });
-        case "error":
-          return /* @__PURE__ */ jsx(AlertCircle, { className: "h-12 w-12 text-destructive/50" });
-        default:
-          return /* @__PURE__ */ jsx(FileX, { className: "h-12 w-12 text-muted-foreground/50" });
-      }
-    };
-    const textColor = variant === "error" ? "destructive" : "muted";
     return /* @__PURE__ */ jsxs(
       "div",
       __spreadProps(__spreadValues({
@@ -55,15 +58,36 @@ var EmptyState = React.forwardRef(
         className: cn(
           "flex flex-col items-center justify-center text-center",
           sizeStyles[size],
+          surface === "card" && "rounded-2xl border border-border bg-card shadow-[var(--shadow-card)]",
           className
         )
       }, props), {
         children: [
-          illustration ? /* @__PURE__ */ jsx("div", { className: "mb-6", children: illustration }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: icon || getDefaultIcon() }),
-          /* @__PURE__ */ jsx(Text, { as: "h3", weight: "semibold", color: textColor, className: "text-lg mb-2", children: title }),
-          /* @__PURE__ */ jsx(Text, { as: "p", color: textColor, className: "text-sm max-w-md mb-6", children: description }),
-          (action || secondaryAction) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-            action && /* @__PURE__ */ jsx(Button, { onClick: action.onClick, variant: "default", className: "glass-hover", children: action.label }),
+          illustration ? /* @__PURE__ */ jsx("div", { className: "mb-6", children: illustration }) : /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "empty-state-icon",
+              className: cn(
+                // The glyph size is the tile's, whatever size the caller's icon
+                // node asked for — a 40px icon in a 64px tile has no margin.
+                "mb-4 flex size-16 shrink-0 items-center justify-center rounded-2xl border border-border shadow-sm sm:size-18 [&_svg]:size-7",
+                variant === "error" ? "bg-destructive/5" : "bg-card"
+              ),
+              children: icon != null ? icon : DEFAULT_ICON[variant]
+            }
+          ),
+          /* @__PURE__ */ jsx(Text, { as: "h3", weight: "semibold", className: "text-lg", children: title }),
+          description ? /* @__PURE__ */ jsx(Text, { as: "p", color: "muted", className: "mt-3 max-w-md text-sm", children: description }) : null,
+          (action || secondaryAction) && /* @__PURE__ */ jsxs("div", { className: "mt-4 flex w-full flex-col gap-3 sm:w-auto sm:flex-row sm:items-center", children: [
+            action && /* @__PURE__ */ jsx(
+              Button,
+              {
+                onClick: action.onClick,
+                variant: actionVariant != null ? actionVariant : DEFAULT_ACTION_VARIANT[variant],
+                className: "glass-hover",
+                children: action.label
+              }
+            ),
             secondaryAction && /* @__PURE__ */ jsx(Button, { onClick: secondaryAction.onClick, variant: "outline", className: "glass-hover", children: secondaryAction.label })
           ] })
         ]

package/dist/components/responsive-overlay.js

@@ -1,6 +1,6 @@
 import { useMediaQuery, DESKTOP_MEDIA_QUERY } from '../chunk-OPVKL4VS.js';
 import { Sheet, SheetContent, SheetTitle, SheetDescription } from '../chunk-LAEVMNJN.js';
-import { Drawer, DrawerContent, DrawerTitle, DrawerDescription } from '../chunk-XLHMF6F5.js';
+import { Drawer, DrawerContent, DrawerTitle, DrawerDescription } from '../chunk-NF5UMLSL.js';
 import { Dialog, DialogContent, DialogTitle, DialogDescription } from '../chunk-IQIJCMG2.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __spreadProps, __spreadValues } from '../chunk-MMUBH76A.js';
@@ -59,15 +59,14 @@ var ResponsiveOverlay = React.forwardRef(
   }, ref) => {
     const isWide = useMediaQuery(wideFrom === "lg" ? DESKTOP_MEDIA_QUERY : MD_MEDIA_QUERY);
     const container = isWide ? desktop : "drawer";
-    const titleId = React.useId();
-    const subtitleId = React.useId();
     useFocusReturn(open);
+    const describedBy = subtitle ? {} : { "aria-describedby": void 0 };
     const Title = CONTAINER_TITLE[container];
     const Description = CONTAINER_DESCRIPTION[container];
     const header = /* @__PURE__ */ jsxs("div", { "data-slot": "responsive-overlay-header", className: "flex items-start gap-3 px-5 pt-5", children: [
       /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-        /* @__PURE__ */ jsx(Title, { id: titleId, className: "text-[19px] font-bold leading-tight", children: title }),
-        subtitle ? /* @__PURE__ */ jsx(Description, { id: subtitleId, className: "mt-1 text-[13px] text-muted-foreground", children: subtitle }) : null
+        /* @__PURE__ */ jsx(Title, { className: "text-[19px] font-bold leading-tight", children: title }),
+        subtitle ? /* @__PURE__ */ jsx(Description, { className: "mt-1 text-[13px] text-muted-foreground", children: subtitle }) : null
       ] }),
       /* @__PURE__ */ jsxs(
         "button",
@@ -102,17 +101,16 @@ var ResponsiveOverlay = React.forwardRef(
     if (container === "sheet") {
       return /* @__PURE__ */ jsx(Sheet, { open, onOpenChange, modal, children: /* @__PURE__ */ jsxs(
         SheetContent,
-        __spreadProps(__spreadValues({
+        __spreadProps(__spreadValues(__spreadProps(__spreadValues({
           ref,
           side: "right",
           attachment: "inset",
           hideClose: true,
-          overlayClassName: "bg-scrim-overlay backdrop-blur-none",
-          "aria-labelledby": titleId,
-          "aria-describedby": subtitle ? subtitleId : void 0,
+          overlayClassName: "bg-scrim-overlay backdrop-blur-none"
+        }, describedBy), {
           "data-slot": "responsive-overlay-sheet",
           "data-modal": modal ? "true" : "false"
-        }, modal ? {} : { onInteractOutside: (event) => event.preventDefault() }), {
+        }), modal ? {} : { onInteractOutside: (event) => event.preventDefault() }), {
           className: cn(
             "flex w-[420px] max-w-[calc(100vw-1.5rem)] flex-col gap-0 bg-card p-0",
             className
@@ -128,13 +126,12 @@ var ResponsiveOverlay = React.forwardRef(
     if (container === "dialog") {
       return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
         DialogContent,
-        {
+        __spreadProps(__spreadValues({
           ref,
           size,
           showCloseButton: false,
-          overlayClassName: "bg-scrim-overlay backdrop-blur-none",
-          "aria-labelledby": titleId,
-          "aria-describedby": subtitle ? subtitleId : void 0,
+          overlayClassName: "bg-scrim-overlay backdrop-blur-none"
+        }, describedBy), {
           className: cn(
             // The dialog's own `grid gap-4 p-6` would put air between the
             // header, the body and the band the frames draw flush.
@@ -146,23 +143,22 @@ var ResponsiveOverlay = React.forwardRef(
             body,
             foot
           ]
-        }
+        })
       ) });
     }
     return /* @__PURE__ */ jsx(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
       DrawerContent,
-      {
+      __spreadProps(__spreadValues({
         ref,
-        overlayClassName: "bg-scrim-overlay",
-        "aria-labelledby": titleId,
-        "aria-describedby": subtitle ? subtitleId : void 0,
+        overlayClassName: "bg-scrim-overlay"
+      }, describedBy), {
         className: cn("flex max-h-[85vh] flex-col p-0", className),
         children: [
           header,
           body,
           foot
         ]
-      }
+      })
     ) });
   }
 );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.8.38",
+  "version": "0.8.39",
   "description": "BearMenu design system — shared UI tokens, primitives, and components",
   "license": "UNLICENSED",
   "repository": {

package/src/components/drawer.test.tsx

@@ -0,0 +1,55 @@
+import { describe, it, expect } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Drawer, DrawerContent, DrawerDescription, DrawerTitle } from "./drawer";
+
+function Harness(props: { modal?: boolean; autoFocus?: boolean }) {
+  return (
+    <>
+      <button type="button">Behind</button>
+      <Drawer open onOpenChange={() => {}} {...props}>
+        <DrawerContent>
+          <DrawerTitle>Pick a range</DrawerTitle>
+          <DrawerDescription>Reports</DrawerDescription>
+          <button type="button">Inside</button>
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+}
+
+describe("Drawer", () => {
+  it("moves focus into the sheet on open", async () => {
+    render(<Harness />);
+    const dialog = screen.getByRole("dialog");
+    await waitFor(() => expect(dialog.contains(document.activeElement)).toBe(true));
+  });
+
+  it("keeps Tab inside a modal sheet", async () => {
+    render(<Harness />);
+    const dialog = screen.getByRole("dialog");
+    await waitFor(() => expect(dialog.contains(document.activeElement)).toBe(true));
+    for (let i = 0; i < 4; i += 1) {
+      await userEvent.tab();
+      expect(dialog.contains(document.activeElement)).toBe(true);
+    }
+  });
+
+  it("marks a modal sheet aria-modal", () => {
+    render(<Harness />);
+    expect(screen.getByRole("dialog")).toHaveAttribute("aria-modal", "true");
+  });
+
+  it("does not claim aria-modal when the sheet is not modal", () => {
+    render(<Harness modal={false} />);
+    expect(screen.getByRole("dialog")).not.toHaveAttribute("aria-modal");
+  });
+
+  it("leaves focus where it was with autoFocus={false}", async () => {
+    render(<Harness autoFocus={false} />);
+    const dialog = screen.getByRole("dialog");
+    // Give an open auto-focus the frame it would have taken.
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+    expect(dialog.contains(document.activeElement)).toBe(false);
+  });
+});

package/src/components/drawer.tsx

@@ -6,21 +6,40 @@ import { cn } from "../lib/utils";
 
 type DrawerDirection = "top" | "bottom" | "left" | "right";
 
-const DrawerDirectionContext = React.createContext<DrawerDirection>("bottom");
+type DrawerContextValue = { direction: DrawerDirection; modal: boolean };
 
+const DrawerContext = React.createContext<DrawerContextValue>({
+  direction: "bottom",
+  modal: true,
+});
+
+/**
+ * `autoFocus` defaults to `true` here, where vaul defaults it to `false`.
+ * vaul's default cancels Radix's open auto-focus, so focus never enters the
+ * sheet, Radix's FocusScope never engages, and Tab walks the page behind a
+ * modal drawer. A caller that must not move focus on open passes
+ * `autoFocus={false}`.
+ */
 const Drawer = ({
   shouldScaleBackground = false,
   direction = "bottom",
+  modal = true,
+  autoFocus = true,
   ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
-  <DrawerDirectionContext.Provider value={direction}>
-    <DrawerPrimitive.Root
-      shouldScaleBackground={shouldScaleBackground}
-      direction={direction}
-      {...props}
-    />
-  </DrawerDirectionContext.Provider>
-);
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => {
+  const context = React.useMemo(() => ({ direction, modal }), [direction, modal]);
+  return (
+    <DrawerContext.Provider value={context}>
+      <DrawerPrimitive.Root
+        shouldScaleBackground={shouldScaleBackground}
+        direction={direction}
+        modal={modal}
+        autoFocus={autoFocus}
+        {...props}
+      />
+    </DrawerContext.Provider>
+  );
+};
 Drawer.displayName = "Drawer";
 
 const DrawerTrigger = DrawerPrimitive.Trigger;
@@ -55,7 +74,7 @@ const DrawerContent = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Content>,
   DrawerContentProps
 >(({ className, variant = "flush", showHandle, overlayClassName, children, ...props }, ref) => {
-  const direction = React.useContext(DrawerDirectionContext);
+  const { direction, modal } = React.useContext(DrawerContext);
   const isVertical = direction === "top" || direction === "bottom";
   const handleEnabled = showHandle ?? (direction === "bottom");
 
@@ -74,6 +93,9 @@ const DrawerContent = React.forwardRef<
       <DrawerPrimitive.Content
         ref={ref}
         data-slot="drawer-content"
+        // Radix hides the page from assistive tech but never says so on the
+        // dialog itself; `aria-modal` is what tells a screen reader to stay in.
+        aria-modal={modal ? true : undefined}
         className={cn(
           "fixed z-[1000] flex border-border bg-card shadow-[var(--shadow-overlay)]",
           positionClasses,

package/src/components/empty-state.stories.tsx

@@ -49,6 +49,20 @@ export const Error: Story = {
   ),
 };
 
+/** The booking pages' whole-body failure (reports/02-p4, calendar/02-c2). */
+export const ErrorCard: Story = {
+  render: () => (
+    <div className="bg-background p-4">
+      <ErrorEmptyState
+        surface="card"
+        title="Couldn't load this report"
+        description="This is on our side, not an empty week. Try again in a moment."
+        action={{ label: "Try again", onClick: () => {} }}
+      />
+    </div>
+  ),
+};
+
 export const Small: Story = {
   args: {
     title: "No data",

package/src/components/empty-state.test.tsx

@@ -0,0 +1,60 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { EmptyState, ErrorEmptyState, SearchEmptyState } from "./empty-state";
+
+const retry = { label: "Try again", onClick: () => {} };
+
+describe("EmptyState", () => {
+  it("draws a retry on an error as an outline button", () => {
+    render(<ErrorEmptyState title="Couldn't load this report" description="On our side." action={retry} />);
+    expect(screen.getByRole("button", { name: "Try again" })).toHaveClass("border-border", "bg-background");
+  });
+
+  it("draws a clear-filters on a search as an outline button", () => {
+    render(<SearchEmptyState title="No results" description="Try another name." action={retry} />);
+    expect(screen.getByRole("button", { name: "Try again" })).toHaveClass("border-border", "bg-background");
+  });
+
+  it("keeps the plain empty state's create action filled", () => {
+    render(<EmptyState title="No items yet" description="Add the first one." action={{ label: "Add item", onClick: () => {} }} />);
+    expect(screen.getByRole("button", { name: "Add item" })).toHaveClass("bg-primary");
+  });
+
+  it("lets the caller choose the action style", () => {
+    render(<EmptyState title="Nothing" description="Here." action={retry} actionVariant="outline" />);
+    expect(screen.getByRole("button", { name: "Try again" })).toHaveClass("border-border", "bg-background");
+  });
+
+  it("calls the action", async () => {
+    const onClick = vi.fn();
+    render(<ErrorEmptyState title="Failed" description="Retry." action={{ label: "Try again", onClick }} />);
+    await userEvent.click(screen.getByRole("button", { name: "Try again" }));
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+
+  it("does not paint an error's title and body red", () => {
+    render(<ErrorEmptyState title="Failed" description="On our side." />);
+    expect(screen.getByRole("heading", { name: "Failed" }).className).not.toMatch(/destructive/);
+    expect(screen.getByText("On our side.").className).not.toMatch(/destructive/);
+  });
+
+  it("sets the icon in a tile, whatever the icon", () => {
+    render(<EmptyState title="Empty" description="" icon={<svg data-testid="glyph" className="h-10 w-10" />} />);
+    const tile = document.querySelector('[data-slot="empty-state-icon"]');
+    expect(tile).toContainElement(screen.getByTestId("glyph"));
+    expect(tile).toHaveClass("size-16", "sm:size-18", "[&_svg]:size-7");
+  });
+
+  it("renders no empty paragraph when there is no body", () => {
+    render(<EmptyState title="Empty" description="" />);
+    expect(screen.getByRole("status").querySelector("p")).toBeNull();
+  });
+
+  it("draws the card surface on request only", () => {
+    const { rerender } = render(<EmptyState title="Empty" description="Nothing." />);
+    expect(screen.getByRole("status")).not.toHaveClass("bg-card");
+    rerender(<EmptyState title="Empty" description="Nothing." surface="card" />);
+    expect(screen.getByRole("status")).toHaveClass("rounded-2xl", "bg-card", "border");
+  });
+});

package/src/components/empty-state.tsx

@@ -11,6 +11,8 @@ type EmptyStateAction = {
   onClick: () => void;
 };
 
+type EmptyStateVariant = "default" | "search" | "error";
+
 interface EmptyStateProps {
   title: string;
   description: string;
@@ -18,8 +20,21 @@ interface EmptyStateProps {
   illustration?: React.ReactNode;
   action?: EmptyStateAction;
   secondaryAction?: EmptyStateAction;
-  variant?: "default" | "search" | "error";
+  /**
+   * The primary action's style. Defaults by variant: `outline` for `error`
+   * (try again) and `search` (clear filters) — a recovery step, not the page's
+   * main call to action — and a filled `default` for the plain empty state,
+   * where the action is usually "create the first one".
+   */
+  actionVariant?: "default" | "outline";
+  variant?: EmptyStateVariant;
   size?: "sm" | "md" | "lg";
+  /**
+   * `card` draws the booking pages' whole-body state card (reports/02-p4,
+   * calendar/02-c2): a 16px-radius card surface with the resting card shadow.
+   * `none` (the default) leaves the surface to the container it sits in.
+   */
+  surface?: "none" | "card";
   className?: string;
 }
 
@@ -29,6 +44,29 @@ const sizeStyles = {
   lg: "py-16 px-8",
 } as const;
 
+const DEFAULT_ACTION_VARIANT: Record<EmptyStateVariant, "default" | "outline"> = {
+  default: "default",
+  search: "outline",
+  error: "outline",
+};
+
+const DEFAULT_ICON: Record<EmptyStateVariant, React.ReactNode> = {
+  default: <FileX className="text-muted-foreground" aria-hidden />,
+  search: <Search className="text-muted-foreground" aria-hidden />,
+  error: <AlertCircle className="text-destructive" aria-hidden />,
+};
+
+/**
+ * EmptyState — an icon tile, a title, one line of body and an optional action,
+ * spaced as the booking frames draw them (reports/02-p4, calendar/02-c2): a
+ * 64px tile (72px from `sm`) with a 28px glyph, 16px to the title, 12px from
+ * title to body, 16px from body to the action. The action is full-width on a
+ * phone and hugs its label from `sm`.
+ *
+ * The error variant says "error" with its glyph and its tile's wash, not by
+ * painting the title and body red: red body copy is both harder to read and
+ * louder than a load failure the user can retry.
+ */
 const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
   (
     {
@@ -38,26 +76,15 @@ const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
       illustration,
       action,
       secondaryAction,
+      actionVariant,
       variant = "default",
       size = "md",
+      surface = "none",
       className,
       ...props
     },
     ref
   ) => {
-    const getDefaultIcon = () => {
-      switch (variant) {
-        case "search":
-          return <Search className="h-12 w-12 text-muted-foreground/50" />;
-        case "error":
-          return <AlertCircle className="h-12 w-12 text-destructive/50" />;
-        default:
-          return <FileX className="h-12 w-12 text-muted-foreground/50" />;
-      }
-    };
-
-    const textColor = variant === "error" ? "destructive" : "muted";
-
     return (
       <div
         ref={ref}
@@ -65,6 +92,8 @@ const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
         className={cn(
           "flex flex-col items-center justify-center text-center",
           sizeStyles[size],
+          surface === "card" &&
+            "rounded-2xl border border-border bg-card shadow-[var(--shadow-card)]",
           className
         )}
         {...props}
@@ -72,21 +101,37 @@ const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
         {illustration ? (
           <div className="mb-6">{illustration}</div>
         ) : (
-          <div className="mb-4">{icon || getDefaultIcon()}</div>
+          <span
+            data-slot="empty-state-icon"
+            className={cn(
+              // The glyph size is the tile's, whatever size the caller's icon
+              // node asked for — a 40px icon in a 64px tile has no margin.
+              "mb-4 flex size-16 shrink-0 items-center justify-center rounded-2xl border border-border shadow-sm sm:size-18 [&_svg]:size-7",
+              variant === "error" ? "bg-destructive/5" : "bg-card"
+            )}
+          >
+            {icon ?? DEFAULT_ICON[variant]}
+          </span>
         )}
 
-        <Text as="h3" weight="semibold" color={textColor} className="text-lg mb-2">
+        <Text as="h3" weight="semibold" className="text-lg">
           {title}
         </Text>
 
-        <Text as="p" color={textColor} className="text-sm max-w-md mb-6">
-          {description}
-        </Text>
+        {description ? (
+          <Text as="p" color="muted" className="mt-3 max-w-md text-sm">
+            {description}
+          </Text>
+        ) : null}
 
         {(action || secondaryAction) && (
-          <div className="flex items-center gap-3">
+          <div className="mt-4 flex w-full flex-col gap-3 sm:w-auto sm:flex-row sm:items-center">
             {action && (
-              <Button onClick={action.onClick} variant="default" className="glass-hover">
+              <Button
+                onClick={action.onClick}
+                variant={actionVariant ?? DEFAULT_ACTION_VARIANT[variant]}
+                className="glass-hover"
+              >
                 {action.label}
               </Button>
             )}

package/src/components/floor-tokens.stories.tsx

@@ -0,0 +1,223 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+/**
+ * Tokens / Floor — the floor plan's `--floor-*` palette (5a "Jewel",
+ * contrast-corrected). Every status fill gradient, its chair-ring colour and
+ * its foreground, in light and dark side by side. The dark column is a `.dark`
+ * scope, so keep the toolbar on Light to compare the two.
+ */
+
+type Status = {
+  key: string;
+  label: string;
+  time?: string;
+  /** Token stem, e.g. `booked` → `--floor-booked-from`. */
+  stem: string;
+  /** The status overlay on the chair ring; statuses without one show the neutral track only. */
+  seat?: string;
+  foreground: string;
+  halo?: string;
+  ring?: { color: string; dashed: boolean };
+};
+
+const STATUSES: Status[] = [
+  { key: "free", label: "T1", time: "Free", stem: "free", foreground: "--floor-free-foreground" },
+  { key: "booked", label: "T2", time: "19:30", stem: "booked", seat: "--floor-booked-seat", foreground: "--floor-booked-foreground" },
+  { key: "seated", label: "T3", time: "45m", stem: "seated", seat: "--floor-seated-seat", foreground: "--floor-seated-foreground" },
+  { key: "over", label: "T4", time: "+12m", stem: "over", seat: "--floor-over-seat", foreground: "--floor-over-foreground", halo: "--floor-over-halo" },
+  { key: "late", label: "T5", time: "Late 8m", stem: "late", seat: "--floor-late-seat", foreground: "--floor-late-foreground", halo: "--floor-late-halo" },
+  { key: "blocked", label: "T6", time: "Held", stem: "blocked", seat: "--floor-blocked-seat", foreground: "--floor-blocked-foreground" },
+  { key: "out-of-service", label: "T7", time: "Out", stem: "out-of-service", foreground: "--floor-out-of-service-foreground" },
+  { key: "offline", label: "T8", time: "Offline", stem: "offline", seat: "--floor-offline-seat", foreground: "--floor-offline-foreground" },
+  { key: "offer", label: "T9", time: "Offer", stem: "free", foreground: "--floor-free-foreground", ring: { color: "--floor-offer", dashed: true } },
+  { key: "selected", label: "T10", time: "19:30", stem: "booked", seat: "--floor-booked-seat", foreground: "--floor-booked-foreground", ring: { color: "--floor-selected", dashed: false } },
+];
+
+const SINGLES = [
+  "--floor-seat",
+  "--floor-muted-foreground",
+  "--floor-on-fill-foreground",
+  "--floor-late-halo",
+  "--floor-over-halo",
+  "--floor-busy",
+  "--floor-error",
+  "--floor-error-foreground",
+  "--floor-offer",
+  "--floor-selected",
+  "--floor-room",
+  "--floor-wall",
+  "--floor-fixture",
+  "--floor-shadow",
+];
+
+/** Short side 60: the geometry in the token notes is in units of it. */
+const S = 60;
+const W = 96;
+const RX = 0.1 * S;
+const OFFSET = 0.0867 * S;
+const HALO = 0.1756 * S;
+
+function Table({ status, theme }: { status: Status; theme: string }) {
+  const id = `floor-${status.key}-${theme}`;
+  const pad = 14;
+  const ring = { x: pad - OFFSET, y: pad - OFFSET, w: W + 2 * OFFSET, h: S + 2 * OFFSET };
+  return (
+    <svg
+      width={W + 2 * pad}
+      height={S + 2 * pad}
+      viewBox={`0 0 ${W + 2 * pad} ${S + 2 * pad}`}
+      role="img"
+      aria-label={`${status.key} table`}
+    >
+      <defs>
+        <linearGradient id={id} x1="0" x2="1" y1="0" y2="0">
+          <stop offset="0" style={{ stopColor: `var(--floor-${status.stem}-from)` }} />
+          <stop offset="1" style={{ stopColor: `var(--floor-${status.stem}-to)` }} />
+        </linearGradient>
+        <filter id={`${id}-shadow`} x="-30%" y="-30%" width="160%" height="180%">
+          <feDropShadow dx="0" dy={0.047 * S} stdDeviation={0.053 * S} floodColor="var(--floor-shadow)" floodOpacity="0.16" />
+        </filter>
+      </defs>
+      {status.halo ? (
+        <rect
+          x={pad - HALO}
+          y={pad - HALO}
+          width={W + 2 * HALO}
+          height={S + 2 * HALO}
+          rx={RX + HALO}
+          fill="none"
+          strokeWidth={0.037 * S}
+          style={{ stroke: `var(${status.halo})` }}
+        />
+      ) : null}
+      <rect
+        x={ring.x}
+        y={ring.y}
+        width={ring.w}
+        height={ring.h}
+        rx={RX + OFFSET}
+        fill="none"
+        strokeWidth={0.0667 * S}
+        strokeLinecap="round"
+        style={{ stroke: "var(--floor-seat)" }}
+      />
+      {status.seat ? (
+        <rect
+          x={ring.x}
+          y={ring.y}
+          width={ring.w}
+          height={ring.h}
+          rx={RX + OFFSET}
+          fill="none"
+          pathLength={100}
+          strokeDasharray="60 40"
+          strokeWidth={0.0667 * S}
+          strokeLinecap="round"
+          style={{ stroke: `var(${status.seat})` }}
+        />
+      ) : null}
+      {status.ring ? (
+        <rect
+          x={pad - HALO}
+          y={pad - HALO}
+          width={W + 2 * HALO}
+          height={S + 2 * HALO}
+          rx={RX + HALO}
+          fill="none"
+          strokeWidth={0.037 * S}
+          strokeDasharray={status.ring.dashed ? "4 3" : undefined}
+          style={{ stroke: `var(${status.ring.color})` }}
+        />
+      ) : null}
+      <rect x={pad} y={pad} width={W} height={S} rx={RX} fill={`url(#${id})`} filter={`url(#${id}-shadow)`} />
+      <text
+        x={pad + W / 2}
+        y={pad + S / 2 - 2}
+        textAnchor="middle"
+        fontSize={0.2067 * S}
+        fontWeight={700}
+        style={{ fill: `var(${status.foreground})` }}
+      >
+        {status.label}
+      </text>
+      {status.time ? (
+        <text
+          x={pad + W / 2}
+          y={pad + S / 2 + 0.1333 * S + 2}
+          textAnchor="middle"
+          fontSize={Math.max(12, 0.1333 * S)}
+          fontWeight={600}
+          style={{ fill: `var(${status.foreground})`, fontVariantNumeric: "tabular-nums" }}
+        >
+          {status.time}
+        </text>
+      ) : null}
+    </svg>
+  );
+}
+
+function Chip({ token }: { token: string }) {
+  return (
+    <div className="flex items-center gap-2">
+      <span
+        className="size-5 shrink-0 rounded-md border border-border"
+        style={{ background: `var(${token})` }}
+      />
+      <code className="text-2xs text-muted-foreground">{token}</code>
+    </div>
+  );
+}
+
+function Panel({ theme }: { theme: "light" | "dark" }) {
+  return (
+    <section
+      className={`${theme === "dark" ? "dark" : ""} flex flex-col gap-6 rounded-2xl p-6 text-foreground`}
+      style={{ background: "var(--floor-room)" }}
+    >
+      <h2 className="text-lg font-semibold">{theme === "dark" ? "Dark" : "Light"}</h2>
+      <div className="flex flex-col gap-4">
+        {STATUSES.map((status) => (
+          <div key={status.key} className="flex items-center gap-4">
+            <Table status={status} theme={theme} />
+            <div className="flex flex-col gap-1">
+              <span className="text-sm font-semibold">{status.key}</span>
+              {status.ring ? (
+                <Chip token={status.ring.color} />
+              ) : (
+                <>
+                  <Chip token={`--floor-${status.stem}-from`} />
+                  <Chip token={`--floor-${status.stem}-to`} />
+                  {status.seat ? <Chip token={status.seat} /> : null}
+                  <Chip token={status.foreground} />
+                  {status.halo ? <Chip token={status.halo} /> : null}
+                </>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className="grid grid-cols-2 gap-2 border-t border-border pt-4">
+        {SINGLES.map((token) => (
+          <Chip key={token} token={token} />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+const meta = {
+  title: "Tokens/Floor",
+  parameters: { layout: "padded" },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const BothThemes: Story = {
+  render: () => (
+    <div className="grid gap-6 md:grid-cols-2">
+      <Panel theme="light" />
+      <Panel theme="dark" />
+    </div>
+  ),
+};

package/src/components/responsive-overlay.test.tsx

@@ -78,6 +78,46 @@ describe("ResponsiveOverlay", () => {
     expect(dialog).toHaveAccessibleDescription("Table 18 · from the menu");
   });
 
+  describe("wires its title as the Radix title in every mode", () => {
+    const MODES: Array<{
+      name: string;
+      wide: boolean;
+      props: Partial<React.ComponentProps<typeof ResponsiveOverlay>>;
+    }> = [
+      { name: "drawer", wide: false, props: {} },
+      { name: "dialog", wide: true, props: {} },
+      { name: "modal sheet", wide: true, props: { desktop: "sheet" } },
+      { name: "live sheet", wide: true, props: { desktop: "sheet", modal: false } },
+    ];
+
+    const logged = (...spies: Array<ReturnType<typeof vi.spyOn>>) =>
+      spies.flatMap((spy) => spy.mock.calls.flat()).join(" ");
+
+    for (const mode of MODES) {
+      it(`${mode.name}: named, described, and no Radix title warning`, () => {
+        const error = vi.spyOn(console, "error").mockImplementation(() => {});
+        const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+        setWidth(mode.wide);
+        open(mode.props);
+        const dialog = screen.getByRole("dialog");
+        expect(dialog).toHaveAccessibleName("Add an item");
+        expect(dialog).toHaveAccessibleDescription("Table 18 · from the menu");
+        expect(logged(error, warn)).not.toMatch(/DialogTitle|Description/);
+      });
+
+      it(`${mode.name}: no description warning without a subtitle`, () => {
+        const error = vi.spyOn(console, "error").mockImplementation(() => {});
+        const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+        setWidth(mode.wide);
+        open({ ...mode.props, subtitle: undefined });
+        const dialog = screen.getByRole("dialog");
+        expect(dialog).toHaveAccessibleName("Add an item");
+        expect(dialog).not.toHaveAttribute("aria-describedby");
+        expect(logged(error, warn)).not.toMatch(/DialogTitle|Description/);
+      });
+    }
+  });
+
   it("closes through the round button", async () => {
     const onOpenChange = vi.fn();
     open({ onOpenChange });

package/src/components/responsive-overlay.tsx

@@ -164,21 +164,27 @@ const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProp
   ) => {
     const isWide = useMediaQuery(wideFrom === "lg" ? DESKTOP_MEDIA_QUERY : MD_MEDIA_QUERY);
     const container: "drawer" | "dialog" | "sheet" = isWide ? desktop : "drawer";
-    const titleId = React.useId();
-    const subtitleId = React.useId();
     useFocusReturn(open);
 
+    // The name and the description are Radix's own: its `Title` and
+    // `Description` register ids in the dialog context and `Content` points
+    // `aria-labelledby` / `aria-describedby` at them. Passing our own ids
+    // overrode the registered one, so Radix found no title under its id and
+    // logged "DialogContent requires a DialogTitle" in every mode. Without a subtitle, `aria-describedby={undefined}` is Radix's
+    // documented opt-out, rather than a pointer at an element that never renders.
+    const describedBy = subtitle ? {} : { "aria-describedby": undefined };
+
     const Title = CONTAINER_TITLE[container];
     const Description = CONTAINER_DESCRIPTION[container];
 
     const header = (
       <div data-slot="responsive-overlay-header" className="flex items-start gap-3 px-5 pt-5">
         <div className="min-w-0 flex-1">
-          <Title id={titleId} className="text-[19px] font-bold leading-tight">
+          <Title className="text-[19px] font-bold leading-tight">
             {title}
           </Title>
           {subtitle ? (
-            <Description id={subtitleId} className="mt-1 text-[13px] text-muted-foreground">
+            <Description className="mt-1 text-[13px] text-muted-foreground">
               {subtitle}
             </Description>
           ) : null}
@@ -226,8 +232,7 @@ const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProp
             attachment="inset"
             hideClose
             overlayClassName="bg-scrim-overlay backdrop-blur-none"
-            aria-labelledby={titleId}
-            aria-describedby={subtitle ? subtitleId : undefined}
+            {...describedBy}
             data-slot="responsive-overlay-sheet"
             data-modal={modal ? "true" : "false"}
             // A working rail must survive the page being used: a click on the
@@ -258,8 +263,7 @@ const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProp
             size={size}
             showCloseButton={false}
             overlayClassName="bg-scrim-overlay backdrop-blur-none"
-            aria-labelledby={titleId}
-            aria-describedby={subtitle ? subtitleId : undefined}
+            {...describedBy}
             className={cn(
               // The dialog's own `grid gap-4 p-6` would put air between the
               // header, the body and the band the frames draw flush.
@@ -280,8 +284,7 @@ const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProp
         <DrawerContent
           ref={ref}
           overlayClassName="bg-scrim-overlay"
-          aria-labelledby={titleId}
-          aria-describedby={subtitle ? subtitleId : undefined}
+          {...describedBy}
           className={cn("flex max-h-[85vh] flex-col p-0", className)}
         >
           {header}

package/src/globals.css

@@ -312,6 +312,70 @@ h6 {
      than a black one before it looks dirty. */
   --icon-depth-neutral: drop-shadow(0 1px 1px oklch(0.38 0 0 / 0.29))
     drop-shadow(0 2px 4px oklch(0.38 0 0 / 0.22));
+
+  /* ─── Floor plan (5a "Jewel", contrast-corrected) ─────────────────────
+     The table map's status palette. 5a as drawn failed contrast (white on
+     booked/seated/late/blocked 2.4–4.6:1, the empty seat track 1.49:1 on the
+     card); these keep its hue, chroma and gradient direction and correct
+     lightness only. Worst point over 15–85% of each gradient: text >= 4.79:1
+     light / 6.29:1 dark, seats >= 3.03:1 / 3.11:1 against card and room.
+
+     Per status: `-from` / `-to` are the table fill, a horizontal gradient
+     inside the table's rotated group (SVG `stop-color: var(--floor-…-from)`);
+     `-seat` is the status overlay on the chair ring, drawn over the neutral
+     `--floor-seat` track; `-foreground` is the label and time on the fill.
+     Booked, seated, late and blocked share `--floor-on-fill-foreground`.
+     Halos (late, over time) pulse outside the ring; `--floor-offer` is the
+     dashed offer ring and `--floor-selected` the solid selection ring.
+     `--floor-shadow` is the flood colour of the table's three drop shadows,
+     their alphas multiplied by `--floor-shadow-strength`.
+     Tailwind: `fill-floor-*`, `stroke-floor-*`, `bg-floor-*`, `text-floor-*`. */
+  --floor-free-from: oklch(1 0 0);
+  --floor-free-to: oklch(0.955 0.012 65);
+  --floor-free-foreground: oklch(0.22 0.025 45);
+  --floor-muted-foreground: oklch(0.48 0.02 45);
+  --floor-seat: oklch(0.66 0.012 60);
+  --floor-booked-from: oklch(0.47 0.13 258);
+  --floor-booked-to: oklch(0.555 0.115 236);
+  --floor-booked-seat: oklch(0.6 0.12 248);
+  --floor-seated-from: oklch(0.45 0.095 163);
+  --floor-seated-to: oklch(0.545 0.145 150);
+  --floor-seated-seat: oklch(0.53 0.12 158);
+  --floor-over-from: oklch(0.74 0.15 62);
+  --floor-over-to: oklch(0.85 0.15 92);
+  --floor-over-seat: oklch(0.64 0.145 62);
+  --floor-over-foreground: oklch(0.22 0.025 45);
+  --floor-late-from: oklch(0.5 0.19 18);
+  --floor-late-to: oklch(0.57 0.18 32);
+  --floor-late-seat: oklch(0.56 0.19 22);
+  --floor-blocked-from: oklch(0.48 0.015 60);
+  --floor-blocked-to: oklch(0.555 0.01 70);
+  --floor-blocked-seat: oklch(0.6 0.012 60);
+  --floor-out-of-service-from: oklch(0.93 0.006 60);
+  --floor-out-of-service-to: oklch(0.96 0.004 70);
+  --floor-offline-from: oklch(0.86 0.004 60);
+  --floor-offline-to: oklch(0.9 0.004 70);
+  --floor-offline-seat: oklch(0.64 0.006 60);
+  --floor-offline-foreground: oklch(0.3 0.012 50);
+  --floor-on-fill-foreground: oklch(0.99 0.005 70);
+  --floor-late-halo: oklch(0.56 0.2 27);
+  --floor-over-halo: oklch(0.64 0.145 62);
+  --floor-busy: oklch(0.42 0.02 45);
+  --floor-error: oklch(0.56 0.2 27);
+  --floor-error-foreground: oklch(0.99 0 0);
+  --floor-offer: var(--primary);
+  --floor-selected: oklch(0.25 0.05 35);
+  --floor-room: oklch(0.99 0.005 75);
+  --floor-wall: oklch(0.33 0.02 45);
+  --floor-fixture: oklch(0.62 0.018 50);
+  --floor-shadow: oklch(0.222 0.036 53.5);
+  --floor-shadow-strength: 1;
+  /* Per-status foreground aliases, so a status maps to one token family. */
+  --floor-booked-foreground: var(--floor-on-fill-foreground);
+  --floor-seated-foreground: var(--floor-on-fill-foreground);
+  --floor-late-foreground: var(--floor-on-fill-foreground);
+  --floor-blocked-foreground: var(--floor-on-fill-foreground);
+  --floor-out-of-service-foreground: var(--floor-muted-foreground);
 }
 
 .dark {
@@ -424,6 +488,57 @@ h6 {
      pushed harder since the panel absorbs most of the shadow. */
   --icon-depth-neutral: drop-shadow(0 1px 1px oklch(0 0 0 / 0.47))
     drop-shadow(0 2px 4px oklch(0 0 0 / 0.34));
+
+  /* Floor plan, dark — derived from the light set (see :root). Fills sit
+     deeper, seats and halos lift off the dark card, the over-time amber keeps
+     dark type. The shadow goes black at twice the alpha: a warm shadow has
+     nothing to darken on a 0.225 room. Aliases are restated, as the sidebar's
+     are, so a `.dark` below the root does not inherit the light values. */
+  --floor-free-from: oklch(0.32 0.012 60);
+  --floor-free-to: oklch(0.285 0.01 60);
+  --floor-free-foreground: oklch(0.96 0.005 60);
+  --floor-muted-foreground: oklch(0.76 0.01 60);
+  --floor-seat: oklch(0.54 0.012 60);
+  --floor-booked-from: oklch(0.4 0.12 258);
+  --floor-booked-to: oklch(0.48 0.1 236);
+  --floor-booked-seat: oklch(0.64 0.12 245);
+  --floor-seated-from: oklch(0.39 0.082 163);
+  --floor-seated-to: oklch(0.475 0.125 150);
+  --floor-seated-seat: oklch(0.66 0.15 155);
+  --floor-over-from: oklch(0.7 0.14 62);
+  --floor-over-to: oklch(0.8 0.14 88);
+  --floor-over-seat: oklch(0.78 0.15 78);
+  --floor-over-foreground: oklch(0.2 0.03 40);
+  --floor-late-from: oklch(0.42 0.16 18);
+  --floor-late-to: oklch(0.5 0.165 30);
+  --floor-late-seat: oklch(0.64 0.19 25);
+  --floor-blocked-from: oklch(0.38 0.012 60);
+  --floor-blocked-to: oklch(0.44 0.01 70);
+  --floor-blocked-seat: oklch(0.58 0.012 60);
+  --floor-out-of-service-from: oklch(0.26 0.006 60);
+  --floor-out-of-service-to: oklch(0.24 0.005 60);
+  --floor-offline-from: oklch(0.3 0.004 60);
+  --floor-offline-to: oklch(0.27 0.004 60);
+  --floor-offline-seat: oklch(0.52 0.004 60);
+  --floor-offline-foreground: oklch(0.82 0.004 60);
+  --floor-on-fill-foreground: oklch(0.98 0.005 70);
+  --floor-late-halo: oklch(0.66 0.2 25);
+  --floor-over-halo: oklch(0.82 0.16 82);
+  --floor-busy: oklch(0.82 0.01 60);
+  --floor-error: oklch(0.58 0.19 25);
+  --floor-error-foreground: oklch(0.99 0 0);
+  --floor-offer: var(--primary);
+  --floor-selected: oklch(0.96 0.005 60);
+  --floor-room: oklch(0.225 0.012 45);
+  --floor-wall: oklch(0.78 0.01 60);
+  --floor-fixture: oklch(0.55 0.012 60);
+  --floor-shadow: oklch(0 0 0);
+  --floor-shadow-strength: 2;
+  --floor-booked-foreground: var(--floor-on-fill-foreground);
+  --floor-seated-foreground: var(--floor-on-fill-foreground);
+  --floor-late-foreground: var(--floor-on-fill-foreground);
+  --floor-blocked-foreground: var(--floor-on-fill-foreground);
+  --floor-out-of-service-foreground: var(--floor-muted-foreground);
 }
 
 /* Named 11px step (`text-2xs`) for micro-labels: overlay pills, hour
@@ -477,6 +592,52 @@ h6 {
   --color-avatar-blue: var(--avatar-blue);
   --color-avatar-violet: var(--avatar-violet);
   --color-avatar-rose: var(--avatar-rose);
+  /* `fill-floor-booked-from`, `stroke-floor-seat`, `text-floor-on-fill-foreground` … —
+     the floor plan's status palette (see `--floor-*` in :root). */
+  --color-floor-free-from: var(--floor-free-from);
+  --color-floor-free-to: var(--floor-free-to);
+  --color-floor-free-foreground: var(--floor-free-foreground);
+  --color-floor-muted-foreground: var(--floor-muted-foreground);
+  --color-floor-seat: var(--floor-seat);
+  --color-floor-booked-from: var(--floor-booked-from);
+  --color-floor-booked-to: var(--floor-booked-to);
+  --color-floor-booked-seat: var(--floor-booked-seat);
+  --color-floor-booked-foreground: var(--floor-booked-foreground);
+  --color-floor-seated-from: var(--floor-seated-from);
+  --color-floor-seated-to: var(--floor-seated-to);
+  --color-floor-seated-seat: var(--floor-seated-seat);
+  --color-floor-seated-foreground: var(--floor-seated-foreground);
+  --color-floor-over-from: var(--floor-over-from);
+  --color-floor-over-to: var(--floor-over-to);
+  --color-floor-over-seat: var(--floor-over-seat);
+  --color-floor-over-foreground: var(--floor-over-foreground);
+  --color-floor-late-from: var(--floor-late-from);
+  --color-floor-late-to: var(--floor-late-to);
+  --color-floor-late-seat: var(--floor-late-seat);
+  --color-floor-late-foreground: var(--floor-late-foreground);
+  --color-floor-blocked-from: var(--floor-blocked-from);
+  --color-floor-blocked-to: var(--floor-blocked-to);
+  --color-floor-blocked-seat: var(--floor-blocked-seat);
+  --color-floor-blocked-foreground: var(--floor-blocked-foreground);
+  --color-floor-out-of-service-from: var(--floor-out-of-service-from);
+  --color-floor-out-of-service-to: var(--floor-out-of-service-to);
+  --color-floor-out-of-service-foreground: var(--floor-out-of-service-foreground);
+  --color-floor-offline-from: var(--floor-offline-from);
+  --color-floor-offline-to: var(--floor-offline-to);
+  --color-floor-offline-seat: var(--floor-offline-seat);
+  --color-floor-offline-foreground: var(--floor-offline-foreground);
+  --color-floor-on-fill-foreground: var(--floor-on-fill-foreground);
+  --color-floor-late-halo: var(--floor-late-halo);
+  --color-floor-over-halo: var(--floor-over-halo);
+  --color-floor-busy: var(--floor-busy);
+  --color-floor-error: var(--floor-error);
+  --color-floor-error-foreground: var(--floor-error-foreground);
+  --color-floor-offer: var(--floor-offer);
+  --color-floor-selected: var(--floor-selected);
+  --color-floor-room: var(--floor-room);
+  --color-floor-wall: var(--floor-wall);
+  --color-floor-fixture: var(--floor-fixture);
+  --color-floor-shadow: var(--floor-shadow);
 
   /* Radius scale */
   --radius-sm: calc(var(--radius) - 4px);