@adatechnology/scheduling-ui 0.1.0-rc.5 → 0.1.0-rc.7

package/dist/index.js

@@ -313,11 +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 { CalendarDays, ChevronLeft, ChevronRight } from "lucide-react";
-import { useEffect as useEffect2, useState as useState2 } from "react";
+import { useEffect as useEffect3, useState as useState3 } from "react";
 import { MAX_PAGE_SIZE } from "@adatechnology/scheduling-contracts";
 
 // src/locales/pt-BR.json
@@ -424,7 +424,9 @@ var pt_BR_default = {
   "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."
+  "availability.selectResourceHint": "As regras de disponibilidade s\xE3o definidas por recurso.",
+  "select.search": "Buscar\u2026",
+  "select.noResults": "Nenhum resultado"
 };
 
 // src/locales/en.json
@@ -531,7 +533,9 @@ var en_default = {
   "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."
+  "availability.selectResourceHint": "Availability rules are defined per resource.",
+  "select.search": "Search\u2026",
+  "select.noResults": "No results"
 };
 
 // src/locales/index.ts
@@ -680,7 +684,7 @@ function AgendaGrid({ bookings, days, now, onSelect }) {
             /* @__PURE__ */ jsxs(
               "div",
               {
-                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" : ""}`,
+                className: `${HEADER_CLASS} flex items-center gap-1 border-b border-gray-200 dark:border-gray-800 ${isToday ? "text-brand-700 dark:text-brand-400" : ""}`,
                 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" })
@@ -755,11 +759,256 @@ function AgendaGrid({ bookings, days, now, onSelect }) {
 
 // src/components/BookingDrawer.tsx
 import { XCircle } from "lucide-react";
-import { useState } from "react";
+import { useState as useState2 } from "react";
 import { BOOKING_STATUS as BOOKING_STATUS2 } from "@adatechnology/scheduling-contracts";
 
 // src/components/DateTimeField.tsx
-import { useId } from "react";
+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})$/;
@@ -789,7 +1038,7 @@ function buildYearOptions(params) {
 }
 
 // src/components/DateTimeField.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+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) {
@@ -810,7 +1059,7 @@ function monthLabels(locale) {
 function DateTimeField({ label, value, onChange, emptyDefault }) {
   const { locale } = useSchedulingConfig();
   const messages = resolveSchedulingMessages(locale);
-  const groupId = useId();
+  const groupId = useId2();
   const today = emptyDefault ?? /* @__PURE__ */ new Date();
   const parts = partsOf(value, today);
   const years = buildYearOptions({
@@ -821,42 +1070,59 @@ function DateTimeField({ label, value, onChange, emptyDefault }) {
   });
   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__ */ jsxs2("div", { role: "group", "aria-labelledby": groupId, className: "flex flex-wrap items-center gap-2", children: [
-    /* @__PURE__ */ jsx4("span", { id: groupId, className: "sr-only", children: label }),
-    /* @__PURE__ */ jsx4(
-      "select",
+  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,
       {
-        "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__ */ jsx4("option", { value: year, children: year }, year))
+        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__ */ jsx4(
-      "select",
+    /* @__PURE__ */ jsx5(
+      SelectField,
       {
-        "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__ */ jsx4("option", { value: index + 1, children: name }, name))
+        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__ */ jsx4(
-      "select",
+    /* @__PURE__ */ jsx5(
+      SelectField,
       {
-        "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__ */ jsx4("option", { value: day, children: day }, day))
+        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__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       "input",
       {
         type: "time",
@@ -916,32 +1182,18 @@ function formatDateTimeLocalInTimeZone(instant, timeZone) {
 
 // src/components/SidePanel.tsx
 import { X } from "lucide-react";
-
-// 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/SidePanel.tsx
-import { useEffect } from "react";
-import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+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 }) {
-  useEffect(() => {
+  useEffect2(() => {
     function handleKeyDown(event) {
       if (event.key === "Escape") onClose();
     }
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [onClose]);
-  return /* @__PURE__ */ jsxs3(Fragment, { children: [
-    /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+    /* @__PURE__ */ jsx6(
       "button",
       {
         type: "button",
@@ -951,29 +1203,29 @@ function SidePanel({ title, closeLabel, onClose, headerActions, children }) {
         className: "absolute inset-0 z-10 bg-gray-900/30 backdrop-blur-[1px] wide:hidden"
       }
     ),
-    /* @__PURE__ */ jsxs3(
+    /* @__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__ */ jsxs3("div", { className: "flex items-center gap-2 border-b border-gray-200 px-4 py-3 dark:border-gray-700", children: [
-            /* @__PURE__ */ jsx5("h2", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100 mr-auto", children: title }),
+          /* @__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__ */ jsxs3(
+            /* @__PURE__ */ jsxs4(
               "button",
               {
                 type: "button",
                 onClick: onClose,
                 className: BUTTON_GHOST,
                 children: [
-                  /* @__PURE__ */ jsx5(X, { "aria-hidden": "true", className: "w-4 h-4" }),
+                  /* @__PURE__ */ jsx6(X, { "aria-hidden": "true", className: "w-4 h-4" }),
                   closeLabel
                 ]
               }
             )
           ] }),
-          /* @__PURE__ */ jsx5("div", { className: "min-h-0 flex-1 overflow-y-auto p-4", children })
+          /* @__PURE__ */ jsx6("div", { className: "min-h-0 flex-1 overflow-y-auto p-4", children })
         ]
       }
     )
@@ -981,7 +1233,7 @@ function SidePanel({ title, closeLabel, onClose, headerActions, children }) {
 }
 
 // src/components/BookingDrawer.tsx
-import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+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";
@@ -996,12 +1248,12 @@ function BookingDrawer({ booking, resourceTimezone, onClose }) {
   const cancelBooking = useCancelBooking();
   const rescheduleBooking = useRescheduleBooking();
   const timezone = resourceTimezone ?? BROWSER_TIME_ZONE;
-  const [isCancelling, setIsCancelling] = useState(false);
-  const [cancelledBy, setCancelledBy] = useState("");
-  const [cancellationReason, setCancellationReason] = useState("");
-  const [isRescheduling, setIsRescheduling] = useState(false);
-  const [start, setStart] = useState(() => formatDateTimeLocalInTimeZone(booking.startsAt, timezone));
-  const [end, setEnd] = useState(() => formatDateTimeLocalInTimeZone(booking.endsAt, timezone));
+  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 {
@@ -1029,31 +1281,31 @@ function BookingDrawer({ booking, resourceTimezone, onClose }) {
     }
   }
   const isTerminal = booking.status === BOOKING_STATUS2.CANCELLED || booking.status === BOOKING_STATUS2.COMPLETED || booking.status === BOOKING_STATUS2.NO_SHOW;
-  return /* @__PURE__ */ jsx6(SidePanel, { title: messages["booking.detailTitle"], closeLabel: messages["common.close"], onClose, children: /* @__PURE__ */ jsxs4("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs4("div", { children: [
-      /* @__PURE__ */ jsx6("p", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: booking.title }),
-      /* @__PURE__ */ jsx6("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: messages[`booking.status.${booking.status === "no_show" ? "noShow" : booking.status}`] }),
-      /* @__PURE__ */ jsxs4("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
+  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__ */ jsx6("p", { role: "alert", className: "text-sm text-red-700 bg-red-50 rounded-lg px-3 py-2", children: messages["common.actionFailure"] }),
-    !isTerminal && /* @__PURE__ */ jsxs4("div", { className: "flex flex-wrap gap-2", children: [
-      booking.status === BOOKING_STATUS2.REQUESTED && /* @__PURE__ */ jsx6("button", { type: "button", onClick: () => confirmBooking.mutate(booking.id), className: PRIMARY_BUTTON_CLASS, children: messages["booking.confirm"] }),
-      booking.status === BOOKING_STATUS2.CONFIRMED && /* @__PURE__ */ jsxs4(Fragment2, { children: [
-        /* @__PURE__ */ jsx6("button", { type: "button", onClick: () => completeBooking.mutate(booking.id), className: ACTION_BUTTON_CLASS, children: messages["booking.complete"] }),
-        /* @__PURE__ */ jsx6("button", { type: "button", onClick: () => markNoShow.mutate(booking.id), className: ACTION_BUTTON_CLASS, children: messages["booking.markNoShow"] }),
-        /* @__PURE__ */ jsx6("button", { type: "button", onClick: () => setIsRescheduling(true), className: ACTION_BUTTON_CLASS, children: messages["booking.reschedule"] })
+    (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__ */ jsxs4("button", { type: "button", onClick: () => setIsCancelling(true), className: DANGER_BUTTON_CLASS, children: [
-        /* @__PURE__ */ jsx6(XCircle, { "aria-hidden": "true", className: "w-4 h-4" }),
+      /* @__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__ */ jsxs4("div", { className: "space-y-2 rounded-lg border border-gray-200 dark:border-gray-700 p-3", children: [
-      /* @__PURE__ */ jsx6(
+    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"],
@@ -1061,11 +1313,11 @@ function BookingDrawer({ booking, resourceTimezone, onClose }) {
           onChange: setStart
         }
       ),
-      /* @__PURE__ */ jsx6(DateTimeField, { label: messages["booking.rescheduleEnd"], value: end, onChange: setEnd }),
-      /* @__PURE__ */ jsx6("button", { type: "button", onClick: handleReschedule, disabled: rescheduleBooking.isPending, className: PRIMARY_BUTTON_CLASS, children: messages["common.save"] })
+      /* @__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__ */ jsxs4("div", { className: "space-y-2 rounded-lg border border-gray-200 dark:border-gray-700 p-3", children: [
-      /* @__PURE__ */ jsx6(
+    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",
@@ -1075,7 +1327,7 @@ function BookingDrawer({ booking, resourceTimezone, onClose }) {
           className: INPUT_CLASS
         }
       ),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7(
         "input",
         {
           type: "text",
@@ -1085,8 +1337,8 @@ function BookingDrawer({ booking, resourceTimezone, onClose }) {
           className: INPUT_CLASS
         }
       ),
-      /* @__PURE__ */ jsxs4("button", { type: "button", onClick: handleCancel, disabled: cancelBooking.isPending, className: DANGER_BUTTON_CLASS, children: [
-        /* @__PURE__ */ jsx6(XCircle, { "aria-hidden": "true", className: "w-4 h-4" }),
+      /* @__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"]
       ] })
     ] })
@@ -1094,28 +1346,30 @@ function BookingDrawer({ booking, resourceTimezone, onClose }) {
 }
 
 // src/components/ResourceSelect.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useMemo as useMemo4 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function ResourceSelect({ label, emptyOptionLabel, resources, value, onChange }) {
-  return /* @__PURE__ */ jsxs5("label", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ jsx7("span", { className: FIELD_LABEL, children: label }),
-    /* @__PURE__ */ jsxs5(
-      "select",
-      {
-        value,
-        onChange: (event) => onChange(event.target.value),
-        className: `${FIELD_CONTROL} min-w-44`,
-        children: [
-          /* @__PURE__ */ jsx7("option", { value: "", children: emptyOptionLabel }),
-          resources.map((resource) => /* @__PURE__ */ jsx7("option", { value: resource.id, children: resource.name }, resource.id))
-        ]
-      }
-    )
-  ] });
+  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 jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 function ErrorBanner({ message }) {
   return /* @__PURE__ */ jsxs6(
     "p",
@@ -1123,7 +1377,7 @@ function ErrorBanner({ message }) {
       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__ */ jsx8(AlertTriangle, { "aria-hidden": "true", className: "mt-0.5 h-4 w-4 shrink-0" }),
+        /* @__PURE__ */ jsx9(AlertTriangle, { "aria-hidden": "true", className: "mt-0.5 h-4 w-4 shrink-0" }),
         message
       ]
     }
@@ -1131,18 +1385,18 @@ function ErrorBanner({ 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__ */ jsx8("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__ */ jsx8(Icon, { "aria-hidden": "true", className: "h-6 w-6" }) }),
-    /* @__PURE__ */ jsx8("p", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: title }),
-    hint && /* @__PURE__ */ jsx8("p", { className: "max-w-sm text-sm text-gray-500 dark:text-gray-400", children: hint }),
-    action && /* @__PURE__ */ jsx8("div", { className: "mt-2", children: action })
+    /* @__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__ */ jsx8("div", { "aria-busy": "true", "aria-label": label, role: "status", className: "space-y-2", children: Array.from({ length: rows }, (_row, index) => /* @__PURE__ */ jsx8("div", { className: SKELETON_ROW }, index)) });
+  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__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     "div",
     {
       "aria-busy": "true",
@@ -1154,7 +1408,7 @@ function BlockSkeleton({ label }) {
 }
 
 // src/workspace/AgendaArea.tsx
-import { jsx as jsx9, jsxs as jsxs7 } 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) {
@@ -1177,8 +1431,8 @@ function formatPeriod(days, locale) {
   return `${first.toLocaleDateString(locale, short)} \u2013 ${last.toLocaleDateString(locale, { ...short, year: "numeric" })}`;
 }
 function useNow() {
-  const [now, setNow] = useState2(() => /* @__PURE__ */ new Date());
-  useEffect2(() => {
+  const [now, setNow] = useState3(() => /* @__PURE__ */ new Date());
+  useEffect3(() => {
     const timer = window.setInterval(() => setNow(/* @__PURE__ */ new Date()), NOW_TICK_MS);
     return () => window.clearInterval(timer);
   }, []);
@@ -1189,10 +1443,10 @@ function AgendaArea() {
   const messages = resolveSchedulingMessages(locale);
   const now = useNow();
   const { data: resourcesPage } = useResources({ active: true, pageSize: MAX_PAGE_SIZE });
-  const [resourceId, setResourceId] = useState2("");
-  const [view, setView] = useState2("day");
-  const [anchorDate, setAnchorDate] = useState2(() => /* @__PURE__ */ new Date());
-  const [selectedBookingId, setSelectedBookingId] = useState2(void 0);
+  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];
@@ -1211,13 +1465,13 @@ function AgendaArea() {
   }
   function renderViewOption(value, label) {
     const isActive = view === value;
-    return /* @__PURE__ */ jsx9(
+    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"}`,
+        className: `${BUTTON_BASE} flex-1 ${isActive ? "bg-white text-brand-700 shadow-sm dark:bg-gray-900 dark:text-brand-400" : "text-gray-600 dark:text-gray-400"}`,
         children: label
       }
     );
@@ -1225,7 +1479,7 @@ function AgendaArea() {
   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__ */ jsx9(
+        /* @__PURE__ */ jsx10(
           ResourceSelect,
           {
             label: messages["agenda.resourceLabel"],
@@ -1236,29 +1490,29 @@ function AgendaArea() {
           }
         ),
         /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-1", children: [
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx10(
             "button",
             {
               type: "button",
               "aria-label": messages["agenda.previous"],
               onClick: () => shiftAnchor(-1),
               className: ICON_BUTTON,
-              children: /* @__PURE__ */ jsx9(ChevronLeft, { "aria-hidden": "true", className: "h-4 w-4" })
+              children: /* @__PURE__ */ jsx10(ChevronLeft, { "aria-hidden": "true", className: "h-4 w-4" })
             }
           ),
-          /* @__PURE__ */ jsx9("button", { type: "button", onClick: () => setAnchorDate(/* @__PURE__ */ new Date()), className: BUTTON_SECONDARY, children: messages["agenda.today"] }),
-          /* @__PURE__ */ jsx9(
+          /* @__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__ */ jsx9(ChevronRight, { "aria-hidden": "true", className: "h-4 w-4" })
+              children: /* @__PURE__ */ jsx10(ChevronRight, { "aria-hidden": "true", className: "h-4 w-4" })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10(
           "p",
           {
             "aria-live": "polite",
@@ -1267,18 +1521,18 @@ function AgendaArea() {
           }
         ),
         /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-1", children: [
-          /* @__PURE__ */ jsx9("span", { className: FIELD_LABEL, children: messages["agenda.viewLabel"] }),
+          /* @__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__ */ jsx9(ErrorBanner, { message: messages["common.loadFailure"] }),
-      bookingsPage && bookingsPage.total > bookingsPage.data.length && /* @__PURE__ */ jsx9("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__ */ jsx9(BlockSkeleton, { label: messages["common.loading"] }),
-      !isLoading && !isError && visibleBookings.length === 0 && /* @__PURE__ */ jsx9(EmptyState, { icon: CalendarDays, title: messages["agenda.emptyTitle"], hint: messages["agenda.empty"] }),
-      !isLoading && visibleBookings.length > 0 && /* @__PURE__ */ jsx9(
+      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,
@@ -1288,7 +1542,7 @@ function AgendaArea() {
         }
       )
     ] }),
-    selectedBooking && /* @__PURE__ */ jsx9(
+    selectedBooking && /* @__PURE__ */ jsx10(
       BookingDrawer,
       {
         booking: selectedBooking,
@@ -1302,13 +1556,13 @@ function AgendaArea() {
 
 // src/workspace/AvailabilityArea.tsx
 import { Clock } from "lucide-react";
-import { useState as useState5 } from "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 useState3 } from "react";
-import { jsx as jsx10, jsxs as jsxs8 } 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 };
@@ -1319,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] = useState3(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));
@@ -1344,31 +1605,31 @@ function WeeklyRulesEditor({ resourceId }) {
   }
   if (isRulesLoadError) {
     return /* @__PURE__ */ jsxs8("section", { className: "space-y-3", children: [
-      /* @__PURE__ */ jsx10("h3", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: messages["availability.weeklyRulesTitle"] }),
-      /* @__PURE__ */ jsx10("p", { role: "alert", className: "text-sm text-red-700 bg-red-50 rounded-lg px-3 py-2", children: messages["common.loadFailure"] })
+      /* @__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__ */ jsxs8("section", { className: "space-y-3", children: [
-      /* @__PURE__ */ jsx10("h3", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: messages["availability.weeklyRulesTitle"] }),
-      /* @__PURE__ */ jsx10("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: messages["common.loading"] })
+      /* @__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__ */ jsxs8("section", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsx10("h3", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: messages["availability.weeklyRulesTitle"] }),
-    setAvailabilityRules.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"] }),
-    /* @__PURE__ */ jsx10("ul", { className: "space-y-2", children: rules.map((rule, index) => /* @__PURE__ */ jsxs8("li", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx10(
-        "select",
+    /* @__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__ */ jsx10("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__ */ jsx10(
+      /* @__PURE__ */ jsx11(
         "input",
         {
           "aria-label": messages["availability.startsAtLocal"],
@@ -1378,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__ */ jsx10(
+      /* @__PURE__ */ jsx11(
         "input",
         {
           "aria-label": messages["availability.endsAtLocal"],
@@ -1388,14 +1649,14 @@ 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__ */ jsx10(
+      /* @__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__ */ jsx10(Trash2, { "aria-hidden": "true", className: "w-4 h-4" })
+          children: /* @__PURE__ */ jsx11(Trash2, { "aria-hidden": "true", className: "w-4 h-4" })
         }
       )
     ] }, index)) }),
@@ -1407,12 +1668,12 @@ function WeeklyRulesEditor({ resourceId }) {
           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__ */ jsx10(Plus, { "aria-hidden": "true", className: "w-4 h-4" }),
+            /* @__PURE__ */ jsx11(Plus, { "aria-hidden": "true", className: "w-4 h-4" }),
             messages["availability.addRule"]
           ]
         }
       ),
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx11(
         "button",
         {
           type: "button",
@@ -1428,21 +1689,28 @@ function WeeklyRulesEditor({ resourceId }) {
 
 // src/components/AvailabilityExceptionsEditor.tsx
 import { Plus as Plus2, Trash2 as Trash22 } from "lucide-react";
-import { useState as useState4 } from "react";
+import { useState as useState5, useMemo as useMemo6 } from "react";
 import { AVAILABILITY_EXCEPTION_KIND } from "@adatechnology/scheduling-contracts";
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+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] = useState4(emptyValue);
-  const [until, setUntil] = useState4(emptyValue);
-  const [kind, setKind] = useState4(AVAILABILITY_EXCEPTION_KIND.BLOCK);
-  const [reason, setReason] = useState4("");
+  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 {
@@ -1462,11 +1730,11 @@ function AvailabilityExceptionsEditor({ resourceId, timezone }) {
     }
   }
   return /* @__PURE__ */ jsxs9("section", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsx11("h3", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: messages["availability.exceptionsTitle"] }),
-    (addException.isError || removeException.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"] }),
-    isLoadError && /* @__PURE__ */ jsx11("p", { role: "alert", className: "text-sm text-red-700 bg-red-50 rounded-lg px-3 py-2", children: messages["common.loadFailure"] }),
-    isLoading && /* @__PURE__ */ jsx11("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: messages["common.loading"] }),
-    /* @__PURE__ */ jsx11("ul", { className: "space-y-2", children: (data ?? []).map((exception) => /* @__PURE__ */ jsxs9("li", { className: "flex items-center gap-2 text-sm", 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",
@@ -1476,19 +1744,19 @@ function AvailabilityExceptionsEditor({ resourceId, timezone }) {
         exception.during.end.toLocaleString(locale),
         exception.reason ? ` (${exception.reason})` : ""
       ] }),
-      /* @__PURE__ */ jsx11(
+      /* @__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__ */ jsx11(Trash22, { "aria-hidden": "true", className: "w-4 h-4" })
+          children: /* @__PURE__ */ jsx12(Trash22, { "aria-hidden": "true", className: "w-4 h-4" })
         }
       )
     ] }, exception.id)) }),
     /* @__PURE__ */ jsxs9("div", { className: "flex flex-wrap items-center gap-2", children: [
-      /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx12(
         DateTimeField,
         {
           label: messages["availability.exceptionFrom"],
@@ -1496,7 +1764,7 @@ function AvailabilityExceptionsEditor({ resourceId, timezone }) {
           onChange: setFrom
         }
       ),
-      /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx12(
         DateTimeField,
         {
           label: messages["availability.exceptionUntil"],
@@ -1504,20 +1772,17 @@ function AvailabilityExceptionsEditor({ resourceId, timezone }) {
           onChange: setUntil
         }
       ),
-      /* @__PURE__ */ jsxs9(
-        "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__ */ jsx11("option", { value: AVAILABILITY_EXCEPTION_KIND.BLOCK, children: messages["availability.exceptionKind.blocked"] }),
-            /* @__PURE__ */ jsx11("option", { value: AVAILABILITY_EXCEPTION_KIND.EXTRA, children: messages["availability.exceptionKind.extra"] })
-          ]
+          options: kindOptions,
+          onChange: (next) => setKind(next)
         }
       ),
-      /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx12(
         "input",
         {
           "aria-label": messages["availability.exceptionReason"],
@@ -1536,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__ */ jsx11(Plus2, { "aria-hidden": "true", className: "w-4 h-4" }),
+            /* @__PURE__ */ jsx12(Plus2, { "aria-hidden": "true", className: "w-4 h-4" }),
             messages["availability.addException"]
           ]
         }
@@ -1546,7 +1811,7 @@ function AvailabilityExceptionsEditor({ resourceId, timezone }) {
 }
 
 // src/components/AvailabilityEditor.tsx
-import { jsx as jsx12, jsxs as jsxs10 } 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);
@@ -1558,22 +1823,22 @@ function AvailabilityEditor({ resourceId, timezone }) {
       ] }),
       timezone
     ] }),
-    /* @__PURE__ */ jsx12(WeeklyRulesEditor, { resourceId }),
-    /* @__PURE__ */ jsx12(AvailabilityExceptionsEditor, { resourceId, timezone })
+    /* @__PURE__ */ jsx13(WeeklyRulesEditor, { resourceId }),
+    /* @__PURE__ */ jsx13(AvailabilityExceptionsEditor, { resourceId, timezone })
   ] });
 }
 
 // src/workspace/AvailabilityArea.tsx
-import { jsx as jsx13, jsxs as jsxs11 } 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] = useState5("");
+  const [resourceId, setResourceId] = useState6("");
   const resources = data?.data ?? [];
   const selectedResource = resources.find((resource) => resource.id === resourceId);
   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__ */ jsx13(
+    /* @__PURE__ */ jsx14(
       ResourceSelect,
       {
         label: messages["agenda.resourceLabel"],
@@ -1583,9 +1848,9 @@ function AvailabilityArea() {
         onChange: setResourceId
       }
     ),
-    isError && /* @__PURE__ */ jsx13(ErrorBanner, { message: messages["common.loadFailure"] }),
-    isLoading && /* @__PURE__ */ jsx13(ListSkeleton, { label: messages["common.loading"], rows: 3 }),
-    !isLoading && !isError && !selectedResource && /* @__PURE__ */ jsx13(
+    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,
@@ -1593,7 +1858,7 @@ function AvailabilityArea() {
         hint: messages["availability.selectResourceHint"]
       }
     ),
-    selectedResource && /* @__PURE__ */ jsx13(
+    selectedResource && /* @__PURE__ */ jsx14(
       AvailabilityEditor,
       {
         resourceId: selectedResource.id,
@@ -1606,12 +1871,12 @@ function AvailabilityArea() {
 
 // src/workspace/BookingsArea.tsx
 import { ClipboardList } from "lucide-react";
-import { useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 import { MAX_PAGE_SIZE as MAX_PAGE_SIZE3 } from "@adatechnology/scheduling-contracts";
 
 // src/components/BookingsTable.tsx
 import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, ArrowUpDown } from "lucide-react";
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 import { BOOKING_STATUS as BOOKING_STATUS4 } from "@adatechnology/scheduling-contracts";
 
 // src/components/bookingsTableState.util.ts
@@ -1661,7 +1926,7 @@ function filterBookingsByStatus(bookings, statusFilters) {
 }
 
 // src/components/BookingsTable.tsx
-import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+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";
@@ -1680,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) {
@@ -1710,12 +1975,12 @@ function BookingsTable({
     setSelected(next);
   }
   function renderSortIcon(column) {
-    if (state.sortColumn !== column) return /* @__PURE__ */ jsx14(ArrowUpDown, { "aria-hidden": "true", className: "w-3 h-3" });
-    return state.sortDirection === "asc" ? /* @__PURE__ */ jsx14(ArrowUp, { "aria-hidden": "true", className: "w-3 h-3" }) : /* @__PURE__ */ jsx14(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__ */ jsx14("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: [
+    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)
     ] }) });
@@ -1723,7 +1988,7 @@ function BookingsTable({
   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__ */ jsx14("legend", { className: "sr-only", children: messages["booking.filterByStatus"] }),
+        /* @__PURE__ */ jsx15("legend", { className: "sr-only", children: messages["booking.filterByStatus"] }),
         ALL_STATUSES.map((status) => {
           const isActive = state.statusFilters.includes(status);
           return /* @__PURE__ */ jsxs12(
@@ -1731,7 +1996,7 @@ function BookingsTable({
             {
               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__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   "input",
                   {
                     type: "checkbox",
@@ -1747,17 +2012,17 @@ function BookingsTable({
           );
         })
       ] }),
-      !isBookingsTableStateDefault(state) && /* @__PURE__ */ jsx14(
+      !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 dark:text-brand-300",
+          className: "min-h-11 px-3 text-sm font-medium text-brand-700 hover:underline dark:text-brand-400",
           children: messages["common.clearFilters"]
         }
       )
     ] }),
-    selected.size > 0 && bulkActions.length > 0 && /* @__PURE__ */ jsx14("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__ */ jsx14(
+    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",
@@ -1769,8 +2034,8 @@ function BookingsTable({
     )) }),
     /* @__PURE__ */ jsxs12("div", { className: `${SURFACE_BORDER} overflow-x-auto`, children: [
       /* @__PURE__ */ jsxs12("table", { className: "min-w-full text-sm", children: [
-        /* @__PURE__ */ jsx14("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__ */ jsx14("th", { scope: "col", className: CHECKBOX_CELL_CLASS, children: /* @__PURE__ */ jsx14(
+        /* @__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",
@@ -1784,12 +2049,12 @@ function BookingsTable({
           renderHeader("startsAt", "booking.column.startsAt"),
           renderHeader("endsAt", "booking.column.endsAt")
         ] }) }),
-        /* @__PURE__ */ jsx14("tbody", { children: visibleBookings.map((booking, index) => /* @__PURE__ */ jsxs12(
+        /* @__PURE__ */ jsx15("tbody", { children: visibleBookings.map((booking, index) => /* @__PURE__ */ jsxs12(
           "tr",
           {
             className: `${index % 2 === 1 ? ROW_STRIPE : ""} hover:bg-brand-50/50 dark:hover:bg-brand-900/10`,
             children: [
-              /* @__PURE__ */ jsx14("td", { className: CHECKBOX_CELL_CLASS, children: /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx15("td", { className: CHECKBOX_CELL_CLASS, children: /* @__PURE__ */ jsx15(
                 "input",
                 {
                   type: "checkbox",
@@ -1798,19 +2063,19 @@ function BookingsTable({
                   onChange: () => toggleRowSelected(booking.id)
                 }
               ) }),
-              /* @__PURE__ */ jsx14("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsx14("button", { type: "button", onClick: () => onRowClick?.(booking), className: "min-h-11 text-left hover:underline", children: booking.title }) }),
-              /* @__PURE__ */ jsx14("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsx14(BookingStatusBadge, { status: booking.status }) }),
-              /* @__PURE__ */ jsx14("td", { className: "px-3 py-2 tabular-nums whitespace-nowrap", children: booking.startsAt.toLocaleString(locale) }),
-              /* @__PURE__ */ jsx14("td", { className: "px-3 py-2 tabular-nums whitespace-nowrap", 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__ */ jsx14("p", { className: "px-3 py-8 text-center 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__ */ jsxs12("div", { className: "flex items-center justify-end gap-3", children: [
-      /* @__PURE__ */ jsx14(
+      /* @__PURE__ */ jsx15(
         "button",
         {
           type: "button",
@@ -1818,7 +2083,7 @@ function BookingsTable({
           disabled: state.page <= 1,
           onClick: () => goToPage(state.page - 1),
           className: ICON_BUTTON,
-          children: /* @__PURE__ */ jsx14(ArrowLeft, { "aria-hidden": "true", className: "w-4 h-4" })
+          children: /* @__PURE__ */ jsx15(ArrowLeft, { "aria-hidden": "true", className: "w-4 h-4" })
         }
       ),
       /* @__PURE__ */ jsxs12("span", { className: "text-sm tabular-nums text-gray-500 dark:text-gray-400", children: [
@@ -1826,7 +2091,7 @@ function BookingsTable({
         " / ",
         pagination.totalPages
       ] }),
-      /* @__PURE__ */ jsx14(
+      /* @__PURE__ */ jsx15(
         "button",
         {
           type: "button",
@@ -1834,7 +2099,7 @@ function BookingsTable({
           disabled: state.page >= pagination.totalPages,
           onClick: () => goToPage(state.page + 1),
           className: ICON_BUTTON,
-          children: /* @__PURE__ */ jsx14(ArrowRight, { "aria-hidden": "true", className: "w-4 h-4" })
+          children: /* @__PURE__ */ jsx15(ArrowRight, { "aria-hidden": "true", className: "w-4 h-4" })
         }
       )
     ] })
@@ -1842,15 +2107,15 @@ function BookingsTable({
 }
 
 // src/hooks/useBookingsTableState.hook.ts
-import { useEffect as useEffect3, 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);
-  useEffect3(() => {
+  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);
@@ -1863,7 +2128,7 @@ function useBookingsTableState() {
 }
 
 // src/workspace/BookingsArea.tsx
-import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 var PAGE_SIZE = 20;
 function BookingsArea() {
   const { locale } = useSchedulingConfig();
@@ -1879,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]
@@ -1889,10 +2154,10 @@ function BookingsArea() {
   }
   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__ */ jsx15(ErrorBanner, { message: messages["common.loadFailure"] }),
-      confirmBooking.isError && /* @__PURE__ */ jsx15(ErrorBanner, { message: messages["common.actionFailure"] }),
-      isLoading && /* @__PURE__ */ jsx15(ListSkeleton, { label: messages["common.loading"], rows: 8 }),
-      !isLoading && !isError && (data?.data.length ?? 0) === 0 && tableState.statusFilters.length === 0 && /* @__PURE__ */ jsx15(
+      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,
@@ -1900,7 +2165,7 @@ function BookingsArea() {
           hint: messages["booking.emptyHint"]
         }
       ),
-      !isLoading && ((data?.data.length ?? 0) > 0 || tableState.statusFilters.length > 0) && /* @__PURE__ */ jsx15(
+      !isLoading && ((data?.data.length ?? 0) > 0 || tableState.statusFilters.length > 0) && /* @__PURE__ */ jsx16(
         BookingsTable,
         {
           bookings: data?.data ?? [],
@@ -1912,7 +2177,7 @@ function BookingsArea() {
         }
       )
     ] }),
-    selectedBooking && /* @__PURE__ */ jsx15(
+    selectedBooking && /* @__PURE__ */ jsx16(
       BookingDrawer,
       {
         booking: selectedBooking,
@@ -1926,28 +2191,41 @@ function BookingsArea() {
 
 // src/workspace/ResourcesArea.tsx
 import { Plus as Plus3, Trash2 as Trash23, Users } from "lucide-react";
-import { useState as useState10 } from "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 jsx16, jsxs as jsxs14 } 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_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);
@@ -1959,8 +2237,8 @@ function ResourceForm({ initialValues, onSubmit }) {
   }
   return /* @__PURE__ */ jsxs14("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
     /* @__PURE__ */ jsxs14("div", { children: [
-      /* @__PURE__ */ jsx16("label", { htmlFor: nameId, className: LABEL_CLASS, children: messages["resource.name"] }),
-      /* @__PURE__ */ jsx16(
+      /* @__PURE__ */ jsx17("label", { htmlFor: nameId, className: LABEL_CLASS, children: messages["resource.name"] }),
+      /* @__PURE__ */ jsx17(
         "input",
         {
           id: nameId,
@@ -1972,72 +2250,59 @@ function ResourceForm({ initialValues, onSubmit }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs14("div", { children: [
-      /* @__PURE__ */ jsx16("label", { htmlFor: kindId, className: LABEL_CLASS, children: messages["resource.kind"] }),
-      /* @__PURE__ */ jsxs14(
-        "select",
-        {
-          id: kindId,
-          value: kind,
-          onChange: (event) => setKind(event.target.value),
-          className: INPUT_CLASS2,
-          children: [
-            /* @__PURE__ */ jsx16("option", { value: RESOURCE_KIND.PERSON, children: messages["resource.kind.person"] }),
-            /* @__PURE__ */ jsx16("option", { value: RESOURCE_KIND.ROOM, children: messages["resource.kind.room"] }),
-            /* @__PURE__ */ jsx16("option", { value: RESOURCE_KIND.EQUIPMENT, children: messages["resource.kind.equipment"] })
-          ]
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs14("div", { children: [
-      /* @__PURE__ */ jsx16("label", { htmlFor: timezoneId, className: LABEL_CLASS, children: messages["resource.timezone"] }),
-      /* @__PURE__ */ jsx16(
-        "input",
-        {
-          id: timezoneId,
-          type: "text",
-          required: true,
-          value: timezone,
-          onChange: (event) => setTimezone(event.target.value),
-          placeholder: "America/Sao_Paulo",
-          className: INPUT_CLASS2
-        }
-      )
-    ] }),
+    /* @__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__ */ jsx16("input", { type: "checkbox", checked: active, onChange: (event) => setActive(event.target.checked) }),
+      /* @__PURE__ */ jsx17("input", { type: "checkbox", checked: active, onChange: (event) => setActive(event.target.checked) }),
       messages["resource.active"]
     ] }),
-    /* @__PURE__ */ jsx16("button", { type: "submit", disabled: submitting, className: BUTTON_PRIMARY2, 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 jsx17, jsxs as jsxs15 } 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__ */ jsx17("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__ */ jsx17("ul", { className: `${SURFACE_BORDER} divide-y divide-gray-200 overflow-hidden dark:divide-gray-800`, children: resources.map((resource, index) => /* @__PURE__ */ jsx17("li", { className: index % 2 === 1 ? ROW_STRIPE : void 0, children: /* @__PURE__ */ jsxs15(
+  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 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: resource.name }),
-        /* @__PURE__ */ jsx17("span", { className: "text-gray-500 dark:text-gray-400", children: messages[`resource.kind.${resource.kind}`] }),
-        /* @__PURE__ */ jsx17("span", { className: "text-gray-500 dark:text-gray-400", children: resource.timezone }),
-        !resource.active && /* @__PURE__ */ jsx17("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"] })
+        /* @__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 jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
 function ResourcesArea() {
   const { locale } = useSchedulingConfig();
   const messages = resolveSchedulingMessages(locale);
@@ -2045,7 +2310,7 @@ 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 ?? [];
@@ -2062,17 +2327,17 @@ function ResourcesArea() {
   }
   function renderCreateButton() {
     return /* @__PURE__ */ jsxs16("button", { type: "button", onClick: () => setDraft(null), className: BUTTON_PRIMARY, children: [
-      /* @__PURE__ */ jsx18(Plus3, { "aria-hidden": "true", className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx19(Plus3, { "aria-hidden": "true", className: "h-4 w-4" }),
       messages["resource.newResource"]
     ] });
   }
   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__ */ jsx18("div", { className: "flex justify-end", children: renderCreateButton() }),
-      isError && /* @__PURE__ */ jsx18(ErrorBanner, { message: messages["common.loadFailure"] }),
-      (createResource.isError || updateResource.isError || deleteResource.isError) && /* @__PURE__ */ jsx18(ErrorBanner, { message: messages["common.actionFailure"] }),
-      isLoading && /* @__PURE__ */ jsx18(ListSkeleton, { label: messages["common.loading"] }),
-      !isLoading && !isError && resources.length === 0 && /* @__PURE__ */ jsx18(
+      /* @__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,
@@ -2081,9 +2346,9 @@ function ResourcesArea() {
           action: renderCreateButton()
         }
       ),
-      !isLoading && resources.length > 0 && /* @__PURE__ */ jsx18(ResourceList, { resources, onSelect: setDraft })
+      !isLoading && resources.length > 0 && /* @__PURE__ */ jsx19(ResourceList, { resources, onSelect: setDraft })
     ] }),
-    isDraftOpen && /* @__PURE__ */ jsx18(
+    isDraftOpen && /* @__PURE__ */ jsx19(
       SidePanel,
       {
         title: isEditing ? messages["resource.editTitle"] : messages["resource.createTitle"],
@@ -2099,12 +2364,12 @@ function ResourcesArea() {
             },
             className: BUTTON_DANGER,
             children: [
-              /* @__PURE__ */ jsx18(Trash23, { "aria-hidden": "true", className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx19(Trash23, { "aria-hidden": "true", className: "h-4 w-4" }),
               messages["common.remove"]
             ]
           }
         ) : void 0,
-        children: /* @__PURE__ */ jsx18(
+        children: /* @__PURE__ */ jsx19(
           ResourceForm,
           {
             ...draft ? { initialValues: draft } : {},
@@ -2119,24 +2384,24 @@ function ResourcesArea() {
 
 // src/workspace/ServicesArea.tsx
 import { Plus as Plus4, Trash2 as Trash24, Wrench } from "lucide-react";
-import { useState as useState12 } from "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 jsx19, jsxs as jsxs17 } 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);
@@ -2148,8 +2413,8 @@ function ServiceForm({ initialValues, onSubmit }) {
   }
   return /* @__PURE__ */ jsxs17("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
     /* @__PURE__ */ jsxs17("div", { children: [
-      /* @__PURE__ */ jsx19("label", { htmlFor: "scheduling-service-name", className: LABEL_CLASS2, children: messages["service.name"] }),
-      /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsx20("label", { htmlFor: "scheduling-service-name", className: LABEL_CLASS2, children: messages["service.name"] }),
+      /* @__PURE__ */ jsx20(
         "input",
         {
           id: "scheduling-service-name",
@@ -2162,8 +2427,8 @@ function ServiceForm({ initialValues, onSubmit }) {
       )
     ] }),
     /* @__PURE__ */ jsxs17("div", { children: [
-      /* @__PURE__ */ jsx19("label", { htmlFor: "scheduling-service-duration", className: LABEL_CLASS2, children: messages["service.durationMinutes"] }),
-      /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsx20("label", { htmlFor: "scheduling-service-duration", className: LABEL_CLASS2, children: messages["service.durationMinutes"] }),
+      /* @__PURE__ */ jsx20(
         "input",
         {
           id: "scheduling-service-duration",
@@ -2178,8 +2443,8 @@ function ServiceForm({ initialValues, onSubmit }) {
     ] }),
     /* @__PURE__ */ jsxs17("div", { className: "grid grid-cols-2 gap-3", children: [
       /* @__PURE__ */ jsxs17("div", { children: [
-        /* @__PURE__ */ jsx19("label", { htmlFor: "scheduling-service-buffer-before", className: LABEL_CLASS2, children: messages["service.bufferBeforeMinutes"] }),
-        /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx20("label", { htmlFor: "scheduling-service-buffer-before", className: LABEL_CLASS2, children: messages["service.bufferBeforeMinutes"] }),
+        /* @__PURE__ */ jsx20(
           "input",
           {
             id: "scheduling-service-buffer-before",
@@ -2192,8 +2457,8 @@ function ServiceForm({ initialValues, onSubmit }) {
         )
       ] }),
       /* @__PURE__ */ jsxs17("div", { children: [
-        /* @__PURE__ */ jsx19("label", { htmlFor: "scheduling-service-buffer-after", className: LABEL_CLASS2, children: messages["service.bufferAfterMinutes"] }),
-        /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx20("label", { htmlFor: "scheduling-service-buffer-after", className: LABEL_CLASS2, children: messages["service.bufferAfterMinutes"] }),
+        /* @__PURE__ */ jsx20(
           "input",
           {
             id: "scheduling-service-buffer-after",
@@ -2207,41 +2472,41 @@ function ServiceForm({ initialValues, onSubmit }) {
       ] })
     ] }),
     initialValues && /* @__PURE__ */ jsxs17("label", { className: "flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 min-h-11", children: [
-      /* @__PURE__ */ jsx19("input", { type: "checkbox", checked: active, onChange: (event) => setActive(event.target.checked) }),
+      /* @__PURE__ */ jsx20("input", { type: "checkbox", checked: active, onChange: (event) => setActive(event.target.checked) }),
       messages["service.active"]
     ] }),
-    /* @__PURE__ */ jsx19("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 jsx20, jsxs as jsxs18 } 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__ */ jsx20("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__ */ jsx20("ul", { className: `${SURFACE_BORDER} divide-y divide-gray-200 overflow-hidden dark:divide-gray-800`, children: services.map((service, index) => /* @__PURE__ */ jsx20("li", { className: index % 2 === 1 ? ROW_STRIPE : void 0, children: /* @__PURE__ */ jsxs18(
+  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 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__ */ jsx20("span", { className: "flex-1 font-medium text-gray-900 dark:text-gray-100", children: service.name }),
+        /* @__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__ */ jsx20("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.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 jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
 function ServicesArea() {
   const { locale } = useSchedulingConfig();
   const messages = resolveSchedulingMessages(locale);
@@ -2249,7 +2514,7 @@ 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 ?? [];
@@ -2266,17 +2531,17 @@ function ServicesArea() {
   }
   function renderCreateButton() {
     return /* @__PURE__ */ jsxs19("button", { type: "button", onClick: () => setDraft(null), className: BUTTON_PRIMARY, children: [
-      /* @__PURE__ */ jsx21(Plus4, { "aria-hidden": "true", className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx22(Plus4, { "aria-hidden": "true", className: "h-4 w-4" }),
       messages["service.newService"]
     ] });
   }
   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__ */ jsx21("div", { className: "flex justify-end", children: renderCreateButton() }),
-      isError && /* @__PURE__ */ jsx21(ErrorBanner, { message: messages["common.loadFailure"] }),
-      (createService.isError || updateService.isError || deleteService.isError) && /* @__PURE__ */ jsx21(ErrorBanner, { message: messages["common.actionFailure"] }),
-      isLoading && /* @__PURE__ */ jsx21(ListSkeleton, { label: messages["common.loading"] }),
-      !isLoading && !isError && services.length === 0 && /* @__PURE__ */ jsx21(
+      /* @__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,
@@ -2285,9 +2550,9 @@ function ServicesArea() {
           action: renderCreateButton()
         }
       ),
-      !isLoading && services.length > 0 && /* @__PURE__ */ jsx21(ServiceList, { services, onSelect: setDraft })
+      !isLoading && services.length > 0 && /* @__PURE__ */ jsx22(ServiceList, { services, onSelect: setDraft })
     ] }),
-    isDraftOpen && /* @__PURE__ */ jsx21(
+    isDraftOpen && /* @__PURE__ */ jsx22(
       SidePanel,
       {
         title: isEditing ? messages["service.editTitle"] : messages["service.createTitle"],
@@ -2303,12 +2568,12 @@ function ServicesArea() {
             },
             className: BUTTON_DANGER,
             children: [
-              /* @__PURE__ */ jsx21(Trash24, { "aria-hidden": "true", className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx22(Trash24, { "aria-hidden": "true", className: "h-4 w-4" }),
               messages["common.remove"]
             ]
           }
         ) : void 0,
-        children: /* @__PURE__ */ jsx21(
+        children: /* @__PURE__ */ jsx22(
           ServiceForm,
           {
             ...draft ? { initialValues: draft } : {},
@@ -2338,9 +2603,9 @@ function isSchedulingWorkspaceArea(value) {
 }
 
 // src/workspace/WorkspaceAreaNav.tsx
-import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
+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_ACTIVE = "border-brand-600 text-brand-700 dark:text-brand-400";
 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]: CalendarDays2,
@@ -2357,7 +2622,7 @@ function WorkspaceAreaNav({ area, labels, onSelect }) {
     [SCHEDULING_WORKSPACE_AREA.SERVICES, labels.servicesTab],
     [SCHEDULING_WORKSPACE_AREA.AVAILABILITY, labels.availabilityTab]
   ];
-  return /* @__PURE__ */ jsx22("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]) => {
+  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__ */ jsxs20(
       "button",
@@ -2367,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__ */ jsx22(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
         ]
       },
@@ -2377,7 +2642,7 @@ function WorkspaceAreaNav({ area, labels, onSelect }) {
 }
 
 // src/workspace/SchedulingWorkspace.tsx
-import { jsx as jsx23, jsxs as jsxs21 } 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,
@@ -2392,7 +2657,7 @@ 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) {
@@ -2401,11 +2666,11 @@ function SchedulingWorkspace({
   }
   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__ */ jsx23("h1", { className: "mr-auto text-xl font-semibold tracking-tight text-gray-900 dark:text-gray-100", children: labels.title }),
+      /* @__PURE__ */ jsx24("h1", { className: "mr-auto text-xl font-semibold tracking-tight text-gray-900 dark:text-gray-100", children: labels.title }),
       renderHeaderActions?.()
     ] }),
-    /* @__PURE__ */ jsx23(WorkspaceAreaNav, { area, labels, onSelect: handleSelectArea }),
-    /* @__PURE__ */ jsx23("div", { className: "relative flex flex-1 min-h-0 overflow-hidden", children: /* @__PURE__ */ jsx23(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 {