@starlove/orbit 1.0.5 → 1.0.7

package/public/js/state.js

@@ -10,6 +10,8 @@ export const state = {
   /** Currently selected board id. Single-board UI; this points at the active
    *  board in `state.data.boards`. */
   boardId: "",
+  /** URL-facing board identifier. Routes use slugs; API calls keep using ids. */
+  boardSlug: "",
   selectedTicketId: "",
   expandedCardIds: new Set(),
   /** "empty" | "ticket" | "settings" — drives the main right overlay drawer (not the New flyout). */
@@ -30,9 +32,16 @@ export function getSettingsTab() {
 export function syncBoardSelection() {
   if (!state.data) return;
   const boards = state.data.boards || [];
-  if (!state.boardId || !boards.some((b) => b.id === state.boardId)) {
-    state.boardId = boards[0]?.id || "";
+  let board = state.boardId ? boards.find((b) => b.id === state.boardId) : null;
+  if (!board && state.boardSlug) {
+    board = boards.find((b) => b.slug === state.boardSlug) || boards.find((b) => b.id === state.boardSlug);
   }
+  if (!board) {
+    const activeBoardId = state.data.active_board_id;
+    board = boards.find((b) => b.id === activeBoardId) || boards[0] || null;
+  }
+  state.boardId = board?.id || "";
+  state.boardSlug = board?.slug || "";
 }
 
 export function currentBoard() {

package/public/js/theme-preference.js

@@ -0,0 +1,88 @@
+export const THEME_STORAGE_KEY = "mab_theme";
+export const THEME_CHANGE_EVENT = "orbit:theme-change";
+
+const THEMES = new Set(["light", "dark"]);
+
+function safeStorage(storage) {
+  try {
+    return storage ?? globalThis.localStorage ?? null;
+  } catch {
+    return null;
+  }
+}
+
+function safeDocument(doc) {
+  try {
+    return doc ?? globalThis.document ?? null;
+  } catch {
+    return null;
+  }
+}
+
+function safeEventTarget(eventTarget) {
+  try {
+    return eventTarget ?? globalThis.window ?? null;
+  } catch {
+    return null;
+  }
+}
+
+export function normalizeTheme(theme) {
+  return THEMES.has(theme) ? theme : "light";
+}
+
+export function storedThemePreference(storage = safeStorage()) {
+  const store = safeStorage(storage);
+  const value = store?.getItem?.(THEME_STORAGE_KEY);
+  return THEMES.has(value) ? value : null;
+}
+
+export function currentTheme({ doc = safeDocument(), storage = safeStorage() } = {}) {
+  const rootTheme = safeDocument(doc)?.documentElement?.getAttribute?.("data-theme");
+  return THEMES.has(rootTheme) ? rootTheme : storedThemePreference(storage) ?? "light";
+}
+
+export function applyStoredThemePreference({
+  doc = safeDocument(),
+  storage = safeStorage()
+} = {}) {
+  const storedTheme = storedThemePreference(storage);
+  if (storedTheme) {
+    safeDocument(doc)?.documentElement?.setAttribute?.("data-theme", storedTheme);
+  }
+  return currentTheme({ doc, storage });
+}
+
+export function setThemePreference(theme, {
+  doc = safeDocument(),
+  storage = safeStorage(),
+  eventTarget = safeEventTarget(),
+  notify = true
+} = {}) {
+  const next = normalizeTheme(theme);
+  safeDocument(doc)?.documentElement?.setAttribute?.("data-theme", next);
+  safeStorage(storage)?.setItem?.(THEME_STORAGE_KEY, next);
+
+  if (notify) {
+    dispatchThemeChange(next, eventTarget);
+  }
+
+  return next;
+}
+
+export function toggleThemePreference(options = {}) {
+  const next = currentTheme(options) === "dark" ? "light" : "dark";
+  return setThemePreference(next, options);
+}
+
+function dispatchThemeChange(theme, eventTarget = safeEventTarget()) {
+  const target = safeEventTarget(eventTarget);
+  if (typeof target?.dispatchEvent !== "function") return;
+
+  if (typeof CustomEvent === "function") {
+    target.dispatchEvent(new CustomEvent(THEME_CHANGE_EVENT, { detail: { theme } }));
+    return;
+  }
+
+  target.dispatchEvent({ type: THEME_CHANGE_EVENT, detail: { theme } });
+}

package/public/js/ticket-detail.js

@@ -15,7 +15,8 @@ import {
   typeLabel,
   typeLabelLong,
   priorityLabel,
-  priorityKeyFor
+  priorityKeyFor,
+  renderMarkdown
 } from "./format.js";
 import { renderTypeIcon, renderPriorityPill } from "./kanban.js";
 import { renderDrawerShell, openDrawer, closeDrawer } from "./drawer.js";
@@ -125,7 +126,8 @@ function wireTicketDetailEditors(ticket) {
 
   const descEl = drawerInner.querySelector('[data-edit-field="description"]');
   if (descEl) {
-    descEl.addEventListener("click", () => {
+    descEl.addEventListener("click", (event) => {
+      event.preventDefault();
       startInlineEdit(descEl, "description", ticket.description || "", ticketId);
     });
     descEl.addEventListener("keydown", (event) => {
@@ -270,6 +272,7 @@ export async function renderDetail() {
   `;
 
   renderDrawerShell({
+    mode: "ticket",
     title: ticket.title,
     titleAttrs: {
       class: "editable-field",
@@ -281,7 +284,7 @@ export async function renderDetail() {
     body: `
     <div class="detail-head">
       <p class="detail-updated" title="Last saved change">Updated ${escapeHtml(formatDateDetail(ticket.updated_at))}</p>
-      <p class="description editable-field ${ticket.description ? "" : "is-placeholder"}" data-edit-field="description" tabindex="0" title="Click to edit">${escapeHtml(ticket.description || "No description yet.")}</p>
+      <div class="description markdown-body editable-field ${ticket.description ? "" : "is-placeholder"}" data-edit-field="description" tabindex="0" title="Click to edit">${ticket.description ? renderMarkdown(ticket.description) : escapeHtml("No description yet.")}</div>
       <dl class="ticket-meta" id="ticketMetaGrid" data-ticket-id="${escapeHtml(ticket.id)}">
         <div class="ticket-meta-row">
           <dt>State</dt>

package/public/js/url-routes.js

@@ -0,0 +1,94 @@
+import { SETTINGS_TAB_IDS } from "./settings-tabs.js";
+
+const EMPTY_ROUTE = Object.freeze({ boardSlug: "", view: "board", ticketId: "", tab: "" });
+
+function emptyRoute() {
+  return { ...EMPTY_ROUTE };
+}
+
+function normalizeLocation(input = globalThis.location) {
+  if (typeof input === "string") {
+    const url = new URL(input, "http://orbit.local");
+    return { pathname: url.pathname || "/", search: url.search || "", hash: url.hash || "" };
+  }
+  return {
+    pathname: input?.pathname || "/",
+    search: input?.search || "",
+    hash: input?.hash || ""
+  };
+}
+
+function decodeSegment(value) {
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    return value;
+  }
+}
+
+function routeSegments(value) {
+  return String(value || "")
+    .replace(/^#/, "")
+    .replace(/^\/+/, "")
+    .replace(/\/+$/, "")
+    .split("/")
+    .filter(Boolean);
+}
+
+function routeFromSegments(parts) {
+  if (!parts.length) return null;
+
+  const out = emptyRoute();
+  let i = 0;
+
+  if (parts[i] === "b") {
+    if (!parts[i + 1]) return null;
+    out.boardSlug = decodeSegment(parts[i + 1]);
+    i += 2;
+  } else if (parts[i] !== "t" && parts[i] !== "settings") {
+    return null;
+  }
+
+  if (parts[i] === "t" && parts[i + 1]) {
+    out.view = "ticket";
+    out.ticketId = decodeSegment(parts[i + 1]);
+  } else if (parts[i] === "settings") {
+    out.view = "settings";
+    const tab = parts[i + 1] ? decodeSegment(parts[i + 1]) : "";
+    if (tab && SETTINGS_TAB_IDS.has(tab)) out.tab = tab;
+  }
+
+  return out;
+}
+
+export function parseLegacyHashRoute(hash) {
+  const raw = String(hash || "");
+  if (!raw || raw === "#" || raw === "#/") return null;
+  return routeFromSegments(routeSegments(raw));
+}
+
+export function parseRoute(input = globalThis.location) {
+  const loc = normalizeLocation(input);
+  return parseLegacyHashRoute(loc.hash) || emptyRoute();
+}
+
+export function hasRoute(input = globalThis.location) {
+  const loc = normalizeLocation(input);
+  return Boolean(parseLegacyHashRoute(loc.hash));
+}
+
+export function buildRoute({ boardSlug = "", view = "board", ticketId = "", tab = "" } = {}) {
+  const segs = [];
+  if (boardSlug) segs.push("b", encodeURIComponent(boardSlug));
+  if (view === "ticket" && ticketId) segs.push("t", encodeURIComponent(ticketId));
+  else if (view === "settings") {
+    segs.push("settings");
+    if (tab && SETTINGS_TAB_IDS.has(tab)) segs.push(tab);
+  }
+  return "#/" + segs.join("/");
+}
+
+export function isCanonicalRouteUrl(input = globalThis.location, routeObj = parseRoute(input)) {
+  const loc = normalizeLocation(input);
+  return loc.hash === buildRoute(routeObj);
+}

package/public/styles.css

@@ -76,6 +76,7 @@ input[type="file"] {
   --orbit-add-border: rgba(29, 37, 40, 0.12);
   --orbit-phantom-border: rgba(29, 37, 40, 0.14);
   --orbit-phantom-bg: rgba(29, 37, 40, 0.03);
+  --kanban-column-width: 22rem;
   --scrollbar-thumb: rgba(var(--accent-rgb),0.45);
   --scrollbar-thumb-hover: rgba(var(--accent-rgb),0.65);
   --scrollbar-track: transparent;
@@ -100,6 +101,12 @@ input[type="file"] {
   --select-chevron-size: 12px;
 }
 
+@media (max-width: 720px) {
+  :root {
+    --kanban-column-width: 18rem;
+  }
+}
+
 * {
   box-sizing: border-box;
 }
@@ -529,6 +536,12 @@ h1 {
   scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
 }
 
+#boardFlyout {
+  min-width: 20.25rem;
+  max-width: min(30rem, calc(100vw - 1.5rem));
+  max-height: min(36rem, calc(100vh - 4rem));
+}
+
 .menu-flyout--align-end {
   right: 0;
   left: auto;
@@ -1109,7 +1122,7 @@ h1 {
 /* Horizontal scroll: styled thumb/track (Firefox + WebKit). */
 .kanban {
   display: grid;
-  grid-auto-columns: minmax(17rem, 1fr);
+  grid-auto-columns: minmax(var(--kanban-column-width), 1fr);
   grid-auto-flow: column;
   grid-template-rows: minmax(0, 1fr);
   flex: 1 1 auto;
@@ -1704,8 +1717,8 @@ h1 {
 /* Epic-aware grouping inside a column.
    `.epic-children` is a flex item nested in `.column` (which is itself flex-column,
    gap 0.7rem). Right-aligning + narrowing it makes its cards read as indented
-   children of the epic card or `.epic-mini-header` directly above. The negative
-   margin-top tightens the visual link by halving the column gap. */
+   children of the epic card or full-width `.epic-mini-header` directly above.
+   The negative margin-top tightens the visual link by halving the column gap. */
 .epic-children {
   display: flex;
   flex-direction: column;
@@ -1744,15 +1757,14 @@ h1 {
     0 8px 20px rgba(0, 0, 0, 0.25);
 }
 
-/* Thin "header" that stands in for the epic when its children sit in a different
-   column. Visually pairs with the `.epic-children` block right below it: same
-   width and right-alignment, slim purple bar shape. */
+/* Thin full-width "header" that stands in for the epic when its children sit in
+   a different column. Children remain narrowed underneath so the hierarchy is
+   visible without cutting the lane width at the epic anchor. */
 .epic-mini-header {
   display: flex;
   align-items: center;
   gap: 0.4rem;
-  width: 92%;
-  align-self: flex-end;
+  width: 100%;
   padding: 0.45rem 0.6rem;
   border-radius: 10px 10px 4px 4px;
   background: rgba(var(--purple-rgb), 0.10);
@@ -2144,7 +2156,13 @@ h1 {
   background: var(--drawer-bg);
   box-shadow: 0 24px 60px rgba(12, 18, 26, 0.28);
   transform: translateX(calc(100% + 1.5rem));
-  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition:
+    transform 320ms cubic-bezier(0.4, 0, 0.2, 1),
+    width 180ms ease;
+}
+
+.drawer.is-wide {
+  width: min(58rem, calc(100vw - 1rem));
 }
 
 .drawer.is-open {
@@ -2286,8 +2304,8 @@ h1 {
   border-color: var(--accent-border);
 }
 
-.drawer-close {
-  grid-area: close;
+.drawer-close,
+.drawer-archive {
   display: inline-grid;
   place-items: center;
   width: 2rem;
@@ -2297,10 +2315,14 @@ h1 {
   border-radius: 10px;
   background: var(--surface);
   color: var(--ink);
+  cursor: url('cursors/live_link.cur'), pointer;
+}
+
+.drawer-close {
+  grid-area: close;
   font-size: 1.35rem;
   font-weight: 400;
   line-height: 1;
-  cursor: url('cursors/live_link.cur'), pointer;
 }
 
 .drawer-close:hover {
@@ -2310,16 +2332,6 @@ h1 {
 
 .drawer-archive {
   grid-area: archive;
-  display: inline-grid;
-  place-items: center;
-  width: 2rem;
-  height: 2rem;
-  padding: 0;
-  border: 1px solid var(--line);
-  border-radius: 10px;
-  background: var(--surface);
-  color: var(--ink);
-  cursor: url('cursors/live_link.cur'), pointer;
 }
 
 .drawer-archive:hover {
@@ -2463,6 +2475,95 @@ h1 {
   white-space: pre-wrap;
 }
 
+.markdown-body {
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.markdown-body p,
+.markdown-body ul,
+.markdown-body ol,
+.markdown-body pre {
+  margin: 0;
+}
+
+.markdown-body p + p,
+.markdown-body p + ul,
+.markdown-body p + ol,
+.markdown-body p + pre,
+.markdown-body ul + p,
+.markdown-body ul + ol,
+.markdown-body ul + pre,
+.markdown-body ol + p,
+.markdown-body ol + ul,
+.markdown-body ol + pre,
+.markdown-body pre + p,
+.markdown-body pre + ul,
+.markdown-body pre + ol {
+  margin-top: 0.55rem;
+}
+
+.markdown-body ul,
+.markdown-body ol {
+  padding-left: 1.25rem;
+}
+
+.markdown-body li + li {
+  margin-top: 0.2rem;
+}
+
+.markdown-body code {
+  border: 1px solid rgba(var(--blue-rgb), 0.18);
+  border-radius: 0.35rem;
+  padding: 0.05rem 0.25rem;
+  color: var(--ink);
+  background: rgba(var(--blue-rgb), 0.08);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  font-size: 0.9em;
+}
+
+.markdown-body pre {
+  padding: 0.65rem 0.75rem;
+  overflow: auto;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--surface-card);
+}
+
+.markdown-body pre code {
+  display: block;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  white-space: pre;
+}
+
+.markdown-body a {
+  color: var(--blue);
+  font-weight: 700;
+  text-decoration: underline;
+  text-decoration-thickness: 0.08em;
+  text-underline-offset: 0.15em;
+}
+
+.card-description {
+  margin-top: 0.45rem;
+  color: var(--muted);
+  font-size: 0.82rem;
+  line-height: 1.45;
+}
+
+.card .markdown-body p {
+  display: block;
+  overflow: visible;
+  -webkit-line-clamp: unset;
+  -webkit-box-orient: initial;
+}
+
+.card .markdown-body pre {
+  max-height: 8rem;
+}
+
 /* The detail pane's lede description is body copy, not a card excerpt — give
    it more presence than the universal muted .description rule. */
 .detail-head > .description {
@@ -3194,6 +3295,157 @@ details.section > summary .mcp-title-row {
   margin-bottom: 0.85rem;
 }
 
+.appearance-theme-section {
+  margin-top: 0.4rem;
+}
+
+.appearance-theme-section + .section:has(> .orbit-check:first-child) {
+  margin-top: 1.25rem;
+}
+
+.appearance-theme-field {
+  display: grid;
+  gap: 0.55rem;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.appearance-theme-field legend {
+  margin-bottom: 0.55rem;
+  color: var(--ink);
+  font-size: 0.88rem;
+  font-weight: 800;
+}
+
+.appearance-theme-options {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.5rem;
+}
+
+.appearance-theme-option {
+  position: relative;
+  display: inline-flex;
+  min-width: 0;
+  min-height: 2.5rem;
+  align-items: center;
+  justify-content: center;
+  gap: 0.45rem;
+  padding: 0.5rem 0.72rem;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--surface-dim);
+  color: var(--ink);
+  font-size: 0.86rem;
+  font-weight: 700;
+  cursor: url('cursors/live_link.cur'), pointer;
+  transition:
+    border-color 160ms ease,
+    background 160ms ease,
+    box-shadow 160ms ease,
+    color 160ms ease;
+}
+
+.appearance-theme-option:hover {
+  border-color: var(--accent-border);
+  background: var(--accent-hover);
+}
+
+.appearance-theme-option input[type="radio"] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.appearance-theme-option-mark {
+  display: grid;
+  width: 1.35rem;
+  height: 1.35rem;
+  flex: 0 0 auto;
+  place-items: center;
+  border: 1px solid var(--accent-border);
+  border-radius: 999px;
+  background: var(--surface-input);
+  transition:
+    background 160ms ease,
+    border-color 160ms ease,
+    box-shadow 160ms ease;
+}
+
+.appearance-theme-option-icon {
+  width: 0.9rem;
+  height: 0.9rem;
+}
+
+.appearance-theme-option-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.appearance-theme-option:has(input[type="radio"]:checked) {
+  border-color: var(--accent);
+  background:
+    linear-gradient(135deg, rgba(var(--accent-rgb),0.12), rgba(var(--blue-rgb),0.08)),
+    var(--surface-dim);
+  box-shadow:
+    inset 0 0 0 1px rgba(var(--accent-rgb),0.18),
+    0 4px 10px rgba(var(--accent-rgb),0.12);
+}
+
+.appearance-theme-option:has(input[type="radio"]:checked) .appearance-theme-option-mark {
+  border-color: var(--accent);
+  color: #fff;
+  background:
+    linear-gradient(135deg, rgba(var(--accent-rgb),0.95), rgba(var(--blue-rgb),0.95));
+}
+
+.appearance-theme-option input[type="radio"]:focus-visible ~ .appearance-theme-option-mark {
+  box-shadow: var(--accent-ring);
+}
+
+[data-theme="dark"] .appearance-theme-option {
+  background: rgba(15, 25, 50, 0.55);
+  border-color: rgba(var(--starlight-rgb),0.16);
+}
+
+[data-theme="dark"] .appearance-theme-option:hover {
+  border-color: rgba(var(--starlight-rgb),0.4);
+  background: rgba(var(--starlight-rgb),0.08);
+}
+
+[data-theme="dark"] .appearance-theme-option-mark {
+  border-color: rgba(var(--starlight-rgb),0.35);
+  background:
+    linear-gradient(135deg, rgba(var(--starlight-rgb),0.06), rgba(var(--cosmos-rgb),0) 65%),
+    rgba(15, 25, 50, 0.7);
+}
+
+[data-theme="dark"] .appearance-theme-option:has(input[type="radio"]:checked) {
+  border-color: rgba(var(--starlight-rgb),0.55);
+  background:
+    linear-gradient(135deg, rgba(var(--starlight-rgb),0.13), rgba(var(--violet-rgb),0.08)),
+    rgba(15, 25, 50, 0.65);
+  box-shadow:
+    inset 0 0 0 1px rgba(var(--starlight-rgb),0.18),
+    0 4px 14px rgba(var(--starlight-rgb),0.16);
+}
+
+[data-theme="dark"] .appearance-theme-option:has(input[type="radio"]:checked) .appearance-theme-option-mark {
+  border-color: rgba(var(--starlight-rgb),0.7);
+  color: #0a1024;
+  background: linear-gradient(135deg, #d6e6ff, #a8c0ff);
+}
+
 /* Lanes tab opens directly with the checkbox — drop the default .section
    top margin so it sits flush under the drawer tabs. */
 .section:has(> .orbit-check:first-child) {
@@ -4828,6 +5080,27 @@ button:disabled,
   }
 }
 
+[data-reduced-motion="reduce"] *,
+[data-reduced-motion="reduce"] *::before,
+[data-reduced-motion="reduce"] *::after {
+  scroll-behavior: auto !important;
+  transition-duration: 0.01ms !important;
+  animation-duration: 0.01ms !important;
+  animation-iteration-count: 1 !important;
+}
+
+[data-reduced-motion="reduce"][data-theme="dark"] .starfield,
+[data-reduced-motion="reduce"][data-theme="dark"] .milky-way,
+[data-reduced-motion="reduce"][data-theme="dark"] .grain::before,
+[data-reduced-motion="reduce"][data-theme="dark"] .grain::after,
+[data-reduced-motion="reduce"][data-theme="dark"] .signature-star {
+  animation: none;
+}
+
+[data-reduced-motion="reduce"][data-theme="dark"] .meteor {
+  display: none;
+}
+
 [data-theme="dark"] {
   /* Tells the browser to render native widgets (dropdowns, scrollbars,
      date pickers, etc.) in their dark variant so option popups match. */