@starlove/orbit 1.4.1 → 2.0.0

package/public/js/main.js

@@ -1,161 +0,0 @@
-// Application entry point. Imports `starscape.js` for its side effects
-// (canvas + theme toggle init), wires the topbar buttons and global
-// keyboard/click listeners, and kicks off the bootstrap → router activation
-// sequence. The reusable `load` / `render` helpers live in app.js so feature
-// modules can import them without creating cycles back through this entry.
-
-import "./starscape.js";
-
-import {
-  $,
-  boardMenuBtn,
-  boardFlyout,
-  drawer,
-  drawerBackdrop,
-  createFlyoutBackdrop,
-  searchInput
-} from "./dom.js";
-import { state } from "./state.js";
-import { api, withBoardQuery } from "./api.js";
-import { toast, debounce } from "./toast.js";
-import {
-  navigate,
-  applyRoute,
-  currentRoute,
-  hasRoute,
-  syncUrlFromState,
-  setRouterReady
-} from "./router.js";
-import {
-  openBoardFlyout,
-  closeBoardFlyout,
-  closeMenuFlyouts
-} from "./board-menu.js";
-import {
-  openCreateFlyout,
-  closeCreateFlyout,
-  isCreateFlyoutOpen
-} from "./create-card.js";
-import { enableKanbanDragScroll, enableKanbanInteractions } from "./kanban.js";
-import { runSearch, hideSearch } from "./search.js";
-import { load } from "./app.js";
-import { edition } from "./config.js";
-import { openModal, wireModal } from "./modal.js";
-import { wireTopbarFocus } from "./topbar-notes.js";
-import { wireHelpMenu } from "./help-menu.js";
-import { checkForUpdate } from "./update-check.js";
-import { applyStoredFontPreferences } from "./font-preference.js";
-
-async function init() {
-  const welcomeDialog = document.getElementById("welcomeDialog");
-  applyStoredFontPreferences();
-  wireModal(welcomeDialog);
-  wireTopbarFocus();
-  wireHelpMenu();
-  if (edition === "preview") {
-    openModal(welcomeDialog);
-  }
-
-  $("#settingsBtn").addEventListener("click", async () => {
-    closeCreateFlyout();
-    closeMenuFlyouts();
-    navigate({
-      boardId: state.boardId,
-      view: "settings",
-      tab: state.settingsTab || "lanes"
-    });
-  });
-
-  boardMenuBtn?.addEventListener("click", (event) => {
-    event.stopPropagation();
-    if (!boardFlyout.hidden) {
-      closeBoardFlyout();
-      return;
-    }
-    openBoardFlyout();
-  });
-
-  $("#newTicketBtn").addEventListener("click", () => {
-    if (isCreateFlyoutOpen()) {
-      closeCreateFlyout();
-      return;
-    }
-    openCreateFlyout("");
-  });
-
-  createFlyoutBackdrop.addEventListener("click", () => {
-    closeCreateFlyout();
-  });
-
-  $("#drawerCloseBtn").addEventListener("click", () => {
-    navigate({
-      boardId: state.boardId,
-      view: "board"
-    });
-  });
-
-  $("#drawerArchiveBtn").addEventListener("click", async () => {
-    const ticketId = state.selectedTicketId;
-    if (!ticketId || state.detailMode !== "ticket") return;
-    const ticket = state.data?.tickets?.find((t) => t.id === ticketId);
-    const titleForToast = ticket?.title || "card";
-    await api(withBoardQuery(`/api/tickets/${encodeURIComponent(ticketId)}/archive`), { method: "POST" });
-    toast.removed(`Archived: ${titleForToast}`);
-    await load();
-    navigate({ boardId: state.boardId, view: "board" });
-  });
-
-  drawerBackdrop.addEventListener("click", () => {
-    navigate({
-      boardId: state.boardId,
-      view: "board"
-    });
-  });
-
-  document.addEventListener("keydown", (event) => {
-    if (event.key !== "Escape") return;
-    if (!boardFlyout.hidden) {
-      closeMenuFlyouts();
-      return;
-    }
-    if (isCreateFlyoutOpen()) {
-      closeCreateFlyout();
-      return;
-    }
-    if (!drawer.classList.contains("is-open")) return;
-    const el = document.activeElement;
-    if (el?.classList?.contains("inline-title-editor") || el?.classList?.contains("inline-desc-editor")) return;
-    navigate({
-      boardId: state.boardId,
-      view: "board"
-    });
-  });
-
-  searchInput.addEventListener("input", debounce(runSearch, 220));
-  document.addEventListener("click", (event) => {
-    if (!event.target.closest("#topbarSearch")) hideSearch();
-    if (!event.target.closest(".topbar-menu")) closeMenuFlyouts();
-  });
-
-  enableKanbanDragScroll();
-  enableKanbanInteractions();
-
-  const initialRoute = currentRoute();
-  if (initialRoute.boardSlug) state.boardSlug = initialRoute.boardSlug;
-  await load();
-
-  // Activate the router. If the page was loaded with a hash route, restore
-  // that view; otherwise canonicalize the URL to reflect the current
-  // state so the back button has a starting point.
-  setRouterReady(true);
-  if (hasRoute()) {
-    await applyRoute();
-  } else {
-    syncUrlFromState({ replace: true });
-  }
-
-  // Best-effort, non-blocking: nudge if a newer Orbit is available.
-  checkForUpdate();
-}
-
-init();

package/public/js/modal.js

@@ -1,33 +0,0 @@
-// Generic <dialog> modal utility.
-//
-// Usage:
-//   wireModal(el)         — wire backdrop-click + [data-modal-close] buttons.
-//   openModal(el)         — show the dialog as a modal (focus-trapped overlay).
-//   closeModal(el)        — close it programmatically.
-//
-// Escape key is handled natively by the browser; no extra wiring needed.
-
-export function openModal(dialogEl) {
-  if (!dialogEl) return;
-  dialogEl.showModal();
-  dialogEl.querySelector("[data-modal-initial-focus]")?.focus({ preventScroll: true });
-}
-
-export function closeModal(dialogEl) {
-  if (dialogEl?.open) dialogEl.close();
-}
-
-export function wireModal(dialogEl) {
-  if (!dialogEl) return;
-
-  // Close when the user clicks the backdrop (the dialog element itself,
-  // outside its inner content box).
-  dialogEl.addEventListener("click", (event) => {
-    if (event.target === dialogEl) closeModal(dialogEl);
-  });
-
-  // Close buttons: any element inside the dialog with [data-modal-close].
-  dialogEl.querySelectorAll("[data-modal-close]").forEach((btn) => {
-    btn.addEventListener("click", () => closeModal(dialogEl));
-  });
-}

package/public/js/motion-preference.js

@@ -1,64 +0,0 @@
-export const REDUCE_MOTION_STORAGE_KEY = "mab_reduce_motion";
-
-function safeStorage(storage) {
-  try {
-    return storage ?? globalThis.localStorage ?? null;
-  } catch {
-    return null;
-  }
-}
-
-function defaultMediaMatcher(query) {
-  return typeof window !== "undefined" && typeof window.matchMedia === "function"
-    ? window.matchMedia(query)
-    : { matches: false };
-}
-
-export function storedReducedMotionPreference(storage = safeStorage()) {
-  const store = safeStorage(storage);
-  const value = store?.getItem?.(REDUCE_MOTION_STORAGE_KEY);
-  if (value === "true") return true;
-  if (value === "false") return false;
-  return null;
-}
-
-export function browserPrefersReducedMotion(mediaMatcher = defaultMediaMatcher) {
-  try {
-    return !!mediaMatcher("(prefers-reduced-motion: reduce)")?.matches;
-  } catch {
-    return false;
-  }
-}
-
-export function effectiveReducedMotionPreference({ storage = safeStorage(), mediaMatcher = defaultMediaMatcher } = {}) {
-  const stored = storedReducedMotionPreference(storage);
-  return stored ?? browserPrefersReducedMotion(mediaMatcher);
-}
-
-export function setReducedMotionPreference(reduce, storage = safeStorage()) {
-  const store = safeStorage(storage);
-  const value = reduce ? "true" : "false";
-  store?.setItem?.(REDUCE_MOTION_STORAGE_KEY, value);
-  return reduce;
-}
-
-export function applyReducedMotionPreference({
-  doc = globalThis.document,
-  storage = safeStorage(),
-  mediaMatcher = defaultMediaMatcher
-} = {}) {
-  // Starscape v3 `data-motion` contract (three-state; shared with the
-  // ui-system-v3 package and ss-nebula). Replaces the legacy two-state
-  // `data-reduced-motion="reduce|allow"`:
-  //   • stored reduce → data-motion="reduce" (always reduce)
-  //   • stored allow  → data-motion="full"   (ignore OS reduce)
-  //   • no stored pref → no attribute        (follow OS prefers-reduced-motion)
-  const root = doc?.documentElement;
-  const stored = storedReducedMotionPreference(storage);
-  if (root) {
-    if (stored === true) root.setAttribute("data-motion", "reduce");
-    else if (stored === false) root.setAttribute("data-motion", "full");
-    else root.removeAttribute("data-motion");
-  }
-  return effectiveReducedMotionPreference({ storage, mediaMatcher });
-}

package/public/js/panel.js

@@ -1,58 +0,0 @@
-// Reusable settings-style "panel" primitives shared by the project settings
-// drawer and the ticket detail drawer. A panel is a bordered card with a
-// tinted header strip (small-caps title) and a padded body — the same visual
-// language used across the Appearance / AI / Data settings tabs. The
-// collapsible variant turns the header into a <details>/<summary> toggle with a
-// chevron that flips when open, so any surface can drop in a togglable section
-// without re-deriving the markup. These intentionally emit the .settings-card
-// class family (documented in styles.css as a reusable @starlove/ui primitive).
-
-import { escapeHtml } from "./format.js";
-
-const panelChevronSvg = `<svg class="settings-card-chevron" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6" /></svg>`;
-
-/**
- * Static panel: bordered card with a header title and a padded body.
- *
- * Options:
- *   - title: heading text shown in the small-caps header strip.
- *   - body: raw HTML for the card body (already escaped by the caller).
- *   - className: extra classes appended to the .settings-card element.
- *   - attrs: extra attributes string placed on the <section> (e.g. data-*).
- *   - headExtra: raw HTML appended after the title inside the header (actions).
- */
-export function renderPanel({ title, body = "", className = "", attrs = "", headExtra = "" } = {}) {
-  const classAttr = className ? ` ${className}` : "";
-  const extraAttrs = attrs ? ` ${attrs}` : "";
-  return `
-    <section class="settings-card${classAttr}"${extraAttrs}>
-      <header class="settings-card-head">
-        <h3 class="settings-card-title">${escapeHtml(title)}</h3>
-        ${headExtra}
-      </header>
-      <div class="settings-card-body">${body}</div>
-    </section>
-  `;
-}
-
-/**
- * Collapsible panel: same chrome as renderPanel but the header doubles as a
- * <details>/<summary> toggle with a flipping chevron.
- *
- * Options mirror renderPanel, plus:
- *   - open: whether the section starts expanded.
- */
-export function renderTogglePanel({ title, body = "", open = false, className = "", attrs = "", headExtra = "" } = {}) {
-  const classAttr = className ? ` ${className}` : "";
-  const extraAttrs = attrs ? ` ${attrs}` : "";
-  return `
-    <details class="settings-card settings-card--collapsible${classAttr}"${open ? " open" : ""}${extraAttrs}>
-      <summary class="settings-card-head">
-        <h3 class="settings-card-title">${escapeHtml(title)}</h3>
-        ${headExtra}
-        ${panelChevronSvg}
-      </summary>
-      <div class="settings-card-body">${body}</div>
-    </details>
-  `;
-}

package/public/js/router.js

@@ -1,134 +0,0 @@
-// Hash router. Copy/share URLs use board slugs, such as
-// `#/b/<boardSlug>`, `#/b/<boardSlug>/t/<ticketId>`, and
-// `#/b/<boardSlug>/settings/<tab>`. Keeping routing in the hash lets the
-// preview app keep working when mounted under `/app/` or opened as static HTML.
-
-import { currentBoard, state } from "./state.js";
-import { normalizeSettingsTab } from "./settings-tabs.js";
-import { closeMenuFlyouts } from "./board-menu.js";
-import { closeCreateFlyout } from "./create-card.js";
-import {
-  buildRoute,
-  hasRoute,
-  isCanonicalRouteUrl,
-  parseRoute
-} from "./url-routes.js";
-
-export { buildRoute, hasRoute, parseRoute } from "./url-routes.js";
-
-function boardBySlugOrId(value) {
-  if (!value) return null;
-  const boards = state.data?.boards || [];
-  return boards.find((b) => b.slug === value) || boards.find((b) => b.id === value) || null;
-}
-
-function routeBoardSlug(routeObj = {}) {
-  if (routeObj.boardSlug) return routeObj.boardSlug;
-  if (routeObj.boardId) return boardBySlugOrId(routeObj.boardId)?.slug || routeObj.boardId;
-  return currentBoard()?.slug || state.boardSlug || "";
-}
-
-function normalizeRouteForUrl(routeObj = {}) {
-  return {
-    ...routeObj,
-    boardSlug: routeBoardSlug(routeObj)
-  };
-}
-
-function routeFromState() {
-  let view = "board";
-  if (state.detailMode === "ticket" && state.selectedTicketId) view = "ticket";
-  else if (state.detailMode === "settings") view = "settings";
-  return {
-    boardSlug: currentBoard()?.slug || state.boardSlug,
-    view,
-    ticketId: state.selectedTicketId,
-    tab: view === "settings" ? normalizeSettingsTab(state.settingsTab) : ""
-  };
-}
-
-let routerReady = false;
-
-export function setRouterReady(value) {
-  routerReady = value;
-}
-
-export function currentRoute() {
-  return parseRoute(location);
-}
-
-export async function navigate(routeObj, { replace = false } = {}) {
-  const route = normalizeRouteForUrl(routeObj);
-  const url = buildRoute(route);
-  if (isCanonicalRouteUrl(location, route)) {
-    if (routerReady) await applyRoute();
-    return;
-  }
-  if (replace) history.replaceState(null, "", url);
-  else history.pushState(null, "", url);
-  if (routerReady) await applyRoute();
-}
-
-// Push or replace the URL to match the current `state` without re-rendering.
-// Used after flows that already mutated state and called load()/render()
-// (e.g. ticket/board creation).
-export function syncUrlFromState({ replace = false } = {}) {
-  const route = routeFromState();
-  const url = buildRoute(route);
-  if (isCanonicalRouteUrl(location, route)) return;
-  if (replace) history.replaceState(null, "", url);
-  else history.pushState(null, "", url);
-}
-
-export async function applyRoute() {
-  const { load, renderDetailOnly } = await import("./app.js");
-  const r = currentRoute();
-  const urlHadRoute = hasRoute(location);
-  const prevBoardId = state.boardId;
-  const routeBoard = boardBySlugOrId(r.boardSlug);
-  const fallbackBoard = routeBoard || (r.boardSlug ? currentBoard() : null);
-
-  if (fallbackBoard) {
-    state.boardId = fallbackBoard.id;
-    state.boardSlug = fallbackBoard.slug;
-  } else if (r.boardSlug) {
-    state.boardSlug = r.boardSlug;
-  }
-
-  const canonicalRoute = fallbackBoard ? { ...r, boardSlug: fallbackBoard.slug } : r;
-  if (urlHadRoute && !isCanonicalRouteUrl(location, canonicalRoute)) {
-    history.replaceState(null, "", buildRoute(canonicalRoute));
-  }
-
-  if (r.view === "ticket") {
-    state.selectedTicketId = r.ticketId || "";
-    state.detailMode = r.ticketId ? "ticket" : "empty";
-  } else if (r.view === "settings") {
-    state.selectedTicketId = "";
-    state.detailMode = "settings";
-    if (r.tab) {
-      state.settingsTab = r.tab;
-      try {
-        localStorage.setItem("mab_settings_tab", r.tab);
-      } catch {
-        /* ignore */
-      }
-    }
-  } else {
-    state.selectedTicketId = "";
-    state.detailMode = "empty";
-  }
-
-  closeMenuFlyouts();
-  closeCreateFlyout();
-
-  if (state.boardId && state.boardId !== prevBoardId) {
-    await load();
-    return;
-  }
-  await renderDetailOnly();
-}
-
-window.addEventListener("popstate", () => {
-  if (routerReady) void applyRoute();
-});

package/public/js/search.js

@@ -1,56 +0,0 @@
-// Topbar search. Debounced via the input handler in main.js; queries the
-// /api/search endpoint and renders a small results dropdown that navigates
-// to the chosen ticket on click.
-
-import { searchInput, searchResults } from "./dom.js";
-import { state, currentBoard } from "./state.js";
-import { api } from "./api.js";
-import { navigate } from "./router.js";
-import { escapeHtml, stateClassFor, ticketLabel } from "./format.js";
-import { closeCreateFlyout } from "./create-card.js";
-
-export async function runSearch() {
-  const query = searchInput.value.trim();
-  if (query.length < 2) {
-    hideSearch();
-    return;
-  }
-  const board = currentBoard();
-  if (!board) return;
-  const result = await api(`/api/search?q=${encodeURIComponent(query)}&board=${encodeURIComponent(board.slug)}`);
-  if (result.results.length === 0) {
-    searchResults.hidden = false;
-    searchResults.innerHTML = `<div class="search-hit">No results</div>`;
-    return;
-  }
-  searchResults.hidden = false;
-  searchResults.innerHTML = result.results
-    .map(
-      (ticket) => `
-        <div class="search-hit" data-ticket-id="${ticket.id}">
-          <span class="search-hit-main">
-            <strong>${escapeHtml(ticketLabel(ticket))}</strong>
-            <span class="search-hit-title">${escapeHtml(ticket.title)}</span>
-          </span>
-          <span class="search-hit-state" data-variant="${escapeHtml(stateClassFor(ticket))}">${escapeHtml(ticket.state_name || "State")}</span>
-        </div>
-      `
-    )
-    .join("");
-  searchResults.querySelectorAll("[data-ticket-id]").forEach((hit) => {
-    hit.addEventListener("click", async () => {
-      closeCreateFlyout();
-      hideSearch();
-      navigate({
-        boardId: state.boardId,
-        view: "ticket",
-        ticketId: hit.dataset.ticketId
-      });
-    });
-  });
-}
-
-export function hideSearch() {
-  searchResults.hidden = true;
-  searchResults.innerHTML = "";
-}

package/public/js/settings-tabs.js

@@ -1,7 +0,0 @@
-/** Settings drawer tab ids — must match URL segments `#/b/…/settings/:tab` and `settings.js` tab config. */
-export const SETTINGS_TAB_IDS = new Set(["lanes", "appearance", "ai", "notes", "journal", "data", "archive"]);
-
-export function normalizeSettingsTab(raw) {
-  if (!raw || !SETTINGS_TAB_IDS.has(raw)) return "lanes";
-  return raw;
-}