@adatechnology/scheduling-ui 0.1.0-rc.4 → 0.1.0-rc.6

package/dist/index.js

@@ -313,10 +313,11 @@ var DEFAULT_SCHEDULING_WORKSPACE_LABELS = {
 };
 
 // src/workspace/SchedulingWorkspace.tsx
-import { useState as useState13 } from "react";
+import { useState as useState14 } from "react";
 
 // src/workspace/AgendaArea.tsx
-import { useState } from "react";
+import { CalendarDays, ChevronLeft, ChevronRight } from "lucide-react";
+import { useEffect as useEffect3, useState as useState3 } from "react";
 import { MAX_PAGE_SIZE } from "@adatechnology/scheduling-contracts";
 
 // src/locales/pt-BR.json
@@ -410,7 +411,22 @@ var pt_BR_default = {
   "datetime.year": "Ano",
   "datetime.month": "M\xEAs",
   "datetime.day": "Dia",
-  "datetime.time": "Hora"
+  "datetime.time": "Hora",
+  "common.emptyHint": "Quando houver algo aqui, ele aparece nesta lista.",
+  "agenda.allResources": "Todos",
+  "agenda.viewLabel": "Visualiza\xE7\xE3o",
+  "agenda.now": "Agora",
+  "agenda.emptyTitle": "Nada agendado",
+  "resource.emptyTitle": "Nenhum recurso cadastrado",
+  "resource.emptyHint": "Recursos s\xE3o quem ou o que atende \u2014 pessoas, salas, equipamentos.",
+  "service.emptyTitle": "Nenhum servi\xE7o cadastrado",
+  "service.emptyHint": "Servi\xE7os definem o que \xE9 agendado e quanto tempo dura.",
+  "booking.emptyTitle": "Nenhuma reserva",
+  "booking.emptyHint": "Ajuste os filtros de status ou aguarde novas solicita\xE7\xF5es.",
+  "availability.selectResourceTitle": "Escolha um recurso",
+  "availability.selectResourceHint": "As regras de disponibilidade s\xE3o definidas por recurso.",
+  "select.search": "Buscar\u2026",
+  "select.noResults": "Nenhum resultado"
 };
 
 // src/locales/en.json
@@ -504,7 +520,22 @@ var en_default = {
   "datetime.year": "Year",
   "datetime.month": "Month",
   "datetime.day": "Day",
-  "datetime.time": "Time"
+  "datetime.time": "Time",
+  "common.emptyHint": "When there is something here, it shows up in this list.",
+  "agenda.allResources": "All",
+  "agenda.viewLabel": "View",
+  "agenda.now": "Now",
+  "agenda.emptyTitle": "Nothing scheduled",
+  "resource.emptyTitle": "No resources yet",
+  "resource.emptyHint": "Resources are who or what serves \u2014 people, rooms, equipment.",
+  "service.emptyTitle": "No services yet",
+  "service.emptyHint": "Services define what gets booked and how long it takes.",
+  "booking.emptyTitle": "No bookings",
+  "booking.emptyHint": "Adjust the status filters or wait for new requests.",
+  "availability.selectResourceTitle": "Pick a resource",
+  "availability.selectResourceHint": "Availability rules are defined per resource.",
+  "select.search": "Search\u2026",
+  "select.noResults": "No results"
 };
 
 // src/locales/index.ts
@@ -517,6 +548,47 @@ function resolveSchedulingMessages(locale) {
   return MESSAGES_BY_LOCALE[locale] ?? MESSAGES_BY_LOCALE[DEFAULT_SCHEDULING_LOCALE];
 }
 
+// src/components/BookingStatusBadge.tsx
+import { BOOKING_STATUS } from "@adatechnology/scheduling-contracts";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var BOOKING_STATUS_TONE = {
+  [BOOKING_STATUS.REQUESTED]: {
+    badge: "bg-amber-100 text-amber-800 dark:bg-amber-900/50 dark:text-amber-200",
+    block: "border-amber-400 bg-amber-50 text-amber-900 dark:border-amber-600 dark:bg-amber-900/40 dark:text-amber-100"
+  },
+  [BOOKING_STATUS.CONFIRMED]: {
+    badge: "bg-brand-100 text-brand-800 dark:bg-brand-900/50 dark:text-brand-200",
+    block: "border-brand-400 bg-brand-50 text-brand-900 dark:border-brand-600 dark:bg-brand-900/40 dark:text-brand-100"
+  },
+  [BOOKING_STATUS.CANCELLED]: {
+    badge: "bg-gray-200 text-gray-600 line-through dark:bg-gray-700 dark:text-gray-400",
+    block: "border-gray-300 bg-gray-100 text-gray-500 line-through dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400"
+  },
+  [BOOKING_STATUS.COMPLETED]: {
+    badge: "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/50 dark:text-emerald-200",
+    block: "border-emerald-400 bg-emerald-50 text-emerald-900 dark:border-emerald-600 dark:bg-emerald-900/40 dark:text-emerald-100"
+  },
+  [BOOKING_STATUS.NO_SHOW]: {
+    badge: "bg-red-100 text-red-800 dark:bg-red-900/50 dark:text-red-200",
+    block: "border-red-400 bg-red-50 text-red-900 dark:border-red-600 dark:bg-red-900/40 dark:text-red-100"
+  }
+};
+function bookingStatusLabel(messages, status) {
+  const key = status === BOOKING_STATUS.NO_SHOW ? "booking.status.noShow" : `booking.status.${status}`;
+  return messages[key];
+}
+function BookingStatusBadge({ status }) {
+  const { locale } = useSchedulingConfig();
+  const messages = resolveSchedulingMessages(locale);
+  return /* @__PURE__ */ jsx2(
+    "span",
+    {
+      className: `inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${BOOKING_STATUS_TONE[status].badge}`,
+      children: bookingStatusLabel(messages, status)
+    }
+  );
+}
+
 // src/components/agendaLayout.util.ts
 function groupOverlappingBookings(sortedBookings) {
   const clusters = [];
@@ -565,7 +637,9 @@ function startOfDay(date) {
 }
 
 // src/components/AgendaGrid.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var HOUR_HEIGHT_REM = 4;
+var HEADER_CLASS = "sticky top-0 z-10 h-10 bg-white px-2 text-xs font-medium text-gray-700 dark:bg-gray-900 dark:text-gray-300";
 function buildHours(startHour, endHour) {
   return Array.from({ length: endHour - startHour }, (_hour, index) => startHour + index);
 }
@@ -575,14 +649,18 @@ function bookingsOnDay(bookings, day, startHour, endHour) {
   const visibleEnd = new Date(dayStart.getTime() + endHour * 60 * 6e4);
   return bookings.filter((booking) => booking.startsAt < visibleEnd && booking.endsAt > visibleStart);
 }
-function AgendaGrid({ bookings, days }) {
+function isSameDay(left, right) {
+  return startOfDay(left).getTime() === startOfDay(right).getTime();
+}
+function AgendaGrid({ bookings, days, now, onSelect }) {
   const { locale, agendaStartHour, agendaEndHour } = useSchedulingConfig();
   const messages = resolveSchedulingMessages(locale);
   const hours = buildHours(agendaStartHour, agendaEndHour);
-  return /* @__PURE__ */ jsxs("div", { className: "flex overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col shrink-0 border-r border-gray-200 dark:border-gray-700 text-xs text-gray-500 dark:text-gray-400", children: [
-      /* @__PURE__ */ jsx2("div", { className: "h-8" }),
-      hours.map((hour) => /* @__PURE__ */ jsxs("div", { className: "h-16 px-2 pt-1", children: [
+  const columnHeight = `${hours.length * HOUR_HEIGHT_REM}rem`;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 min-h-0 overflow-auto rounded-xl border border-gray-200 dark:border-gray-800", children: [
+    /* @__PURE__ */ jsxs("div", { className: "sticky left-0 z-20 flex shrink-0 flex-col border-r border-gray-200 bg-white text-xs text-gray-500 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-400", children: [
+      /* @__PURE__ */ jsx3("div", { className: `${HEADER_CLASS} border-b border-gray-200 dark:border-gray-800` }),
+      hours.map((hour) => /* @__PURE__ */ jsxs("div", { className: "h-16 border-b border-gray-100 px-2 pt-1 tabular-nums dark:border-gray-800/60", children: [
         String(hour).padStart(2, "0"),
         ":00"
       ] }, hour))
@@ -591,47 +669,748 @@ function AgendaGrid({ bookings, days }) {
       const dayBookings = bookingsOnDay(bookings, day, agendaStartHour, agendaEndHour);
       const positioned = layoutDayBookings(dayBookings);
       const dayStart = startOfDay(day);
-      return /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-40 border-r border-gray-200 dark:border-gray-700 last:border-r-0", children: [
-        /* @__PURE__ */ jsx2("div", { className: "h-8 px-2 flex items-center text-xs font-medium text-gray-700 dark:text-gray-300 border-b border-gray-200 dark:border-gray-700", children: day.toLocaleDateString(locale, { weekday: "short", day: "2-digit", month: "2-digit" }) }),
-        /* @__PURE__ */ jsxs("div", { className: "relative", style: { height: `${hours.length * 4}rem` }, children: [
-          positioned.length === 0 && /* @__PURE__ */ jsx2("p", { className: "absolute inset-x-2 top-2 text-xs text-gray-400", children: messages["agenda.empty"] }),
-          positioned.map(({ booking, columnIndex, columnCount }) => {
-            const top = toVisiblePercent({
-              minutesSinceDayStart: minutesFromDayStart(booking.startsAt, dayStart),
-              startHour: agendaStartHour,
-              endHour: agendaEndHour
-            });
-            const bottom = toVisiblePercent({
-              minutesSinceDayStart: minutesFromDayStart(booking.endsAt, dayStart),
-              startHour: agendaStartHour,
-              endHour: agendaEndHour
-            });
-            const width = 100 / columnCount;
-            return /* @__PURE__ */ jsx2(
+      const isToday = isSameDay(day, now);
+      const nowPercent = toVisiblePercent({
+        minutesSinceDayStart: minutesFromDayStart(now, dayStart),
+        startHour: agendaStartHour,
+        endHour: agendaEndHour
+      });
+      const showNowLine = isToday && nowPercent >= 0 && nowPercent <= 100;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `flex-1 min-w-40 border-r border-gray-200 last:border-r-0 dark:border-gray-800 ${isToday ? "bg-brand-50/40 dark:bg-brand-900/10" : ""}`,
+          children: [
+            /* @__PURE__ */ jsxs(
               "div",
               {
-                title: booking.title,
-                className: "absolute rounded-md bg-brand-100 dark:bg-brand-900/40 border border-brand-300 dark:border-brand-700 px-1.5 py-0.5 text-xs text-brand-900 dark:text-brand-100 overflow-hidden",
-                style: {
-                  top: `${top}%`,
-                  height: `${Math.max(bottom - top, 2)}%`,
-                  left: `${columnIndex * width}%`,
-                  width: `${width}%`
+                className: `${HEADER_CLASS} flex items-center gap-1 border-b border-gray-200 dark:border-gray-800 ${isToday ? "text-brand-700 dark:text-brand-300" : ""}`,
+                children: [
+                  day.toLocaleDateString(locale, { weekday: "short", day: "2-digit", month: "2-digit" }),
+                  isToday && /* @__PURE__ */ jsx3("span", { className: "h-1.5 w-1.5 rounded-full bg-brand-600", "aria-hidden": "true" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "relative", style: { height: columnHeight }, children: [
+              hours.map((hour, index) => /* @__PURE__ */ jsx3(
+                "div",
+                {
+                  "aria-hidden": "true",
+                  className: "absolute inset-x-0 border-b border-gray-100 dark:border-gray-800/60",
+                  style: { top: `${index / hours.length * 100}%`, height: `${100 / hours.length}%` }
                 },
-                children: booking.title
-              },
-              booking.id
-            );
-          })
-        ] })
-      ] }, day.toISOString());
+                hour
+              )),
+              positioned.length === 0 && /* @__PURE__ */ jsx3("p", { className: "absolute inset-x-2 top-2 text-xs text-gray-400 dark:text-gray-500", children: messages["agenda.empty"] }),
+              positioned.map(({ booking, columnIndex, columnCount }) => {
+                const top = toVisiblePercent({
+                  minutesSinceDayStart: minutesFromDayStart(booking.startsAt, dayStart),
+                  startHour: agendaStartHour,
+                  endHour: agendaEndHour
+                });
+                const bottom = toVisiblePercent({
+                  minutesSinceDayStart: minutesFromDayStart(booking.endsAt, dayStart),
+                  startHour: agendaStartHour,
+                  endHour: agendaEndHour
+                });
+                const width = 100 / columnCount;
+                const startLabel = booking.startsAt.toLocaleTimeString(locale, { hour: "2-digit", minute: "2-digit" });
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => onSelect?.(booking),
+                    title: `${startLabel} \xB7 ${booking.title}`,
+                    className: `absolute overflow-hidden rounded-md border-l-4 px-1.5 py-0.5 text-left text-xs shadow-sm transition-shadow hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 ${BOOKING_STATUS_TONE[booking.status].block}`,
+                    style: {
+                      top: `${top}%`,
+                      height: `${Math.max(bottom - top, 2)}%`,
+                      left: `${columnIndex * width}%`,
+                      width: `${width}%`
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx3("span", { className: "block font-medium tabular-nums opacity-80", children: startLabel }),
+                      /* @__PURE__ */ jsx3("span", { className: "block truncate", children: booking.title })
+                    ]
+                  },
+                  booking.id
+                );
+              }),
+              showNowLine && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "aria-label": messages["agenda.now"],
+                  className: "pointer-events-none absolute inset-x-0 z-10 flex items-center",
+                  style: { top: `${nowPercent}%` },
+                  children: [
+                    /* @__PURE__ */ jsx3("span", { className: "h-2 w-2 shrink-0 rounded-full bg-red-500" }),
+                    /* @__PURE__ */ jsx3("span", { className: "h-px flex-1 bg-red-500" })
+                  ]
+                }
+              )
+            ] })
+          ]
+        },
+        day.toISOString()
+      );
     })
   ] });
 }
 
+// src/components/BookingDrawer.tsx
+import { XCircle } from "lucide-react";
+import { useState as useState2 } from "react";
+import { BOOKING_STATUS as BOOKING_STATUS2 } from "@adatechnology/scheduling-contracts";
+
+// src/components/DateTimeField.tsx
+import { useId as useId2, useMemo as useMemo3 } from "react";
+
+// src/components/SelectField.tsx
+import { Check, ChevronDown, Search } from "lucide-react";
+import { useEffect, useId, useMemo as useMemo2, useRef, useState } from "react";
+
+// src/components/selectFilter.util.ts
+var COMBINING_MARKS = /[̀-ͯ]/g;
+function normalizeForSearch(text) {
+  return text.normalize("NFD").replace(COMBINING_MARKS, "").toLowerCase().trim();
+}
+function filterSelectOptions(options, query) {
+  const needle = normalizeForSearch(query);
+  if (needle === "") return options;
+  return options.filter((option) => normalizeForSearch(option.label).includes(needle));
+}
+function findByPrefix(options, prefix) {
+  const needle = normalizeForSearch(prefix);
+  if (needle === "") return -1;
+  return options.findIndex((option) => normalizeForSearch(option.label).startsWith(needle));
+}
+
+// src/components/ui.constant.ts
+var BUTTON_BASE = "inline-flex items-center justify-center gap-2 rounded-lg px-3 text-sm font-medium min-h-11 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-900 disabled:opacity-50 disabled:pointer-events-none";
+var BUTTON_PRIMARY = `${BUTTON_BASE} bg-brand-600 text-white hover:bg-brand-700`;
+var BUTTON_SECONDARY = `${BUTTON_BASE} border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800`;
+var BUTTON_GHOST = `${BUTTON_BASE} text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800`;
+var BUTTON_DANGER = `${BUTTON_BASE} text-red-700 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950/40`;
+var ICON_BUTTON = `${BUTTON_SECONDARY} min-w-11 px-0`;
+var FIELD_CONTROL = "min-h-11 rounded-lg border border-gray-300 bg-white px-3 text-sm text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100";
+var FIELD_LABEL = "text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400";
+var SURFACE_BORDER = "rounded-xl border border-gray-200 dark:border-gray-800";
+var ROW_STRIPE = "bg-gray-50 dark:bg-gray-800/40";
+
+// src/components/SelectField.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var SEARCHABLE_THRESHOLD = 8;
+var POPUP_MAX_HEIGHT = 288;
+var TYPEAHEAD_RESET_MS = 700;
+var OPTION_BASE = "flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-left text-sm";
+function SelectField({
+  label,
+  value,
+  options,
+  onChange,
+  emptyOptionLabel,
+  searchable,
+  hideLabel,
+  className
+}) {
+  const { locale } = useSchedulingConfig();
+  const messages = resolveSchedulingMessages(locale);
+  const fieldId = useId();
+  const listboxId = `${fieldId}-listbox`;
+  const containerRef = useRef(null);
+  const triggerRef = useRef(null);
+  const searchRef = useRef(null);
+  const listRef = useRef(null);
+  const typeahead = useRef({ text: "", at: 0 });
+  const [isOpen, setIsOpen] = useState(false);
+  const [openUpward, setOpenUpward] = useState(false);
+  const [query, setQuery] = useState("");
+  const [highlighted, setHighlighted] = useState(0);
+  const allOptions = useMemo2(
+    () => emptyOptionLabel === void 0 ? options : [{ value: "", label: emptyOptionLabel }, ...options],
+    [emptyOptionLabel, options]
+  );
+  const withSearch = searchable ?? allOptions.length >= SEARCHABLE_THRESHOLD;
+  const visibleOptions = useMemo2(
+    () => withSearch ? filterSelectOptions(allOptions, query) : allOptions,
+    [allOptions, query, withSearch]
+  );
+  const selected = allOptions.find((option) => option.value === value);
+  function open() {
+    const rect = triggerRef.current?.getBoundingClientRect();
+    if (rect) {
+      const spaceBelow = window.innerHeight - rect.bottom;
+      setOpenUpward(spaceBelow < POPUP_MAX_HEIGHT && rect.top > spaceBelow);
+    }
+    setQuery("");
+    setHighlighted(Math.max(allOptions.findIndex((option) => option.value === value), 0));
+    setIsOpen(true);
+  }
+  function close(returnFocus = true) {
+    setIsOpen(false);
+    if (returnFocus) triggerRef.current?.focus();
+  }
+  function commit(option) {
+    onChange(option.value);
+    close();
+  }
+  useEffect(() => {
+    if (!isOpen) return;
+    function handlePointerDown(event) {
+      if (!containerRef.current?.contains(event.target)) setIsOpen(false);
+    }
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
+  }, [isOpen]);
+  useEffect(() => {
+    if (isOpen && withSearch) searchRef.current?.focus();
+  }, [isOpen, withSearch]);
+  useEffect(() => {
+    if (!isOpen) return;
+    listRef.current?.children[highlighted]?.scrollIntoView({ block: "nearest" });
+  }, [highlighted, isOpen]);
+  function jumpByTypeahead(key) {
+    if (withSearch || key.length !== 1 || !/\S/.test(key)) return false;
+    const now = Date.now();
+    const text = now - typeahead.current.at > TYPEAHEAD_RESET_MS ? key : typeahead.current.text + key;
+    typeahead.current = { text, at: now };
+    const index = findByPrefix(visibleOptions, text);
+    if (index >= 0) setHighlighted(index);
+    return index >= 0;
+  }
+  function handleKeyDown(event) {
+    if (!isOpen) {
+      if (["ArrowDown", "ArrowUp", "Enter", " "].includes(event.key)) {
+        event.preventDefault();
+        open();
+      }
+      return;
+    }
+    switch (event.key) {
+      case "Escape":
+        event.preventDefault();
+        close();
+        return;
+      case "Tab":
+        close(false);
+        return;
+      case "ArrowDown":
+        event.preventDefault();
+        setHighlighted((current) => Math.min(current + 1, visibleOptions.length - 1));
+        return;
+      case "ArrowUp":
+        event.preventDefault();
+        setHighlighted((current) => Math.max(current - 1, 0));
+        return;
+      case "Home":
+        event.preventDefault();
+        setHighlighted(0);
+        return;
+      case "End":
+        event.preventDefault();
+        setHighlighted(visibleOptions.length - 1);
+        return;
+      case "Enter": {
+        event.preventDefault();
+        const option = visibleOptions[highlighted];
+        if (option) commit(option);
+        return;
+      }
+      default:
+        if (jumpByTypeahead(event.key)) event.preventDefault();
+    }
+  }
+  return /* @__PURE__ */ jsxs2("div", { className: `flex flex-col gap-1 ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsx4("span", { id: fieldId, className: hideLabel ? "sr-only" : FIELD_LABEL, children: label }),
+    /* @__PURE__ */ jsxs2("div", { ref: containerRef, className: "relative", children: [
+      /* @__PURE__ */ jsxs2(
+        "button",
+        {
+          ref: triggerRef,
+          type: "button",
+          role: "combobox",
+          "aria-controls": listboxId,
+          "aria-expanded": isOpen,
+          "aria-haspopup": "listbox",
+          "aria-labelledby": fieldId,
+          onClick: () => isOpen ? close(false) : open(),
+          onKeyDown: handleKeyDown,
+          className: `${FIELD_CONTROL} flex w-full items-center gap-2 text-left`,
+          children: [
+            /* @__PURE__ */ jsx4("span", { className: `flex-1 truncate ${selected ? "" : "text-gray-500 dark:text-gray-400"}`, children: selected?.label ?? emptyOptionLabel ?? "" }),
+            /* @__PURE__ */ jsx4(
+              ChevronDown,
+              {
+                "aria-hidden": "true",
+                className: `h-4 w-4 shrink-0 text-gray-400 transition-transform ${isOpen ? "rotate-180" : ""}`
+              }
+            )
+          ]
+        }
+      ),
+      isOpen && /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          className: `absolute z-30 w-full min-w-max overflow-hidden rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900 ${openUpward ? "bottom-full mb-1" : "top-full mt-1"}`,
+          children: [
+            withSearch && /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 border-b border-gray-200 px-3 dark:border-gray-700", children: [
+              /* @__PURE__ */ jsx4(Search, { "aria-hidden": "true", className: "h-4 w-4 shrink-0 text-gray-400" }),
+              /* @__PURE__ */ jsx4(
+                "input",
+                {
+                  ref: searchRef,
+                  type: "text",
+                  value: query,
+                  onChange: (event) => {
+                    setQuery(event.target.value);
+                    setHighlighted(0);
+                  },
+                  onKeyDown: handleKeyDown,
+                  "aria-label": messages["select.search"],
+                  placeholder: messages["select.search"],
+                  className: "min-h-11 w-full bg-transparent text-sm text-gray-900 outline-none placeholder:text-gray-400 dark:text-gray-100"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs2(
+              "ul",
+              {
+                ref: listRef,
+                id: listboxId,
+                role: "listbox",
+                "aria-labelledby": fieldId,
+                className: "max-h-72 overflow-y-auto py-1",
+                children: [
+                  visibleOptions.map((option, index) => {
+                    const isSelected = option.value === value;
+                    return /* @__PURE__ */ jsxs2(
+                      "li",
+                      {
+                        role: "option",
+                        "aria-selected": isSelected,
+                        onPointerEnter: () => setHighlighted(index),
+                        onClick: () => commit(option),
+                        className: `${OPTION_BASE} ${index === highlighted ? "bg-brand-50 dark:bg-brand-900/30" : ""} ${isSelected ? "font-medium text-brand-800 dark:text-brand-200" : "text-gray-800 dark:text-gray-200"}`,
+                        children: [
+                          /* @__PURE__ */ jsx4("span", { className: "flex-1 truncate", children: option.label }),
+                          isSelected && /* @__PURE__ */ jsx4(Check, { "aria-hidden": "true", className: "h-4 w-4 shrink-0" })
+                        ]
+                      },
+                      option.value
+                    );
+                  }),
+                  visibleOptions.length === 0 && /* @__PURE__ */ jsx4("li", { className: "px-3 py-3 text-sm text-gray-500 dark:text-gray-400", children: messages["select.noResults"] })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/dateTimeParts.util.ts
+var DATE_TIME_LOCAL_PATTERN = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})$/;
+var MONTHS_IN_YEAR = 12;
+function parseDateTimeParts(value) {
+  const match = DATE_TIME_LOCAL_PATTERN.exec(value);
+  if (!match) return void 0;
+  const [, year, month, day, hour, minute] = match;
+  return { year: Number(year), month: Number(month), day: Number(day), time: `${hour}:${minute}` };
+}
+function daysInMonth(params) {
+  return new Date(Date.UTC(params.year, params.month, 0)).getUTCDate();
+}
+function pad(value) {
+  return String(value).padStart(2, "0");
+}
+function formatDateTimeParts(parts) {
+  const lastDay = daysInMonth({ year: parts.year, month: parts.month });
+  const day = Math.min(Math.max(parts.day, 1), lastDay);
+  return `${String(parts.year).padStart(4, "0")}-${pad(parts.month)}-${pad(day)}T${parts.time}`;
+}
+function buildYearOptions(params) {
+  const current = params.today.getFullYear();
+  const first = Math.min(current - params.past, params.year);
+  const last = Math.max(current + params.future, params.year);
+  return Array.from({ length: last - first + 1 }, (_, index) => first + index);
+}
+
+// src/components/DateTimeField.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var FIELD_CLASS = "min-h-11 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 px-2 text-sm";
+var YEAR_WINDOW = { PAST: 1, FUTURE: 2 };
+function partsOf(value, fallback) {
+  return parseDateTimeParts(value) ?? {
+    year: fallback.getFullYear(),
+    month: fallback.getMonth() + 1,
+    day: fallback.getDate(),
+    time: "09:00"
+  };
+}
+function monthLabels(locale) {
+  const format = new Intl.DateTimeFormat(locale, { month: "long", timeZone: "UTC" });
+  return Array.from(
+    { length: MONTHS_IN_YEAR },
+    (_, index) => format.format(new Date(Date.UTC(2026, index, 1)))
+  );
+}
+function DateTimeField({ label, value, onChange, emptyDefault }) {
+  const { locale } = useSchedulingConfig();
+  const messages = resolveSchedulingMessages(locale);
+  const groupId = useId2();
+  const today = emptyDefault ?? /* @__PURE__ */ new Date();
+  const parts = partsOf(value, today);
+  const years = buildYearOptions({
+    year: parts.year,
+    today,
+    past: YEAR_WINDOW.PAST,
+    future: YEAR_WINDOW.FUTURE
+  });
+  const days = daysInMonth({ year: parts.year, month: parts.month });
+  const months = monthLabels(locale);
+  const yearOptions = useMemo3(
+    () => years.map((year) => ({ value: String(year), label: String(year) })),
+    [years]
+  );
+  const monthOptions = useMemo3(
+    () => months.map((name, index) => ({ value: String(index + 1), label: name })),
+    [months]
+  );
+  const dayOptions = useMemo3(
+    () => Array.from({ length: days }, (_, index) => ({ value: String(index + 1), label: String(index + 1) })),
+    [days]
+  );
+  function change(patch) {
+    onChange(formatDateTimeParts({ ...parts, ...patch }));
+  }
+  return /* @__PURE__ */ jsxs3("div", { role: "group", "aria-labelledby": groupId, className: "flex flex-wrap items-center gap-2", children: [
+    /* @__PURE__ */ jsx5("span", { id: groupId, className: "sr-only", children: label }),
+    /* @__PURE__ */ jsx5(
+      SelectField,
+      {
+        hideLabel: true,
+        label: `${label} \u2014 ${messages["datetime.year"]}`,
+        value: String(parts.year),
+        options: yearOptions,
+        onChange: (next) => change({ year: Number(next) }),
+        className: "min-w-24"
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      SelectField,
+      {
+        hideLabel: true,
+        label: `${label} \u2014 ${messages["datetime.month"]}`,
+        value: String(parts.month),
+        options: monthOptions,
+        onChange: (next) => change({ month: Number(next) }),
+        searchable: false,
+        className: "min-w-36"
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      SelectField,
+      {
+        hideLabel: true,
+        label: `${label} \u2014 ${messages["datetime.day"]}`,
+        value: String(Math.min(parts.day, days)),
+        options: dayOptions,
+        onChange: (next) => change({ day: Number(next) }),
+        searchable: false,
+        className: "min-w-20"
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      "input",
+      {
+        type: "time",
+        "aria-label": `${label} \u2014 ${messages["datetime.time"]}`,
+        value: parts.time,
+        onChange: (event) => change({ time: event.target.value }),
+        className: FIELD_CLASS
+      }
+    )
+  ] });
+}
+
+// src/components/datetimeLocal.util.ts
+function getTimeZoneOffsetMs(instant, timeZone) {
+  const parts = new Intl.DateTimeFormat("en-US", {
+    timeZone,
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hourCycle: "h23"
+  }).formatToParts(instant);
+  const get = (type) => Number(parts.find((part) => part.type === type)?.value ?? 0);
+  const asUtcOfWallClock = Date.UTC(
+    get("year"),
+    get("month") - 1,
+    get("day"),
+    get("hour") % 24,
+    get("minute"),
+    get("second")
+  );
+  return asUtcOfWallClock - instant.getTime();
+}
+function parseDateTimeLocalInTimeZone(value, timeZone) {
+  const naiveUtc = /* @__PURE__ */ new Date(`${value}:00.000Z`);
+  const firstOffset = getTimeZoneOffsetMs(naiveUtc, timeZone);
+  const firstPass = new Date(naiveUtc.getTime() - firstOffset);
+  const secondOffset = getTimeZoneOffsetMs(firstPass, timeZone);
+  return new Date(naiveUtc.getTime() - secondOffset);
+}
+function formatDateTimeLocalInTimeZone(instant, timeZone) {
+  const parts = new Intl.DateTimeFormat("en-US", {
+    timeZone,
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    hourCycle: "h23"
+  }).formatToParts(instant);
+  const get = (type) => parts.find((part) => part.type === type)?.value ?? "00";
+  const hour = get("hour") === "24" ? "00" : get("hour");
+  return `${get("year")}-${get("month")}-${get("day")}T${hour}:${get("minute")}`;
+}
+
+// src/components/SidePanel.tsx
+import { X } from "lucide-react";
+import { useEffect as useEffect2 } from "react";
+import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function SidePanel({ title, closeLabel, onClose, headerActions, children }) {
+  useEffect2(() => {
+    function handleKeyDown(event) {
+      if (event.key === "Escape") onClose();
+    }
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [onClose]);
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+    /* @__PURE__ */ jsx6(
+      "button",
+      {
+        type: "button",
+        "aria-hidden": "true",
+        tabIndex: -1,
+        onClick: onClose,
+        className: "absolute inset-0 z-10 bg-gray-900/30 backdrop-blur-[1px] wide:hidden"
+      }
+    ),
+    /* @__PURE__ */ jsxs4(
+      "section",
+      {
+        "aria-label": title,
+        className: "absolute inset-y-0 right-0 z-20 flex w-full max-w-full flex-col bg-white shadow-2xl desktop:w-[28rem] dark:bg-gray-900 wide:static wide:z-auto wide:shrink-0 wide:border-l wide:border-gray-200 wide:shadow-none wide:dark:border-gray-700",
+        children: [
+          /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 border-b border-gray-200 px-4 py-3 dark:border-gray-700", children: [
+            /* @__PURE__ */ jsx6("h2", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100 mr-auto", children: title }),
+            headerActions,
+            /* @__PURE__ */ jsxs4(
+              "button",
+              {
+                type: "button",
+                onClick: onClose,
+                className: BUTTON_GHOST,
+                children: [
+                  /* @__PURE__ */ jsx6(X, { "aria-hidden": "true", className: "w-4 h-4" }),
+                  closeLabel
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx6("div", { className: "min-h-0 flex-1 overflow-y-auto p-4", children })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/BookingDrawer.tsx
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var BROWSER_TIME_ZONE = Intl.DateTimeFormat().resolvedOptions().timeZone;
+var ACTION_BUTTON_CLASS = "min-h-11 px-3 rounded-lg text-sm font-medium border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800";
+var PRIMARY_BUTTON_CLASS = "min-h-11 px-3 rounded-lg text-sm font-medium bg-brand-600 text-white hover:bg-brand-700";
+var DANGER_BUTTON_CLASS = "inline-flex items-center gap-2 min-h-11 px-3 rounded-lg text-sm font-medium text-red-700 hover:bg-red-50";
+var INPUT_CLASS = "min-h-11 w-full px-3 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-sm";
+function BookingDrawer({ booking, resourceTimezone, onClose }) {
+  const { locale } = useSchedulingConfig();
+  const messages = resolveSchedulingMessages(locale);
+  const confirmBooking = useConfirmBooking();
+  const completeBooking = useCompleteBooking();
+  const markNoShow = useMarkNoShow();
+  const cancelBooking = useCancelBooking();
+  const rescheduleBooking = useRescheduleBooking();
+  const timezone = resourceTimezone ?? BROWSER_TIME_ZONE;
+  const [isCancelling, setIsCancelling] = useState2(false);
+  const [cancelledBy, setCancelledBy] = useState2("");
+  const [cancellationReason, setCancellationReason] = useState2("");
+  const [isRescheduling, setIsRescheduling] = useState2(false);
+  const [start, setStart] = useState2(() => formatDateTimeLocalInTimeZone(booking.startsAt, timezone));
+  const [end, setEnd] = useState2(() => formatDateTimeLocalInTimeZone(booking.endsAt, timezone));
+  async function handleCancel() {
+    if (!cancelledBy) return;
+    try {
+      await cancelBooking.mutateAsync({
+        id: booking.id,
+        input: { cancelledBy, ...cancellationReason ? { cancellationReason } : {} }
+      });
+      onClose();
+    } catch {
+    }
+  }
+  async function handleReschedule() {
+    try {
+      await rescheduleBooking.mutateAsync({
+        id: booking.id,
+        input: {
+          during: {
+            start: parseDateTimeLocalInTimeZone(start, timezone),
+            end: parseDateTimeLocalInTimeZone(end, timezone)
+          }
+        }
+      });
+      setIsRescheduling(false);
+    } catch {
+    }
+  }
+  const isTerminal = booking.status === BOOKING_STATUS2.CANCELLED || booking.status === BOOKING_STATUS2.COMPLETED || booking.status === BOOKING_STATUS2.NO_SHOW;
+  return /* @__PURE__ */ jsx7(SidePanel, { title: messages["booking.detailTitle"], closeLabel: messages["common.close"], onClose, children: /* @__PURE__ */ jsxs5("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs5("div", { children: [
+      /* @__PURE__ */ jsx7("p", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: booking.title }),
+      /* @__PURE__ */ jsx7("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: messages[`booking.status.${booking.status === "no_show" ? "noShow" : booking.status}`] }),
+      /* @__PURE__ */ jsxs5("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
+        booking.startsAt.toLocaleString(locale),
+        " \u2192 ",
+        booking.endsAt.toLocaleString(locale)
+      ] })
+    ] }),
+    (confirmBooking.isError || completeBooking.isError || markNoShow.isError || cancelBooking.isError || rescheduleBooking.isError) && /* @__PURE__ */ jsx7("p", { role: "alert", className: "text-sm text-red-700 bg-red-50 rounded-lg px-3 py-2", children: messages["common.actionFailure"] }),
+    !isTerminal && /* @__PURE__ */ jsxs5("div", { className: "flex flex-wrap gap-2", children: [
+      booking.status === BOOKING_STATUS2.REQUESTED && /* @__PURE__ */ jsx7("button", { type: "button", onClick: () => confirmBooking.mutate(booking.id), className: PRIMARY_BUTTON_CLASS, children: messages["booking.confirm"] }),
+      booking.status === BOOKING_STATUS2.CONFIRMED && /* @__PURE__ */ jsxs5(Fragment2, { children: [
+        /* @__PURE__ */ jsx7("button", { type: "button", onClick: () => completeBooking.mutate(booking.id), className: ACTION_BUTTON_CLASS, children: messages["booking.complete"] }),
+        /* @__PURE__ */ jsx7("button", { type: "button", onClick: () => markNoShow.mutate(booking.id), className: ACTION_BUTTON_CLASS, children: messages["booking.markNoShow"] }),
+        /* @__PURE__ */ jsx7("button", { type: "button", onClick: () => setIsRescheduling(true), className: ACTION_BUTTON_CLASS, children: messages["booking.reschedule"] })
+      ] }),
+      /* @__PURE__ */ jsxs5("button", { type: "button", onClick: () => setIsCancelling(true), className: DANGER_BUTTON_CLASS, children: [
+        /* @__PURE__ */ jsx7(XCircle, { "aria-hidden": "true", className: "w-4 h-4" }),
+        messages["booking.cancel"]
+      ] })
+    ] }),
+    isRescheduling && /* @__PURE__ */ jsxs5("div", { className: "space-y-2 rounded-lg border border-gray-200 dark:border-gray-700 p-3", children: [
+      /* @__PURE__ */ jsx7(
+        DateTimeField,
+        {
+          label: messages["booking.rescheduleStart"],
+          value: start,
+          onChange: setStart
+        }
+      ),
+      /* @__PURE__ */ jsx7(DateTimeField, { label: messages["booking.rescheduleEnd"], value: end, onChange: setEnd }),
+      /* @__PURE__ */ jsx7("button", { type: "button", onClick: handleReschedule, disabled: rescheduleBooking.isPending, className: PRIMARY_BUTTON_CLASS, children: messages["common.save"] })
+    ] }),
+    isCancelling && /* @__PURE__ */ jsxs5("div", { className: "space-y-2 rounded-lg border border-gray-200 dark:border-gray-700 p-3", children: [
+      /* @__PURE__ */ jsx7(
+        "input",
+        {
+          type: "text",
+          placeholder: messages["booking.cancelledBy"],
+          value: cancelledBy,
+          onChange: (event) => setCancelledBy(event.target.value),
+          className: INPUT_CLASS
+        }
+      ),
+      /* @__PURE__ */ jsx7(
+        "input",
+        {
+          type: "text",
+          placeholder: messages["booking.cancelReason"],
+          value: cancellationReason,
+          onChange: (event) => setCancellationReason(event.target.value),
+          className: INPUT_CLASS
+        }
+      ),
+      /* @__PURE__ */ jsxs5("button", { type: "button", onClick: handleCancel, disabled: cancelBooking.isPending, className: DANGER_BUTTON_CLASS, children: [
+        /* @__PURE__ */ jsx7(XCircle, { "aria-hidden": "true", className: "w-4 h-4" }),
+        messages["booking.cancel"]
+      ] })
+    ] })
+  ] }) });
+}
+
+// src/components/ResourceSelect.tsx
+import { useMemo as useMemo4 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function ResourceSelect({ label, emptyOptionLabel, resources, value, onChange }) {
+  const options = useMemo4(
+    () => resources.map((resource) => ({ value: resource.id, label: resource.name })),
+    [resources]
+  );
+  return /* @__PURE__ */ jsx8(
+    SelectField,
+    {
+      label,
+      emptyOptionLabel,
+      options,
+      value,
+      onChange,
+      searchable: true,
+      className: "min-w-52"
+    }
+  );
+}
+
+// src/components/StateFeedback.tsx
+import { AlertTriangle } from "lucide-react";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function ErrorBanner({ message }) {
+  return /* @__PURE__ */ jsxs6(
+    "p",
+    {
+      role: "alert",
+      className: "flex items-start gap-2 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-800 dark:border-red-900 dark:bg-red-950/50 dark:text-red-200",
+      children: [
+        /* @__PURE__ */ jsx9(AlertTriangle, { "aria-hidden": "true", className: "mt-0.5 h-4 w-4 shrink-0" }),
+        message
+      ]
+    }
+  );
+}
+function EmptyState({ icon: Icon, title, hint, action }) {
+  return /* @__PURE__ */ jsxs6("div", { className: `${SURFACE_BORDER} flex flex-col items-center gap-2 px-6 py-12 text-center`, children: [
+    /* @__PURE__ */ jsx9("span", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-gray-100 text-gray-400 dark:bg-gray-800 dark:text-gray-500", children: /* @__PURE__ */ jsx9(Icon, { "aria-hidden": "true", className: "h-6 w-6" }) }),
+    /* @__PURE__ */ jsx9("p", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: title }),
+    hint && /* @__PURE__ */ jsx9("p", { className: "max-w-sm text-sm text-gray-500 dark:text-gray-400", children: hint }),
+    action && /* @__PURE__ */ jsx9("div", { className: "mt-2", children: action })
+  ] });
+}
+var SKELETON_ROW = "h-11 animate-pulse rounded-lg bg-gray-100 dark:bg-gray-800";
+function ListSkeleton({ label, rows = 5 }) {
+  return /* @__PURE__ */ jsx9("div", { "aria-busy": "true", "aria-label": label, role: "status", className: "space-y-2", children: Array.from({ length: rows }, (_row, index) => /* @__PURE__ */ jsx9("div", { className: SKELETON_ROW }, index)) });
+}
+function BlockSkeleton({ label }) {
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      "aria-busy": "true",
+      "aria-label": label,
+      role: "status",
+      className: "min-h-64 flex-1 animate-pulse rounded-xl bg-gray-100 dark:bg-gray-800"
+    }
+  );
+}
+
 // src/workspace/AgendaArea.tsx
-import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var DAY_IN_MS = 24 * 60 * 6e4;
+var NOW_TICK_MS = 6e4;
 function startOfWeek(date, weekStartsOn) {
   const start = startOfDay(date);
   const offset = (start.getDay() - weekStartsOn + 7) % 7;
@@ -642,14 +1421,32 @@ function buildVisibleDays(anchorDate, view, weekStartsOn) {
   const weekStart = startOfWeek(anchorDate, weekStartsOn);
   return Array.from({ length: 7 }, (_day, index) => new Date(weekStart.getTime() + index * DAY_IN_MS));
 }
-var NAV_BUTTON_CLASS = "min-h-11 px-3 rounded-lg text-sm font-medium border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800";
+function formatPeriod(days, locale) {
+  const first = days[0];
+  if (days.length === 1) {
+    return first.toLocaleDateString(locale, { weekday: "long", day: "2-digit", month: "long", year: "numeric" });
+  }
+  const last = days[days.length - 1];
+  const short = { day: "2-digit", month: "short" };
+  return `${first.toLocaleDateString(locale, short)} \u2013 ${last.toLocaleDateString(locale, { ...short, year: "numeric" })}`;
+}
+function useNow() {
+  const [now, setNow] = useState3(() => /* @__PURE__ */ new Date());
+  useEffect3(() => {
+    const timer = window.setInterval(() => setNow(/* @__PURE__ */ new Date()), NOW_TICK_MS);
+    return () => window.clearInterval(timer);
+  }, []);
+  return now;
+}
 function AgendaArea() {
   const { locale, weekStartsOn } = useSchedulingConfig();
   const messages = resolveSchedulingMessages(locale);
+  const now = useNow();
   const { data: resourcesPage } = useResources({ active: true, pageSize: MAX_PAGE_SIZE });
-  const [resourceId, setResourceId] = useState("");
-  const [view, setView] = useState("day");
-  const [anchorDate, setAnchorDate] = useState(() => /* @__PURE__ */ new Date());
+  const [resourceId, setResourceId] = useState3("");
+  const [view, setView] = useState3("day");
+  const [anchorDate, setAnchorDate] = useState3(() => /* @__PURE__ */ new Date());
+  const [selectedBookingId, setSelectedBookingId] = useState3(void 0);
   const resources = resourcesPage?.data ?? [];
   const days = buildVisibleDays(anchorDate, view, weekStartsOn);
   const from = days[0];
@@ -657,70 +1454,115 @@ function AgendaArea() {
   const { data: bookingsPage, isLoading, isError } = useBookings(
     resourceId ? { resourceId, from, until, pageSize: MAX_PAGE_SIZE } : { from, until, pageSize: MAX_PAGE_SIZE }
   );
-  function shiftAnchor(days_) {
-    setAnchorDate((current) => new Date(current.getTime() + days_ * DAY_IN_MS));
+  const visibleBookings = bookingsPage?.data ?? [];
+  const selectedBooking = visibleBookings.find((booking) => booking.id === selectedBookingId);
+  const selectedResourceTimezone = resources.find(
+    (resource) => resource.id === selectedBooking?.resourceIds[0]
+  )?.timezone;
+  function shiftAnchor(direction) {
+    const step = view === "day" ? 1 : 7;
+    setAnchorDate((current) => new Date(current.getTime() + direction * step * DAY_IN_MS));
+  }
+  function renderViewOption(value, label) {
+    const isActive = view === value;
+    return /* @__PURE__ */ jsx10(
+      "button",
+      {
+        type: "button",
+        onClick: () => setView(value),
+        "aria-pressed": isActive,
+        className: `${BUTTON_BASE} flex-1 ${isActive ? "bg-white text-brand-700 shadow-sm dark:bg-gray-900 dark:text-brand-300" : "text-gray-600 dark:text-gray-400"}`,
+        children: label
+      }
+    );
   }
-  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-1 min-h-0 min-w-0 flex-col p-4 space-y-4", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "flex flex-wrap items-center gap-2", children: [
-      /* @__PURE__ */ jsxs2("label", { className: "flex items-center gap-2 text-sm", children: [
-        /* @__PURE__ */ jsx3("span", { className: "font-medium text-gray-700 dark:text-gray-300", children: messages["agenda.resourceLabel"] }),
-        /* @__PURE__ */ jsxs2(
-          "select",
+  return /* @__PURE__ */ jsxs7("div", { className: "flex flex-1 min-h-0 min-w-0", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "flex flex-1 min-h-0 min-w-0 flex-col gap-4 overflow-y-auto p-4", children: [
+      /* @__PURE__ */ jsxs7("div", { className: "flex flex-wrap items-end gap-3", children: [
+        /* @__PURE__ */ jsx10(
+          ResourceSelect,
           {
+            label: messages["agenda.resourceLabel"],
+            emptyOptionLabel: messages["agenda.allResources"],
+            resources,
             value: resourceId,
-            onChange: (event) => setResourceId(event.target.value),
-            className: "min-h-11 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 px-2 text-sm",
-            children: [
-              /* @__PURE__ */ jsx3("option", { value: "", children: "\u2014" }),
-              resources.map((resource) => /* @__PURE__ */ jsx3("option", { value: resource.id, children: resource.name }, resource.id))
-            ]
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1 ml-auto", children: [
-        /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => shiftAnchor(view === "day" ? -1 : -7), className: NAV_BUTTON_CLASS, children: messages["agenda.previous"] }),
-        /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => setAnchorDate(/* @__PURE__ */ new Date()), className: NAV_BUTTON_CLASS, children: messages["agenda.today"] }),
-        /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => shiftAnchor(view === "day" ? 1 : 7), className: NAV_BUTTON_CLASS, children: messages["agenda.next"] })
-      ] }),
-      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx3(
-          "button",
-          {
-            type: "button",
-            onClick: () => setView("day"),
-            "aria-current": view === "day" ? "true" : void 0,
-            className: `${NAV_BUTTON_CLASS} ${view === "day" ? "bg-brand-600 text-white border-brand-600" : ""}`,
-            children: messages["agenda.viewDay"]
+            onChange: setResourceId
           }
         ),
-        /* @__PURE__ */ jsx3(
-          "button",
+        /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx10(
+            "button",
+            {
+              type: "button",
+              "aria-label": messages["agenda.previous"],
+              onClick: () => shiftAnchor(-1),
+              className: ICON_BUTTON,
+              children: /* @__PURE__ */ jsx10(ChevronLeft, { "aria-hidden": "true", className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => setAnchorDate(/* @__PURE__ */ new Date()), className: BUTTON_SECONDARY, children: messages["agenda.today"] }),
+          /* @__PURE__ */ jsx10(
+            "button",
+            {
+              type: "button",
+              "aria-label": messages["agenda.next"],
+              onClick: () => shiftAnchor(1),
+              className: ICON_BUTTON,
+              children: /* @__PURE__ */ jsx10(ChevronRight, { "aria-hidden": "true", className: "h-4 w-4" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx10(
+          "p",
           {
-            type: "button",
-            onClick: () => setView("week"),
-            "aria-current": view === "week" ? "true" : void 0,
-            className: `${NAV_BUTTON_CLASS} ${view === "week" ? "bg-brand-600 text-white border-brand-600" : ""}`,
-            children: messages["agenda.viewWeek"]
+            "aria-live": "polite",
+            className: "min-w-0 flex-1 truncate text-sm font-semibold text-gray-900 first-letter:uppercase dark:text-gray-100",
+            children: formatPeriod(days, locale)
           }
-        )
-      ] })
+        ),
+        /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx10("span", { className: FIELD_LABEL, children: messages["agenda.viewLabel"] }),
+          /* @__PURE__ */ jsxs7("div", { className: "flex gap-1 rounded-lg bg-gray-100 p-1 dark:bg-gray-800", children: [
+            renderViewOption("day", messages["agenda.viewDay"]),
+            renderViewOption("week", messages["agenda.viewWeek"])
+          ] })
+        ] })
+      ] }),
+      isError && /* @__PURE__ */ jsx10(ErrorBanner, { message: messages["common.loadFailure"] }),
+      bookingsPage && bookingsPage.total > bookingsPage.data.length && /* @__PURE__ */ jsx10("p", { className: "rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800 dark:border-amber-900 dark:bg-amber-950/50 dark:text-amber-200", children: messages["agenda.moreResults"] }),
+      isLoading && /* @__PURE__ */ jsx10(BlockSkeleton, { label: messages["common.loading"] }),
+      !isLoading && !isError && visibleBookings.length === 0 && /* @__PURE__ */ jsx10(EmptyState, { icon: CalendarDays, title: messages["agenda.emptyTitle"], hint: messages["agenda.empty"] }),
+      !isLoading && visibleBookings.length > 0 && /* @__PURE__ */ jsx10(
+        AgendaGrid,
+        {
+          bookings: visibleBookings,
+          days,
+          now,
+          onSelect: (booking) => setSelectedBookingId(booking.id)
+        }
+      )
     ] }),
-    isError && /* @__PURE__ */ jsx3("p", { role: "alert", className: "text-sm text-red-700 bg-red-50 rounded-lg px-3 py-2", children: messages["common.loadFailure"] }),
-    isLoading ? /* @__PURE__ */ jsx3("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: messages["common.loading"] }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
-      bookingsPage && bookingsPage.total > bookingsPage.data.length && /* @__PURE__ */ jsx3("p", { className: "text-sm text-amber-700 bg-amber-50 rounded-lg px-3 py-2", children: messages["agenda.moreResults"] }),
-      /* @__PURE__ */ jsx3(AgendaGrid, { bookings: bookingsPage?.data ?? [], days })
-    ] })
+    selectedBooking && /* @__PURE__ */ jsx10(
+      BookingDrawer,
+      {
+        booking: selectedBooking,
+        resourceTimezone: selectedResourceTimezone,
+        onClose: () => setSelectedBookingId(void 0)
+      },
+      selectedBooking.id
+    )
   ] });
 }
 
 // src/workspace/AvailabilityArea.tsx
-import { useState as useState4 } from "react";
+import { Clock } from "lucide-react";
+import { useState as useState6 } from "react";
 import { MAX_PAGE_SIZE as MAX_PAGE_SIZE2 } from "@adatechnology/scheduling-contracts";
 
 // src/components/WeeklyRulesEditor.tsx
 import { Plus, Trash2 } from "lucide-react";
-import { useState as useState2 } from "react";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useState as useState4, useMemo as useMemo5 } from "react";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var WEEKDAYS = [0, 1, 2, 3, 4, 5, 6];
 function toDraft(rule) {
   return { weekday: rule.weekday, startsAtLocal: rule.startsAtLocal, endsAtLocal: rule.endsAtLocal };
@@ -731,9 +1573,16 @@ function createEmptyDraft() {
 function WeeklyRulesEditor({ resourceId }) {
   const { locale } = useSchedulingConfig();
   const messages = resolveSchedulingMessages(locale);
+  const weekdayOptions = useMemo5(
+    () => WEEKDAYS.map((weekday) => ({
+      value: String(weekday),
+      label: messages[`availability.weekday.${weekday}`]
+    })),
+    [messages]
+  );
   const { data, isSuccess: isRulesLoaded, isError: isRulesLoadError } = useAvailabilityRules(resourceId);
   const setAvailabilityRules = useSetAvailabilityRules();
-  const [draft, setDraft] = useState2(void 0);
+  const [draft, setDraft] = useState4(void 0);
   const rules = draft ?? (data ? data.map(toDraft) : []);
   function updateRule(index, patch) {
     setDraft(rules.map((rule, ruleIndex) => ruleIndex === index ? { ...rule, ...patch } : rule));
@@ -755,32 +1604,32 @@ function WeeklyRulesEditor({ resourceId }) {
     }
   }
   if (isRulesLoadError) {
-    return /* @__PURE__ */ jsxs3("section", { className: "space-y-3", children: [
-      /* @__PURE__ */ jsx4("h3", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: messages["availability.weeklyRulesTitle"] }),
-      /* @__PURE__ */ jsx4("p", { role: "alert", className: "text-sm text-red-700 bg-red-50 rounded-lg px-3 py-2", children: messages["common.loadFailure"] })
+    return /* @__PURE__ */ jsxs8("section", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsx11("h3", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: messages["availability.weeklyRulesTitle"] }),
+      /* @__PURE__ */ jsx11("p", { role: "alert", className: "text-sm text-red-700 bg-red-50 rounded-lg px-3 py-2", children: messages["common.loadFailure"] })
     ] });
   }
   if (!isRulesLoaded) {
-    return /* @__PURE__ */ jsxs3("section", { className: "space-y-3", children: [
-      /* @__PURE__ */ jsx4("h3", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: messages["availability.weeklyRulesTitle"] }),
-      /* @__PURE__ */ jsx4("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: messages["common.loading"] })
+    return /* @__PURE__ */ jsxs8("section", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsx11("h3", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: messages["availability.weeklyRulesTitle"] }),
+      /* @__PURE__ */ jsx11("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: messages["common.loading"] })
     ] });
   }
-  return /* @__PURE__ */ jsxs3("section", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsx4("h3", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: messages["availability.weeklyRulesTitle"] }),
-    setAvailabilityRules.isError && /* @__PURE__ */ jsx4("p", { role: "alert", className: "text-sm text-red-700 bg-red-50 rounded-lg px-3 py-2", children: messages["common.actionFailure"] }),
-    /* @__PURE__ */ jsx4("ul", { className: "space-y-2", children: rules.map((rule, index) => /* @__PURE__ */ jsxs3("li", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx4(
-        "select",
+  return /* @__PURE__ */ jsxs8("section", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsx11("h3", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: messages["availability.weeklyRulesTitle"] }),
+    setAvailabilityRules.isError && /* @__PURE__ */ jsx11("p", { role: "alert", className: "text-sm text-red-700 bg-red-50 rounded-lg px-3 py-2", children: messages["common.actionFailure"] }),
+    /* @__PURE__ */ jsx11("ul", { className: "space-y-2", children: rules.map((rule, index) => /* @__PURE__ */ jsxs8("li", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx11(
+        SelectField,
         {
-          "aria-label": messages["availability.weekdayLabel"],
-          value: rule.weekday,
-          onChange: (event) => updateRule(index, { weekday: Number(event.target.value) }),
-          className: "min-h-11 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 px-2 text-sm",
-          children: WEEKDAYS.map((weekday) => /* @__PURE__ */ jsx4("option", { value: weekday, children: messages[`availability.weekday.${weekday}`] }, weekday))
+          hideLabel: true,
+          label: messages["availability.weekdayLabel"],
+          value: String(rule.weekday),
+          options: weekdayOptions,
+          onChange: (next) => updateRule(index, { weekday: Number(next) })
         }
       ),
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx11(
         "input",
         {
           "aria-label": messages["availability.startsAtLocal"],
@@ -790,7 +1639,7 @@ function WeeklyRulesEditor({ resourceId }) {
           className: "min-h-11 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 px-2 text-sm"
         }
       ),
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx11(
         "input",
         {
           "aria-label": messages["availability.endsAtLocal"],
@@ -800,31 +1649,31 @@ function WeeklyRulesEditor({ resourceId }) {
           className: "min-h-11 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 px-2 text-sm"
         }
       ),
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx11(
         "button",
         {
           type: "button",
           onClick: () => removeRule(index),
           "aria-label": messages["availability.removeRule"],
           className: "min-h-11 min-w-11 inline-flex items-center justify-center rounded-lg text-red-700 hover:bg-red-50",
-          children: /* @__PURE__ */ jsx4(Trash2, { "aria-hidden": "true", className: "w-4 h-4" })
+          children: /* @__PURE__ */ jsx11(Trash2, { "aria-hidden": "true", className: "w-4 h-4" })
         }
       )
     ] }, index)) }),
-    /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxs3(
+    /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs8(
         "button",
         {
           type: "button",
           onClick: addRule,
           className: "inline-flex items-center gap-2 min-h-11 px-3 py-2 rounded-lg text-sm font-medium border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800",
           children: [
-            /* @__PURE__ */ jsx4(Plus, { "aria-hidden": "true", className: "w-4 h-4" }),
+            /* @__PURE__ */ jsx11(Plus, { "aria-hidden": "true", className: "w-4 h-4" }),
             messages["availability.addRule"]
           ]
         }
       ),
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx11(
         "button",
         {
           type: "button",
@@ -833,186 +1682,35 @@ function WeeklyRulesEditor({ resourceId }) {
           className: "min-h-11 px-3 py-2 rounded-lg text-sm font-medium bg-brand-600 text-white hover:bg-brand-700 disabled:opacity-50",
           children: messages["common.save"]
         }
-      )
-    ] })
-  ] });
-}
-
-// src/components/AvailabilityExceptionsEditor.tsx
-import { Plus as Plus2, Trash2 as Trash22 } from "lucide-react";
-import { useState as useState3 } from "react";
-import { AVAILABILITY_EXCEPTION_KIND } from "@adatechnology/scheduling-contracts";
-
-// src/components/DateTimeField.tsx
-import { useId } from "react";
-
-// src/components/dateTimeParts.util.ts
-var DATE_TIME_LOCAL_PATTERN = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})$/;
-var MONTHS_IN_YEAR = 12;
-function parseDateTimeParts(value) {
-  const match = DATE_TIME_LOCAL_PATTERN.exec(value);
-  if (!match) return void 0;
-  const [, year, month, day, hour, minute] = match;
-  return { year: Number(year), month: Number(month), day: Number(day), time: `${hour}:${minute}` };
-}
-function daysInMonth(params) {
-  return new Date(Date.UTC(params.year, params.month, 0)).getUTCDate();
-}
-function pad(value) {
-  return String(value).padStart(2, "0");
-}
-function formatDateTimeParts(parts) {
-  const lastDay = daysInMonth({ year: parts.year, month: parts.month });
-  const day = Math.min(Math.max(parts.day, 1), lastDay);
-  return `${String(parts.year).padStart(4, "0")}-${pad(parts.month)}-${pad(day)}T${parts.time}`;
-}
-function buildYearOptions(params) {
-  const current = params.today.getFullYear();
-  const first = Math.min(current - params.past, params.year);
-  const last = Math.max(current + params.future, params.year);
-  return Array.from({ length: last - first + 1 }, (_, index) => first + index);
-}
-
-// src/components/DateTimeField.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var FIELD_CLASS = "min-h-11 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 px-2 text-sm";
-var YEAR_WINDOW = { PAST: 1, FUTURE: 2 };
-function partsOf(value, fallback) {
-  return parseDateTimeParts(value) ?? {
-    year: fallback.getFullYear(),
-    month: fallback.getMonth() + 1,
-    day: fallback.getDate(),
-    time: "09:00"
-  };
-}
-function monthLabels(locale) {
-  const format = new Intl.DateTimeFormat(locale, { month: "long", timeZone: "UTC" });
-  return Array.from(
-    { length: MONTHS_IN_YEAR },
-    (_, index) => format.format(new Date(Date.UTC(2026, index, 1)))
-  );
-}
-function DateTimeField({ label, value, onChange, emptyDefault }) {
-  const { locale } = useSchedulingConfig();
-  const messages = resolveSchedulingMessages(locale);
-  const groupId = useId();
-  const today = emptyDefault ?? /* @__PURE__ */ new Date();
-  const parts = partsOf(value, today);
-  const years = buildYearOptions({
-    year: parts.year,
-    today,
-    past: YEAR_WINDOW.PAST,
-    future: YEAR_WINDOW.FUTURE
-  });
-  const days = daysInMonth({ year: parts.year, month: parts.month });
-  const months = monthLabels(locale);
-  function change(patch) {
-    onChange(formatDateTimeParts({ ...parts, ...patch }));
-  }
-  return /* @__PURE__ */ jsxs4("div", { role: "group", "aria-labelledby": groupId, className: "flex flex-wrap items-center gap-2", children: [
-    /* @__PURE__ */ jsx5("span", { id: groupId, className: "sr-only", children: label }),
-    /* @__PURE__ */ jsx5(
-      "select",
-      {
-        "aria-label": `${label} \u2014 ${messages["datetime.year"]}`,
-        value: parts.year,
-        onChange: (event) => change({ year: Number(event.target.value) }),
-        className: FIELD_CLASS,
-        children: years.map((year) => /* @__PURE__ */ jsx5("option", { value: year, children: year }, year))
-      }
-    ),
-    /* @__PURE__ */ jsx5(
-      "select",
-      {
-        "aria-label": `${label} \u2014 ${messages["datetime.month"]}`,
-        value: parts.month,
-        onChange: (event) => change({ month: Number(event.target.value) }),
-        className: FIELD_CLASS,
-        children: months.map((name, index) => /* @__PURE__ */ jsx5("option", { value: index + 1, children: name }, name))
-      }
-    ),
-    /* @__PURE__ */ jsx5(
-      "select",
-      {
-        "aria-label": `${label} \u2014 ${messages["datetime.day"]}`,
-        value: Math.min(parts.day, days),
-        onChange: (event) => change({ day: Number(event.target.value) }),
-        className: FIELD_CLASS,
-        children: Array.from({ length: days }, (_, index) => index + 1).map((day) => /* @__PURE__ */ jsx5("option", { value: day, children: day }, day))
-      }
-    ),
-    /* @__PURE__ */ jsx5(
-      "input",
-      {
-        type: "time",
-        "aria-label": `${label} \u2014 ${messages["datetime.time"]}`,
-        value: parts.time,
-        onChange: (event) => change({ time: event.target.value }),
-        className: FIELD_CLASS
-      }
-    )
+      )
+    ] })
   ] });
 }
 
-// src/components/datetimeLocal.util.ts
-function getTimeZoneOffsetMs(instant, timeZone) {
-  const parts = new Intl.DateTimeFormat("en-US", {
-    timeZone,
-    year: "numeric",
-    month: "2-digit",
-    day: "2-digit",
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit",
-    hourCycle: "h23"
-  }).formatToParts(instant);
-  const get = (type) => Number(parts.find((part) => part.type === type)?.value ?? 0);
-  const asUtcOfWallClock = Date.UTC(
-    get("year"),
-    get("month") - 1,
-    get("day"),
-    get("hour") % 24,
-    get("minute"),
-    get("second")
-  );
-  return asUtcOfWallClock - instant.getTime();
-}
-function parseDateTimeLocalInTimeZone(value, timeZone) {
-  const naiveUtc = /* @__PURE__ */ new Date(`${value}:00.000Z`);
-  const firstOffset = getTimeZoneOffsetMs(naiveUtc, timeZone);
-  const firstPass = new Date(naiveUtc.getTime() - firstOffset);
-  const secondOffset = getTimeZoneOffsetMs(firstPass, timeZone);
-  return new Date(naiveUtc.getTime() - secondOffset);
-}
-function formatDateTimeLocalInTimeZone(instant, timeZone) {
-  const parts = new Intl.DateTimeFormat("en-US", {
-    timeZone,
-    year: "numeric",
-    month: "2-digit",
-    day: "2-digit",
-    hour: "2-digit",
-    minute: "2-digit",
-    hourCycle: "h23"
-  }).formatToParts(instant);
-  const get = (type) => parts.find((part) => part.type === type)?.value ?? "00";
-  const hour = get("hour") === "24" ? "00" : get("hour");
-  return `${get("year")}-${get("month")}-${get("day")}T${hour}:${get("minute")}`;
-}
-
 // src/components/AvailabilityExceptionsEditor.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Plus as Plus2, Trash2 as Trash22 } from "lucide-react";
+import { useState as useState5, useMemo as useMemo6 } from "react";
+import { AVAILABILITY_EXCEPTION_KIND } from "@adatechnology/scheduling-contracts";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var SELECT_CLASS = "min-h-11 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 px-2 text-sm";
 function AvailabilityExceptionsEditor({ resourceId, timezone }) {
   const { locale } = useSchedulingConfig();
   const messages = resolveSchedulingMessages(locale);
+  const kindOptions = useMemo6(
+    () => [
+      { value: AVAILABILITY_EXCEPTION_KIND.BLOCK, label: messages["availability.exceptionKind.blocked"] },
+      { value: AVAILABILITY_EXCEPTION_KIND.EXTRA, label: messages["availability.exceptionKind.extra"] }
+    ],
+    [messages]
+  );
   const { data, isLoading, isError: isLoadError } = useAvailabilityExceptions(resourceId);
   const addException = useAddAvailabilityException();
   const removeException = useRemoveAvailabilityException();
   const emptyValue = () => formatDateTimeLocalInTimeZone(/* @__PURE__ */ new Date(), timezone);
-  const [from, setFrom] = useState3(emptyValue);
-  const [until, setUntil] = useState3(emptyValue);
-  const [kind, setKind] = useState3(AVAILABILITY_EXCEPTION_KIND.BLOCK);
-  const [reason, setReason] = useState3("");
+  const [from, setFrom] = useState5(emptyValue);
+  const [until, setUntil] = useState5(emptyValue);
+  const [kind, setKind] = useState5(AVAILABILITY_EXCEPTION_KIND.BLOCK);
+  const [reason, setReason] = useState5("");
   async function handleAdd() {
     if (!from || !until) return;
     try {
@@ -1031,13 +1729,13 @@ function AvailabilityExceptionsEditor({ resourceId, timezone }) {
     } catch {
     }
   }
-  return /* @__PURE__ */ jsxs5("section", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsx6("h3", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: messages["availability.exceptionsTitle"] }),
-    (addException.isError || removeException.isError) && /* @__PURE__ */ jsx6("p", { role: "alert", className: "text-sm text-red-700 bg-red-50 rounded-lg px-3 py-2", children: messages["common.actionFailure"] }),
-    isLoadError && /* @__PURE__ */ jsx6("p", { role: "alert", className: "text-sm text-red-700 bg-red-50 rounded-lg px-3 py-2", children: messages["common.loadFailure"] }),
-    isLoading && /* @__PURE__ */ jsx6("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: messages["common.loading"] }),
-    /* @__PURE__ */ jsx6("ul", { className: "space-y-2", children: (data ?? []).map((exception) => /* @__PURE__ */ jsxs5("li", { className: "flex items-center gap-2 text-sm", children: [
-      /* @__PURE__ */ jsxs5("span", { className: "flex-1", children: [
+  return /* @__PURE__ */ jsxs9("section", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsx12("h3", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: messages["availability.exceptionsTitle"] }),
+    (addException.isError || removeException.isError) && /* @__PURE__ */ jsx12("p", { role: "alert", className: "text-sm text-red-700 bg-red-50 rounded-lg px-3 py-2", children: messages["common.actionFailure"] }),
+    isLoadError && /* @__PURE__ */ jsx12("p", { role: "alert", className: "text-sm text-red-700 bg-red-50 rounded-lg px-3 py-2", children: messages["common.loadFailure"] }),
+    isLoading && /* @__PURE__ */ jsx12("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: messages["common.loading"] }),
+    /* @__PURE__ */ jsx12("ul", { className: "space-y-2", children: (data ?? []).map((exception) => /* @__PURE__ */ jsxs9("li", { className: "flex items-center gap-2 text-sm", children: [
+      /* @__PURE__ */ jsxs9("span", { className: "flex-1", children: [
         messages[`availability.exceptionKind.${exception.kind === "block" ? "blocked" : "extra"}`],
         " \u2014",
         " ",
@@ -1046,19 +1744,19 @@ function AvailabilityExceptionsEditor({ resourceId, timezone }) {
         exception.during.end.toLocaleString(locale),
         exception.reason ? ` (${exception.reason})` : ""
       ] }),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx12(
         "button",
         {
           type: "button",
           onClick: () => removeException.mutate({ id: exception.id, resourceId }),
           "aria-label": messages["availability.removeException"],
           className: "min-h-11 min-w-11 inline-flex items-center justify-center rounded-lg text-red-700 hover:bg-red-50",
-          children: /* @__PURE__ */ jsx6(Trash22, { "aria-hidden": "true", className: "w-4 h-4" })
+          children: /* @__PURE__ */ jsx12(Trash22, { "aria-hidden": "true", className: "w-4 h-4" })
         }
       )
     ] }, exception.id)) }),
-    /* @__PURE__ */ jsxs5("div", { className: "flex flex-wrap items-center gap-2", children: [
-      /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsxs9("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsx12(
         DateTimeField,
         {
           label: messages["availability.exceptionFrom"],
@@ -1066,7 +1764,7 @@ function AvailabilityExceptionsEditor({ resourceId, timezone }) {
           onChange: setFrom
         }
       ),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx12(
         DateTimeField,
         {
           label: messages["availability.exceptionUntil"],
@@ -1074,20 +1772,17 @@ function AvailabilityExceptionsEditor({ resourceId, timezone }) {
           onChange: setUntil
         }
       ),
-      /* @__PURE__ */ jsxs5(
-        "select",
+      /* @__PURE__ */ jsx12(
+        SelectField,
         {
-          "aria-label": messages["availability.exceptionKind.blocked"],
+          hideLabel: true,
+          label: messages["availability.exceptionsTitle"],
           value: kind,
-          onChange: (event) => setKind(event.target.value),
-          className: SELECT_CLASS,
-          children: [
-            /* @__PURE__ */ jsx6("option", { value: AVAILABILITY_EXCEPTION_KIND.BLOCK, children: messages["availability.exceptionKind.blocked"] }),
-            /* @__PURE__ */ jsx6("option", { value: AVAILABILITY_EXCEPTION_KIND.EXTRA, children: messages["availability.exceptionKind.extra"] })
-          ]
+          options: kindOptions,
+          onChange: (next) => setKind(next)
         }
       ),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx12(
         "input",
         {
           "aria-label": messages["availability.exceptionReason"],
@@ -1098,7 +1793,7 @@ function AvailabilityExceptionsEditor({ resourceId, timezone }) {
           className: SELECT_CLASS
         }
       ),
-      /* @__PURE__ */ jsxs5(
+      /* @__PURE__ */ jsxs9(
         "button",
         {
           type: "button",
@@ -1106,7 +1801,7 @@ function AvailabilityExceptionsEditor({ resourceId, timezone }) {
           disabled: addException.isPending,
           className: "inline-flex items-center gap-2 min-h-11 px-3 py-2 rounded-lg text-sm font-medium bg-brand-600 text-white hover:bg-brand-700 disabled:opacity-50",
           children: [
-            /* @__PURE__ */ jsx6(Plus2, { "aria-hidden": "true", className: "w-4 h-4" }),
+            /* @__PURE__ */ jsx12(Plus2, { "aria-hidden": "true", className: "w-4 h-4" }),
             messages["availability.addException"]
           ]
         }
@@ -1116,51 +1811,54 @@ function AvailabilityExceptionsEditor({ resourceId, timezone }) {
 }
 
 // src/components/AvailabilityEditor.tsx
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 function AvailabilityEditor({ resourceId, timezone }) {
   const { locale } = useSchedulingConfig();
   const messages = resolveSchedulingMessages(locale);
-  return /* @__PURE__ */ jsxs6("div", { className: "space-y-6", children: [
-    /* @__PURE__ */ jsxs6("p", { className: "inline-flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400", children: [
-      /* @__PURE__ */ jsxs6("span", { className: "font-medium", children: [
+  return /* @__PURE__ */ jsxs10("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs10("p", { className: "inline-flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400", children: [
+      /* @__PURE__ */ jsxs10("span", { className: "font-medium", children: [
         messages["availability.resourceTimezone"],
         ":"
       ] }),
       timezone
     ] }),
-    /* @__PURE__ */ jsx7(WeeklyRulesEditor, { resourceId }),
-    /* @__PURE__ */ jsx7(AvailabilityExceptionsEditor, { resourceId, timezone })
+    /* @__PURE__ */ jsx13(WeeklyRulesEditor, { resourceId }),
+    /* @__PURE__ */ jsx13(AvailabilityExceptionsEditor, { resourceId, timezone })
   ] });
 }
 
 // src/workspace/AvailabilityArea.tsx
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 function AvailabilityArea() {
   const { locale } = useSchedulingConfig();
   const messages = resolveSchedulingMessages(locale);
   const { data, isLoading, isError } = useResources({ active: true, pageSize: MAX_PAGE_SIZE2 });
-  const [resourceId, setResourceId] = useState4("");
+  const [resourceId, setResourceId] = useState6("");
   const resources = data?.data ?? [];
   const selectedResource = resources.find((resource) => resource.id === resourceId);
-  return /* @__PURE__ */ jsxs7("div", { className: "flex flex-1 min-h-0 min-w-0 flex-col p-4 space-y-4", children: [
-    /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-2 text-sm", children: [
-      /* @__PURE__ */ jsx8("span", { className: "font-medium text-gray-700 dark:text-gray-300", children: messages["agenda.resourceLabel"] }),
-      /* @__PURE__ */ jsxs7(
-        "select",
-        {
-          value: resourceId,
-          onChange: (event) => setResourceId(event.target.value),
-          className: "min-h-11 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 px-2 text-sm",
-          children: [
-            /* @__PURE__ */ jsx8("option", { value: "", children: "\u2014" }),
-            resources.map((resource) => /* @__PURE__ */ jsx8("option", { value: resource.id, children: resource.name }, resource.id))
-          ]
-        }
-      )
-    ] }),
-    isError && /* @__PURE__ */ jsx8("p", { role: "alert", className: "text-sm text-red-700 bg-red-50 rounded-lg px-3 py-2", children: messages["common.loadFailure"] }),
-    isLoading && /* @__PURE__ */ jsx8("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: messages["common.loading"] }),
-    selectedResource && /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs11("div", { className: "flex flex-1 min-h-0 min-w-0 flex-col gap-4 overflow-y-auto p-4", children: [
+    /* @__PURE__ */ jsx14(
+      ResourceSelect,
+      {
+        label: messages["agenda.resourceLabel"],
+        emptyOptionLabel: messages["availability.selectResourceTitle"],
+        resources,
+        value: resourceId,
+        onChange: setResourceId
+      }
+    ),
+    isError && /* @__PURE__ */ jsx14(ErrorBanner, { message: messages["common.loadFailure"] }),
+    isLoading && /* @__PURE__ */ jsx14(ListSkeleton, { label: messages["common.loading"], rows: 3 }),
+    !isLoading && !isError && !selectedResource && /* @__PURE__ */ jsx14(
+      EmptyState,
+      {
+        icon: Clock,
+        title: messages["availability.selectResourceTitle"],
+        hint: messages["availability.selectResourceHint"]
+      }
+    ),
+    selectedResource && /* @__PURE__ */ jsx14(
       AvailabilityEditor,
       {
         resourceId: selectedResource.id,
@@ -1172,194 +1870,24 @@ function AvailabilityArea() {
 }
 
 // src/workspace/BookingsArea.tsx
-import { useState as useState8 } from "react";
+import { ClipboardList } from "lucide-react";
+import { useState as useState9 } from "react";
 import { MAX_PAGE_SIZE as MAX_PAGE_SIZE3 } from "@adatechnology/scheduling-contracts";
 
-// src/components/BookingDrawer.tsx
-import { XCircle } from "lucide-react";
-import { useState as useState5 } from "react";
-import { BOOKING_STATUS } from "@adatechnology/scheduling-contracts";
-
-// src/components/SidePanel.tsx
-import { X } from "lucide-react";
-import { useEffect } from "react";
-import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
-var BUTTON_CLASS = "inline-flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors min-h-11";
-function SidePanel({ title, closeLabel, onClose, headerActions, children }) {
-  useEffect(() => {
-    function handleKeyDown(event) {
-      if (event.key === "Escape") onClose();
-    }
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [onClose]);
-  return /* @__PURE__ */ jsxs8(Fragment2, { children: [
-    /* @__PURE__ */ jsx9(
-      "button",
-      {
-        type: "button",
-        "aria-hidden": "true",
-        tabIndex: -1,
-        onClick: onClose,
-        className: "absolute inset-0 z-10 bg-gray-900/20 wide:hidden"
-      }
-    ),
-    /* @__PURE__ */ jsxs8(
-      "section",
-      {
-        "aria-label": title,
-        className: "absolute inset-y-0 right-0 z-20 flex w-full max-w-full flex-col bg-white shadow-2xl desktop:w-[28rem] dark:bg-gray-900 wide:static wide:z-auto wide:shrink-0 wide:border-l wide:border-gray-200 wide:shadow-none wide:dark:border-gray-700",
-        children: [
-          /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2 border-b border-gray-200 px-4 py-3 dark:border-gray-700", children: [
-            /* @__PURE__ */ jsx9("h2", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100 mr-auto", children: title }),
-            headerActions,
-            /* @__PURE__ */ jsxs8(
-              "button",
-              {
-                type: "button",
-                onClick: onClose,
-                className: `${BUTTON_CLASS} text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800`,
-                children: [
-                  /* @__PURE__ */ jsx9(X, { "aria-hidden": "true", className: "w-4 h-4" }),
-                  closeLabel
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx9("div", { className: "min-h-0 flex-1 overflow-y-auto p-4", children })
-        ]
-      }
-    )
-  ] });
-}
-
-// src/components/BookingDrawer.tsx
-import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
-var BROWSER_TIME_ZONE = Intl.DateTimeFormat().resolvedOptions().timeZone;
-var ACTION_BUTTON_CLASS = "min-h-11 px-3 rounded-lg text-sm font-medium border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800";
-var PRIMARY_BUTTON_CLASS = "min-h-11 px-3 rounded-lg text-sm font-medium bg-brand-600 text-white hover:bg-brand-700";
-var DANGER_BUTTON_CLASS = "inline-flex items-center gap-2 min-h-11 px-3 rounded-lg text-sm font-medium text-red-700 hover:bg-red-50";
-var INPUT_CLASS = "min-h-11 w-full px-3 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-sm";
-function BookingDrawer({ booking, resourceTimezone, onClose }) {
-  const { locale } = useSchedulingConfig();
-  const messages = resolveSchedulingMessages(locale);
-  const confirmBooking = useConfirmBooking();
-  const completeBooking = useCompleteBooking();
-  const markNoShow = useMarkNoShow();
-  const cancelBooking = useCancelBooking();
-  const rescheduleBooking = useRescheduleBooking();
-  const timezone = resourceTimezone ?? BROWSER_TIME_ZONE;
-  const [isCancelling, setIsCancelling] = useState5(false);
-  const [cancelledBy, setCancelledBy] = useState5("");
-  const [cancellationReason, setCancellationReason] = useState5("");
-  const [isRescheduling, setIsRescheduling] = useState5(false);
-  const [start, setStart] = useState5(() => formatDateTimeLocalInTimeZone(booking.startsAt, timezone));
-  const [end, setEnd] = useState5(() => formatDateTimeLocalInTimeZone(booking.endsAt, timezone));
-  async function handleCancel() {
-    if (!cancelledBy) return;
-    try {
-      await cancelBooking.mutateAsync({
-        id: booking.id,
-        input: { cancelledBy, ...cancellationReason ? { cancellationReason } : {} }
-      });
-      onClose();
-    } catch {
-    }
-  }
-  async function handleReschedule() {
-    try {
-      await rescheduleBooking.mutateAsync({
-        id: booking.id,
-        input: {
-          during: {
-            start: parseDateTimeLocalInTimeZone(start, timezone),
-            end: parseDateTimeLocalInTimeZone(end, timezone)
-          }
-        }
-      });
-      setIsRescheduling(false);
-    } catch {
-    }
-  }
-  const isTerminal = booking.status === BOOKING_STATUS.CANCELLED || booking.status === BOOKING_STATUS.COMPLETED || booking.status === BOOKING_STATUS.NO_SHOW;
-  return /* @__PURE__ */ jsx10(SidePanel, { title: messages["booking.detailTitle"], closeLabel: messages["common.close"], onClose, children: /* @__PURE__ */ jsxs9("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs9("div", { children: [
-      /* @__PURE__ */ jsx10("p", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: booking.title }),
-      /* @__PURE__ */ jsx10("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: messages[`booking.status.${booking.status === "no_show" ? "noShow" : booking.status}`] }),
-      /* @__PURE__ */ jsxs9("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
-        booking.startsAt.toLocaleString(locale),
-        " \u2192 ",
-        booking.endsAt.toLocaleString(locale)
-      ] })
-    ] }),
-    (confirmBooking.isError || completeBooking.isError || markNoShow.isError || cancelBooking.isError || rescheduleBooking.isError) && /* @__PURE__ */ jsx10("p", { role: "alert", className: "text-sm text-red-700 bg-red-50 rounded-lg px-3 py-2", children: messages["common.actionFailure"] }),
-    !isTerminal && /* @__PURE__ */ jsxs9("div", { className: "flex flex-wrap gap-2", children: [
-      booking.status === BOOKING_STATUS.REQUESTED && /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => confirmBooking.mutate(booking.id), className: PRIMARY_BUTTON_CLASS, children: messages["booking.confirm"] }),
-      booking.status === BOOKING_STATUS.CONFIRMED && /* @__PURE__ */ jsxs9(Fragment3, { children: [
-        /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => completeBooking.mutate(booking.id), className: ACTION_BUTTON_CLASS, children: messages["booking.complete"] }),
-        /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => markNoShow.mutate(booking.id), className: ACTION_BUTTON_CLASS, children: messages["booking.markNoShow"] }),
-        /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => setIsRescheduling(true), className: ACTION_BUTTON_CLASS, children: messages["booking.reschedule"] })
-      ] }),
-      /* @__PURE__ */ jsxs9("button", { type: "button", onClick: () => setIsCancelling(true), className: DANGER_BUTTON_CLASS, children: [
-        /* @__PURE__ */ jsx10(XCircle, { "aria-hidden": "true", className: "w-4 h-4" }),
-        messages["booking.cancel"]
-      ] })
-    ] }),
-    isRescheduling && /* @__PURE__ */ jsxs9("div", { className: "space-y-2 rounded-lg border border-gray-200 dark:border-gray-700 p-3", children: [
-      /* @__PURE__ */ jsx10(
-        DateTimeField,
-        {
-          label: messages["booking.rescheduleStart"],
-          value: start,
-          onChange: setStart
-        }
-      ),
-      /* @__PURE__ */ jsx10(DateTimeField, { label: messages["booking.rescheduleEnd"], value: end, onChange: setEnd }),
-      /* @__PURE__ */ jsx10("button", { type: "button", onClick: handleReschedule, disabled: rescheduleBooking.isPending, className: PRIMARY_BUTTON_CLASS, children: messages["common.save"] })
-    ] }),
-    isCancelling && /* @__PURE__ */ jsxs9("div", { className: "space-y-2 rounded-lg border border-gray-200 dark:border-gray-700 p-3", children: [
-      /* @__PURE__ */ jsx10(
-        "input",
-        {
-          type: "text",
-          placeholder: messages["booking.cancelledBy"],
-          value: cancelledBy,
-          onChange: (event) => setCancelledBy(event.target.value),
-          className: INPUT_CLASS
-        }
-      ),
-      /* @__PURE__ */ jsx10(
-        "input",
-        {
-          type: "text",
-          placeholder: messages["booking.cancelReason"],
-          value: cancellationReason,
-          onChange: (event) => setCancellationReason(event.target.value),
-          className: INPUT_CLASS
-        }
-      ),
-      /* @__PURE__ */ jsxs9("button", { type: "button", onClick: handleCancel, disabled: cancelBooking.isPending, className: DANGER_BUTTON_CLASS, children: [
-        /* @__PURE__ */ jsx10(XCircle, { "aria-hidden": "true", className: "w-4 h-4" }),
-        messages["booking.cancel"]
-      ] })
-    ] })
-  ] }) });
-}
-
 // src/components/BookingsTable.tsx
 import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, ArrowUpDown } from "lucide-react";
-import { useState as useState6 } from "react";
-import { BOOKING_STATUS as BOOKING_STATUS3 } from "@adatechnology/scheduling-contracts";
+import { useState as useState7 } from "react";
+import { BOOKING_STATUS as BOOKING_STATUS4 } from "@adatechnology/scheduling-contracts";
 
 // src/components/bookingsTableState.util.ts
-import { BOOKING_STATUS as BOOKING_STATUS2 } from "@adatechnology/scheduling-contracts";
+import { BOOKING_STATUS as BOOKING_STATUS3 } from "@adatechnology/scheduling-contracts";
 var DEFAULT_BOOKINGS_TABLE_STATE = {
   sortDirection: "asc",
   statusFilters: [],
   page: 1
 };
 var SORT_COLUMNS = ["title", "status", "startsAt", "endsAt"];
-var BOOKING_STATUSES = Object.values(BOOKING_STATUS2);
+var BOOKING_STATUSES = Object.values(BOOKING_STATUS3);
 function isBookingSortColumn(value) {
   return SORT_COLUMNS.includes(value);
 }
@@ -1398,8 +1926,8 @@ function filterBookingsByStatus(bookings, statusFilters) {
 }
 
 // src/components/BookingsTable.tsx
-import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
-var ALL_STATUSES = Object.values(BOOKING_STATUS3);
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+var ALL_STATUSES = Object.values(BOOKING_STATUS4);
 var HEADER_BUTTON_CLASS = "inline-flex items-center gap-1 text-left text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400";
 var CHECKBOX_CELL_CLASS = "px-3 py-2";
 function nextSortState(column, currentColumn, currentDirection) {
@@ -1417,7 +1945,7 @@ function BookingsTable({
 }) {
   const { locale } = useSchedulingConfig();
   const messages = resolveSchedulingMessages(locale);
-  const [selected, setSelected] = useState6(/* @__PURE__ */ new Set());
+  const [selected, setSelected] = useState7(/* @__PURE__ */ new Set());
   const visibleBookings = filterBookingsByStatus(bookings, state.statusFilters);
   const allSelected = visibleBookings.length > 0 && visibleBookings.every((booking) => selected.has(booking.id));
   function toggleSort(column) {
@@ -1447,53 +1975,67 @@ function BookingsTable({
     setSelected(next);
   }
   function renderSortIcon(column) {
-    if (state.sortColumn !== column) return /* @__PURE__ */ jsx11(ArrowUpDown, { "aria-hidden": "true", className: "w-3 h-3" });
-    return state.sortDirection === "asc" ? /* @__PURE__ */ jsx11(ArrowUp, { "aria-hidden": "true", className: "w-3 h-3" }) : /* @__PURE__ */ jsx11(ArrowDown, { "aria-hidden": "true", className: "w-3 h-3" });
+    if (state.sortColumn !== column) return /* @__PURE__ */ jsx15(ArrowUpDown, { "aria-hidden": "true", className: "w-3 h-3" });
+    return state.sortDirection === "asc" ? /* @__PURE__ */ jsx15(ArrowUp, { "aria-hidden": "true", className: "w-3 h-3" }) : /* @__PURE__ */ jsx15(ArrowDown, { "aria-hidden": "true", className: "w-3 h-3" });
   }
   function renderHeader(column, labelKey) {
     const ariaSort = state.sortColumn !== column ? "none" : state.sortDirection === "asc" ? "ascending" : "descending";
-    return /* @__PURE__ */ jsx11("th", { scope: "col", className: "px-3 py-2", "aria-sort": ariaSort, children: /* @__PURE__ */ jsxs10("button", { type: "button", onClick: () => toggleSort(column), className: HEADER_BUTTON_CLASS, children: [
+    return /* @__PURE__ */ jsx15("th", { scope: "col", className: "px-3 py-2", "aria-sort": ariaSort, children: /* @__PURE__ */ jsxs12("button", { type: "button", onClick: () => toggleSort(column), className: HEADER_BUTTON_CLASS, children: [
       messages[labelKey],
       renderSortIcon(column)
     ] }) });
   }
-  return /* @__PURE__ */ jsxs10("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsxs10("div", { className: "flex flex-wrap items-center gap-3", children: [
-      ALL_STATUSES.map((status) => /* @__PURE__ */ jsxs10("label", { className: "flex items-center gap-1.5 text-sm min-h-11", children: [
-        /* @__PURE__ */ jsx11(
-          "input",
-          {
-            type: "checkbox",
-            checked: state.statusFilters.includes(status),
-            onChange: () => toggleStatusFilter(status)
-          }
-        ),
-        messages[`booking.status.${status === "no_show" ? "noShow" : status}`]
-      ] }, status)),
-      !isBookingsTableStateDefault(state) && /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsxs12("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs12("div", { className: "flex flex-wrap items-center gap-3", children: [
+      /* @__PURE__ */ jsxs12("fieldset", { className: "flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsx15("legend", { className: "sr-only", children: messages["booking.filterByStatus"] }),
+        ALL_STATUSES.map((status) => {
+          const isActive = state.statusFilters.includes(status);
+          return /* @__PURE__ */ jsxs12(
+            "label",
+            {
+              className: `flex cursor-pointer items-center gap-1.5 rounded-full border px-3 py-1.5 text-sm transition-colors ${isActive ? "border-brand-500 bg-brand-50 text-brand-800 dark:bg-brand-900/40 dark:text-brand-200" : "border-gray-300 text-gray-600 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800"}`,
+              children: [
+                /* @__PURE__ */ jsx15(
+                  "input",
+                  {
+                    type: "checkbox",
+                    className: "sr-only",
+                    checked: isActive,
+                    onChange: () => toggleStatusFilter(status)
+                  }
+                ),
+                bookingStatusLabel(messages, status)
+              ]
+            },
+            status
+          );
+        })
+      ] }),
+      !isBookingsTableStateDefault(state) && /* @__PURE__ */ jsx15(
         "button",
         {
           type: "button",
           onClick: () => onStateChange?.(DEFAULT_BOOKINGS_TABLE_STATE),
-          className: "min-h-11 px-3 text-sm font-medium text-brand-700 hover:underline",
+          className: "min-h-11 px-3 text-sm font-medium text-brand-700 hover:underline dark:text-brand-300",
           children: messages["common.clearFilters"]
         }
       )
     ] }),
-    selected.size > 0 && bulkActions.length > 0 && /* @__PURE__ */ jsx11("div", { className: "flex items-center gap-2 rounded-lg bg-brand-50 dark:bg-brand-900/30 px-3 py-2", children: bulkActions.map((action) => /* @__PURE__ */ jsx11(
+    selected.size > 0 && bulkActions.length > 0 && /* @__PURE__ */ jsx15("div", { className: "flex items-center gap-2 rounded-lg bg-brand-50 dark:bg-brand-900/30 px-3 py-2", children: bulkActions.map((action) => /* @__PURE__ */ jsx15(
       "button",
       {
         type: "button",
         onClick: () => action.onRun(Array.from(selected)),
-        className: "min-h-11 px-3 rounded-lg text-sm font-medium bg-brand-600 text-white hover:bg-brand-700",
+        className: BUTTON_PRIMARY,
         children: action.label
       },
       action.key
     )) }),
-    /* @__PURE__ */ jsxs10("div", { className: "overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700", children: [
-      /* @__PURE__ */ jsxs10("table", { className: "min-w-full text-sm", children: [
-        /* @__PURE__ */ jsx11("thead", { className: "border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxs10("tr", { children: [
-          /* @__PURE__ */ jsx11("th", { scope: "col", className: CHECKBOX_CELL_CLASS, children: /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsxs12("div", { className: `${SURFACE_BORDER} overflow-x-auto`, children: [
+      /* @__PURE__ */ jsxs12("table", { className: "min-w-full text-sm", children: [
+        /* @__PURE__ */ jsx15("thead", { className: "border-b border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-800/60", children: /* @__PURE__ */ jsxs12("tr", { children: [
+          /* @__PURE__ */ jsx15("th", { scope: "col", className: CHECKBOX_CELL_CLASS, children: /* @__PURE__ */ jsx15(
             "input",
             {
               type: "checkbox",
@@ -1507,12 +2049,12 @@ function BookingsTable({
           renderHeader("startsAt", "booking.column.startsAt"),
           renderHeader("endsAt", "booking.column.endsAt")
         ] }) }),
-        /* @__PURE__ */ jsx11("tbody", { children: visibleBookings.map((booking, index) => /* @__PURE__ */ jsxs10(
+        /* @__PURE__ */ jsx15("tbody", { children: visibleBookings.map((booking, index) => /* @__PURE__ */ jsxs12(
           "tr",
           {
-            className: index % 2 === 1 ? "bg-gray-50 dark:bg-gray-800/50" : void 0,
+            className: `${index % 2 === 1 ? ROW_STRIPE : ""} hover:bg-brand-50/50 dark:hover:bg-brand-900/10`,
             children: [
-              /* @__PURE__ */ jsx11("td", { className: CHECKBOX_CELL_CLASS, children: /* @__PURE__ */ jsx11(
+              /* @__PURE__ */ jsx15("td", { className: CHECKBOX_CELL_CLASS, children: /* @__PURE__ */ jsx15(
                 "input",
                 {
                   type: "checkbox",
@@ -1521,43 +2063,43 @@ function BookingsTable({
                   onChange: () => toggleRowSelected(booking.id)
                 }
               ) }),
-              /* @__PURE__ */ jsx11("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsx11("button", { type: "button", onClick: () => onRowClick?.(booking), className: "min-h-11 text-left hover:underline", children: booking.title }) }),
-              /* @__PURE__ */ jsx11("td", { className: "px-3 py-2", children: messages[`booking.status.${booking.status === "no_show" ? "noShow" : booking.status}`] }),
-              /* @__PURE__ */ jsx11("td", { className: "px-3 py-2", children: booking.startsAt.toLocaleString(locale) }),
-              /* @__PURE__ */ jsx11("td", { className: "px-3 py-2", children: booking.endsAt.toLocaleString(locale) })
+              /* @__PURE__ */ jsx15("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsx15("button", { type: "button", onClick: () => onRowClick?.(booking), className: "min-h-11 text-left hover:underline", children: booking.title }) }),
+              /* @__PURE__ */ jsx15("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsx15(BookingStatusBadge, { status: booking.status }) }),
+              /* @__PURE__ */ jsx15("td", { className: "px-3 py-2 tabular-nums whitespace-nowrap", children: booking.startsAt.toLocaleString(locale) }),
+              /* @__PURE__ */ jsx15("td", { className: "px-3 py-2 tabular-nums whitespace-nowrap", children: booking.endsAt.toLocaleString(locale) })
             ]
           },
           booking.id
         )) })
       ] }),
-      visibleBookings.length === 0 && /* @__PURE__ */ jsx11("p", { className: "px-3 py-4 text-sm text-gray-500 dark:text-gray-400", children: messages["common.empty"] })
+      visibleBookings.length === 0 && /* @__PURE__ */ jsx15("p", { className: "px-3 py-8 text-center text-sm text-gray-500 dark:text-gray-400", children: messages["common.empty"] })
     ] }),
-    pagination && pagination.totalPages > 1 && /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-end gap-3", children: [
-      /* @__PURE__ */ jsx11(
+    pagination && pagination.totalPages > 1 && /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-end gap-3", children: [
+      /* @__PURE__ */ jsx15(
         "button",
         {
           type: "button",
           "aria-label": messages["common.previousPage"],
           disabled: state.page <= 1,
           onClick: () => goToPage(state.page - 1),
-          className: "min-h-11 min-w-11 inline-flex items-center justify-center rounded-lg border border-gray-300 dark:border-gray-700 disabled:opacity-50",
-          children: /* @__PURE__ */ jsx11(ArrowLeft, { "aria-hidden": "true", className: "w-4 h-4" })
+          className: ICON_BUTTON,
+          children: /* @__PURE__ */ jsx15(ArrowLeft, { "aria-hidden": "true", className: "w-4 h-4" })
         }
       ),
-      /* @__PURE__ */ jsxs10("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
+      /* @__PURE__ */ jsxs12("span", { className: "text-sm tabular-nums text-gray-500 dark:text-gray-400", children: [
         state.page,
         " / ",
         pagination.totalPages
       ] }),
-      /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx15(
         "button",
         {
           type: "button",
           "aria-label": messages["common.nextPage"],
           disabled: state.page >= pagination.totalPages,
           onClick: () => goToPage(state.page + 1),
-          className: "min-h-11 min-w-11 inline-flex items-center justify-center rounded-lg border border-gray-300 dark:border-gray-700 disabled:opacity-50",
-          children: /* @__PURE__ */ jsx11(ArrowRight, { "aria-hidden": "true", className: "w-4 h-4" })
+          className: ICON_BUTTON,
+          children: /* @__PURE__ */ jsx15(ArrowRight, { "aria-hidden": "true", className: "w-4 h-4" })
         }
       )
     ] })
@@ -1565,15 +2107,15 @@ function BookingsTable({
 }
 
 // src/hooks/useBookingsTableState.hook.ts
-import { useEffect as useEffect2, useState as useState7 } from "react";
+import { useEffect as useEffect4, useState as useState8 } from "react";
 var OWNED_PARAM_KEYS = ["sortBy", "sortDirection", "status", "page"];
 function readInitialState() {
   if (typeof window === "undefined") return DEFAULT_BOOKINGS_TABLE_STATE;
   return parseBookingsTableState(window.location.search);
 }
 function useBookingsTableState() {
-  const [state, setState] = useState7(readInitialState);
-  useEffect2(() => {
+  const [state, setState] = useState8(readInitialState);
+  useEffect4(() => {
     if (typeof window === "undefined") return;
     const params = new URLSearchParams(window.location.search);
     for (const key of OWNED_PARAM_KEYS) params.delete(key);
@@ -1586,7 +2128,7 @@ function useBookingsTableState() {
 }
 
 // src/workspace/BookingsArea.tsx
-import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 var PAGE_SIZE = 20;
 function BookingsArea() {
   const { locale } = useSchedulingConfig();
@@ -1602,7 +2144,7 @@ function BookingsArea() {
   });
   const confirmBooking = useConfirmBooking();
   const { data: resourcesData } = useResources({ pageSize: MAX_PAGE_SIZE3 });
-  const [selectedBookingId, setSelectedBookingId] = useState8(void 0);
+  const [selectedBookingId, setSelectedBookingId] = useState9(void 0);
   const selectedBooking = data?.data.find((booking) => booking.id === selectedBookingId);
   const selectedBookingResourceTimezone = resourcesData?.data.find(
     (resource) => resource.id === selectedBooking?.resourceIds[0]
@@ -1610,21 +2152,32 @@ function BookingsArea() {
   function bulkConfirm(ids) {
     for (const id of ids) confirmBooking.mutate(id);
   }
-  return /* @__PURE__ */ jsxs11("div", { className: "flex flex-1 min-h-0 min-w-0 flex-col p-4 space-y-4", children: [
-    isError && /* @__PURE__ */ jsx12("p", { role: "alert", className: "text-sm text-red-700 bg-red-50 rounded-lg px-3 py-2", children: messages["common.loadFailure"] }),
-    confirmBooking.isError && /* @__PURE__ */ jsx12("p", { role: "alert", className: "text-sm text-red-700 bg-red-50 rounded-lg px-3 py-2", children: messages["common.actionFailure"] }),
-    isLoading ? /* @__PURE__ */ jsx12("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: messages["common.loading"] }) : /* @__PURE__ */ jsx12(
-      BookingsTable,
-      {
-        bookings: data?.data ?? [],
-        state: tableState,
-        onStateChange: setTableState,
-        pagination: data ? { totalPages: data.totalPages } : void 0,
-        onRowClick: (booking) => setSelectedBookingId(booking.id),
-        bulkActions: [{ key: "confirm", label: messages["booking.confirm"], onRun: bulkConfirm }]
-      }
-    ),
-    selectedBooking && /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs13("div", { className: "flex flex-1 min-h-0 min-w-0", children: [
+    /* @__PURE__ */ jsxs13("div", { className: "flex flex-1 min-h-0 min-w-0 flex-col gap-4 overflow-y-auto p-4", children: [
+      isError && /* @__PURE__ */ jsx16(ErrorBanner, { message: messages["common.loadFailure"] }),
+      confirmBooking.isError && /* @__PURE__ */ jsx16(ErrorBanner, { message: messages["common.actionFailure"] }),
+      isLoading && /* @__PURE__ */ jsx16(ListSkeleton, { label: messages["common.loading"], rows: 8 }),
+      !isLoading && !isError && (data?.data.length ?? 0) === 0 && tableState.statusFilters.length === 0 && /* @__PURE__ */ jsx16(
+        EmptyState,
+        {
+          icon: ClipboardList,
+          title: messages["booking.emptyTitle"],
+          hint: messages["booking.emptyHint"]
+        }
+      ),
+      !isLoading && ((data?.data.length ?? 0) > 0 || tableState.statusFilters.length > 0) && /* @__PURE__ */ jsx16(
+        BookingsTable,
+        {
+          bookings: data?.data ?? [],
+          state: tableState,
+          onStateChange: setTableState,
+          pagination: data ? { totalPages: data.totalPages } : void 0,
+          onRowClick: (booking) => setSelectedBookingId(booking.id),
+          bulkActions: [{ key: "confirm", label: messages["booking.confirm"], onRun: bulkConfirm }]
+        }
+      )
+    ] }),
+    selectedBooking && /* @__PURE__ */ jsx16(
       BookingDrawer,
       {
         booking: selectedBooking,
@@ -1637,29 +2190,42 @@ function BookingsArea() {
 }
 
 // src/workspace/ResourcesArea.tsx
-import { Plus as Plus3, Trash2 as Trash23 } from "lucide-react";
-import { useState as useState10 } from "react";
+import { Plus as Plus3, Trash2 as Trash23, Users } from "lucide-react";
+import { useState as useState11 } from "react";
 import { MAX_PAGE_SIZE as MAX_PAGE_SIZE4 } from "@adatechnology/scheduling-contracts";
 
 // src/components/ResourceForm.tsx
-import { useId as useId2, useState as useState9 } from "react";
+import { useId as useId3, useMemo as useMemo7, useState as useState10 } from "react";
 import { RESOURCE_KIND } from "@adatechnology/scheduling-contracts";
-import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
 var INPUT_CLASS2 = "w-full min-h-11 px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-brand-500 bg-white dark:bg-gray-900";
 var LABEL_CLASS = "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1";
-var BUTTON_PRIMARY = "inline-flex items-center justify-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors min-h-11 bg-brand-600 text-white hover:bg-brand-700 disabled:opacity-50";
+var BUTTON_PRIMARY2 = "inline-flex items-center justify-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors min-h-11 bg-brand-600 text-white hover:bg-brand-700 disabled:opacity-50";
+var FALLBACK_TIMEZONES = ["America/Sao_Paulo", "America/Manaus", "America/Belem", "UTC"];
+function buildTimezoneOptions(current) {
+  const supported = Intl.supportedValuesOf?.("timeZone") ?? FALLBACK_TIMEZONES;
+  const zones = supported.includes(current) ? supported : [current, ...supported];
+  return zones.map((zone) => ({ value: zone, label: zone.replace(/_/g, " ") }));
+}
 function ResourceForm({ initialValues, onSubmit }) {
   const { locale } = useSchedulingConfig();
   const messages = resolveSchedulingMessages(locale);
-  const formId = useId2();
+  const formId = useId3();
   const nameId = `${formId}-name`;
-  const kindId = `${formId}-kind`;
-  const timezoneId = `${formId}-timezone`;
-  const [name, setName] = useState9(initialValues?.name ?? "");
-  const [kind, setKind] = useState9(initialValues?.kind ?? RESOURCE_KIND.PERSON);
-  const [timezone, setTimezone] = useState9(initialValues?.timezone ?? "America/Sao_Paulo");
-  const [active, setActive] = useState9(initialValues?.active ?? true);
-  const [submitting, setSubmitting] = useState9(false);
+  const [name, setName] = useState10(initialValues?.name ?? "");
+  const [kind, setKind] = useState10(initialValues?.kind ?? RESOURCE_KIND.PERSON);
+  const [timezone, setTimezone] = useState10(initialValues?.timezone ?? "America/Sao_Paulo");
+  const [active, setActive] = useState10(initialValues?.active ?? true);
+  const [submitting, setSubmitting] = useState10(false);
+  const kindOptions = useMemo7(
+    () => [
+      { value: RESOURCE_KIND.PERSON, label: messages["resource.kind.person"] },
+      { value: RESOURCE_KIND.ROOM, label: messages["resource.kind.room"] },
+      { value: RESOURCE_KIND.EQUIPMENT, label: messages["resource.kind.equipment"] }
+    ],
+    [messages]
+  );
+  const timezoneOptions = useMemo7(() => buildTimezoneOptions(timezone), [timezone]);
   async function handleSubmit(event) {
     event.preventDefault();
     setSubmitting(true);
@@ -1669,10 +2235,10 @@ function ResourceForm({ initialValues, onSubmit }) {
       setSubmitting(false);
     }
   }
-  return /* @__PURE__ */ jsxs12("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs12("div", { children: [
-      /* @__PURE__ */ jsx13("label", { htmlFor: nameId, className: LABEL_CLASS, children: messages["resource.name"] }),
-      /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs14("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs14("div", { children: [
+      /* @__PURE__ */ jsx17("label", { htmlFor: nameId, className: LABEL_CLASS, children: messages["resource.name"] }),
+      /* @__PURE__ */ jsx17(
         "input",
         {
           id: nameId,
@@ -1684,75 +2250,59 @@ function ResourceForm({ initialValues, onSubmit }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs12("div", { children: [
-      /* @__PURE__ */ jsx13("label", { htmlFor: kindId, className: LABEL_CLASS, children: messages["resource.kind"] }),
-      /* @__PURE__ */ jsxs12(
-        "select",
-        {
-          id: kindId,
-          value: kind,
-          onChange: (event) => setKind(event.target.value),
-          className: INPUT_CLASS2,
-          children: [
-            /* @__PURE__ */ jsx13("option", { value: RESOURCE_KIND.PERSON, children: messages["resource.kind.person"] }),
-            /* @__PURE__ */ jsx13("option", { value: RESOURCE_KIND.ROOM, children: messages["resource.kind.room"] }),
-            /* @__PURE__ */ jsx13("option", { value: RESOURCE_KIND.EQUIPMENT, children: messages["resource.kind.equipment"] })
-          ]
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs12("div", { children: [
-      /* @__PURE__ */ jsx13("label", { htmlFor: timezoneId, className: LABEL_CLASS, children: messages["resource.timezone"] }),
-      /* @__PURE__ */ jsx13(
-        "input",
-        {
-          id: timezoneId,
-          type: "text",
-          required: true,
-          value: timezone,
-          onChange: (event) => setTimezone(event.target.value),
-          placeholder: "America/Sao_Paulo",
-          className: INPUT_CLASS2
-        }
-      )
-    ] }),
-    initialValues && /* @__PURE__ */ jsxs12("label", { className: "flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 min-h-11", children: [
-      /* @__PURE__ */ jsx13("input", { type: "checkbox", checked: active, onChange: (event) => setActive(event.target.checked) }),
+    /* @__PURE__ */ jsx17(
+      SelectField,
+      {
+        label: messages["resource.kind"],
+        value: kind,
+        options: kindOptions,
+        onChange: (next) => setKind(next)
+      }
+    ),
+    /* @__PURE__ */ jsx17(
+      SelectField,
+      {
+        label: messages["resource.timezone"],
+        value: timezone,
+        options: timezoneOptions,
+        onChange: setTimezone,
+        searchable: true
+      }
+    ),
+    initialValues && /* @__PURE__ */ jsxs14("label", { className: "flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 min-h-11", children: [
+      /* @__PURE__ */ jsx17("input", { type: "checkbox", checked: active, onChange: (event) => setActive(event.target.checked) }),
       messages["resource.active"]
     ] }),
-    /* @__PURE__ */ jsx13("button", { type: "submit", disabled: submitting, className: BUTTON_PRIMARY, children: messages["common.save"] })
+    /* @__PURE__ */ jsx17("button", { type: "submit", disabled: submitting, className: BUTTON_PRIMARY2, children: messages["common.save"] })
   ] });
 }
 
 // src/components/ResourceList.tsx
-import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
 function ResourceList({ resources, onSelect }) {
   const { locale } = useSchedulingConfig();
   const messages = resolveSchedulingMessages(locale);
   if (resources.length === 0) {
-    return /* @__PURE__ */ jsx14("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: messages["common.empty"] });
+    return /* @__PURE__ */ jsx18("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: messages["common.empty"] });
   }
-  return /* @__PURE__ */ jsx14("ul", { className: "divide-y divide-gray-200 dark:divide-gray-700 rounded-lg border border-gray-200 dark:border-gray-700", children: resources.map((resource, index) => /* @__PURE__ */ jsx14("li", { className: index % 2 === 1 ? "bg-gray-50 dark:bg-gray-800/50" : void 0, children: /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsx18("ul", { className: `${SURFACE_BORDER} divide-y divide-gray-200 overflow-hidden dark:divide-gray-800`, children: resources.map((resource, index) => /* @__PURE__ */ jsx18("li", { className: index % 2 === 1 ? ROW_STRIPE : void 0, children: /* @__PURE__ */ jsxs15(
     "button",
     {
       type: "button",
       onClick: () => onSelect(resource),
-      className: "flex w-full items-center gap-3 px-4 py-3 min-h-11 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-800",
+      className: "flex w-full items-center gap-3 px-4 py-3 min-h-11 text-left text-sm transition-colors hover:bg-brand-50/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand-500 dark:hover:bg-brand-900/20",
       children: [
-        /* @__PURE__ */ jsx14("span", { className: "flex-1 font-medium text-gray-900 dark:text-gray-100", children: resource.name }),
-        /* @__PURE__ */ jsx14("span", { className: "text-gray-500 dark:text-gray-400", children: messages[`resource.kind.${resource.kind}`] }),
-        /* @__PURE__ */ jsx14("span", { className: "text-gray-500 dark:text-gray-400", children: resource.timezone }),
-        !resource.active && /* @__PURE__ */ jsx14("span", { className: "rounded-full bg-gray-200 px-2 py-0.5 text-xs text-gray-700 dark:bg-gray-700 dark:text-gray-300", children: messages["resource.inactive"] })
+        /* @__PURE__ */ jsx18("span", { className: "flex-1 font-medium text-gray-900 dark:text-gray-100", children: resource.name }),
+        /* @__PURE__ */ jsx18("span", { className: "text-gray-500 dark:text-gray-400", children: messages[`resource.kind.${resource.kind}`] }),
+        /* @__PURE__ */ jsx18("span", { className: "text-gray-500 dark:text-gray-400", children: resource.timezone }),
+        !resource.active && /* @__PURE__ */ jsx18("span", { className: "rounded-full bg-gray-200 px-2 py-0.5 text-xs font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-300", children: messages["resource.inactive"] })
       ]
     }
   ) }, resource.id)) });
 }
 
 // src/workspace/ResourcesArea.tsx
-import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
-var BUTTON_CLASS2 = "inline-flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors min-h-11";
-var BUTTON_PRIMARY2 = `${BUTTON_CLASS2} bg-brand-600 text-white hover:bg-brand-700`;
-var BUTTON_DANGER = `${BUTTON_CLASS2} text-red-700 hover:bg-red-50`;
+import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
 function ResourcesArea() {
   const { locale } = useSchedulingConfig();
   const messages = resolveSchedulingMessages(locale);
@@ -1760,9 +2310,10 @@ function ResourcesArea() {
   const createResource = useCreateResource();
   const updateResource = useUpdateResource();
   const deleteResource = useDeleteResource();
-  const [draft, setDraft] = useState10(void 0);
+  const [draft, setDraft] = useState11(void 0);
   const isDraftOpen = draft !== void 0;
   const isEditing = Boolean(draft);
+  const resources = data?.data ?? [];
   async function handleSubmit(input) {
     try {
       if (draft) {
@@ -1774,21 +2325,36 @@ function ResourcesArea() {
     } catch {
     }
   }
-  return /* @__PURE__ */ jsxs14("div", { className: "flex flex-1 min-h-0 min-w-0 flex-col p-4 space-y-4", children: [
-    /* @__PURE__ */ jsx15("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxs14("button", { type: "button", onClick: () => setDraft(null), className: `${BUTTON_PRIMARY2} ml-auto`, children: [
-      /* @__PURE__ */ jsx15(Plus3, { "aria-hidden": "true", className: "w-4 h-4" }),
+  function renderCreateButton() {
+    return /* @__PURE__ */ jsxs16("button", { type: "button", onClick: () => setDraft(null), className: BUTTON_PRIMARY, children: [
+      /* @__PURE__ */ jsx19(Plus3, { "aria-hidden": "true", className: "h-4 w-4" }),
       messages["resource.newResource"]
-    ] }) }),
-    isError && /* @__PURE__ */ jsx15("p", { role: "alert", className: "text-sm text-red-700 bg-red-50 rounded-lg px-3 py-2", children: messages["common.loadFailure"] }),
-    (createResource.isError || updateResource.isError || deleteResource.isError) && /* @__PURE__ */ jsx15("p", { role: "alert", className: "text-sm text-red-700 bg-red-50 rounded-lg px-3 py-2", children: messages["common.actionFailure"] }),
-    isLoading ? /* @__PURE__ */ jsx15("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: messages["common.loading"] }) : /* @__PURE__ */ jsx15(ResourceList, { resources: data?.data ?? [], onSelect: setDraft }),
-    isDraftOpen && /* @__PURE__ */ jsx15(
+    ] });
+  }
+  return /* @__PURE__ */ jsxs16("div", { className: "flex flex-1 min-h-0 min-w-0", children: [
+    /* @__PURE__ */ jsxs16("div", { className: "flex flex-1 min-h-0 min-w-0 flex-col gap-4 overflow-y-auto p-4", children: [
+      /* @__PURE__ */ jsx19("div", { className: "flex justify-end", children: renderCreateButton() }),
+      isError && /* @__PURE__ */ jsx19(ErrorBanner, { message: messages["common.loadFailure"] }),
+      (createResource.isError || updateResource.isError || deleteResource.isError) && /* @__PURE__ */ jsx19(ErrorBanner, { message: messages["common.actionFailure"] }),
+      isLoading && /* @__PURE__ */ jsx19(ListSkeleton, { label: messages["common.loading"] }),
+      !isLoading && !isError && resources.length === 0 && /* @__PURE__ */ jsx19(
+        EmptyState,
+        {
+          icon: Users,
+          title: messages["resource.emptyTitle"],
+          hint: messages["resource.emptyHint"],
+          action: renderCreateButton()
+        }
+      ),
+      !isLoading && resources.length > 0 && /* @__PURE__ */ jsx19(ResourceList, { resources, onSelect: setDraft })
+    ] }),
+    isDraftOpen && /* @__PURE__ */ jsx19(
       SidePanel,
       {
         title: isEditing ? messages["resource.editTitle"] : messages["resource.createTitle"],
         closeLabel: messages["common.close"],
         onClose: () => setDraft(void 0),
-        headerActions: isEditing ? /* @__PURE__ */ jsxs14(
+        headerActions: isEditing ? /* @__PURE__ */ jsxs16(
           "button",
           {
             type: "button",
@@ -1798,12 +2364,12 @@ function ResourcesArea() {
             },
             className: BUTTON_DANGER,
             children: [
-              /* @__PURE__ */ jsx15(Trash23, { "aria-hidden": "true", className: "w-4 h-4" }),
+              /* @__PURE__ */ jsx19(Trash23, { "aria-hidden": "true", className: "h-4 w-4" }),
               messages["common.remove"]
             ]
           }
         ) : void 0,
-        children: /* @__PURE__ */ jsx15(
+        children: /* @__PURE__ */ jsx19(
           ResourceForm,
           {
             ...draft ? { initialValues: draft } : {},
@@ -1817,25 +2383,25 @@ function ResourcesArea() {
 }
 
 // src/workspace/ServicesArea.tsx
-import { Plus as Plus4, Trash2 as Trash24 } from "lucide-react";
-import { useState as useState12 } from "react";
+import { Plus as Plus4, Trash2 as Trash24, Wrench } from "lucide-react";
+import { useState as useState13 } from "react";
 import { MAX_PAGE_SIZE as MAX_PAGE_SIZE5 } from "@adatechnology/scheduling-contracts";
 
 // src/components/ServiceForm.tsx
-import { useState as useState11 } from "react";
-import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+import { useState as useState12 } from "react";
+import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
 var INPUT_CLASS3 = "w-full min-h-11 px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-brand-500 bg-white dark:bg-gray-900";
 var LABEL_CLASS2 = "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1";
 var BUTTON_PRIMARY3 = "inline-flex items-center justify-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors min-h-11 bg-brand-600 text-white hover:bg-brand-700 disabled:opacity-50";
 function ServiceForm({ initialValues, onSubmit }) {
   const { locale } = useSchedulingConfig();
   const messages = resolveSchedulingMessages(locale);
-  const [name, setName] = useState11(initialValues?.name ?? "");
-  const [durationMinutes, setDurationMinutes] = useState11(initialValues?.durationMinutes ?? 30);
-  const [bufferBeforeMinutes, setBufferBeforeMinutes] = useState11(initialValues?.bufferBeforeMinutes ?? 0);
-  const [bufferAfterMinutes, setBufferAfterMinutes] = useState11(initialValues?.bufferAfterMinutes ?? 0);
-  const [active, setActive] = useState11(initialValues?.active ?? true);
-  const [submitting, setSubmitting] = useState11(false);
+  const [name, setName] = useState12(initialValues?.name ?? "");
+  const [durationMinutes, setDurationMinutes] = useState12(initialValues?.durationMinutes ?? 30);
+  const [bufferBeforeMinutes, setBufferBeforeMinutes] = useState12(initialValues?.bufferBeforeMinutes ?? 0);
+  const [bufferAfterMinutes, setBufferAfterMinutes] = useState12(initialValues?.bufferAfterMinutes ?? 0);
+  const [active, setActive] = useState12(initialValues?.active ?? true);
+  const [submitting, setSubmitting] = useState12(false);
   async function handleSubmit(event) {
     event.preventDefault();
     setSubmitting(true);
@@ -1845,10 +2411,10 @@ function ServiceForm({ initialValues, onSubmit }) {
       setSubmitting(false);
     }
   }
-  return /* @__PURE__ */ jsxs15("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs15("div", { children: [
-      /* @__PURE__ */ jsx16("label", { htmlFor: "scheduling-service-name", className: LABEL_CLASS2, children: messages["service.name"] }),
-      /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsxs17("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs17("div", { children: [
+      /* @__PURE__ */ jsx20("label", { htmlFor: "scheduling-service-name", className: LABEL_CLASS2, children: messages["service.name"] }),
+      /* @__PURE__ */ jsx20(
         "input",
         {
           id: "scheduling-service-name",
@@ -1860,9 +2426,9 @@ function ServiceForm({ initialValues, onSubmit }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs15("div", { children: [
-      /* @__PURE__ */ jsx16("label", { htmlFor: "scheduling-service-duration", className: LABEL_CLASS2, children: messages["service.durationMinutes"] }),
-      /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsxs17("div", { children: [
+      /* @__PURE__ */ jsx20("label", { htmlFor: "scheduling-service-duration", className: LABEL_CLASS2, children: messages["service.durationMinutes"] }),
+      /* @__PURE__ */ jsx20(
         "input",
         {
           id: "scheduling-service-duration",
@@ -1875,10 +2441,10 @@ function ServiceForm({ initialValues, onSubmit }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs15("div", { className: "grid grid-cols-2 gap-3", children: [
-      /* @__PURE__ */ jsxs15("div", { children: [
-        /* @__PURE__ */ jsx16("label", { htmlFor: "scheduling-service-buffer-before", className: LABEL_CLASS2, children: messages["service.bufferBeforeMinutes"] }),
-        /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsxs17("div", { className: "grid grid-cols-2 gap-3", children: [
+      /* @__PURE__ */ jsxs17("div", { children: [
+        /* @__PURE__ */ jsx20("label", { htmlFor: "scheduling-service-buffer-before", className: LABEL_CLASS2, children: messages["service.bufferBeforeMinutes"] }),
+        /* @__PURE__ */ jsx20(
           "input",
           {
             id: "scheduling-service-buffer-before",
@@ -1890,9 +2456,9 @@ function ServiceForm({ initialValues, onSubmit }) {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs15("div", { children: [
-        /* @__PURE__ */ jsx16("label", { htmlFor: "scheduling-service-buffer-after", className: LABEL_CLASS2, children: messages["service.bufferAfterMinutes"] }),
-        /* @__PURE__ */ jsx16(
+      /* @__PURE__ */ jsxs17("div", { children: [
+        /* @__PURE__ */ jsx20("label", { htmlFor: "scheduling-service-buffer-after", className: LABEL_CLASS2, children: messages["service.bufferAfterMinutes"] }),
+        /* @__PURE__ */ jsx20(
           "input",
           {
             id: "scheduling-service-buffer-after",
@@ -1905,45 +2471,42 @@ function ServiceForm({ initialValues, onSubmit }) {
         )
       ] })
     ] }),
-    initialValues && /* @__PURE__ */ jsxs15("label", { className: "flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 min-h-11", children: [
-      /* @__PURE__ */ jsx16("input", { type: "checkbox", checked: active, onChange: (event) => setActive(event.target.checked) }),
+    initialValues && /* @__PURE__ */ jsxs17("label", { className: "flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 min-h-11", children: [
+      /* @__PURE__ */ jsx20("input", { type: "checkbox", checked: active, onChange: (event) => setActive(event.target.checked) }),
       messages["service.active"]
     ] }),
-    /* @__PURE__ */ jsx16("button", { type: "submit", disabled: submitting, className: BUTTON_PRIMARY3, children: messages["common.save"] })
+    /* @__PURE__ */ jsx20("button", { type: "submit", disabled: submitting, className: BUTTON_PRIMARY3, children: messages["common.save"] })
   ] });
 }
 
 // src/components/ServiceList.tsx
-import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
 function ServiceList({ services, onSelect }) {
   const { locale } = useSchedulingConfig();
   const messages = resolveSchedulingMessages(locale);
   if (services.length === 0) {
-    return /* @__PURE__ */ jsx17("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: messages["common.empty"] });
+    return /* @__PURE__ */ jsx21("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: messages["common.empty"] });
   }
-  return /* @__PURE__ */ jsx17("ul", { className: "divide-y divide-gray-200 dark:divide-gray-700 rounded-lg border border-gray-200 dark:border-gray-700", children: services.map((service, index) => /* @__PURE__ */ jsx17("li", { className: index % 2 === 1 ? "bg-gray-50 dark:bg-gray-800/50" : void 0, children: /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsx21("ul", { className: `${SURFACE_BORDER} divide-y divide-gray-200 overflow-hidden dark:divide-gray-800`, children: services.map((service, index) => /* @__PURE__ */ jsx21("li", { className: index % 2 === 1 ? ROW_STRIPE : void 0, children: /* @__PURE__ */ jsxs18(
     "button",
     {
       type: "button",
       onClick: () => onSelect(service),
-      className: "flex w-full items-center gap-3 px-4 py-3 min-h-11 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-800",
+      className: "flex w-full items-center gap-3 px-4 py-3 min-h-11 text-left text-sm transition-colors hover:bg-brand-50/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand-500 dark:hover:bg-brand-900/20",
       children: [
-        /* @__PURE__ */ jsx17("span", { className: "flex-1 font-medium text-gray-900 dark:text-gray-100", children: service.name }),
-        /* @__PURE__ */ jsxs16("span", { className: "text-gray-500 dark:text-gray-400", children: [
+        /* @__PURE__ */ jsx21("span", { className: "flex-1 font-medium text-gray-900 dark:text-gray-100", children: service.name }),
+        /* @__PURE__ */ jsxs18("span", { className: "text-gray-500 dark:text-gray-400", children: [
           service.durationMinutes,
           " min"
         ] }),
-        !service.active && /* @__PURE__ */ jsx17("span", { className: "rounded-full bg-gray-200 px-2 py-0.5 text-xs text-gray-700 dark:bg-gray-700 dark:text-gray-300", children: messages["service.inactive"] })
+        !service.active && /* @__PURE__ */ jsx21("span", { className: "rounded-full bg-gray-200 px-2 py-0.5 text-xs font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-300", children: messages["service.inactive"] })
       ]
     }
   ) }, service.id)) });
 }
 
 // src/workspace/ServicesArea.tsx
-import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
-var BUTTON_CLASS3 = "inline-flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors min-h-11";
-var BUTTON_PRIMARY4 = `${BUTTON_CLASS3} bg-brand-600 text-white hover:bg-brand-700`;
-var BUTTON_DANGER2 = `${BUTTON_CLASS3} text-red-700 hover:bg-red-50`;
+import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
 function ServicesArea() {
   const { locale } = useSchedulingConfig();
   const messages = resolveSchedulingMessages(locale);
@@ -1951,9 +2514,10 @@ function ServicesArea() {
   const createService = useCreateService();
   const updateService = useUpdateService();
   const deleteService = useDeleteService();
-  const [draft, setDraft] = useState12(void 0);
+  const [draft, setDraft] = useState13(void 0);
   const isDraftOpen = draft !== void 0;
   const isEditing = Boolean(draft);
+  const services = data?.data ?? [];
   async function handleSubmit(input) {
     try {
       if (draft) {
@@ -1965,21 +2529,36 @@ function ServicesArea() {
     } catch {
     }
   }
-  return /* @__PURE__ */ jsxs17("div", { className: "flex flex-1 min-h-0 min-w-0 flex-col p-4 space-y-4", children: [
-    /* @__PURE__ */ jsx18("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxs17("button", { type: "button", onClick: () => setDraft(null), className: `${BUTTON_PRIMARY4} ml-auto`, children: [
-      /* @__PURE__ */ jsx18(Plus4, { "aria-hidden": "true", className: "w-4 h-4" }),
+  function renderCreateButton() {
+    return /* @__PURE__ */ jsxs19("button", { type: "button", onClick: () => setDraft(null), className: BUTTON_PRIMARY, children: [
+      /* @__PURE__ */ jsx22(Plus4, { "aria-hidden": "true", className: "h-4 w-4" }),
       messages["service.newService"]
-    ] }) }),
-    isError && /* @__PURE__ */ jsx18("p", { role: "alert", className: "text-sm text-red-700 bg-red-50 rounded-lg px-3 py-2", children: messages["common.loadFailure"] }),
-    (createService.isError || updateService.isError || deleteService.isError) && /* @__PURE__ */ jsx18("p", { role: "alert", className: "text-sm text-red-700 bg-red-50 rounded-lg px-3 py-2", children: messages["common.actionFailure"] }),
-    isLoading ? /* @__PURE__ */ jsx18("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: messages["common.loading"] }) : /* @__PURE__ */ jsx18(ServiceList, { services: data?.data ?? [], onSelect: setDraft }),
-    isDraftOpen && /* @__PURE__ */ jsx18(
+    ] });
+  }
+  return /* @__PURE__ */ jsxs19("div", { className: "flex flex-1 min-h-0 min-w-0", children: [
+    /* @__PURE__ */ jsxs19("div", { className: "flex flex-1 min-h-0 min-w-0 flex-col gap-4 overflow-y-auto p-4", children: [
+      /* @__PURE__ */ jsx22("div", { className: "flex justify-end", children: renderCreateButton() }),
+      isError && /* @__PURE__ */ jsx22(ErrorBanner, { message: messages["common.loadFailure"] }),
+      (createService.isError || updateService.isError || deleteService.isError) && /* @__PURE__ */ jsx22(ErrorBanner, { message: messages["common.actionFailure"] }),
+      isLoading && /* @__PURE__ */ jsx22(ListSkeleton, { label: messages["common.loading"] }),
+      !isLoading && !isError && services.length === 0 && /* @__PURE__ */ jsx22(
+        EmptyState,
+        {
+          icon: Wrench,
+          title: messages["service.emptyTitle"],
+          hint: messages["service.emptyHint"],
+          action: renderCreateButton()
+        }
+      ),
+      !isLoading && services.length > 0 && /* @__PURE__ */ jsx22(ServiceList, { services, onSelect: setDraft })
+    ] }),
+    isDraftOpen && /* @__PURE__ */ jsx22(
       SidePanel,
       {
         title: isEditing ? messages["service.editTitle"] : messages["service.createTitle"],
         closeLabel: messages["common.close"],
         onClose: () => setDraft(void 0),
-        headerActions: isEditing ? /* @__PURE__ */ jsxs17(
+        headerActions: isEditing ? /* @__PURE__ */ jsxs19(
           "button",
           {
             type: "button",
@@ -1987,14 +2566,14 @@ function ServicesArea() {
               if (draft) void deleteService.mutateAsync(draft.id).then(() => setDraft(void 0)).catch(() => {
               });
             },
-            className: BUTTON_DANGER2,
+            className: BUTTON_DANGER,
             children: [
-              /* @__PURE__ */ jsx18(Trash24, { "aria-hidden": "true", className: "w-4 h-4" }),
+              /* @__PURE__ */ jsx22(Trash24, { "aria-hidden": "true", className: "h-4 w-4" }),
               messages["common.remove"]
             ]
           }
         ) : void 0,
-        children: /* @__PURE__ */ jsx18(
+        children: /* @__PURE__ */ jsx22(
           ServiceForm,
           {
             ...draft ? { initialValues: draft } : {},
@@ -2008,7 +2587,7 @@ function ServicesArea() {
 }
 
 // src/workspace/WorkspaceAreaNav.tsx
-import { CalendarDays, Clock, ClipboardList, Users, Wrench } from "lucide-react";
+import { CalendarDays as CalendarDays2, Clock as Clock2, ClipboardList as ClipboardList2, Users as Users2, Wrench as Wrench2 } from "lucide-react";
 
 // src/workspace/workspace.constant.ts
 var SCHEDULING_WORKSPACE_AREA = {
@@ -2024,16 +2603,16 @@ function isSchedulingWorkspaceArea(value) {
 }
 
 // src/workspace/WorkspaceAreaNav.tsx
-import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
-var ITEM_BASE = "flex items-center gap-2 px-3 py-2 -mb-px border-b-2 text-sm font-medium transition-colors min-h-11";
-var ITEM_ACTIVE = "border-brand-600 text-brand-700 dark:text-brand-400";
+import { jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
+var ITEM_BASE = "flex items-center gap-2 px-3 py-2 -mb-px border-b-2 text-sm font-medium transition-colors min-h-11 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand-500";
+var ITEM_ACTIVE = "border-brand-600 text-brand-700 dark:text-brand-300";
 var ITEM_IDLE = "border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100";
 var AREA_ICON = {
-  [SCHEDULING_WORKSPACE_AREA.AGENDA]: CalendarDays,
-  [SCHEDULING_WORKSPACE_AREA.BOOKINGS]: ClipboardList,
-  [SCHEDULING_WORKSPACE_AREA.RESOURCES]: Users,
-  [SCHEDULING_WORKSPACE_AREA.SERVICES]: Wrench,
-  [SCHEDULING_WORKSPACE_AREA.AVAILABILITY]: Clock
+  [SCHEDULING_WORKSPACE_AREA.AGENDA]: CalendarDays2,
+  [SCHEDULING_WORKSPACE_AREA.BOOKINGS]: ClipboardList2,
+  [SCHEDULING_WORKSPACE_AREA.RESOURCES]: Users2,
+  [SCHEDULING_WORKSPACE_AREA.SERVICES]: Wrench2,
+  [SCHEDULING_WORKSPACE_AREA.AVAILABILITY]: Clock2
 };
 function WorkspaceAreaNav({ area, labels, onSelect }) {
   const items = [
@@ -2043,9 +2622,9 @@ function WorkspaceAreaNav({ area, labels, onSelect }) {
     [SCHEDULING_WORKSPACE_AREA.SERVICES, labels.servicesTab],
     [SCHEDULING_WORKSPACE_AREA.AVAILABILITY, labels.availabilityTab]
   ];
-  return /* @__PURE__ */ jsx19("nav", { "aria-label": labels.areaNav, className: "flex gap-1 px-4 border-b border-gray-200 dark:border-gray-700 overflow-x-auto", children: items.map(([value, label]) => {
+  return /* @__PURE__ */ jsx23("nav", { "aria-label": labels.areaNav, className: "flex shrink-0 gap-1 overflow-x-auto border-b border-gray-200 px-4 dark:border-gray-800", children: items.map(([value, label]) => {
     const Icon = AREA_ICON[value];
-    return /* @__PURE__ */ jsxs18(
+    return /* @__PURE__ */ jsxs20(
       "button",
       {
         type: "button",
@@ -2053,7 +2632,7 @@ function WorkspaceAreaNav({ area, labels, onSelect }) {
         "aria-current": value === area ? "page" : void 0,
         className: `${ITEM_BASE} ${value === area ? ITEM_ACTIVE : ITEM_IDLE} whitespace-nowrap`,
         children: [
-          /* @__PURE__ */ jsx19(Icon, { "aria-hidden": "true", className: "w-4 h-4 shrink-0" }),
+          /* @__PURE__ */ jsx23(Icon, { "aria-hidden": "true", className: "w-4 h-4 shrink-0" }),
           label
         ]
       },
@@ -2063,7 +2642,7 @@ function WorkspaceAreaNav({ area, labels, onSelect }) {
 }
 
 // src/workspace/SchedulingWorkspace.tsx
-import { jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
 var AREA_COMPONENT = {
   [SCHEDULING_WORKSPACE_AREA.AGENDA]: AgendaArea,
   [SCHEDULING_WORKSPACE_AREA.BOOKINGS]: BookingsArea,
@@ -2078,20 +2657,20 @@ function SchedulingWorkspace({
   onAreaChange
 }) {
   const labels = { ...DEFAULT_SCHEDULING_WORKSPACE_LABELS, ...labelsOverride };
-  const [internalArea, setInternalArea] = useState13(SCHEDULING_WORKSPACE_AREA.AGENDA);
+  const [internalArea, setInternalArea] = useState14(SCHEDULING_WORKSPACE_AREA.AGENDA);
   const area = areaProp ?? internalArea;
   const AreaComponent = AREA_COMPONENT[area];
   function handleSelectArea(next) {
     setInternalArea(next);
     onAreaChange?.(next);
   }
-  return /* @__PURE__ */ jsxs19("div", { className: "flex flex-col h-full", children: [
-    /* @__PURE__ */ jsxs19("header", { className: "flex flex-wrap items-center gap-3 px-4 py-3", children: [
-      /* @__PURE__ */ jsx20("h1", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100 mr-auto", children: labels.title }),
+  return /* @__PURE__ */ jsxs21("div", { className: "flex h-full flex-col bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100", children: [
+    /* @__PURE__ */ jsxs21("header", { className: "flex shrink-0 flex-wrap items-center gap-3 px-4 pb-2 pt-4", children: [
+      /* @__PURE__ */ jsx24("h1", { className: "mr-auto text-xl font-semibold tracking-tight text-gray-900 dark:text-gray-100", children: labels.title }),
       renderHeaderActions?.()
     ] }),
-    /* @__PURE__ */ jsx20(WorkspaceAreaNav, { area, labels, onSelect: handleSelectArea }),
-    /* @__PURE__ */ jsx20("div", { className: "relative flex flex-1 min-h-0 overflow-hidden", children: /* @__PURE__ */ jsx20(AreaComponent, {}) })
+    /* @__PURE__ */ jsx24(WorkspaceAreaNav, { area, labels, onSelect: handleSelectArea }),
+    /* @__PURE__ */ jsx24("div", { className: "relative flex flex-1 min-h-0 overflow-hidden", children: /* @__PURE__ */ jsx24(AreaComponent, {}) })
   ] });
 }
 export {