@flamingo-stack/openframe-frontend-core 0.0.740 → 0.0.742

package/dist/components/features/scripts/schedule-form/schedule-script-search-field.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { OS_PLATFORMS } from "../../../../utils/os-platforms.js";
+import { Autocomplete } from "../../../ui/autocomplete.js";
+import { Label } from "../../../ui/label.js";
+import { TruncateText } from "../../../ui/truncate-text.js";
+function ScriptPlatformIcons({ platforms }) {
+  return /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0 items-center gap-0.5", children: OS_PLATFORMS.filter((p) => platforms.includes(p.id)).map((p) => /* @__PURE__ */ jsx(p.icon, { className: "h-3.5 w-3.5 text-ods-text-secondary opacity-60" }, p.id)) });
+}
+function ScheduleScriptSearchField({
+  scriptId,
+  name,
+  scripts,
+  isLoading = false,
+  inputValue = "",
+  onInputChange,
+  onOpen,
+  onClose,
+  onChange,
+  disabled = false,
+  error,
+  invalid = false
+}) {
+  const handleBlur = (e) => {
+    if (!e.currentTarget.contains(e.relatedTarget)) onClose?.();
+  };
+  const options = scripts.map((s) => ({ label: s.name, value: s.id }));
+  if (scriptId && !options.some((o) => o.value === scriptId)) {
+    options.unshift({ label: name, value: scriptId });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-xxs)]", onFocus: onOpen, onBlur: handleBlur, children: [
+    /* @__PURE__ */ jsx(Label, { className: "text-h4", children: "Select Script" }),
+    /* @__PURE__ */ jsx(
+      Autocomplete,
+      {
+        options,
+        value: scriptId || null,
+        onChange,
+        placeholder: "Select a script...",
+        disableClientFilter: true,
+        onInputChange,
+        loading: isLoading,
+        loadingText: "Searching scripts...",
+        noOptionsText: inputValue ? "No scripts match your search" : "No scripts available",
+        disabled,
+        error,
+        invalid,
+        renderOption: (option, isSelected) => /* @__PURE__ */ jsxs("span", { className: "flex w-full min-w-0 items-center gap-[var(--spacing-system-xsf)]", children: [
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(TruncateText, { className: isSelected ? "text-ods-accent" : void 0, children: option.label }) }),
+          /* @__PURE__ */ jsx(ScriptPlatformIcons, { platforms: scripts.find((s) => s.id === option.value)?.supportedPlatforms ?? [] })
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  ScheduleScriptSearchField
+};

package/dist/components/features/scripts/schedule-form/schedule-scripts-field.d.ts

@@ -0,0 +1,25 @@
+import { type RenderScheduleScriptSearch } from './schedule-form-types';
+export interface ScheduleScriptsFieldProps {
+    showErrors: boolean;
+    disabled?: boolean;
+    /** The "Select Script" field of each card. */
+    renderScriptSearch: RenderScheduleScriptSearch;
+    /** The "Scheduled Scripts" heading over the cards. Default true. */
+    showHeading?: boolean;
+    /** Each card's arguments and environment variables. Default true; false is one row per card. */
+    showScriptParams?: boolean;
+    /** Offer "Add Script" (several scripts in one schedule). Default true. */
+    addScripts?: boolean;
+}
+/**
+ * "Scheduled Scripts" — the ordered list of script cards. Card order IS the run
+ * order: it is submitted as `scriptIds` verbatim, so a reorder is a real,
+ * persisted change.
+ *
+ * Reordering runs on the core library's `SortableList` (Pragmatic drag and
+ * drop): drag on desktop, an up/down button pair per card on touch/narrow
+ * viewports, where no DnD is initialized at all. The list owns the live-region
+ * announcements (`getItemLabel`) and the keyboard path on the handle.
+ */
+export declare function ScheduleScriptsField({ showErrors, disabled, renderScriptSearch, showHeading, showScriptParams, addScripts, }: ScheduleScriptsFieldProps): import("react").JSX.Element;
+//# sourceMappingURL=schedule-scripts-field.d.ts.map

package/dist/components/features/scripts/schedule-form/schedule-scripts-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schedule-scripts-field.d.ts","sourceRoot":"","sources":["../../../../../src/components/features/scripts/schedule-form/schedule-scripts-field.tsx"],"names":[],"mappings":"AAOA,OAAO,EAEL,KAAK,0BAA0B,EAEhC,MAAM,uBAAuB,CAAC;AAG/B,MAAM,WAAW,yBAAyB;IACxC,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8CAA8C;IAC9C,kBAAkB,EAAE,0BAA0B,CAAC;IAC/C,oEAAoE;IACpE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gGAAgG;IAChG,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,0EAA0E;IAC1E,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;;;GASG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,UAAU,EACV,QAAgB,EAChB,kBAAkB,EAClB,WAAkB,EAClB,gBAAuB,EACvB,UAAiB,GAClB,EAAE,yBAAyB,+BAoD3B"}

package/dist/components/features/scripts/schedule-form/schedule-scripts-field.js

@@ -0,0 +1,66 @@
+"use client";
+"use no memo";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useFieldArray, useFormContext, useWatch } from "react-hook-form";
+import { PlusCircleIcon } from "../../../icons-v2-generated/signs-and-symbols/plus-circle-icon.js";
+import { Button } from "../../../ui/button/index.js";
+import { SortableList } from "../../sortable-list/sortable-list.js";
+import {
+  EMPTY_SCHEDULE_SCRIPT_ROW
+} from "./schedule-form-types.js";
+import { ScheduleScriptPickerCard } from "./schedule-script-picker-card.js";
+function ScheduleScriptsField({
+  showErrors,
+  disabled = false,
+  renderScriptSearch,
+  showHeading = true,
+  showScriptParams = true,
+  addScripts = true
+}) {
+  const { control, getValues } = useFormContext();
+  const { fields, append, remove, move } = useFieldArray({ control, name: "scripts" });
+  const supportedPlatforms = useWatch({ control, name: "supportedPlatforms" });
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--spacing-system-lf)]", children: [
+    showHeading && /* @__PURE__ */ jsx("div", { className: "flex min-h-[72px] items-end pt-[var(--spacing-system-l)]", children: /* @__PURE__ */ jsx("h2", { className: "text-ods-text-primary text-h2", children: "Scheduled Scripts" }) }),
+    /* @__PURE__ */ jsx(
+      SortableList,
+      {
+        onReorder: move,
+        disabled,
+        getItemLabel: (index) => getValues(`scripts.${index}.name`) || `script ${index + 1}`,
+        className: "flex flex-col gap-[var(--spacing-system-lf)]",
+        children: fields.map((field, index) => /* @__PURE__ */ jsx(
+          ScheduleScriptPickerCard,
+          {
+            index,
+            count: fields.length,
+            supportedPlatforms,
+            renderScriptSearch,
+            onRemove: () => remove(index),
+            canRemove: fields.length > 1,
+            disabled,
+            showErrors,
+            showParams: showScriptParams
+          },
+          field.id
+        ))
+      }
+    ),
+    addScripts && /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: "small",
+        onClick: () => append(EMPTY_SCHEDULE_SCRIPT_ROW),
+        disabled,
+        className: "self-start",
+        leftIcon: /* @__PURE__ */ jsx(PlusCircleIcon, { className: "text-ods-text-secondary" }),
+        children: "Add Script"
+      }
+    )
+  ] });
+}
+export {
+  ScheduleScriptsField
+};

package/dist/components/features/scripts/schedule-form/schedule-timing-fields.d.ts

@@ -0,0 +1,77 @@
+import type { ScheduleTimeReference } from './schedule-enums';
+import { type ScheduleFormGate, type ScheduleTimeSlot } from './schedule-form-types';
+export interface ScheduleTimingFieldsProps {
+    showErrors: boolean;
+    disabled?: boolean;
+    /**
+     * Whether the Timezone picker is offered. It is a layout switch (it turns one
+     * row into two), so a host that reads it from a flag passes the flag's GATE.
+     * Default `off`.
+     */
+    timeReferenceGate?: ScheduleFormGate;
+    /**
+     * The Time dropdown's options for a picked day and reading. Default
+     * `getTimeSlotOptions`: the viewer's own clock and locale. A picture of the
+     * form passes fixed readings, so a server and a browser draw the same one.
+     */
+    getTimeSlots?: (date: Date | null, timeReference: ScheduleTimeReference) => ScheduleTimeSlot[];
+}
+/**
+ * Date | Time | Timezone | Repeat | Repeat in — the timing a DATE_TIME schedule
+ * fires on.
+ *
+ * `scheduledDate` + `scheduledTime` combine into the backend's `startAt` (30-min
+ * boundary, enforced by the Time slots) and are both required; the repeat toggle
+ * + interval + unit become `repeat` seconds.
+ *
+ * **Timezone** (`timeReference`, design node 793:61340) says what that pair
+ * MEANS — the account's clock (SERVER, one instant worldwide) or each device's
+ * (DEVICE_LOCAL, one reading re-based per device). It is behind the
+ * host's `timeReferenceGate` (the product's `script-schedule-device-time`
+ * flag), and it is the field that makes this a
+ * five-control row: with the picker on, the design wraps Repeat onto a second
+ * line, which is why the row is a 4-column GRID rather than the flex row it
+ * used to be — the wrap is then a `col-start-1` on one cell instead of a second
+ * layout.
+ *
+ * Recurrence stays OFFERED for DEVICE_LOCAL — "every day at 9 AM on each
+ * device's own clock" is the reason the reading exists — even though the API
+ * refuses it today ("A DEVICE_LOCAL schedule does not support repeat **yet**",
+ * `ScheduleScriptService.validateTiming`). Saving one is answered by that
+ * message in the error toast until the backend drops the check; nothing here
+ * has to change when it does. Its offline setting is refused the same way and
+ * IS hidden, because that one is not merely unimplemented: the device-local
+ * runner already retries on reconnect within its catch-up window, so the
+ * setting would have nothing to add — see `ScheduleOfflineFields`.
+ *
+ * What it does NOT constrain is the clock. The picked pair is a wall clock every
+ * device reads on its own timezone, so the viewer's "already gone by" says
+ * nothing about the fleet's: all 48 slots stay offered, the past-start rule is
+ * off, and the only bound left is the day one (`earliestScheduleDay` — today as
+ * read in UTC−12). The API validates no start against the past either, for
+ * either reading.
+ *
+ * Only DATE_TIME schedules have timing, so the row collapses when the event
+ * trigger is picked. It stays MOUNTED (a toggle back restores what was typed)
+ * and animates with the `0fr → 1fr` grid-rows technique — the portable way to
+ * transition to an intrinsic height, since `interpolate-size` / `calc-size()`
+ * still aren't cross-browser. `inert` drops the collapsed fields out of the tab
+ * order and the accessibility tree.
+ *
+ * The `overflow-hidden` the technique requires also clips anything hanging below
+ * the fields — and field errors are absolutely positioned there (out of flow, so
+ * showing one never reflows the form). The bottom padding is the room they render
+ * into; the constant negative margin cancels it again, so the spacing below the
+ * row is unchanged and a COLLAPSED row leaves no 24px hole.
+ *
+ * That padding sits on the field row INSIDE the clipping box, not on the box
+ * itself, and the difference is load-bearing: a box is never shorter than its own
+ * padding — `border-box` does not change that, it only decides what a specified
+ * height includes — so padding on the grid item survives the 0fr track as 24px of
+ * residue. The negative margin then spends itself cancelling that instead of
+ * closing the section gap, and the collapsed row leaves the hole this was written
+ * to avoid. Nested one level down it is clipped like everything else, and the row
+ * measures 0.
+ */
+export declare function ScheduleTimingFields({ showErrors, disabled, timeReferenceGate, getTimeSlots, }: ScheduleTimingFieldsProps): import("react").JSX.Element;
+//# sourceMappingURL=schedule-timing-fields.d.ts.map

package/dist/components/features/scripts/schedule-form/schedule-timing-fields.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schedule-timing-fields.d.ts","sourceRoot":"","sources":["../../../../../src/components/features/scripts/schedule-form/schedule-timing-fields.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAGL,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACtB,MAAM,uBAAuB,CAAC;AAkB/B,MAAM,WAAW,yBAAyB;IACxC,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,gBAAgB,CAAC;IACrC;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE,aAAa,EAAE,qBAAqB,KAAK,gBAAgB,EAAE,CAAC;CAChG;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,UAAU,EACV,QAAgB,EAChB,iBAAyB,EACzB,YAAiC,GAClC,EAAE,yBAAyB,+BA+W3B"}

package/dist/components/features/scripts/schedule-form/schedule-timing-fields.js

@@ -0,0 +1,262 @@
+"use client";
+"use no memo";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { Controller, useFormContext, useWatch } from "react-hook-form";
+import { cn } from "../../../../utils/cn.js";
+import { XmarkCircleIcon } from "../../../icons-v2-generated/signs-and-symbols/xmark-circle-icon.js";
+import { CheckboxBlock } from "../../../ui/checkbox-block.js";
+import { DatePickerInputSimple } from "../../../ui/date-picker.js";
+import { Label } from "../../../ui/label.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../ui/select.js";
+import {
+  SCHEDULE_TIME_REFERENCE_OPTIONS
+} from "./schedule-form-types.js";
+import { ScheduleIntervalInput } from "./schedule-interval-input.js";
+import {
+  DURATION_UNIT_OPTIONS,
+  earliestScheduleDay,
+  getTimeSlotOptions,
+  isEventTrigger,
+  isScheduleStartInPast,
+  isSlotOnGrid,
+  isStartInPastAndChanged,
+  MIN_REPEAT_MINUTES,
+  NO_SLOTS_TODAY_MESSAGE,
+  PAST_START_MESSAGE,
+  slotToLabel,
+  snapRepeatInterval
+} from "./schedule-timing.js";
+function ScheduleTimingFields({
+  showErrors,
+  disabled = false,
+  timeReferenceGate = "off",
+  getTimeSlots = getTimeSlotOptions
+}) {
+  const { control, getValues, setValue, trigger: triggerValidation } = useFormContext();
+  const showTimeReference = timeReferenceGate === "on";
+  const fieldsDisabled = disabled || timeReferenceGate === "loading";
+  const recheckReconnectWindow = useCallback(() => {
+    if (showErrors) void triggerValidation("reconnectInterval");
+  }, [showErrors, triggerValidation]);
+  const trigger = useWatch({ control, name: "trigger" });
+  const repeatEnabled = useWatch({ control, name: "repeatEnabled" });
+  const repeatUnit = useWatch({ control, name: "repeatUnit" });
+  const scheduledDate = useWatch({ control, name: "scheduledDate" });
+  const scheduledTime = useWatch({ control, name: "scheduledTime" });
+  const timeReference = useWatch({ control, name: "timeReference" });
+  const eventDriven = isEventTrigger(trigger);
+  const intervalStep = repeatUnit === "minute" ? MIN_REPEAT_MINUTES : 1;
+  const timeSlots = useMemo(() => {
+    const slots = getTimeSlots(scheduledDate, timeReference);
+    if (!scheduledTime || slots.some((slot) => slot.value === scheduledTime)) return slots;
+    return [{ value: scheduledTime, label: slotToLabel(scheduledTime) }, ...slots];
+  }, [getTimeSlots, scheduledDate, scheduledTime, timeReference]);
+  const minDate = useMemo(() => earliestScheduleDay(timeReference), [timeReference]);
+  const handleDateChange = useCallback(
+    (onChange, date) => {
+      onChange(date);
+      const time = getValues("scheduledTime");
+      if (date && time && date >= minDate && isScheduleStartInPast(date, time, getValues("timeReference")))
+        setValue("scheduledTime", "");
+    },
+    [getValues, setValue, minDate]
+  );
+  const handleTimeReferenceChange = useCallback(
+    (onChange, next) => {
+      onChange(next);
+      const time = getValues("scheduledTime");
+      if (time && !isSlotOnGrid(time, next)) setValue("scheduledTime", "");
+    },
+    [getValues, setValue]
+  );
+  const startAtStored = useWatch({ control, name: "startAtStored" });
+  const startsInPast = !eventDriven && isStartInPastAndChanged(scheduledDate, scheduledTime, startAtStored, timeReference);
+  const pastDateError = startsInPast && scheduledDate && scheduledDate < minDate ? PAST_START_MESSAGE : void 0;
+  const pastTimeError = startsInPast && !pastDateError ? PAST_START_MESSAGE : void 0;
+  const noSlotsLeftToday = !eventDriven && timeSlots.length === 0;
+  const dateError = pastDateError ?? (noSlotsLeftToday ? NO_SLOTS_TODAY_MESSAGE : void 0);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      inert: eventDriven,
+      style: {
+        gridTemplateRows: eventDriven ? "0fr" : "1fr",
+        opacity: eventDriven ? 0 : 1
+      },
+      className: "mb-[calc(-1*var(--spacing-system-lf))] grid transition-[grid-template-rows,opacity] duration-200 ease-out motion-reduce:transition-none",
+      children: /* @__PURE__ */ jsx("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-[var(--spacing-system-lf)] pb-[var(--spacing-system-lf)] content-md:grid-cols-4 content-md:items-end", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-[var(--spacing-system-xxs)]", children: [
+          /* @__PURE__ */ jsx(Label, { className: "text-h4", children: "Date" }),
+          /* @__PURE__ */ jsx(
+            Controller,
+            {
+              name: "scheduledDate",
+              control,
+              render: ({ field, fieldState }) => (
+                // The core picker has no clear affordance, so the design's xmark
+                // rides on top of the trigger's free right edge.
+                /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+                  /* @__PURE__ */ jsx(
+                    DatePickerInputSimple,
+                    {
+                      placeholder: "Select date",
+                      value: field.value ?? void 0,
+                      onChange: (date) => handleDateChange(field.onChange, date ?? null),
+                      fromDate: minDate,
+                      disabled: fieldsDisabled,
+                      className: "w-full",
+                      error: dateError ?? (showErrors ? fieldState.error?.message : void 0),
+                      invalid: !!dateError || showErrors && !!fieldState.error
+                    }
+                  ),
+                  field.value && !fieldsDisabled && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => field.onChange(null),
+                      "aria-label": "Clear date",
+                      className: "absolute right-3 top-6 -translate-y-1/2 text-ods-text-secondary hover:text-ods-text-primary",
+                      children: /* @__PURE__ */ jsx(XmarkCircleIcon, { size: 24 })
+                    }
+                  )
+                ] })
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-[var(--spacing-system-xxs)]", children: [
+          /* @__PURE__ */ jsx(Label, { className: "text-h4", children: "Time" }),
+          /* @__PURE__ */ jsx(
+            Controller,
+            {
+              name: "scheduledTime",
+              control,
+              render: ({ field, fieldState }) => (
+                // `''` reads as "no selection" to Radix, so the placeholder shows
+                // until a slot is picked — a date at midnight no longer
+                // masquerades as a chosen 12:00 AM.
+                /* @__PURE__ */ jsxs(Select, { value: field.value, onValueChange: field.onChange, disabled: fieldsDisabled, children: [
+                  /* @__PURE__ */ jsx(
+                    SelectTrigger,
+                    {
+                      className: "w-full",
+                      error: pastTimeError ?? (showErrors ? fieldState.error?.message : void 0),
+                      invalid: !!pastTimeError || showErrors && !!fieldState.error,
+                      children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select time" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(SelectContent, { children: timeSlots.length === 0 ? (
+                    // Deliberately NOT a `SelectItem` — there is nothing here
+                    // to select, and a selectable row would put a bogus value
+                    // in the form. It replaces a popup that opened blank; the
+                    // Date field carries the same sentence for whoever never
+                    // opens this one.
+                    /* @__PURE__ */ jsx("p", { className: "px-4 py-[var(--spacing-system-sf)] text-ods-text-secondary text-h6", children: NO_SLOTS_TODAY_MESSAGE })
+                  ) : timeSlots.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
+                ] })
+              )
+            }
+          )
+        ] }),
+        showTimeReference && /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-[var(--spacing-system-xxs)]", children: [
+          /* @__PURE__ */ jsx(Label, { className: "text-h4", children: "Timezone" }),
+          /* @__PURE__ */ jsx(
+            Controller,
+            {
+              name: "timeReference",
+              control,
+              render: ({ field }) => /* @__PURE__ */ jsxs(
+                Select,
+                {
+                  value: field.value,
+                  onValueChange: (next) => handleTimeReferenceChange(field.onChange, next),
+                  disabled: fieldsDisabled,
+                  children: [
+                    /* @__PURE__ */ jsx(SelectTrigger, { className: "w-full", "aria-label": "Timezone", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                    /* @__PURE__ */ jsx(SelectContent, { children: SCHEDULE_TIME_REFERENCE_OPTIONS.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
+                  ]
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: cn("min-w-0", showTimeReference && "content-md:col-start-1"), children: /* @__PURE__ */ jsx(
+          Controller,
+          {
+            name: "repeatEnabled",
+            control,
+            render: ({ field }) => /* @__PURE__ */ jsx(
+              CheckboxBlock,
+              {
+                label: "Repeat Script Run",
+                checked: field.value,
+                onCheckedChange: (next) => {
+                  field.onChange(next);
+                  recheckReconnectWindow();
+                },
+                disabled: fieldsDisabled,
+                className: "w-full"
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-end gap-[var(--spacing-system-xs)]", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-xxs)]", children: [
+            /* @__PURE__ */ jsx(Label, { className: "text-h4", children: "Repeat in" }),
+            /* @__PURE__ */ jsx(
+              Controller,
+              {
+                name: "repeatInterval",
+                control,
+                render: ({ field, fieldState }) => /* @__PURE__ */ jsx(
+                  ScheduleIntervalInput,
+                  {
+                    min: intervalStep,
+                    className: "w-full",
+                    value: field.value,
+                    onChange: field.onChange,
+                    onBlur: () => {
+                      field.onBlur();
+                      recheckReconnectWindow();
+                    },
+                    disabled: fieldsDisabled || !repeatEnabled,
+                    error: showErrors ? fieldState.error?.message : void 0,
+                    invalid: showErrors && !!fieldState.error
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(
+            Controller,
+            {
+              name: "repeatUnit",
+              control,
+              render: ({ field }) => /* @__PURE__ */ jsxs(
+                Select,
+                {
+                  value: field.value,
+                  onValueChange: (next) => {
+                    field.onChange(next);
+                    const snapped = snapRepeatInterval(getValues("repeatInterval"), next);
+                    if (snapped !== getValues("repeatInterval")) setValue("repeatInterval", snapped);
+                    recheckReconnectWindow();
+                  },
+                  disabled: fieldsDisabled || !repeatEnabled,
+                  children: [
+                    /* @__PURE__ */ jsx(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                    /* @__PURE__ */ jsx(SelectContent, { children: DURATION_UNIT_OPTIONS.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
+                  ]
+                }
+              )
+            }
+          ) })
+        ] })
+      ] }) })
+    }
+  );
+}
+export {
+  ScheduleTimingFields
+};