@marco.colia/react-fast-scheduler 2.1.0 → 2.1.1

package/README.md

@@ -90,7 +90,8 @@ export function SchedulerExample() {
 ```
 
 `renderAppointment` is optional. If you omit it, the scheduler uses the built-in appointment card with light/dark mode support.
-`renderDatePicker` is optional. If you omit it, the scheduler uses a built-in native date input.
+`renderToolbar` is optional. If you omit it, the scheduler uses a built-in shadcn-style toolbar with prev/next buttons and a calendar popover date picker.
+`renderDatePicker` is optional. If you omit it, the default toolbar uses the built-in calendar popover date picker.
 `onAppointmentChange` is a simple callback: use it to update your state and run your own side effects.
 
 Main props you need to pass:
@@ -104,8 +105,9 @@ Main props you need to pass:
 - `appointmentColorTokenClassMap`: optional map to override token -> class resolution.
 - `getResourceAppointmentAppearance`: optional low-level function to provide appointment `className` per resource.
 - `getResourceAppointmentBackground`: legacy optional function to provide appointment background as a string.
+- `renderToolbar`: optional render hook to replace the entire scheduler toolbar/header controls.
 - `prevButtonLabel` and `nextButtonLabel`: custom labels for toolbar navigation buttons.
-- `renderDatePicker`: optional render hook for a custom date picker UI (for example shadcn calendar).
+- `renderDatePicker`: optional render hook for the date picker slot used by the default toolbar.
 - `renderResourceHeader`: optional render hook for resource column headers.
 - `renderAppointment`: optional render hook to fully customize appointment cards.
 
@@ -164,7 +166,32 @@ Main props you need to pass:
 />
 ```
 
-### shadcn Calendar Date Picker
+### Custom toolbar
+
+```tsx
+<Scheduler
+  // ...other props
+  renderToolbar={({ selectedDate, goToPreviousDay, goToNextDay, defaultDatePicker }) => (
+    <div className="mb-4 flex items-center justify-between gap-3 rounded-xl border border-border bg-card px-4 py-3">
+      <div>
+        <div className="text-sm font-medium">{selectedDate.toDateString()}</div>
+        <div className="text-xs text-muted-foreground">Team schedule</div>
+      </div>
+      <div className="flex items-center gap-2">
+        <button className="rounded-md border px-3 py-2 text-sm" type="button" onClick={goToPreviousDay}>
+          Previous
+        </button>
+        {defaultDatePicker}
+        <button className="rounded-md border px-3 py-2 text-sm" type="button" onClick={goToNextDay}>
+          Next
+        </button>
+      </div>
+    </div>
+  )}
+/>
+```
+
+### Custom date picker slot
 
 ```tsx
 import { Button } from "@/components/ui/button";
@@ -248,4 +275,5 @@ This repo uses [Changesets](https://github.com/changesets/changesets) and GitHub
 1. Create a changeset: `npx changeset`
 2. Merge to `main`
 3. The `Release` workflow opens/updates a release PR
-4. Merging that PR publishes to npm (via npm Trusted Publishing/OIDC, or `NPM_TOKEN` if configured)
+4. Merging that PR publishes to npm via npm Trusted Publishing and GitHub OIDC
+4. Merging that PR publishes to npm via npm Trusted Publishing and GitHub OIDC

package/dist/index.cjs

@@ -2,7 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var dateFns = require('date-fns');
-var React2 = require('react');
+var React5 = require('react');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -22,7 +22,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+var React5__namespace = /*#__PURE__*/_interopNamespace(React5);
 
 // src/components/defaultRenderAppointment/index.tsx
 function defaultRenderAppointment({
@@ -55,6 +55,206 @@ function defaultRenderAppointment({
   ] });
 }
 
+// src/lib/cn.ts
+function cn(...inputs) {
+  return inputs.filter(Boolean).join(" ");
+}
+var variantClasses = {
+  default: "bg-primary text-primary-foreground hover:bg-primary/90",
+  outline: "border border-border bg-card text-foreground hover:bg-muted",
+  ghost: "text-foreground hover:bg-muted"
+};
+var sizeClasses = {
+  default: "h-9 px-4 py-2",
+  sm: "h-8 px-3 text-xs",
+  icon: "h-8 w-8"
+};
+var Button = React5__namespace.forwardRef(function Button2({ className, variant = "default", size = "default", type = "button", ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ref,
+      type,
+      className: cn(
+        "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+        variantClasses[variant],
+        sizeClasses[size],
+        className
+      ),
+      ...props
+    }
+  );
+});
+function Calendar({
+  selected,
+  onSelect
+}) {
+  const [month, setMonth] = React5__namespace.useState(selected ?? /* @__PURE__ */ new Date());
+  React5__namespace.useEffect(() => {
+    if (selected) {
+      setMonth(selected);
+    }
+  }, [selected]);
+  const monthStart = dateFns.startOfMonth(month);
+  const calendarStart = dateFns.startOfWeek(monthStart, { weekStartsOn: 1 });
+  const calendarEnd = dateFns.endOfWeek(dateFns.endOfMonth(month), { weekStartsOn: 1 });
+  const days = [];
+  for (let day = calendarStart; day <= calendarEnd; day = dateFns.addDays(day, 1)) {
+    days.push(day);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-72 rounded-md bg-popover", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Previous month", onClick: () => setMonth(dateFns.addMonths(month, -1)), children: "<" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium", children: dateFns.format(month, "MMMM yyyy") }),
+      /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Next month", onClick: () => setMonth(dateFns.addMonths(month, 1)), children: ">" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-1 text-center text-xs text-muted-foreground", children: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((label) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-1", children: label }, label)) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-1", children: days.map((day) => {
+      const isSelected = selected ? dateFns.isSameDay(day, selected) : false;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          variant: isSelected ? "default" : "ghost",
+          size: "icon",
+          className: cn(
+            "text-xs",
+            !dateFns.isSameMonth(day, month) && "text-muted-foreground opacity-60",
+            dateFns.isToday(day) && !isSelected && "border border-border"
+          ),
+          onClick: () => onSelect?.(day),
+          children: dateFns.format(day, "d")
+        },
+        day.toISOString()
+      );
+    }) })
+  ] });
+}
+var PopoverContext = React5__namespace.createContext(null);
+function usePopoverContext() {
+  const context = React5__namespace.useContext(PopoverContext);
+  if (!context) {
+    throw new Error("Popover components must be used within Popover.");
+  }
+  return context;
+}
+function Popover({
+  children,
+  open: controlledOpen,
+  onOpenChange
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React5__namespace.useState(false);
+  const triggerRef = React5__namespace.useRef(null);
+  const contentRef = React5__namespace.useRef(null);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = React5__namespace.useCallback(
+    (value) => {
+      const nextValue = typeof value === "function" ? value(open) : value;
+      if (controlledOpen === void 0) {
+        setUncontrolledOpen(nextValue);
+      }
+      onOpenChange?.(nextValue);
+    },
+    [controlledOpen, onOpenChange, open]
+  );
+  React5__namespace.useEffect(() => {
+    if (!open) {
+      return void 0;
+    }
+    const handlePointerDown = (event) => {
+      const target = event.target;
+      if (triggerRef.current?.contains(target) || contentRef.current?.contains(target)) {
+        return;
+      }
+      setOpen(false);
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open, setOpen]);
+  return /* @__PURE__ */ jsxRuntime.jsx(PopoverContext.Provider, { value: { open, setOpen, triggerRef, contentRef }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative inline-flex", children }) });
+}
+function PopoverTrigger({
+  children,
+  asChild = false
+}) {
+  const { open, setOpen, triggerRef } = usePopoverContext();
+  if (asChild && React5__namespace.isValidElement(children)) {
+    const child = children;
+    return React5__namespace.cloneElement(child, {
+      ref: triggerRef,
+      "aria-expanded": open,
+      onClick: (event) => {
+        child.props.onClick?.(event);
+        setOpen((current) => !current);
+      }
+    });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ref: triggerRef,
+      type: "button",
+      "aria-expanded": open,
+      onClick: () => setOpen((current) => !current),
+      children
+    }
+  );
+}
+function PopoverContent({
+  children,
+  className,
+  align = "start"
+}) {
+  const { open, contentRef } = usePopoverContext();
+  if (!open) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: contentRef,
+      className: cn(
+        "absolute top-full z-50 mt-2 min-w-72 rounded-md border border-border bg-popover p-2 text-popover-foreground shadow-md outline-none",
+        align === "start" && "left-0",
+        align === "center" && "left-1/2 -translate-x-1/2",
+        align === "end" && "right-0",
+        className
+      ),
+      children
+    }
+  );
+}
+function defaultRenderDatePicker({ selectedDate, onSelectedDateChange }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", size: "sm", className: "min-w-40 justify-start text-left font-normal", children: dateFns.format(selectedDate, "PPP") }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-auto p-2", align: "center", children: /* @__PURE__ */ jsxRuntime.jsx(Calendar, { selected: selectedDate, onSelect: onSelectedDateChange }) })
+  ] });
+}
+function defaultRenderResourceHeader({ resource }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("strong", { children: resource.label });
+}
+function defaultRenderToolbar({
+  goToPreviousDay,
+  goToNextDay,
+  defaultDatePicker,
+  prevButtonLabel = "Prev",
+  nextButtonLabel = "Next"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rfs-toolbar", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-border bg-card p-1 shadow-xs", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", size: "sm", onClick: goToPreviousDay, children: prevButtonLabel }),
+    defaultDatePicker,
+    /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", size: "sm", onClick: goToNextDay, children: nextButtonLabel })
+  ] }) });
+}
+
 // src/components/constants.ts
 var STEP_MIN = 15;
 var MIN_EVENT_MIN = 15;
@@ -63,8 +263,6 @@ var GUTTER_W = 72;
 var TOP_PAD = 12;
 var BOTTOM_PAD = 24;
 var RESOURCE_MIN_W = 420;
-
-// src/utils/scheduler-core.utils.ts
 function isNameLike(resource) {
   if (!resource || typeof resource !== "object") {
     return false;
@@ -72,22 +270,6 @@ function isNameLike(resource) {
   const maybe = resource;
   return typeof maybe.firstName === "string" || typeof maybe.lastName === "string";
 }
-function toInputDateValue(date) {
-  const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, "0");
-  const day = String(date.getDate()).padStart(2, "0");
-  return `${year}-${month}-${day}`;
-}
-function fromInputDateValue(value) {
-  const [yearRaw, monthRaw, dayRaw] = value.split("-");
-  const year = Number(yearRaw);
-  const month = Number(monthRaw);
-  const day = Number(dayRaw);
-  if (!Number.isInteger(year) || !Number.isInteger(month) || !Number.isInteger(day)) {
-    return null;
-  }
-  return new Date(year, month - 1, day);
-}
 var DEFAULT_APPOINTMENT_COLOR_TOKEN_CLASS_MAP = {
   slate: "bg-slate-100 dark:bg-slate-900/40",
   gray: "bg-gray-100 dark:bg-gray-900/40",
@@ -198,26 +380,6 @@ function layoutOverlaps(blocks) {
   }
   return output;
 }
-function defaultRenderDatePicker({ selectedDate, onSelectedDateChange }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "input",
-    {
-      type: "date",
-      value: toInputDateValue(selectedDate),
-      onChange: (event) => {
-        const nextDate = fromInputDateValue(event.target.value);
-        if (nextDate) {
-          onSelectedDateChange(nextDate);
-        }
-      },
-      className: "h-7 rounded-md border border-border bg-card px-2 text-xs text-foreground",
-      "aria-label": "Select date"
-    }
-  );
-}
-function defaultRenderResourceHeader({ resource }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("strong", { children: resource.label });
-}
 
 // src/utils/scheduler-data.utils.ts
 function buildResourceMap({
@@ -321,13 +483,13 @@ function useSchedulerBaseData({
   resources,
   selectedDate
 }) {
-  const dayStartAbs = React2__namespace.useMemo(() => parseHHMM(dayStart), [dayStart]);
-  const dayEndAbs = React2__namespace.useMemo(() => parseHHMM(dayEnd), [dayEnd]);
-  const dayMinutes = React2__namespace.useMemo(() => Math.max(0, dayEndAbs - dayStartAbs), [dayEndAbs, dayStartAbs]);
-  const gridHeight = React2__namespace.useMemo(() => TOP_PAD + dayMinutes * PX_PER_MIN + BOTTOM_PAD, [dayMinutes]);
-  const gridMinWidth = React2__namespace.useMemo(() => GUTTER_W + Math.max(resources.length, 1) * RESOURCE_MIN_W, [resources.length]);
-  const selectedISO = React2__namespace.useMemo(() => dayISO(selectedDate), [selectedDate]);
-  const renderAppts = React2__namespace.useMemo(() => {
+  const dayStartAbs = React5__namespace.useMemo(() => parseHHMM(dayStart), [dayStart]);
+  const dayEndAbs = React5__namespace.useMemo(() => parseHHMM(dayEnd), [dayEnd]);
+  const dayMinutes = React5__namespace.useMemo(() => Math.max(0, dayEndAbs - dayStartAbs), [dayEndAbs, dayStartAbs]);
+  const gridHeight = React5__namespace.useMemo(() => TOP_PAD + dayMinutes * PX_PER_MIN + BOTTOM_PAD, [dayMinutes]);
+  const gridMinWidth = React5__namespace.useMemo(() => GUTTER_W + Math.max(resources.length, 1) * RESOURCE_MIN_W, [resources.length]);
+  const selectedISO = React5__namespace.useMemo(() => dayISO(selectedDate), [selectedDate]);
+  const renderAppts = React5__namespace.useMemo(() => {
     return normalizeAppointments({
       adapter,
       appointments,
@@ -336,7 +498,7 @@ function useSchedulerBaseData({
       selectedISO
     });
   }, [adapter, appointments, dayMinutes, dayStartAbs, selectedISO]);
-  const appointmentMap = React2__namespace.useMemo(() => buildAppointmentMap(renderAppts), [renderAppts]);
+  const appointmentMap = React5__namespace.useMemo(() => buildAppointmentMap(renderAppts), [renderAppts]);
   return {
     appointmentMap,
     dayEndAbs,
@@ -357,10 +519,10 @@ function useSchedulerInteractions({
   resources,
   selectedDate
 }) {
-  const [drag, setDrag] = React2__namespace.useState({ kind: "none" });
-  const colRefs = React2__namespace.useRef({});
-  const suppressClickRef = React2__namespace.useRef(false);
-  const pointerToMin = React2__namespace.useCallback(
+  const [drag, setDrag] = React5__namespace.useState({ kind: "none" });
+  const colRefs = React5__namespace.useRef({});
+  const suppressClickRef = React5__namespace.useRef(false);
+  const pointerToMin = React5__namespace.useCallback(
     (resourceId, clientY) => {
       const col = colRefs.current[String(resourceId)];
       if (!col) {
@@ -371,7 +533,7 @@ function useSchedulerInteractions({
     },
     [dayMinutes]
   );
-  const pointerToResourceId = React2__namespace.useCallback(
+  const pointerToResourceId = React5__namespace.useCallback(
     (clientX, fallbackResourceId) => {
       for (const resource of resources) {
         const col = colRefs.current[String(resource.id)];
@@ -387,14 +549,14 @@ function useSchedulerInteractions({
     },
     [resources]
   );
-  const hasOverlap = React2__namespace.useCallback(
+  const hasOverlap = React5__namespace.useCallback(
     (appointmentId, resourceId, startMin, endMin) => {
       const events = renderAppts.filter((appointment) => appointment.resourceId === resourceId && appointment.id !== appointmentId);
       return events.some((appointment) => overlaps(appointment, { startMin, endMin }));
     },
     [renderAppts]
   );
-  const persistDrag = React2__namespace.useCallback(
+  const persistDrag = React5__namespace.useCallback(
     async (state) => {
       const target = appointmentMap.get(state.appointmentId);
       if (!target) {
@@ -432,7 +594,7 @@ function useSchedulerInteractions({
     },
     [appointmentMap, dayStartAbs, hasOverlap, onAppointmentChange, onPersistMoveResize, selectedDate]
   );
-  const onApptPointerDown = React2__namespace.useCallback(
+  const onApptPointerDown = React5__namespace.useCallback(
     (event, appointment) => {
       if (event.button !== 0) {
         return;
@@ -453,7 +615,7 @@ function useSchedulerInteractions({
     },
     [pointerToMin]
   );
-  const onResizePointerDown = React2__namespace.useCallback((event, appointment) => {
+  const onResizePointerDown = React5__namespace.useCallback((event, appointment) => {
     if (event.button !== 0) {
       return;
     }
@@ -468,7 +630,7 @@ function useSchedulerInteractions({
       endMin: appointment.endMin
     });
   }, []);
-  const onGlobalPointerMove = React2__namespace.useCallback(
+  const onGlobalPointerMove = React5__namespace.useCallback(
     (event) => {
       if (drag.kind === "none") {
         return;
@@ -502,7 +664,7 @@ function useSchedulerInteractions({
     },
     [dayMinutes, drag, pointerToMin, pointerToResourceId]
   );
-  const onGlobalPointerUp = React2__namespace.useCallback(() => {
+  const onGlobalPointerUp = React5__namespace.useCallback(() => {
     if (drag.kind === "none") {
       return;
     }
@@ -534,13 +696,13 @@ function useSchedulerPresentationData({
   resources,
   selectedDate
 }) {
-  const effectiveAppts = React2__namespace.useMemo(() => {
+  const effectiveAppts = React5__namespace.useMemo(() => {
     return applyDragToAppointments(renderAppts, drag, selectedDate, dayStartAbs);
   }, [dayStartAbs, drag, renderAppts, selectedDate]);
-  const laidOutByResource = React2__namespace.useMemo(() => {
+  const laidOutByResource = React5__namespace.useMemo(() => {
     return buildLaidOutByResource(resources, effectiveAppts);
   }, [effectiveAppts, resources]);
-  const appointmentBgByResource = React2__namespace.useMemo(() => {
+  const appointmentBgByResource = React5__namespace.useMemo(() => {
     if (!getResourceAppointmentBackground) {
       return /* @__PURE__ */ new Map();
     }
@@ -551,7 +713,7 @@ function useSchedulerPresentationData({
       toKey: (resource) => resource.id
     });
   }, [getResourceAppointmentBackground, resources]);
-  const appointmentColorTokenClassByResource = React2__namespace.useMemo(() => {
+  const appointmentColorTokenClassByResource = React5__namespace.useMemo(() => {
     if (!getResourceAppointmentColorToken) {
       return /* @__PURE__ */ new Map();
     }
@@ -569,7 +731,7 @@ function useSchedulerPresentationData({
       toKey: (resource) => resource.id
     });
   }, [appointmentColorTokenClassMap, getResourceAppointmentColorToken, resources]);
-  const appointmentAppearanceByResource = React2__namespace.useMemo(() => {
+  const appointmentAppearanceByResource = React5__namespace.useMemo(() => {
     return buildAppointmentAppearanceByResource(
       resources,
       resourceAppointmentClassMap,
@@ -606,6 +768,7 @@ function Scheduler({
   getResourceAppointmentColorToken,
   appointmentColorTokenClassMap,
   getResourceAppointmentBackground,
+  renderToolbar,
   renderDatePicker,
   prevButtonLabel = "Prev",
   nextButtonLabel = "Next",
@@ -662,6 +825,22 @@ function Scheduler({
     selectedDate
   });
   const defaultResourceHeaderRenderer = (resource) => defaultRenderResourceHeader({ resource });
+  const goToPreviousDay = () => onSelectedDateChange(shiftDays(selectedDate, -1));
+  const goToNextDay = () => onSelectedDateChange(shiftDays(selectedDate, 1));
+  const defaultDatePicker = (renderDatePicker ?? defaultRenderDatePicker)({ selectedDate, onSelectedDateChange });
+  const toolbar = renderToolbar ? renderToolbar({
+    selectedDate,
+    onSelectedDateChange,
+    goToPreviousDay,
+    goToNextDay,
+    defaultDatePicker
+  }) : defaultRenderToolbar({
+    goToPreviousDay,
+    goToNextDay,
+    defaultDatePicker,
+    prevButtonLabel,
+    nextButtonLabel
+  });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "section",
     {
@@ -670,27 +849,7 @@ function Scheduler({
       onPointerUp: onGlobalPointerUp,
       onPointerCancel: onGlobalPointerUp,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rfs-toolbar", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              className: "rfs-btn border-border bg-card text-foreground hover:bg-muted",
-              type: "button",
-              onClick: () => onSelectedDateChange(shiftDays(selectedDate, -1)),
-              children: prevButtonLabel
-            }
-          ),
-          (renderDatePicker ?? defaultRenderDatePicker)({ selectedDate, onSelectedDateChange }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              className: "rfs-btn border-border bg-card text-foreground hover:bg-muted",
-              type: "button",
-              onClick: () => onSelectedDateChange(shiftDays(selectedDate, 1)),
-              children: nextButtonLabel
-            }
-          )
-        ] }),
+        toolbar,
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rfs-shell border-border bg-card", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { minWidth: gridMinWidth }, children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rfs-header border-border bg-card", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rfs-gutter border-border", style: { width: GUTTER_W } }),