baldur 0.1.1

data/app/assets/javascripts/baldur/controllers/panel_secondary_controller.js

@@ -0,0 +1,129 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["panel", "trigger"];
+  static values = {
+    pushSelector: { type: String, default: "main" }
+  };
+
+  connect() {
+    this.element.__panelSecondaryController = this;
+    this.externalTriggerBindings = [];
+    this.panelSelector = this.hasPanelTarget && this.panelTarget.id ? `#${this.panelTarget.id}` : null;
+    this.isOpen = this.panelTarget?.classList.contains("is-open") || this.panelTarget?.getAttribute("aria-hidden") === "false";
+    this.setupExternalTriggers();
+    this.syncState(this.isOpen);
+  }
+
+  disconnect() {
+    if (this.element.__panelSecondaryController === this) {
+      delete this.element.__panelSecondaryController;
+    }
+
+    this.teardownExternalTriggers();
+    this.syncPushSurface(false);
+  }
+
+  toggle() {
+    this.isOpen ? this.close() : this.open();
+  }
+
+  open(detail = this.defaultDetail()) {
+    if (!this.hasPanelTarget) return;
+
+    this.isOpen = true;
+    this.syncState(true);
+    this.dispatchOpenedHooks(detail);
+  }
+
+  close() {
+    if (!this.hasPanelTarget) return;
+
+    this.isOpen = false;
+    this.syncState(false);
+    this.dispatchClosedHooks();
+  }
+
+  syncState(open) {
+    this.panelTarget.classList.toggle("is-open", open);
+    this.panelTarget.setAttribute("aria-hidden", String(!open));
+    this.syncTrigger(open);
+    this.syncPushSurface(open);
+  }
+
+  syncTrigger(open) {
+    if (!this.hasTriggerTarget) return;
+    this.triggerTarget.setAttribute("aria-expanded", String(open));
+  }
+
+  syncPushSurface(open) {
+    const target = document.querySelector(this.pushSelectorValue);
+    if (!target || !this.hasPanelTarget) return;
+
+    target.style.paddingRight = open ? `${this.panelTarget.offsetWidth}px` : "";
+  }
+
+  setupExternalTriggers() {
+    if (!this.panelSelector) return;
+
+    const triggers = document.querySelectorAll(`[data-open-panel="${this.panelSelector}"]`);
+    triggers.forEach((trigger) => {
+      const handler = (event) => {
+        event.preventDefault();
+        this.previouslyFocusedElement = trigger;
+        this.open(this.detailFromTrigger(trigger));
+      };
+
+      trigger.addEventListener("click", handler);
+      this.externalTriggerBindings.push({ trigger, handler });
+    });
+  }
+
+  teardownExternalTriggers() {
+    this.externalTriggerBindings.forEach(({ trigger, handler }) => {
+      trigger.removeEventListener("click", handler);
+    });
+    this.externalTriggerBindings = [];
+  }
+
+  detailFromTrigger(trigger) {
+    return {
+      ...this.defaultDetail(),
+      trigger,
+      payload: this.parsePayload(trigger?.dataset.panelPayload)
+    };
+  }
+
+  defaultDetail() {
+    return {
+      id: this.hasPanelTarget ? this.panelTarget.id : null,
+      selector: this.panelSelector,
+      trigger: null,
+      payload: null
+    };
+  }
+
+  parsePayload(raw) {
+    if (!raw) return null;
+
+    try {
+      return JSON.parse(raw);
+    } catch (_error) {
+      return null;
+    }
+  }
+
+  dispatchOpenedHooks(detail) {
+    const payload = detail || this.defaultDetail();
+
+    this.element.dispatchEvent(new CustomEvent("baldur:panel:opened", { bubbles: true, detail: payload }));
+    window.dispatchEvent(new CustomEvent("baldur:panel:opened", { detail: payload }));
+  }
+
+  dispatchClosedHooks() {
+    const detail = this.defaultDetail();
+
+    this.element.dispatchEvent(new CustomEvent("baldur:panel:closed", { bubbles: true, detail }));
+    window.dispatchEvent(new CustomEvent("baldur:panel:closed", { detail }));
+  }
+}

data/app/assets/javascripts/baldur/controllers/segmented_tabs_controller.js

@@ -0,0 +1,38 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['tab', 'panel']
+  static values = { active: String }
+
+  connect() {
+    const initial = this.activeValue || this.tabTargets[0]?.dataset.tabValue
+    if (initial) {
+      this.show(initial)
+    }
+  }
+
+  select(event) {
+    event.preventDefault()
+    const value = event.currentTarget.dataset.tabValue
+    if (value) {
+      this.show(value)
+    }
+  }
+
+  show(value) {
+    this.tabTargets.forEach((tab) => {
+      const selected = tab.dataset.tabValue === value
+      tab.classList.toggle('is-selected', selected)
+      tab.setAttribute('aria-selected', selected)
+      tab.tabIndex = selected ? 0 : -1
+    })
+
+    this.panelTargets.forEach((panel) => {
+      const selected = panel.dataset.tabValue === value
+      panel.classList.toggle('hidden', !selected)
+      panel.setAttribute('aria-hidden', (!selected).toString())
+    })
+
+    this.activeValue = value
+  }
+}

data/app/assets/javascripts/baldur/controllers/sidebar_controller.js

@@ -0,0 +1,77 @@
+import { Controller } from "@hotwired/stimulus";
+import { iconSvg } from "baldur/lib/lucide";
+
+export default class extends Controller {
+  static targets = ["toggleButton", "toggleIcon"]
+  static values = {
+    collapsed: Boolean,
+    storageKey: { type: String, default: "baldur-sidebar-collapsed" }
+  }
+
+  initialize() {
+    this._loadingStoredState = true
+  }
+
+  connect() {
+    const stored = this.readStoredValue()
+    if (stored !== null) {
+      this.collapsedValue = stored === "true"
+    }
+
+    this._loadingStoredState = false
+    this.syncUI()
+  }
+
+  toggle() {
+    this.collapsedValue = !this.collapsedValue
+  }
+
+  collapsedValueChanged() {
+    if (this._loadingStoredState) {
+      return
+    }
+
+    const value = String(this.collapsedValue)
+    this.writeStoredValue(value)
+    this.syncUI()
+  }
+
+  readStoredValue() {
+    const key = this.storageKeyValue
+
+    try {
+      const value = window.localStorage.getItem(key)
+      if (value !== null) return value
+    } catch {
+      // localStorage may be disabled
+    }
+
+    const match = document.cookie.match(new RegExp(`(?:^|; )${encodeURIComponent(key)}=([^;]*)`))
+    return match ? decodeURIComponent(match[1]) : null
+  }
+
+  writeStoredValue(value) {
+    const key = this.storageKeyValue
+
+    try {
+      window.localStorage.setItem(key, value)
+    } catch {
+      // localStorage may be disabled
+    }
+
+    document.cookie = `${encodeURIComponent(key)}=${encodeURIComponent(value)}; path=/; max-age=31536000; samesite=lax`
+  }
+
+  syncUI() {
+    this.element.dataset.sidebarCollapsedValue = String(this.collapsedValue)
+
+    if (this.hasToggleIconTarget) {
+      const iconName = this.collapsedValue ? "chevron-right" : "chevron-left"
+      this.toggleIconTarget.innerHTML = iconSvg(iconName, "h-5 w-5")
+    }
+
+    if (this.hasToggleButtonTarget) {
+      this.toggleButtonTarget.setAttribute("aria-expanded", String(!this.collapsedValue))
+    }
+  }
+}

data/app/assets/javascripts/baldur/controllers/smooth_scroll_controller.js

@@ -0,0 +1,29 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  connect() {
+    this.onClick = this.handleClick.bind(this);
+    this.element.addEventListener("click", this.onClick);
+  }
+
+  disconnect() {
+    this.element.removeEventListener("click", this.onClick);
+  }
+
+  handleClick(event) {
+    const link = event.target.closest("a[href]");
+    if (!link) return;
+
+    const href = link.getAttribute("href");
+    if (!href || !href.startsWith("#") || href.length <= 1) return;
+    if (link.getAttribute("download") !== null) return;
+
+    const target = document.getElementById(href.slice(1));
+    if (!target) return;
+
+    event.preventDefault();
+    const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    target.scrollIntoView({ behavior: prefersReducedMotion ? "auto" : "smooth", block: "start" });
+    history.replaceState(null, "", href);
+  }
+}

data/app/assets/javascripts/baldur/controllers/snackbar_controller.js

@@ -0,0 +1,158 @@
+import { Controller } from "@hotwired/stimulus";
+import { addClass, removeClass } from "baldur/lib/dom-helpers";
+
+export default class SnackbarController extends Controller {
+  static targets = ["progressIndicator"];
+
+  static values = {
+    snackbarTimeout: { type: Number, default: 6000 }
+  };
+
+  connect() {
+    this.totalDuration = Math.max(this.snackbarTimeoutValue, 0);
+    this.remainingDuration = this.totalDuration;
+    this.isPaused = false;
+    this.isHovered = false;
+    this.hasFocusWithin = false;
+    this.renderProgress(1);
+
+    requestAnimationFrame(() => {
+      addClass(this.element, "motion-layer-enter");
+      addClass(this.element, "is-visible");
+      this.resumeAutoHide();
+    });
+
+    this.element.addEventListener("animationend", this.handleEntryAnimationEnd);
+    this.element.addEventListener("mouseenter", this.handleMouseEnter);
+    this.element.addEventListener("mouseleave", this.handleMouseLeave);
+    this.element.addEventListener("focusin", this.handleFocusIn);
+    this.element.addEventListener("focusout", this.handleFocusOut);
+  }
+
+  disconnect() {
+    this.stopCountdown();
+    this.element.removeEventListener("animationend", this.handleEntryAnimationEnd);
+    this.element.removeEventListener("mouseenter", this.handleMouseEnter);
+    this.element.removeEventListener("mouseleave", this.handleMouseLeave);
+    this.element.removeEventListener("focusin", this.handleFocusIn);
+    this.element.removeEventListener("focusout", this.handleFocusOut);
+  }
+
+  scheduleAutoHide(duration) {
+    clearTimeout(this.autoHideTimeout);
+    this.autoHideTimeout = setTimeout(() => {
+      this.dismiss();
+    }, duration);
+  }
+
+  renderProgress(progress) {
+    if (!this.hasProgressIndicatorTarget) return;
+
+    const clamped = Math.min(Math.max(progress, 0), 1);
+    this.progressIndicatorTarget.style.strokeDashoffset = String((1 - clamped) * 100);
+  }
+
+  stopCountdown() {
+    clearTimeout(this.autoHideTimeout);
+    this.autoHideTimeout = null;
+
+    if (this.rafId) {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = null;
+    }
+  }
+
+  pauseAutoHide() {
+    if (this.isPaused || this.element.dataset.dismissed === "true") return;
+
+    this.isPaused = true;
+    if (this.totalDuration <= 0 || !this.startedAt) return;
+
+    const elapsed = performance.now() - this.startedAt;
+    this.remainingDuration = Math.max(this.remainingDuration - elapsed, 0);
+    this.stopCountdown();
+    this.renderProgress(this.totalDuration > 0 ? this.remainingDuration / this.totalDuration : 0);
+  }
+
+  resumeAutoHide() {
+    if (this.element.dataset.dismissed === "true") return;
+    if (this.isHovered || this.hasFocusWithin) return;
+
+    if (this.remainingDuration <= 0 || this.totalDuration <= 0) {
+      this.renderProgress(0);
+      this.dismiss();
+      return;
+    }
+
+    if (!this.isPaused && this.autoHideTimeout) return;
+
+    this.isPaused = false;
+    this.startedAt = performance.now();
+    this.scheduleAutoHide(this.remainingDuration);
+    this.rafId = requestAnimationFrame(this.updateProgress);
+  }
+
+  dismiss() {
+    if (this.element.dataset.dismissed === "true") return;
+
+    this.element.dataset.dismissed = "true";
+    this.stopCountdown();
+    this.renderProgress(0);
+    addClass(this.element, "is-leaving");
+
+    this.element.addEventListener(
+      "transitionend",
+      () => {
+        this.element.remove();
+      },
+      { once: true }
+    );
+  }
+
+  updateProgress = (timestamp) => {
+    if (this.isPaused || this.element.dataset.dismissed === "true") return;
+
+    const elapsed = timestamp - this.startedAt;
+    const remaining = Math.max(this.remainingDuration - elapsed, 0);
+    this.renderProgress(this.totalDuration > 0 ? remaining / this.totalDuration : 0);
+
+    if (remaining > 0) {
+      this.rafId = requestAnimationFrame(this.updateProgress);
+    } else {
+      this.rafId = null;
+    }
+  };
+
+  handleEntryAnimationEnd = (event) => {
+    if (event.animationName !== "layer-enter") return;
+    removeClass(this.element, "motion-layer-enter");
+  };
+
+  handleMouseEnter = () => {
+    this.isHovered = true;
+    this.pauseAutoHide();
+  };
+
+  handleMouseLeave = () => {
+    this.isHovered = false;
+    this.resumeAutoHide();
+  };
+
+  handleFocusIn = () => {
+    this.hasFocusWithin = true;
+    this.pauseAutoHide();
+  };
+
+  handleFocusOut = (event) => {
+    if (this.element.contains(event.relatedTarget)) return;
+
+    this.hasFocusWithin = false;
+    this.resumeAutoHide();
+  };
+
+  // Allow manual dismissal via button
+  handleDismiss(event) {
+    event?.preventDefault?.();
+    this.dismiss();
+  }
+}

data/app/assets/javascripts/baldur/controllers/table_disclosure_controller.js

@@ -0,0 +1,46 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["content", "trigger"];
+
+  connect() {
+    this.open = false;
+    this.contentTarget.style.maxHeight = "0px";
+    this.triggerTarget.setAttribute("aria-expanded", "false");
+  }
+
+  toggle(event) {
+    event.preventDefault();
+
+    if (this.open) {
+      this.close();
+      return;
+    }
+
+    this.openDisclosure();
+  }
+
+  openDisclosure() {
+    const content = this.contentTarget;
+    this.open = true;
+    this.element.classList.add("is-open");
+    this.triggerTarget.setAttribute("aria-expanded", "true");
+    content.style.maxHeight = "0px";
+
+    requestAnimationFrame(() => {
+      content.style.maxHeight = `${content.scrollHeight}px`;
+    });
+  }
+
+  close() {
+    const content = this.contentTarget;
+    this.open = false;
+    this.element.classList.remove("is-open");
+    this.triggerTarget.setAttribute("aria-expanded", "false");
+    content.style.maxHeight = `${content.scrollHeight}px`;
+
+    requestAnimationFrame(() => {
+      content.style.maxHeight = "0px";
+    });
+  }
+}

data/app/assets/javascripts/baldur/controllers/theme_controller.js

@@ -0,0 +1,90 @@
+import { Controller } from "@hotwired/stimulus";
+import { getFromStorage, saveToStorage, getSystemPreference } from "baldur/lib/storage-helpers";
+import { addClass, removeClass, toggleClass, setAttrs } from "baldur/lib/dom-helpers";
+
+export default class ThemeController extends Controller {
+  static targets = ["toggle"];
+  static values = {
+    storageKey: { type: String, default: "baldur.theme" },
+    themes: { type: Array, default: ["light", "dark"] }
+  };
+
+  connect() {
+    this.initializeTheme();
+    this.attachEventListeners();
+  }
+
+  initializeTheme() {
+    const theme = this.getCurrentTheme();
+    this.applyTheme(theme, false);
+    this.syncToggles(theme);
+  }
+
+  attachEventListeners() {
+    this.toggleTargets.forEach((toggle) => {
+      toggle.addEventListener("change", () => this.handleToggleChange(toggle));
+    });
+  }
+
+  getCurrentTheme() {
+    // 1. Check localStorage
+    const stored = getFromStorage(this.storageKeyValue);
+    if (stored && this.themesValue.includes(stored)) return stored;
+
+    // 2. Default to light when user has not chosen a theme.
+    return "light";
+  }
+
+  handleToggleChange(toggle) {
+    const newTheme = toggle.checked ? "dark" : "light";
+    this.applyTheme(newTheme, true);
+    saveToStorage(this.storageKeyValue, newTheme);
+    this.syncToggles(newTheme);
+  }
+
+  toggle(event) {
+    event?.preventDefault();
+
+    const newTheme = this.getTheme() === "dark" ? "light" : "dark";
+    this.applyTheme(newTheme, true);
+    saveToStorage(this.storageKeyValue, newTheme);
+    this.syncToggles(newTheme);
+  }
+
+  applyTheme(theme, animate = false) {
+    const root = document.documentElement;
+
+    if (animate) {
+      addClass(root, "theme-transition");
+      setTimeout(() => removeClass(root, "theme-transition"), 800);
+    }
+
+    // Remove all theme classes
+    this.themesValue.forEach((cls) => removeClass(root, cls));
+
+    // Add new theme class
+    addClass(root, theme);
+    setAttrs(root, { "data-theme": theme });
+
+    // Update global state
+    window.__baldurThemeState = theme;
+  }
+
+  syncToggles(theme) {
+    this.toggleTargets.forEach((toggle) => {
+      toggle.checked = theme === "dark";
+    });
+  }
+
+  // Public API for external access
+  getTheme() {
+    return window.__baldurThemeState || this.getCurrentTheme();
+  }
+
+  setTheme(theme, options = {}) {
+    const { animate = true } = options;
+    this.applyTheme(theme, animate);
+    saveToStorage(this.storageKeyValue, theme);
+    this.syncToggles(theme);
+  }
+}

data/app/assets/javascripts/baldur/controllers/tooltip_controller.js

@@ -0,0 +1,136 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["trigger", "bubble"];
+
+  connect() {
+    this.handleDocumentClick = this.handleDocumentClick.bind(this);
+    this.handleDocumentKeydown = this.handleDocumentKeydown.bind(this);
+    this.handleViewportResize = this.handleViewportResize.bind(this);
+
+    document.addEventListener("click", this.handleDocumentClick);
+    document.addEventListener("keydown", this.handleDocumentKeydown);
+    window.addEventListener("resize", this.handleViewportResize);
+
+    this.close();
+  }
+
+  disconnect() {
+    document.removeEventListener("click", this.handleDocumentClick);
+    document.removeEventListener("keydown", this.handleDocumentKeydown);
+    window.removeEventListener("resize", this.handleViewportResize);
+  }
+
+  toggle(event) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (this.isOpen()) {
+      this.close();
+      return;
+    }
+
+    this.open();
+  }
+
+  open(event) {
+    if (event?.type === "focusout" && this.element.contains(event.relatedTarget)) return;
+    if (!this.hasBubbleTarget) return;
+
+    this.bubbleTarget.dataset.state = "open";
+    this.bubbleTarget.setAttribute("aria-hidden", "false");
+    requestAnimationFrame(() => {
+      if (this.isOpen()) this.applyBestPlacement();
+    });
+
+    if (this.hasTriggerTarget) {
+      this.triggerTarget.setAttribute("aria-expanded", "true");
+    }
+  }
+
+  close(event) {
+    if (event?.type === "focusout" && this.element.contains(event.relatedTarget)) return;
+    if (!this.hasBubbleTarget) return;
+
+    this.bubbleTarget.dataset.state = "closed";
+    this.bubbleTarget.setAttribute("aria-hidden", "true");
+    this.resetPlacement();
+
+    if (this.hasTriggerTarget) {
+      this.triggerTarget.setAttribute("aria-expanded", "false");
+    }
+  }
+
+  isOpen() {
+    if (!this.hasBubbleTarget) return false;
+    return this.bubbleTarget.dataset.state === "open";
+  }
+
+  handleDocumentClick(event) {
+    if (!this.element.contains(event.target)) {
+      this.close();
+    }
+  }
+
+  handleDocumentKeydown(event) {
+    if (event.key === "Escape") {
+      this.close();
+    }
+  }
+
+  handleViewportResize() {
+    if (this.isOpen()) {
+      this.applyBestPlacement();
+    }
+  }
+
+  applyBestPlacement() {
+    if (!this.hasBubbleTarget) return;
+
+    const bubble = this.bubbleTarget;
+    const viewportPadding = 8;
+    const maxWidth = Math.min(320, Math.max(180, window.innerWidth - viewportPadding * 2));
+
+    this.resetPlacement();
+    bubble.style.maxWidth = `${maxWidth}px`;
+
+    let rect = bubble.getBoundingClientRect();
+
+    if (rect.right > window.innerWidth - viewportPadding) {
+      bubble.classList.remove("left-0");
+      bubble.classList.add("right-0");
+      rect = bubble.getBoundingClientRect();
+    }
+
+    if (rect.left < viewportPadding) {
+      const shiftRight = viewportPadding - rect.left;
+      bubble.style.transform = `translateX(${shiftRight}px)`;
+      rect = bubble.getBoundingClientRect();
+    } else if (rect.right > window.innerWidth - viewportPadding) {
+      const shiftLeft = (window.innerWidth - viewportPadding) - rect.right;
+      bubble.style.transform = `translateX(${shiftLeft}px)`;
+      rect = bubble.getBoundingClientRect();
+    }
+
+    if (rect.bottom > window.innerHeight - viewportPadding) {
+      bubble.classList.remove("top-full", "mt-2");
+      bubble.classList.add("bottom-full", "mb-2");
+      rect = bubble.getBoundingClientRect();
+
+      if (rect.top < viewportPadding) {
+        bubble.classList.remove("bottom-full", "mb-2");
+        bubble.classList.add("top-full", "mt-2");
+      }
+    }
+  }
+
+  resetPlacement() {
+    if (!this.hasBubbleTarget) return;
+
+    const bubble = this.bubbleTarget;
+    bubble.classList.remove("right-0", "bottom-full", "mb-2");
+    bubble.classList.add("left-0", "top-full", "mt-2");
+    bubble.style.transform = "";
+    bubble.style.maxWidth = "";
+  }
+}