baldur 0.1.1

data/app/assets/javascripts/baldur/lib/animation-helpers.js

@@ -0,0 +1,56 @@
+/**
+ * Animation & Motion Helpers
+ * Consistent handling of transitions and timing across controllers
+ */
+
+// Fetch motion timing from design tokens
+export const getMotionTimings = () => {
+  try {
+    const computed = window.getComputedStyle(document.documentElement);
+    return {
+      fadeIn: parseFloat(computed.getPropertyValue("--motion-duration-short3")) || 150,
+      fadeOut: parseFloat(computed.getPropertyValue("--motion-duration-short2")) || 75,
+      standard: parseFloat(computed.getPropertyValue("--motion-duration-medium1")) || 300
+    };
+  } catch (error) {
+    return { fadeIn: 150, fadeOut: 75, standard: 300 };
+  }
+};
+
+export const requestFrameCallback = (fn) => {
+  return new Promise((resolve) => {
+    requestAnimationFrame(() => {
+      fn();
+      resolve();
+    });
+  });
+};
+
+export const debounceTimeout = (fn, delay) => {
+  let timeoutId = null;
+  return {
+    call: () => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(fn, delay);
+    },
+    clear: () => clearTimeout(timeoutId),
+    active: () => timeoutId !== null
+  };
+};
+
+export const smoothScroll = (element, options = {}) => {
+  const { behavior = "smooth", block = "nearest" } = options;
+  if (element && typeof element.scrollIntoView === "function") {
+    element.scrollIntoView({ behavior, block });
+  }
+};
+
+export const scheduleAnimation = (element, className, duration, cleanup = false) => {
+  return new Promise((resolve) => {
+    element.classList.add(className);
+    const timeout = setTimeout(() => {
+      if (cleanup) element.classList.remove(className);
+      resolve();
+    }, duration);
+  });
+};

data/app/assets/javascripts/baldur/lib/dom-helpers.js

@@ -0,0 +1,80 @@
+/**
+ * DOM Query & Manipulation Helpers
+ * Reduces boilerplate and centralizes DOM patterns used across controllers
+ */
+
+export const queryAll = (selector, root = document) => {
+  try {
+    return Array.from(root.querySelectorAll(selector));
+  } catch (error) {
+    console.warn(`Invalid selector: ${selector}`, error);
+    return [];
+  }
+};
+
+export const query = (selector, root = document) => {
+  try {
+    return root.querySelector(selector);
+  } catch (error) {
+    console.warn(`Invalid selector: ${selector}`, error);
+    return null;
+  }
+};
+
+export const delegateEvent = (element, eventType, selector, handler) => {
+  element.addEventListener(eventType, (event) => {
+    const target = event.target.closest(selector);
+    if (target && element.contains(target)) {
+      handler.call(target, event);
+    }
+  });
+};
+
+export const setAttrs = (element, attrs) => {
+  if (!element) return;
+  Object.entries(attrs).forEach(([key, value]) => {
+    if (value === null || value === undefined) {
+      element.removeAttribute(key);
+    } else {
+      element.setAttribute(key, value);
+    }
+  });
+};
+
+export const toggleClass = (element, className, force) => {
+  if (!element) return;
+  element.classList.toggle(className, force);
+};
+
+export const addClass = (element, ...classes) => {
+  if (!element) return;
+  element.classList.add(...classes);
+};
+
+export const removeClass = (element, ...classes) => {
+  if (!element) return;
+  element.classList.remove(...classes);
+};
+
+export const replaceClass = (element, oldClass, newClass) => {
+  if (!element) return;
+  removeClass(element, oldClass);
+  addClass(element, newClass);
+};
+
+export const getDataset = (element, key) => {
+  return element?.dataset?.[key];
+};
+
+export const setDataset = (element, key, value) => {
+  if (!element) return;
+  element.dataset[key] = value;
+};
+
+export const closest = (element, selector) => {
+  return element?.closest(selector) || null;
+};
+
+export const matches = (element, selector) => {
+  return element?.matches(selector) ?? false;
+};

data/app/assets/javascripts/baldur/lib/field-validation-helpers.js

@@ -0,0 +1,36 @@
+import { query } from "baldur/lib/dom-helpers";
+
+export function setFieldValidationMessage(fieldOrWrapper, message) {
+  const wrapper = resolveFieldWrapper(fieldOrWrapper);
+  if (!wrapper) return;
+
+  const support = query("[data-field-support]", wrapper);
+
+  if (message) {
+    wrapper.classList.add("is-invalid");
+    if (support) {
+      support.textContent = message;
+      support.removeAttribute("hidden");
+    }
+    return;
+  }
+
+  wrapper.classList.remove("is-invalid");
+  if (!support) return;
+
+  const defaultText = support.dataset.defaultSupport || "";
+  support.textContent = defaultText;
+
+  if (defaultText.length) {
+    support.removeAttribute("hidden");
+  } else {
+    support.setAttribute("hidden", "hidden");
+  }
+}
+
+function resolveFieldWrapper(fieldOrWrapper) {
+  if (!fieldOrWrapper) return null;
+  if (fieldOrWrapper.classList?.contains("field")) return fieldOrWrapper;
+  if (typeof fieldOrWrapper.closest !== "function") return null;
+  return fieldOrWrapper.closest(".field");
+}

data/app/assets/javascripts/baldur/lib/focus-management.js

@@ -0,0 +1,89 @@
+/**
+ * Focus Management & Accessibility Helpers
+ * Ensures proper focus traps and ARIA updates across controllers
+ */
+
+export const focusFirstFocusable = (container) => {
+  if (!container) return;
+
+  // Priority: autofocus > form inputs > buttons > any focusable
+  const autofocus = container.querySelector("[data-modal-autofocus]");
+  if (autofocus) {
+    setTimeout(() => autofocus.focus(), 10);
+    return;
+  }
+
+  const focusable = container.querySelector(
+    "input, select, textarea, button, [href], [tabindex]"
+  );
+  if (focusable) {
+    setTimeout(() => focusable.focus(), 10);
+  }
+};
+
+export const createFocusTrap = (element, onEscape) => {
+  const focusableElements = element.querySelectorAll(
+    "button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])"
+  );
+
+  const firstElement = focusableElements[0];
+  const lastElement = focusableElements[focusableElements.length - 1];
+
+  const handleKeyDown = (event) => {
+    if (event.key === "Escape" && onEscape) {
+      onEscape(event);
+      return;
+    }
+
+    if (event.key !== "Tab") return;
+
+    if (event.shiftKey && document.activeElement === firstElement) {
+      event.preventDefault();
+      lastElement?.focus();
+    } else if (!event.shiftKey && document.activeElement === lastElement) {
+      event.preventDefault();
+      firstElement?.focus();
+    }
+  };
+
+  element.addEventListener("keydown", handleKeyDown);
+
+  return () => element.removeEventListener("keydown", handleKeyDown);
+};
+
+export const updateAriaLabel = (element, label) => {
+  if (element) {
+    element.setAttribute("aria-label", label);
+  }
+};
+
+export const updateAriaExpanded = (element, expanded) => {
+  if (element) {
+    element.setAttribute("aria-expanded", expanded ? "true" : "false");
+  }
+};
+
+export const updateAriaHidden = (element, hidden) => {
+  if (element) {
+    element.setAttribute("aria-hidden", hidden ? "true" : "false");
+  }
+};
+
+export const updateAriaChecked = (element, checked) => {
+  if (element) {
+    element.setAttribute("aria-checked", checked ? "true" : "false");
+  }
+};
+
+export const announceToScreenReader = (message, role = "status") => {
+  const announcement = document.createElement("div");
+  announcement.setAttribute("role", role);
+  announcement.setAttribute("aria-live", "polite");
+  announcement.setAttribute("aria-atomic", "true");
+  announcement.className = "sr-only";
+  announcement.textContent = message;
+
+  document.body.appendChild(announcement);
+
+  setTimeout(() => announcement.remove(), 3000);
+};

data/app/assets/javascripts/baldur/lib/formatting-helpers.js

@@ -0,0 +1,100 @@
+/**
+ * Text Formatting & Validation Helpers
+ * Centralized formatting patterns used by multiple controllers
+ */
+
+const ISO_DATE_PATTERN = /^(\d{4})-(\d{2})-(\d{2})$/;
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const NAME_PATTERN = /^[a-zA-Z\s.'-]+$/;
+const PIN_PATTERN = /^\d{6}$/;
+const PAN_PATTERN = /^[A-Za-z]{5}[0-9]{4}[A-Za-z]$/;
+const UPI_PATTERN = /^[A-Za-z0-9._-]{2,256}@[A-Za-z]{2,64}$/;
+
+export const isValidIsoDate = (dateString) => {
+  return ISO_DATE_PATTERN.test(dateString);
+};
+
+export const parseDisplayDate = (text) => {
+  if (!text) return "";
+  const trimmed = text.trim();
+  if (!trimmed) return "";
+
+  const isoMatch = ISO_DATE_PATTERN.exec(trimmed);
+  if (isoMatch) return isoMatch[0];
+
+  const parsed = new Date(trimmed);
+  if (isNaN(parsed.getTime())) return null;
+
+  const year = parsed.getFullYear();
+  const month = (parsed.getMonth() + 1).toString().padStart(2, "0");
+  const day = parsed.getDate().toString().padStart(2, "0");
+  return `${year}-${month}-${day}`;
+};
+
+export const formatDateForDisplay = (isoValue) => {
+  if (!isoValue) return "";
+
+  const match = ISO_DATE_PATTERN.exec(isoValue);
+  if (!match) return isoValue;
+
+  const year = Number(match[1]);
+  const month = Number(match[2]) - 1;
+  const day = Number(match[3]);
+  const date = new Date(year, month, day);
+
+  if (isNaN(date.getTime())) return isoValue;
+
+  try {
+    return date.toLocaleDateString(undefined, {
+      year: "numeric",
+      month: "short",
+      day: "numeric"
+    });
+  } catch (error) {
+    return isoValue;
+  }
+};
+
+export const isValidEmail = (email) => {
+  return EMAIL_PATTERN.test(email);
+};
+
+export const isValidName = (name) => {
+  return NAME_PATTERN.test(name);
+};
+
+export const isValidPin = (pin) => {
+  return PIN_PATTERN.test(pin.replace(/\D/g, ""));
+};
+
+export const isValidPan = (pan) => {
+  return PAN_PATTERN.test(String(pan || "").trim());
+};
+
+export const isValidUpi = (upiId) => {
+  return UPI_PATTERN.test(String(upiId || "").trim());
+};
+
+export const extractDigits = (value, maxLength = null) => {
+  const digits = (value || "").replace(/\D+/g, "");
+  return maxLength ? digits.slice(0, maxLength) : digits;
+};
+
+export const formatMobileNumber = (digits, countryCode = "+91") => {
+  return digits ? `${countryCode} ${digits}` : "";
+};
+
+export const sanitizeField = (value, rule) => {
+  const text = String(value || "").trim();
+
+  switch (rule) {
+    case "name":
+      return text.replace(/[<>]/g, "").replace(/\s+/g, " ").trim();
+    case "email":
+      return text.replace(/[<>]/g, "").toLowerCase();
+    case "text":
+      return text.replace(/[<>]/g, "").replace(/\s+/g, " ").trim();
+    default:
+      return text;
+  }
+};

data/app/assets/javascripts/baldur/lib/lucide.js

@@ -0,0 +1,20 @@
+const ICON_PATHS = {
+  "check-circle": '<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><path d="m9 11 3 3L22 4"></path>',
+  "chevron-down": '<path d="m6 9 6 6 6-6"></path>',
+  "chevron-left": '<path d="m15 18-6-6 6-6"></path>',
+  "chevron-right": '<path d="m9 18 6-6-6-6"></path>',
+  "circle-alert": '<circle cx="12" cy="12" r="10"></circle><line x1="12" x2="12" y1="8" y2="12"></line><line x1="12" x2="12.01" y1="16" y2="16"></line>',
+  info: '<circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path>',
+  "triangle-alert": '<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path><path d="M12 9v4"></path><path d="M12 17h.01"></path>'
+};
+
+export function iconSvg(name, className = "") {
+  const paths = ICON_PATHS[name];
+
+  if (!paths) {
+    throw new Error(`Unknown icon ${name}`);
+  }
+
+  const classAttribute = className ? ` class="${className}"` : "";
+  return `<svg${classAttribute} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths}</svg>`;
+}

data/app/assets/javascripts/baldur/lib/snackbar.js

@@ -0,0 +1,50 @@
+import { iconSvg } from "baldur/lib/lucide";
+
+const SNACKBAR_TITLES = {
+  success: "Success",
+  error: "Error",
+  warning: "Warning",
+  notice: "Notice"
+};
+
+const SNACKBAR_ICONS = {
+  success: "check-circle",
+  error: "circle-alert",
+  warning: "triangle-alert",
+  notice: "info"
+};
+
+function ensureStack() {
+  return document.querySelector("[data-baldur-snackbar-stack]");
+}
+
+function createSnackbarFromTemplate() {
+  const template = document.querySelector("[data-baldur-snackbar-template]");
+  const element = template?.content?.firstElementChild?.cloneNode(true);
+  return element instanceof HTMLElement ? element : null;
+}
+
+export function showSnackbar({
+  message,
+  title,
+  variant = "notice",
+  dismissLabel = "Dismiss"
+} = {}) {
+  if (!message || !document?.body) return;
+
+  const resolvedVariant = ["success", "error", "warning", "notice"].includes(variant) ? variant : "notice";
+  const stack = ensureStack();
+  const snackbar = createSnackbarFromTemplate();
+  if (!stack || !snackbar) return;
+
+  const titleText = title || SNACKBAR_TITLES[resolvedVariant] || SNACKBAR_TITLES.notice;
+  const iconName = SNACKBAR_ICONS[resolvedVariant] || SNACKBAR_ICONS.notice;
+  snackbar.className = `snackbar snackbar--${resolvedVariant}`;
+  snackbar.dataset.snackbarVariant = resolvedVariant;
+  snackbar.querySelector("[data-snackbar-icon]").innerHTML = iconSvg(iconName, "h-5 w-5");
+  snackbar.querySelector("[data-snackbar-label]").textContent = titleText;
+  snackbar.querySelector("[data-snackbar-message]").textContent = String(message);
+  snackbar.querySelector("[data-snackbar-dismiss]").setAttribute("aria-label", dismissLabel);
+
+  stack.appendChild(snackbar);
+}

data/app/assets/javascripts/baldur/lib/storage-helpers.js

@@ -0,0 +1,50 @@
+/**
+ * Local Storage Helpers
+ * Safe wrappers for localStorage with fallback handling
+ */
+
+export const getFromStorage = (key, defaultValue = null) => {
+  try {
+    const value = localStorage.getItem(key);
+    return value ?? defaultValue;
+  } catch (error) {
+    console.warn(`Unable to read from localStorage:`, error);
+    return defaultValue;
+  }
+};
+
+export const saveToStorage = (key, value) => {
+  try {
+    localStorage.setItem(key, value);
+    return true;
+  } catch (error) {
+    console.warn(`Unable to write to localStorage:`, error);
+    return false;
+  }
+};
+
+export const removeFromStorage = (key) => {
+  try {
+    localStorage.removeItem(key);
+    return true;
+  } catch (error) {
+    console.warn(`Unable to remove from localStorage:`, error);
+    return false;
+  }
+};
+
+export const getSystemPreference = (preference, options = []) => {
+  if (!window.matchMedia) return options[0] || null;
+
+  try {
+    if (preference === "color-scheme") {
+      return window.matchMedia("(prefers-color-scheme: dark)").matches
+        ? "dark"
+        : "light";
+    }
+  } catch (error) {
+    console.warn(`Unable to query system preference:`, error);
+  }
+
+  return options[0] || null;
+};