stimeo-ui 0.1.0.pre.alpha.1

data/dist/controllers/breadcrumb_controller.js

@@ -0,0 +1,123 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/breadcrumb_controller.ts
+
+// src/utils/layout_observer.ts
+var LayoutObserver = class {
+  #callback;
+  #resizeObserverFactory;
+  #resizeObserver = null;
+  #observingViewport = false;
+  /** Stable bound handler so add/removeEventListener target the same reference. */
+  #handleViewportResize = () => {
+    this.#callback();
+  };
+  constructor(callback, options = {}) {
+    this.#callback = callback;
+    this.#resizeObserverFactory = options.resizeObserverFactory ?? (typeof ResizeObserver === "undefined" ? null : (cb) => new ResizeObserver(cb));
+  }
+  /**
+   * Starts observing an element's size. Repeated calls observe additional
+   * elements through the same shared observer. No-ops when no
+   * `ResizeObserver` implementation is available.
+   */
+  observe(element) {
+    if (!this.#resizeObserverFactory) return;
+    if (!this.#resizeObserver) {
+      this.#resizeObserver = this.#resizeObserverFactory(() => {
+        this.#callback();
+      });
+    }
+    this.#resizeObserver.observe(element);
+  }
+  /** Stops observing a single element while leaving any others in place. */
+  unobserve(element) {
+    this.#resizeObserver?.unobserve(element);
+  }
+  /** Starts observing viewport resizes. Idempotent: the listener is added once. */
+  observeViewport() {
+    if (this.#observingViewport) return;
+    this.#observingViewport = true;
+    window.addEventListener("resize", this.#handleViewportResize);
+  }
+  /** Stops observing viewport resizes without affecting element observation. */
+  unobserveViewport() {
+    if (!this.#observingViewport) return;
+    this.#observingViewport = false;
+    window.removeEventListener("resize", this.#handleViewportResize);
+  }
+  /**
+   * Releases every observation: disconnects the {@link ResizeObserver} and
+   * removes the viewport listener. Safe to call multiple times. Call this from a
+   * controller's `disconnect()`.
+   */
+  disconnect() {
+    this.#resizeObserver?.disconnect();
+    this.#resizeObserver = null;
+    this.unobserveViewport();
+  }
+};
+
+// src/controllers/breadcrumb_controller.ts
+var BreadcrumbController = class extends Controller {
+  static targets = ["list", "collapsible", "ellipsis", "trigger"];
+  static actions = ["toggle"];
+  static events = ["toggle"];
+  /** Whether the trail currently overflows its container. */
+  #overflowing = false;
+  /** Whether the user has expanded the collapsed items via the disclosure. */
+  #expanded = false;
+  #layout = new LayoutObserver(() => this.#update());
+  /** Starts observing for overflow and renders the initial state. */
+  connect() {
+    if (this.hasListTarget) this.#layout.observe(this.listTarget);
+    this.#layout.observeViewport();
+    this.#update();
+  }
+  /** Releases the resize observation (Turbo navigation included). */
+  disconnect() {
+    this.#layout.disconnect();
+  }
+  /** Expands or re-collapses the trail and dispatches `toggle`. */
+  toggle() {
+    this.#expanded = !this.#expanded;
+    this.#render();
+    this.dispatch("toggle", { detail: { expanded: this.#expanded } });
+  }
+  /** Re-measures overflow and re-renders (e.g. on resize). */
+  #update() {
+    this.#overflowing = this.#measureOverflow();
+    if (!this.#overflowing) this.#expanded = false;
+    this.#render();
+  }
+  /**
+   * Measures overflow against the **fully expanded** layout so hiding items does
+   * not make the condition oscillate. Reveals every item, then compares the list's
+   * own scroll width to its own client width; `#render` immediately re-applies
+   * the correct hidden state afterward.
+   *
+   * Both widths are read from the list element itself (not the host `nav`) so the
+   * check is independent of any padding/border on the host — comparing against the
+   * host's `clientWidth` would over-report the available space by its padding and
+   * miss real overflow in a padded container.
+   */
+  #measureOverflow() {
+    if (!this.hasListTarget) return false;
+    for (const item of this.collapsibleTargets) item.hidden = false;
+    if (this.hasEllipsisTarget) this.ellipsisTarget.hidden = true;
+    return this.listTarget.scrollWidth > this.listTarget.clientWidth;
+  }
+  /** Applies the collapsed/expanded state to the items, ellipsis, and trigger. */
+  #render() {
+    const collapsed = this.#overflowing && !this.#expanded;
+    for (const item of this.collapsibleTargets) item.hidden = collapsed;
+    if (this.hasEllipsisTarget) this.ellipsisTarget.hidden = !this.#overflowing;
+    if (this.hasTriggerTarget) {
+      this.triggerTarget.setAttribute("aria-expanded", this.#expanded ? "true" : "false");
+    }
+  }
+};
+
+export { BreadcrumbController };
+//# sourceMappingURL=breadcrumb_controller.js.map
+//# sourceMappingURL=breadcrumb_controller.js.map

data/dist/controllers/bulk_select_controller.js

@@ -0,0 +1,104 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/bulk_select_controller.ts
+var BulkSelectController = class extends Controller {
+  static targets = ["all", "item", "bar", "count", "selectAllPages"];
+  static values = {
+    totalCount: { type: Number, default: 0 },
+    announce: { type: Boolean, default: true }
+  };
+  static actions = ["clear", "selectAllPages"];
+  static events = ["change"];
+  /** All-pages mode is a transient UI state; mirrored to `data-all-pages` so it
+   *  survives a Turbo swap and `connect()` can rehydrate it. */
+  #allPagesMode = false;
+  /** Last emitted figures, so a recompute dispatches `change` only on real change. */
+  #lastCount = -1;
+  #lastAllPages = false;
+  /** Delegated `change` handler covering the select-all box and every row. */
+  #onChange = (event) => {
+    const target = event.target;
+    if (!target) return;
+    if (this.hasAllTarget && target === this.allTarget) {
+      this.#applyAll();
+    } else if (target.matches('[data-stimeo--bulk-select-target="item"]')) {
+      this.#exitAllPages();
+      this.#recompute(true);
+    }
+  };
+  connect() {
+    this.#allPagesMode = this.element.dataset.allPages === "true";
+    this.element.addEventListener("change", this.#onChange);
+    this.#recompute(false);
+  }
+  disconnect() {
+    this.element.removeEventListener("change", this.#onChange);
+  }
+  /** Clears every selection (rows + select-all) and exits all-pages mode. */
+  clear() {
+    for (const item of this.#items) item.checked = false;
+    if (this.hasAllTarget) {
+      this.allTarget.checked = false;
+      this.allTarget.indeterminate = false;
+    }
+    this.#exitAllPages();
+    this.#recompute(true);
+  }
+  /** Enters "select all across pages" mode (count shows `totalCount`). */
+  selectAllPages() {
+    this.#allPagesMode = true;
+    this.#recompute(true);
+  }
+  /** Mirrors the select-all box to every row, then recomputes. */
+  #applyAll() {
+    if (!this.hasAllTarget) return;
+    const { checked } = this.allTarget;
+    for (const item of this.#items) item.checked = checked;
+    this.#exitAllPages();
+    this.#recompute(true);
+  }
+  #exitAllPages() {
+    this.#allPagesMode = false;
+  }
+  /**
+   * Recomputes the count, the select-all checked/indeterminate state, and the bar
+   * visibility from the current DOM. Dispatches `change` (when `notify`) only if
+   * the emitted count or all-pages flag actually changed.
+   */
+  #recompute(notify) {
+    const items = this.#items;
+    const total = items.length;
+    const checked = items.filter((item) => item.checked).length;
+    const allPages = this.#allPagesMode;
+    if (this.hasAllTarget) {
+      this.allTarget.checked = total > 0 && checked === total;
+      this.allTarget.indeterminate = checked > 0 && checked < total;
+    }
+    const count = allPages ? this.totalCountValue : checked;
+    const show = allPages || checked > 0;
+    if (this.hasBarTarget) {
+      this.barTarget.hidden = !show;
+      this.barTarget.setAttribute("aria-live", this.announceValue ? "polite" : "off");
+    }
+    if (this.hasCountTarget) this.countTarget.textContent = String(count);
+    this.element.setAttribute("data-selected-count", String(checked));
+    if (allPages) this.element.setAttribute("data-all-pages", "true");
+    else this.element.removeAttribute("data-all-pages");
+    const changed = count !== this.#lastCount || allPages !== this.#lastAllPages;
+    this.#lastCount = count;
+    this.#lastAllPages = allPages;
+    if (notify && changed) {
+      this.dispatch("change", { detail: { count, allPages } });
+    }
+  }
+  /** Live list of row checkboxes, queried from the DOM so dynamic rows count. */
+  get #items() {
+    return Array.from(
+      this.element.querySelectorAll('[data-stimeo--bulk-select-target="item"]')
+    );
+  }
+};
+
+export { BulkSelectController };
+//# sourceMappingURL=bulk_select_controller.js.map
+//# sourceMappingURL=bulk_select_controller.js.map

data/dist/controllers/calendar_controller.js

@@ -0,0 +1,394 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/calendar_controller.ts
+
+// src/utils/dates.ts
+function toISODateString(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 parseISODateString(dateStr) {
+  if (!dateStr) return null;
+  const match = dateStr.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+  if (!match) return null;
+  const [, y, m, d] = match;
+  const year = Number(y);
+  const month = Number(m);
+  const day = Number(d);
+  const date = new Date(year, month - 1, day);
+  if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) {
+    return null;
+  }
+  return date;
+}
+function parseISOMonthString(monthStr) {
+  if (!monthStr) return null;
+  const match = monthStr.match(/^(\d{4})-(\d{2})$/);
+  if (!match) return null;
+  const [, y, m] = match;
+  const month = Number(m);
+  if (month < 1 || month > 12) return null;
+  return { year: Number(y), month };
+}
+
+// src/utils/safe_timeout.ts
+var TimerRegistry = class {
+  /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */
+  ids = /* @__PURE__ */ new Set();
+  /**
+   * Cancels a single tracked timer.
+   *
+   * No-ops if the id is unknown (already cleared, fired, or never owned by this
+   * registry), so callers can clear defensively without guarding.
+   */
+  clear(id) {
+    if (this.ids.delete(id)) {
+      this.cancel(id);
+    }
+  }
+  /**
+   * Cancels every tracked timer. Call this from a controller's `disconnect()`
+   * to guarantee no timer outlives the element.
+   */
+  clearAll() {
+    for (const id of this.ids) {
+      this.cancel(id);
+    }
+    this.ids.clear();
+  }
+  /** Number of timers currently tracked (pending). */
+  get size() {
+    return this.ids.size;
+  }
+};
+var SafeTimeout = class extends TimerRegistry {
+  /**
+   * Schedules `callback` after `delay` ms and returns the timer id.
+   *
+   * The id is removed from the registry automatically when the timeout fires,
+   * so {@link TimerRegistry.size | size} reflects only still-pending timers.
+   */
+  set(callback, delay) {
+    const id = this.schedule(() => {
+      this.ids.delete(id);
+      callback();
+    }, delay);
+    this.ids.add(id);
+    return id;
+  }
+  schedule(callback, delay) {
+    return window.setTimeout(callback, delay);
+  }
+  cancel(id) {
+    window.clearTimeout(id);
+  }
+};
+
+// src/controllers/calendar_controller.ts
+var CalendarController = class extends Controller {
+  static targets = ["label", "grid", "day"];
+  static values = {
+    month: { type: String, default: "" },
+    selected: { type: String, default: "" },
+    min: { type: String, default: "" },
+    max: { type: String, default: "" },
+    weekStart: { type: Number, default: 0 }
+    // 0 = Sunday, 1 = Monday, etc.
+  };
+  static actions = ["next", "onKeydown", "prev", "selectByClick"];
+  static events = ["monthchange", "select"];
+  /** The date currently receiving focus in the grid (local time). */
+  focusedDate = /* @__PURE__ */ new Date();
+  /**
+   * Deferred focus moves scheduled after an asynchronous month transition.
+   * Tracked so {@link disconnect} can cancel any pending move and a detached
+   * controller never steals focus after the element leaves the DOM (Turbo).
+   */
+  #focusTimer = new SafeTimeout();
+  connect() {
+    if (!this.monthValue) {
+      const today = /* @__PURE__ */ new Date();
+      const monthStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, "0")}`;
+      this.monthValue = monthStr;
+      return;
+    }
+    this.#initializeFocusedDate();
+    this.render();
+  }
+  /** Cancels any pending deferred focus so it never fires on a detached element. */
+  disconnect() {
+    this.#focusTimer.clearAll();
+  }
+  /**
+   * Stimulus lifecycle callback triggered automatically when the monthValue changes.
+   * Forces a re-render of the date grid and updates labels.
+   */
+  monthValueChanged() {
+    if (!this.monthValue) return;
+    this.#syncFocusedDateWithMonth();
+    this.render();
+    this.dispatch("monthchange", { detail: { month: this.monthValue } });
+  }
+  /**
+   * Stimulus lifecycle callback triggered automatically when the selectedValue changes.
+   * Re-renders grid cells to update `aria-selected` indicators.
+   */
+  selectedValueChanged() {
+    if (this.selectedValue) {
+      const selected = parseISODateString(this.selectedValue);
+      if (selected) {
+        this.focusedDate = selected;
+      }
+    }
+    this.render();
+  }
+  /** Navigates to the previous month. */
+  prev(event) {
+    if (event) event.preventDefault();
+    this.#shiftMonth(-1);
+  }
+  /** Navigates to the next month. */
+  next(event) {
+    if (event) event.preventDefault();
+    this.#shiftMonth(1);
+  }
+  /** Handles day selection when a gridcell is clicked. */
+  selectByClick(event) {
+    const target = event.target;
+    if (!target) return;
+    const dayElement = target.closest("[data-stimeo--calendar-target='day']");
+    if (!dayElement) return;
+    this.selectDayElement(dayElement);
+  }
+  /** Handles grid cell keyboard navigation and triggers selection. */
+  onKeydown(event) {
+    const target = event.target;
+    if (!target) return;
+    const dayElement = target.closest("[data-stimeo--calendar-target='day']");
+    if (!dayElement) return;
+    const dateStr = dayElement.getAttribute("data-date");
+    if (!dateStr) return;
+    const date = parseISODateString(dateStr);
+    if (!date) return;
+    let handled = true;
+    let nextDate = new Date(date);
+    switch (event.key) {
+      case "ArrowLeft":
+        nextDate.setDate(nextDate.getDate() - 1);
+        break;
+      case "ArrowRight":
+        nextDate.setDate(nextDate.getDate() + 1);
+        break;
+      case "ArrowUp":
+        nextDate.setDate(nextDate.getDate() - 7);
+        break;
+      case "ArrowDown":
+        nextDate.setDate(nextDate.getDate() + 7);
+        break;
+      case "PageUp":
+        if (event.shiftKey) {
+          nextDate = this.#calculateShiftedYearDate(date, -1);
+        } else {
+          nextDate = this.#calculateShiftedMonthDate(date, -1);
+        }
+        break;
+      case "PageDown":
+        if (event.shiftKey) {
+          nextDate = this.#calculateShiftedYearDate(date, 1);
+        } else {
+          nextDate = this.#calculateShiftedMonthDate(date, 1);
+        }
+        break;
+      case "Home":
+        nextDate = this.#getStartOfWeekDate(date);
+        break;
+      case "End":
+        nextDate = this.#getEndOfWeekDate(date);
+        break;
+      case "t":
+      case "T": {
+        const now = /* @__PURE__ */ new Date();
+        nextDate = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+        break;
+      }
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        this.selectDayElement(dayElement);
+        return;
+      default:
+        handled = false;
+        break;
+    }
+    if (handled) {
+      event.preventDefault();
+      this.#focusAndNavigateToDate(nextDate);
+    }
+  }
+  /** Renders the grid days and updates the month/year label. */
+  render() {
+    const monthInfo = parseISOMonthString(this.monthValue);
+    if (!monthInfo) return;
+    const { year, month } = monthInfo;
+    if (this.hasLabelTarget) {
+      const lang = document.documentElement.lang || "en";
+      const labelDate = new Date(year, month - 1, 1);
+      const formatter = new Intl.DateTimeFormat(lang, { month: "long", year: "numeric" });
+      this.labelTarget.textContent = formatter.format(labelDate);
+    }
+    const days = this.#calculateGridDays(year, month);
+    const dayElements = this.dayTargets;
+    for (let i = 0; i < 42; i++) {
+      const el = dayElements[i];
+      if (!el) continue;
+      const date = days[i];
+      if (!date) continue;
+      const dateStr = toISODateString(date);
+      el.setAttribute("data-date", dateStr);
+      el.textContent = String(date.getDate());
+      const isOutside = date.getFullYear() !== year || date.getMonth() !== month - 1;
+      el.setAttribute("data-outside", String(isOutside));
+      const todayStr = toISODateString(/* @__PURE__ */ new Date());
+      el.setAttribute("data-today", String(dateStr === todayStr));
+      const isSelected = dateStr === this.selectedValue;
+      el.setAttribute("aria-selected", String(isSelected));
+      const isFocused = toISODateString(this.focusedDate) === dateStr;
+      el.setAttribute("tabindex", isFocused ? "0" : "-1");
+      const isDisabled = this.#isDateOutOfBounds(dateStr);
+      if (isDisabled) {
+        el.setAttribute("aria-disabled", "true");
+      } else {
+        el.removeAttribute("aria-disabled");
+      }
+    }
+  }
+  selectDayElement(dayElement) {
+    if (dayElement.getAttribute("aria-disabled") === "true") return;
+    const dateStr = dayElement.getAttribute("data-date");
+    if (!dateStr) return;
+    this.selectedValue = dateStr;
+    const selected = parseISODateString(dateStr);
+    if (selected) this.focusedDate = selected;
+    this.render();
+    this.dispatch("select", { detail: { date: dateStr } });
+  }
+  #focusAndNavigateToDate(date) {
+    this.focusedDate = date;
+    const targetMonthStr = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}`;
+    const isMonthTransition = targetMonthStr !== this.monthValue;
+    if (isMonthTransition) {
+      this.monthValue = targetMonthStr;
+    } else {
+      this.render();
+    }
+    const focusTarget = () => {
+      const dateStr = toISODateString(date);
+      const targetEl = this.dayTargets.find((el) => el.getAttribute("data-date") === dateStr);
+      targetEl?.focus();
+    };
+    if (isMonthTransition) {
+      this.#focusTimer.set(focusTarget, 0);
+    } else {
+      focusTarget();
+    }
+  }
+  #isDateOutOfBounds(dateStr) {
+    if (this.minValue && dateStr < this.minValue) return true;
+    if (this.maxValue && dateStr > this.maxValue) return true;
+    return false;
+  }
+  #shiftMonth(delta) {
+    const monthInfo = parseISOMonthString(this.monthValue);
+    if (!monthInfo) return;
+    const nextMonthDate = new Date(monthInfo.year, monthInfo.month - 1 + delta, 1);
+    this.monthValue = `${nextMonthDate.getFullYear()}-${String(nextMonthDate.getMonth() + 1).padStart(2, "0")}`;
+  }
+  #calculateShiftedMonthDate(baseDate, delta) {
+    const targetDate = new Date(baseDate.getFullYear(), baseDate.getMonth() + delta, 1);
+    const lastDayInTarget = new Date(
+      targetDate.getFullYear(),
+      targetDate.getMonth() + 1,
+      0
+    ).getDate();
+    const clampedDay = Math.min(baseDate.getDate(), lastDayInTarget);
+    targetDate.setDate(clampedDay);
+    return targetDate;
+  }
+  #calculateShiftedYearDate(baseDate, delta) {
+    const targetDate = new Date(baseDate.getFullYear() + delta, baseDate.getMonth(), 1);
+    const lastDayInTarget = new Date(
+      targetDate.getFullYear(),
+      targetDate.getMonth() + 1,
+      0
+    ).getDate();
+    const clampedDay = Math.min(baseDate.getDate(), lastDayInTarget);
+    targetDate.setDate(clampedDay);
+    return targetDate;
+  }
+  #getStartOfWeekDate(date) {
+    const currentDay = date.getDay();
+    const shift = (currentDay - this.weekStartValue + 7) % 7;
+    const target = new Date(date);
+    target.setDate(date.getDate() - shift);
+    return target;
+  }
+  #getEndOfWeekDate(date) {
+    const start = this.#getStartOfWeekDate(date);
+    const target = new Date(start);
+    target.setDate(start.getDate() + 6);
+    return target;
+  }
+  #initializeFocusedDate() {
+    if (this.selectedValue) {
+      const selected = parseISODateString(this.selectedValue);
+      if (selected) {
+        this.focusedDate = selected;
+        return;
+      }
+    }
+    const monthInfo = parseISOMonthString(this.monthValue);
+    if (monthInfo) {
+      const today = /* @__PURE__ */ new Date();
+      if (today.getFullYear() === monthInfo.year && today.getMonth() === monthInfo.month - 1) {
+        this.focusedDate = today;
+      } else {
+        this.focusedDate = new Date(monthInfo.year, monthInfo.month - 1, 1);
+      }
+    }
+  }
+  #syncFocusedDateWithMonth() {
+    const monthInfo = parseISOMonthString(this.monthValue);
+    if (!monthInfo) return;
+    if (this.focusedDate.getFullYear() !== monthInfo.year || this.focusedDate.getMonth() !== monthInfo.month - 1) {
+      const today = /* @__PURE__ */ new Date();
+      if (today.getFullYear() === monthInfo.year && today.getMonth() === monthInfo.month - 1) {
+        this.focusedDate = today;
+      } else {
+        const targetDate = new Date(monthInfo.year, monthInfo.month - 1, 1);
+        const lastDayInTarget = new Date(monthInfo.year, monthInfo.month, 0).getDate();
+        const clampedDay = Math.min(this.focusedDate.getDate(), lastDayInTarget);
+        targetDate.setDate(clampedDay);
+        this.focusedDate = targetDate;
+      }
+    }
+  }
+  #calculateGridDays(year, month) {
+    const firstDay = new Date(year, month - 1, 1);
+    const dayOfWeek = firstDay.getDay();
+    const offset = (dayOfWeek - this.weekStartValue + 7) % 7;
+    const days = [];
+    const current = new Date(firstDay);
+    current.setDate(firstDay.getDate() - offset);
+    for (let i = 0; i < 42; i++) {
+      days.push(new Date(current));
+      current.setDate(current.getDate() + 1);
+    }
+    return days;
+  }
+};
+
+export { CalendarController };
+//# sourceMappingURL=calendar_controller.js.map
+//# sourceMappingURL=calendar_controller.js.map