@bearmenu/ui 0.8.37 → 0.8.39

package/src/components/pan-zoom-viewport.test.tsx

@@ -85,14 +85,34 @@ function renderOnAPhone(props: Partial<PanZoomViewportProps> = {}) {
 describe("PanZoomViewport", () => {
   describe("fit", () => {
     it("fits the content inside its padding and centres it", () => {
-      renderViewport();
+      renderViewport({ controls: false });
       // min((800 - 48) / 400, (600 - 48) / 300) = 1.84 → 736 × 552.
       expect(transformOf()).toEqual({ x: 32, y: 24, scale: 1.84 });
       expect(content()).not.toHaveClass("invisible");
     });
 
+    it("keeps the fitted content clear of the controls, on the side that costs least", () => {
+      renderViewport();
+      // Right side widened to 64: min((800 - 88) / 400, (600 - 48) / 300) = 1.78
+      // → 712 × 534. Widening the bottom to 150 would cost more: 426 / 300 = 1.42.
+      // Its right edge lands at 736, 64 in: past the 12px inset and the 44px stack.
+      expect(transformOf()).toEqual({ x: 24, y: 33, scale: 1.78 });
+    });
+
+    it("widens the bottom instead when that leaves the bigger fit", () => {
+      viewportSize = { width: 400, height: 800 };
+      renderViewport({ contentWidth: 400, contentHeight: 300 });
+      // Bottom: min(352 / 400, 626 / 300) = 0.88. Right: 312 / 400 = 0.78.
+      expect(transformOf()).toEqual({ x: 24, y: 24 + (626 - 264) / 2, scale: 0.88 });
+    });
+
+    it("pins fitted content to the top with fitAlign top", () => {
+      renderViewport({ fitAlign: "top" });
+      expect(transformOf()).toEqual({ x: 24, y: 24, scale: 1.78 });
+    });
+
     it("stops at the floor, anchors top-left and shades the edge that runs on", () => {
-      renderOnAPhone();
+      renderOnAPhone({ controls: false });
       // The fit would be 0.285; the floor holds it at 0.5 → 600 × 400.
       // Too wide: anchored at the padding. Short enough: centred.
       expect(transformOf()).toEqual({ x: 24, y: 50, scale: 0.5 });
@@ -102,6 +122,17 @@ describe("PanZoomViewport", () => {
       expect(edgeVisible("bottom")).toBe(false);
     });
 
+    it("lets a plan under the controls pan clear of them", () => {
+      renderOnAPhone();
+      // Bottom widened to 150 (the smaller loss here): 400 tall no longer fits
+      // the 326 left, so it anchors at the top and may pan up by 74.
+      expect(transformOf()).toEqual({ x: 24, y: 24, scale: 0.5 });
+      expect(edgeVisible("bottom")).toBe(false);
+      surface().focus();
+      fireEvent.keyDown(surface(), { key: "ArrowDown", shiftKey: true });
+      expect(transformOf().y).toBe(500 - 400 - 150);
+    });
+
     it("never fits above the ceiling", () => {
       renderViewport({ contentWidth: 100, contentHeight: 100, maxScale: 2 });
       expect(transformOf().scale).toBe(2);
@@ -112,10 +143,22 @@ describe("PanZoomViewport", () => {
     it("zooms in and out by one step about the centre", async () => {
       renderViewport();
       await userEvent.click(screen.getByRole("button", { name: "Zoom out" }));
-      // 1.84 / 1.25 = 1.472 → 588.8 × 441.6, centred.
-      expect(transformOf()).toEqual({ x: 105.6, y: 79.2, scale: 1.472 });
+      // 1.78 / 1.25 = 1.424 → 569.6 × 427.2, centred between the paddings.
+      expect(transformOf()).toEqual({ x: 95.2, y: 86.4, scale: 1.424 });
       await userEvent.click(screen.getByRole("button", { name: "Zoom in" }));
-      expect(transformOf().scale).toBe(1.84);
+      expect(transformOf().scale).toBe(1.78);
+    });
+
+    it("gives every control a 44px hit area on a raised card", () => {
+      renderViewport();
+      for (const name of ["Zoom in", "Zoom out", "Fit"]) {
+        expect(screen.getByRole("button", { name })).toHaveClass("h-11", "w-11");
+      }
+      expect(screen.getByRole("group", { name: "Zoom" })).toHaveClass(
+        "bottom-3",
+        "right-3",
+        "shadow-[var(--shadow-card)]"
+      );
     });
 
     it("disables zoom out at the floor and zoom in at the ceiling", async () => {
@@ -175,7 +218,7 @@ describe("PanZoomViewport", () => {
     });
 
     it("zooms with + and -, and fits with 0", async () => {
-      renderViewport();
+      renderViewport({ controls: false });
       surface().focus();
       await userEvent.keyboard("+");
       expect(transformOf().scale).toBe(2.3);
@@ -195,7 +238,7 @@ describe("PanZoomViewport", () => {
     });
 
     it("announces the zoom level through the injected formatter", async () => {
-      renderViewport();
+      renderViewport({ controls: false });
       surface().focus();
       await userEvent.keyboard("+");
       expect(screen.getByText("230%")).toBeInTheDocument();
@@ -281,7 +324,7 @@ describe("PanZoomViewport", () => {
     });
 
     it("zooms with a two-finger pinch about the fingers", () => {
-      renderViewport();
+      renderViewport({ controls: false });
       const touch = (id: number, x: number, y: number) => ({
         pointerId: id,
         pointerType: "touch",
@@ -316,7 +359,7 @@ describe("PanZoomViewport", () => {
     });
 
     it("caps one ctrl-wheel notch so a mouse wheel does not jump", () => {
-      renderViewport({ maxScale: 10 });
+      renderViewport({ maxScale: 10, controls: false });
       wheel({ deltaY: -100, ctrlKey: true, clientX: 400, clientY: 300 });
       expect(transformOf().scale).toBeCloseTo(1.84 * Math.exp(0.25), 2);
     });
@@ -339,7 +382,7 @@ describe("PanZoomViewport", () => {
     it("drives the view from outside and reports every transform", () => {
       const api = React.createRef<PanZoomViewportHandle>();
       const onTransformChange = vi.fn();
-      renderOnAPhone({ apiRef: api, onTransformChange });
+      renderOnAPhone({ apiRef: api, onTransformChange, controls: false });
       expect(onTransformChange).toHaveBeenLastCalledWith({ scale: 0.5, x: 24, y: 50 });
 
       act(() => api.current?.centerOn(1000, 400));
@@ -355,9 +398,9 @@ describe("PanZoomViewport", () => {
     });
 
     it("refits when the plan changes size", () => {
-      const view = renderViewport();
+      const view = renderViewport({ controls: false });
       view.rerender(
-        <PanZoomViewport contentWidth={800} contentHeight={600} labels={labels}>
+        <PanZoomViewport contentWidth={800} contentHeight={600} labels={labels} controls={false}>
           <button type="button">T1</button>
         </PanZoomViewport>
       );
@@ -366,11 +409,17 @@ describe("PanZoomViewport", () => {
     });
 
     it("keeps a panned view, pulled inside the bounds, when the plan changes", async () => {
-      const view = renderOnAPhone();
+      const view = renderOnAPhone({ controls: false });
       surface().focus();
       await userEvent.keyboard("{Shift>}{ArrowRight}{/Shift}");
       view.rerender(
-        <PanZoomViewport contentWidth={700} contentHeight={800} minScale={0.5} labels={labels}>
+        <PanZoomViewport
+          contentWidth={700}
+          contentHeight={800}
+          minScale={0.5}
+          labels={labels}
+          controls={false}
+        >
           <button type="button">T1</button>
         </PanZoomViewport>
       );

package/src/components/pan-zoom-viewport.tsx

@@ -29,7 +29,9 @@ import { ButtonGroup } from "./button-group";
  * - Keyboard, with the viewport focused: arrows pan (Shift for four times the
  *   step); `+` / `-` zoom and `0` fits, from anywhere inside it. Tabbing onto
  *   a table that sits off screen pans it into view.
- * - The + / − / Fit controls, bottom right.
+ * - The + / − / Fit controls: a raised card 12px in from the bottom-right
+ *   corner, 44 × 44 per button. Fit and the pan bounds keep the content clear
+ *   of them.
  *
  * The min-scale floor: `Fit` never shrinks below `minScale`. On a phone the
  * plan would otherwise fit at a size no finger can hit, so below the floor it
@@ -106,8 +108,18 @@ export type PanZoomViewportProps = Omit<React.HTMLAttributes<HTMLDivElement>, "c
   zoomStep?: number;
   /** One arrow press, in viewport px. Default 48. */
   panStep?: number;
-  /** The air Fit leaves around the content, and how far past it a pan may go. Default 24. */
+  /**
+   * The air Fit leaves around the content, and how far past it a pan may go.
+   * Default 24. With `controls` on, the side the control stack would cover
+   * (right or bottom, whichever costs the fit less) is widened to clear it.
+   */
   fitPadding?: number;
+  /**
+   * Where fitted content sits vertically when it is shorter than the
+   * viewport: `center` (default), or `top` — pinned under the top padding,
+   * as a phone shows a plan.
+   */
+  fitAlign?: "center" | "top";
   /** Render the + / − / Fit controls. Default true. */
   controls?: boolean;
   /** Called with every transform — gestures included, so keep it cheap. */
@@ -120,6 +132,7 @@ export type PanZoomViewportProps = Omit<React.HTMLAttributes<HTMLDivElement>, "c
 
 type Size = { width: number; height: number };
 type Point = { x: number; y: number };
+type Insets = { top: number; right: number; bottom: number; left: number };
 
 type Gesture =
   | { kind: "idle" }
@@ -136,19 +149,40 @@ const DRAG_THRESHOLD = 4;
 const MAX_WHEEL_ZOOM_DELTA = 25;
 const WHEEL_ZOOM_SPEED = 0.01;
 const EPSILON = 0.001;
+/**
+ * The control stack's footprint plus air: `bottom-3 right-3` (12px), three
+ * 44px buttons sharing borders (44 × 130), and 8px before the content.
+ */
+const CONTROLS_RESERVE_X = 12 + 44 + 8;
+const CONTROLS_RESERVE_Y = 12 + 130 + 8;
 
 function clamp(value: number, min: number, max: number) {
   return Math.min(max, Math.max(min, value));
 }
 
 /**
- * One axis. Content that fits (with its padding) is centred and cannot move;
- * content that does not may pan until its far edge is `pad` inside the
- * viewport's, and no further.
+ * One axis. Content that fits between its paddings is centred between them
+ * (or held at the start one) and cannot move; content that does not may pan
+ * until its far edge is `end` inside the viewport's, and no further.
  */
-function clampAxis(offset: number, content: number, viewport: number, pad: number) {
-  if (content + pad * 2 <= viewport) return (viewport - content) / 2;
-  return clamp(offset, viewport - content - pad, pad);
+function clampAxis(
+  offset: number,
+  content: number,
+  viewport: number,
+  start: number,
+  end: number,
+  align: "center" | "start"
+) {
+  const room = viewport - start - end;
+  if (content <= room) return align === "start" ? start : start + (room - content) / 2;
+  return clamp(offset, viewport - content - end, start);
+}
+
+function fitScale(viewport: Size, insets: Insets, contentWidth: number, contentHeight: number) {
+  return Math.min(
+    (viewport.width - insets.left - insets.right) / contentWidth,
+    (viewport.height - insets.top - insets.bottom) / contentHeight
+  );
 }
 
 function distance(a: Point, b: Point) {
@@ -178,6 +212,7 @@ const PanZoomViewport = React.forwardRef<HTMLDivElement, PanZoomViewportProps>(
       zoomStep = 1.25,
       panStep = 48,
       fitPadding = 24,
+      fitAlign = "center",
       controls = true,
       onTransformChange,
       apiRef,
@@ -211,29 +246,47 @@ const PanZoomViewport = React.forwardRef<HTMLDivElement, PanZoomViewportProps>(
       zoomLevelRef.current = labels.zoomLevel;
     });
 
+    // The padding on each side. The control stack covers the bottom-right
+    // corner: keep the content clear of it by widening the right side or the
+    // bottom one — whichever leaves the bigger fit.
+    const insets = React.useMemo((): Insets => {
+      const base = { top: fitPadding, right: fitPadding, bottom: fitPadding, left: fitPadding };
+      if (!controls || !viewport) return base;
+      const right = { ...base, right: Math.max(fitPadding, CONTROLS_RESERVE_X) };
+      const bottom = { ...base, bottom: Math.max(fitPadding, CONTROLS_RESERVE_Y) };
+      return fitScale(viewport, bottom, contentWidth, contentHeight) >
+        fitScale(viewport, right, contentWidth, contentHeight)
+        ? bottom
+        : right;
+    }, [controls, viewport, fitPadding, contentWidth, contentHeight]);
+
     const clampTransform = React.useCallback(
       (next: PanZoomTransform): PanZoomTransform => {
         if (!viewport || viewport.width <= 0 || viewport.height <= 0) return next;
         const scale = clamp(next.scale, minScale, maxScale);
         return {
           scale,
-          x: clampAxis(next.x, contentWidth * scale, viewport.width, fitPadding),
-          y: clampAxis(next.y, contentHeight * scale, viewport.height, fitPadding),
+          x: clampAxis(next.x, contentWidth * scale, viewport.width, insets.left, insets.right, "center"),
+          y: clampAxis(
+            next.y,
+            contentHeight * scale,
+            viewport.height,
+            insets.top,
+            insets.bottom,
+            fitAlign === "top" ? "start" : "center"
+          ),
         };
       },
-      [viewport, minScale, maxScale, contentWidth, contentHeight, fitPadding]
+      [viewport, minScale, maxScale, contentWidth, contentHeight, insets, fitAlign]
     );
 
     const fitted = React.useCallback((): PanZoomTransform | null => {
       if (!viewport || viewport.width <= 0 || viewport.height <= 0) return null;
-      const scale = Math.min(
-        (viewport.width - fitPadding * 2) / contentWidth,
-        (viewport.height - fitPadding * 2) / contentHeight
-      );
+      const scale = fitScale(viewport, insets, contentWidth, contentHeight);
       // Start from the padded top-left: content under the floor overflows and
-      // stays anchored there; content that fits is centred by the clamp.
-      return clampTransform({ scale, x: fitPadding, y: fitPadding });
-    }, [viewport, fitPadding, contentWidth, contentHeight, clampTransform]);
+      // stays anchored there; content that fits is placed by the clamp.
+      return clampTransform({ scale, x: insets.left, y: insets.top });
+    }, [viewport, insets, contentWidth, contentHeight, clampTransform]);
 
     const commit = React.useCallback(
       (
@@ -574,13 +627,13 @@ const PanZoomViewport = React.forwardRef<HTMLDivElement, PanZoomViewportProps>(
       if (pressing.current || event.target === event.currentTarget) return;
       const bounds = event.currentTarget.getBoundingClientRect();
       const rect = event.target.getBoundingClientRect();
-      const margin = fitPadding;
       let dx = 0;
       let dy = 0;
-      if (rect.left < bounds.left + margin) dx = bounds.left + margin - rect.left;
-      else if (rect.right > bounds.right - margin) dx = bounds.right - margin - rect.right;
-      if (rect.top < bounds.top + margin) dy = bounds.top + margin - rect.top;
-      else if (rect.bottom > bounds.bottom - margin) dy = bounds.bottom - margin - rect.bottom;
+      if (rect.left < bounds.left + insets.left) dx = bounds.left + insets.left - rect.left;
+      else if (rect.right > bounds.right - insets.right) dx = bounds.right - insets.right - rect.right;
+      if (rect.top < bounds.top + insets.top) dy = bounds.top + insets.top - rect.top;
+      else if (rect.bottom > bounds.bottom - insets.bottom)
+        dy = bounds.bottom - insets.bottom - rect.bottom;
       if (dx !== 0 || dy !== 0) panBy(dx, dy);
     };
 
@@ -674,12 +727,14 @@ const PanZoomViewport = React.forwardRef<HTMLDivElement, PanZoomViewportProps>(
             orientation="vertical"
             aria-label={labels.controls}
             data-slot="pan-zoom-viewport-controls"
-            className="absolute bottom-3 right-3 rounded-xl bg-card shadow-sm"
+            // A raised card floating 12px in. The DS's default icon size, so
+            // every hit area is 44 × 44 at any width.
+            className="absolute bottom-3 right-3 rounded-xl bg-card shadow-[var(--shadow-card)]"
           >
             <Button
               type="button"
               variant="outline"
-              size="icon-sm"
+              size="icon"
               aria-label={labels.zoomIn}
               disabled={atMax}
               onClick={zoomIn}
@@ -689,7 +744,7 @@ const PanZoomViewport = React.forwardRef<HTMLDivElement, PanZoomViewportProps>(
             <Button
               type="button"
               variant="outline"
-              size="icon-sm"
+              size="icon"
               aria-label={labels.zoomOut}
               disabled={atMin}
               onClick={zoomOut}
@@ -699,7 +754,7 @@ const PanZoomViewport = React.forwardRef<HTMLDivElement, PanZoomViewportProps>(
             <Button
               type="button"
               variant="outline"
-              size="icon-sm"
+              size="icon"
               className="text-xs font-semibold"
               onClick={fit}
             >

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);