@cboxdk/cbox-ui 0.8.0 → 0.9.0

package/dist/chunk-AJCYF7SS.js

@@ -0,0 +1,808 @@
+// src/app-switcher/catalog.ts
+var DEFAULT_REFRESH_SECONDS = 60;
+var KEPT_CATALOG_KEY = "cbox-app-catalog";
+var CATALOG_EVENT = "cbox-app-catalog";
+function parseAppCatalog(ok, body) {
+  const data = typeof body === "object" && body !== null ? body : {};
+  if (!ok) {
+    const signin = typeof data.signin_url === "string" && data.signin_url !== "" ? data.signin_url : null;
+    const authorize = typeof data.authorize_url === "string" && data.authorize_url !== "" ? data.authorize_url : null;
+    if (signin !== null || authorize !== null || data.state === "authorization_required") {
+      return { status: "signin_required", signinUrl: signin, authorizeUrl: authorize };
+    }
+    return { status: "unavailable" };
+  }
+  if (!Array.isArray(data.apps)) {
+    return { status: "unavailable" };
+  }
+  const apps = [];
+  for (const entry of data.apps) {
+    if (typeof entry !== "object" || entry === null) continue;
+    const app = entry;
+    if (typeof app.key !== "string" || typeof app.name !== "string" || typeof app.launch_url !== "string") continue;
+    if (!/^https?:\/\//i.test(app.launch_url)) continue;
+    apps.push({
+      key: app.key,
+      name: app.name,
+      launch_url: app.launch_url,
+      icon_url: typeof app.icon_url === "string" ? app.icon_url : null,
+      icon_dark_url: typeof app.icon_dark_url === "string" ? app.icon_dark_url : null,
+      description: typeof app.description === "string" ? app.description : null
+    });
+  }
+  const refresh = typeof data.refresh_after === "number" && Number.isFinite(data.refresh_after) ? data.refresh_after : DEFAULT_REFRESH_SECONDS;
+  return { status: "ready", apps, refreshAfter: Math.max(1, Math.min(DEFAULT_REFRESH_SECONDS, refresh)) };
+}
+function authorizeHref(authorizeUrl, location) {
+  if (authorizeUrl === null) return null;
+  try {
+    const url = new URL(authorizeUrl, location.origin);
+    if (url.origin !== location.origin) return null;
+    url.searchParams.set("return_to", location.pathname + location.search);
+    return url.pathname + url.search;
+  } catch {
+    return null;
+  }
+}
+function signInTarget(state, location) {
+  if (state.signinUrl !== null) {
+    try {
+      const url = new URL(state.signinUrl, location.origin);
+      if (url.origin === location.origin) return url.href;
+    } catch {
+    }
+  }
+  const legacy = authorizeHref(state.authorizeUrl, location);
+  return legacy === null ? null : new URL(legacy, location.origin).href;
+}
+function secureIconUrl(url) {
+  if (typeof url !== "string" || url === "") return null;
+  try {
+    const parsed = new URL(url);
+    return parsed.protocol === "https:" ? parsed.href : null;
+  } catch {
+    return null;
+  }
+}
+function displayName(name) {
+  return name.replace(/^Cbox\s*·\s*/i, "");
+}
+function initials(name) {
+  return displayName(name).slice(0, 2);
+}
+var EMPTY = [];
+var cache = { raw: null, apps: EMPTY };
+function storage() {
+  try {
+    return typeof window === "undefined" ? null : window.localStorage;
+  } catch {
+    return null;
+  }
+}
+function readKnownAppCatalog() {
+  let raw = null;
+  try {
+    raw = storage()?.getItem(KEPT_CATALOG_KEY) ?? null;
+  } catch {
+    raw = null;
+  }
+  if (raw === cache.raw) return cache.apps;
+  let apps = EMPTY;
+  try {
+    const value = raw === null ? [] : JSON.parse(raw);
+    if (Array.isArray(value)) {
+      apps = value.flatMap((entry) => {
+        if (typeof entry !== "object" || entry === null) return [];
+        const app = entry;
+        if (typeof app.key !== "string" || typeof app.name !== "string") return [];
+        const known = { key: app.key, name: app.name, icon_url: secureIconUrl(app.icon_url), icon_dark_url: secureIconUrl(app.icon_dark_url) };
+        if (typeof app.launch_url === "string" && /^https?:\/\//i.test(app.launch_url)) known.launch_url = app.launch_url;
+        return [known];
+      });
+    }
+  } catch {
+    apps = EMPTY;
+  }
+  cache = { raw, apps };
+  return apps;
+}
+function rememberAppCatalog(apps) {
+  const kept = apps.map(({ key, name, launch_url, icon_url, icon_dark_url }) => {
+    const app = { key, name, icon_url: icon_url ?? null, icon_dark_url: icon_dark_url ?? null };
+    if (typeof launch_url === "string" && launch_url !== "") app.launch_url = launch_url;
+    return app;
+  });
+  try {
+    storage()?.setItem(KEPT_CATALOG_KEY, JSON.stringify(kept));
+  } catch {
+  }
+  if (typeof document !== "undefined") document.dispatchEvent(new CustomEvent(CATALOG_EVENT));
+}
+function subscribeKnownAppCatalog(change) {
+  if (typeof window === "undefined" || typeof document === "undefined") return () => void 0;
+  const storageChange = (event) => {
+    if (event.key === KEPT_CATALOG_KEY) change();
+  };
+  document.addEventListener(CATALOG_EVENT, change);
+  window.addEventListener("storage", storageChange);
+  return () => {
+    document.removeEventListener(CATALOG_EVENT, change);
+    window.removeEventListener("storage", storageChange);
+  };
+}
+
+// src/app-switcher/theme.ts
+function themeMode(value) {
+  return value === "class" || value === "light" || value === "dark" ? value : "auto";
+}
+function isDark(mode = "auto") {
+  if (mode === "light" || mode === "dark") return mode === "dark";
+  if (typeof document === "undefined") return false;
+  const root = document.documentElement;
+  const marked = root.getAttribute("data-theme");
+  if (root.classList.contains("dark") || marked === "dark") return true;
+  if (root.classList.contains("light") || marked === "light") return false;
+  if (mode === "class") return false;
+  return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+var listeners = /* @__PURE__ */ new Set();
+var stop = null;
+function notify() {
+  for (const listener of [...listeners]) listener();
+}
+function subscribeTheme(change) {
+  listeners.add(change);
+  if (stop === null && typeof document !== "undefined") {
+    const observer = typeof MutationObserver === "function" ? new MutationObserver(notify) : null;
+    observer?.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "data-theme"] });
+    const media = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-color-scheme: dark)") : null;
+    media?.addEventListener?.("change", notify);
+    stop = () => {
+      observer?.disconnect();
+      media?.removeEventListener?.("change", notify);
+    };
+  }
+  return () => {
+    listeners.delete(change);
+    if (listeners.size === 0 && stop !== null) {
+      stop();
+      stop = null;
+    }
+  };
+}
+
+// src/app-switcher/styles.ts
+var FONT = "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', ui-sans-serif, system-ui, Arial, sans-serif";
+var PALETTE = `
+.root {
+    --fg: var(--foreground, #1f1d1a);
+    --muted-fg: var(--muted-foreground, #6b665e);
+    --surface: var(--popover, #ffffff);
+    --line: var(--border, #e6e3dd);
+    --hover: var(--secondary, #f2f0ec);
+    --tile: var(--muted, #f2f0ec);
+    --current: var(--accent-soft, #eef2ff);
+    --accent: var(--accent-strong, var(--primary, #2f5bd3));
+    --focus: var(--ring, #2f5bd3);
+    --shadow: var(--shadow-popover, 0 10px 30px -8px rgb(0 0 0 / 0.18), 0 2px 6px rgb(0 0 0 / 0.06));
+}
+.root.dark {
+    --fg: var(--foreground, #f3f2ef);
+    --muted-fg: var(--muted-foreground, #a29d94);
+    --surface: var(--popover, #24221f);
+    --line: var(--border, #3a3733);
+    --hover: var(--secondary, #312e2a);
+    --tile: var(--muted, #312e2a);
+    --current: var(--accent-soft, #26304a);
+    --accent: var(--accent-strong, var(--primary, #8aa6ff));
+    --focus: var(--ring, #8aa6ff);
+    --shadow: var(--shadow-popover, 0 10px 30px -8px rgb(0 0 0 / 0.6), 0 2px 6px rgb(0 0 0 / 0.3));
+}`;
+var ICON = `
+.icon { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; width: var(--size, 24px); height: var(--size, 24px); }
+.icon img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; object-fit: contain; }
+.icon img.on-dark { display: none; }
+.root.dark .icon img.on-light { display: none; }
+.root.dark .icon img.on-dark { display: block; }
+.icon.initials { border-radius: 6px; background: var(--tile); color: var(--fg); font: 600 10px/1 ${FONT}; letter-spacing: 0; text-transform: none; }`;
+var SWITCHER_CSS = `
+:host { all: initial; display: inline-flex; flex: none; vertical-align: middle; }
+:host([hidden]) { display: none; }
+*, *::before, *::after { box-sizing: border-box; }
+${PALETTE}
+.root { display: inline-flex; color: var(--fg); font: 400 13px/1.4 ${FONT}; }
+.trigger {
+    all: unset; box-sizing: border-box; display: inline-grid; place-items: center;
+    width: 32px; height: 32px; border-radius: 8px; color: var(--fg); background: transparent; cursor: pointer;
+    transition: background-color 150ms cubic-bezier(.4, 0, .2, 1);
+}
+.trigger svg { display: block; width: 18px; height: 18px; fill: currentColor; }
+.trigger:hover, .trigger[aria-expanded='true'] { background: var(--hover); }
+.trigger:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
+.trigger:disabled { cursor: default; opacity: .6; background: transparent; }
+.panel {
+    position: fixed; inset: auto; top: 0; left: 0; margin: 0; z-index: 2147483000;
+    width: min(292px, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow-y: auto;
+    padding: 12px; border: 1px solid var(--line); border-radius: 12px;
+    background: var(--surface); color: var(--fg); box-shadow: var(--shadow);
+    font: 400 13px/1.4 ${FONT}; text-align: left; outline: none;
+}
+.panel[hidden] { display: none; }
+.panel h2 { margin: 0 4px 8px; padding: 0; color: var(--fg); font: 600 14px/1.4 ${FONT}; letter-spacing: 0; text-transform: none; }
+.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; }
+.tile {
+    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
+    min-width: 0; min-height: 60px; padding: 8px 4px; border-radius: 8px;
+    color: var(--fg); background: transparent; font: 500 13px/1.25 ${FONT}; text-align: center; text-decoration: none; overflow-wrap: anywhere;
+}
+.tile:hover { background: var(--hover); }
+.tile[aria-current='true'] { background: var(--current); }
+.tile:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
+.tile .label { max-width: 100%; }
+.check { position: absolute; top: 5px; right: 8px; width: 12px; height: 12px; color: var(--accent); }
+.check svg { display: block; width: 12px; height: 12px; }
+.message { margin: 0; padding: 8px 4px; color: var(--muted-fg); font: 400 13px/1.4 ${FONT}; }
+${ICON}
+@media (prefers-reduced-motion: reduce) { .trigger { transition: none; } }`;
+var MARK_CSS = `
+:host { all: initial; display: inline-flex; flex: none; align-items: center; justify-content: center; vertical-align: middle; }
+:host([hidden]) { display: none; }
+${PALETTE}
+.root { display: inline-flex; --size: var(--cbox-service-mark-size, 24px); }
+${ICON}`;
+var sheets = /* @__PURE__ */ new Map();
+function adopt(root, css) {
+  if (!sheets.has(css)) {
+    let sheet2 = null;
+    try {
+      if ("adoptedStyleSheets" in Document.prototype && typeof CSSStyleSheet === "function") {
+        sheet2 = new CSSStyleSheet();
+        sheet2.replaceSync(css);
+      }
+    } catch {
+      sheet2 = null;
+    }
+    sheets.set(css, sheet2);
+  }
+  const sheet = sheets.get(css);
+  if (sheet) {
+    root.adoptedStyleSheets = [sheet];
+    return;
+  }
+  const style = document.createElement("style");
+  style.textContent = css;
+  root.append(style);
+}
+
+// src/app-switcher/elements.ts
+var DEFAULT_LABELS = {
+  title: "Switch app",
+  loading: "Loading apps\u2026",
+  empty: "No apps available",
+  unavailable: "Apps could not be loaded."
+};
+var SIGNIN_EVENT = "cbox-app-switcher:signin";
+var SIGNIN_GUARD = "cbox-app-switcher-signin";
+var LOOP_WINDOW_MS = 3e4;
+var REFRESH_INTERVAL_MS = 6e4;
+var SVG = "http://www.w3.org/2000/svg";
+function svg(viewBox, build, attributes = {}) {
+  const node = document.createElementNS(SVG, "svg");
+  node.setAttribute("viewBox", viewBox);
+  node.setAttribute("aria-hidden", "true");
+  node.setAttribute("focusable", "false");
+  for (const [name, value] of Object.entries(attributes)) node.setAttribute(name, value);
+  build(node);
+  return node;
+}
+function gridIcon() {
+  return svg("0 0 18 18", (node) => {
+    for (const y of [3, 9, 15]) {
+      for (const x of [3, 9, 15]) {
+        const dot = document.createElementNS(SVG, "circle");
+        dot.setAttribute("cx", String(x));
+        dot.setAttribute("cy", String(y));
+        dot.setAttribute("r", "1.65");
+        node.append(dot);
+      }
+    }
+  });
+}
+function checkIcon() {
+  return svg("0 0 24 24", (node) => {
+    const path = document.createElementNS(SVG, "path");
+    path.setAttribute("d", "m5 12 4 4L19 6");
+    node.append(path);
+  }, { fill: "none", stroke: "currentColor", "stroke-width": "1.8" });
+}
+function appIcon(app, missing) {
+  const box = document.createElement("span");
+  box.className = "icon";
+  box.setAttribute("aria-hidden", "true");
+  const fallback = () => {
+    box.replaceChildren();
+    if (missing === "initials") {
+      box.classList.add("initials");
+      box.textContent = initials(app.name);
+    }
+  };
+  const light = secureIconUrl(app.icon_url);
+  const dark = secureIconUrl(app.icon_dark_url);
+  if (light === null) {
+    fallback();
+    return box;
+  }
+  for (const [url, variant] of [[light, dark === null ? "single" : "on-light"], [dark, "on-dark"]]) {
+    if (url === null) continue;
+    const image = document.createElement("img");
+    image.alt = "";
+    image.decoding = "async";
+    image.className = variant;
+    image.addEventListener("error", fallback, { once: true });
+    image.src = url;
+    box.append(image);
+  }
+  return box;
+}
+function readLabels(value) {
+  try {
+    const parsed = JSON.parse(value ?? "{}");
+    if (typeof parsed !== "object" || parsed === null) return DEFAULT_LABELS;
+    const labels = { ...DEFAULT_LABELS };
+    for (const key of Object.keys(DEFAULT_LABELS)) {
+      const text = parsed[key];
+      if (typeof text === "string" && text !== "") labels[key] = text;
+    }
+    return labels;
+  } catch {
+    return DEFAULT_LABELS;
+  }
+}
+function recentlySentTo(url) {
+  try {
+    const kept = JSON.parse(window.sessionStorage.getItem(SIGNIN_GUARD) ?? "null");
+    if (typeof kept !== "object" || kept === null) return false;
+    const { url: sent, at } = kept;
+    return sent === url && typeof at === "number" && Date.now() - at < LOOP_WINDOW_MS;
+  } catch {
+    return false;
+  }
+}
+function markSentTo(url) {
+  try {
+    if (url === null) window.sessionStorage.removeItem(SIGNIN_GUARD);
+    else window.sessionStorage.setItem(SIGNIN_GUARD, JSON.stringify({ url, at: Date.now() }));
+  } catch {
+  }
+}
+function navigateTop(url) {
+  try {
+    if (window.top !== null && window.top !== window) {
+      window.top.location.href = url;
+      return;
+    }
+  } catch {
+  }
+  window.location.href = url;
+}
+var uid = 0;
+function defineSwitcher() {
+  return class CboxAppSwitcherElement extends HTMLElement {
+    static observedAttributes = ["endpoint", "current", "labels", "theme"];
+    frame;
+    button;
+    panel;
+    heading;
+    body;
+    native;
+    copy = DEFAULT_LABELS;
+    view = { kind: "loading" };
+    flight = null;
+    expires = 0;
+    failures = 0;
+    retry;
+    ticker;
+    signin = null;
+    mounted = false;
+    restoreFocus = false;
+    stopTheme = null;
+    syncTheme = () => {
+      this.frame.classList.toggle("dark", isDark(themeMode(this.getAttribute("theme"))));
+    };
+    refresh = () => {
+      if (document.visibilityState !== "hidden" && Date.now() >= this.expires) void this.load();
+    };
+    place = () => {
+      if (this.isOpen()) this.position();
+    };
+    outside = (event) => {
+      if (!event.composedPath().includes(this)) this.close();
+    };
+    constructor() {
+      super();
+      const shadow = this.attachShadow({ mode: "open" });
+      adopt(shadow, SWITCHER_CSS);
+      const id = `cbox-app-switcher-${++uid}`;
+      this.frame = document.createElement("div");
+      this.frame.className = "root";
+      this.button = document.createElement("button");
+      this.button.type = "button";
+      this.button.className = "trigger";
+      this.button.setAttribute("aria-haspopup", "dialog");
+      this.button.setAttribute("aria-expanded", "false");
+      this.button.setAttribute("aria-controls", `${id}-panel`);
+      this.button.append(gridIcon());
+      this.panel = document.createElement("div");
+      this.panel.id = `${id}-panel`;
+      this.panel.className = "panel";
+      this.panel.tabIndex = -1;
+      this.panel.setAttribute("role", "dialog");
+      this.panel.setAttribute("aria-labelledby", `${id}-title`);
+      this.native = typeof this.panel.togglePopover === "function";
+      if (this.native) {
+        this.panel.popover = "auto";
+        const invoker = this.button;
+        if ("popoverTargetElement" in invoker) invoker.popoverTargetElement = this.panel;
+        else invoker.setAttribute("popovertarget", this.panel.id);
+        this.panel.addEventListener("toggle", (event) => {
+          this.toggled(event.newState === "open");
+        });
+      } else {
+        this.panel.hidden = true;
+        this.button.addEventListener("click", () => {
+          if (this.isOpen()) this.close();
+          else this.open();
+        });
+      }
+      this.heading = document.createElement("h2");
+      this.heading.id = `${id}-title`;
+      this.body = document.createElement("div");
+      this.body.setAttribute("aria-live", "polite");
+      this.panel.append(this.heading, this.body);
+      this.panel.addEventListener("keydown", (event) => {
+        this.key(event);
+      });
+      this.frame.append(this.button, this.panel);
+      shadow.append(this.frame);
+    }
+    connectedCallback() {
+      if (this.mounted) return;
+      this.mounted = true;
+      this.applyLabels();
+      this.applyEndpoint();
+      this.syncTheme();
+      this.stopTheme = subscribeTheme(this.syncTheme);
+      this.paintKept();
+      this.ticker = setInterval(this.refresh, REFRESH_INTERVAL_MS);
+      window.addEventListener("focus", this.refresh);
+      document.addEventListener("visibilitychange", this.refresh);
+      window.addEventListener("resize", this.place);
+      window.addEventListener("scroll", this.place, true);
+      this.refresh();
+    }
+    disconnectedCallback() {
+      this.mounted = false;
+      this.flight?.abort();
+      this.flight = null;
+      clearInterval(this.ticker);
+      clearTimeout(this.retry);
+      this.retry = void 0;
+      this.stopTheme?.();
+      this.stopTheme = null;
+      window.removeEventListener("focus", this.refresh);
+      document.removeEventListener("visibilitychange", this.refresh);
+      window.removeEventListener("resize", this.place);
+      window.removeEventListener("scroll", this.place, true);
+      document.removeEventListener("pointerdown", this.outside, true);
+    }
+    attributeChangedCallback(name, before, after) {
+      if (!this.mounted || before === after) return;
+      if (name === "labels") {
+        this.applyLabels();
+        this.render();
+      }
+      if (name === "current") this.render();
+      if (name === "theme") this.syncTheme();
+      if (name === "endpoint") {
+        this.flight?.abort();
+        this.flight = null;
+        clearTimeout(this.retry);
+        this.retry = void 0;
+        this.expires = 0;
+        this.failures = 0;
+        this.signin = null;
+        this.view = { kind: "loading" };
+        this.applyEndpoint();
+        this.paintKept();
+        this.refresh();
+      }
+    }
+    applyLabels() {
+      this.copy = readLabels(this.getAttribute("labels"));
+      this.button.title = this.copy.title;
+      this.button.setAttribute("aria-label", this.copy.title);
+      this.heading.textContent = this.copy.title;
+    }
+    applyEndpoint() {
+      this.button.disabled = !this.getAttribute("endpoint");
+      if (this.button.disabled) this.close();
+    }
+    /** The last catalog this browser kept paints the grid at once; the live answer replaces it. */
+    paintKept() {
+      if (this.view.kind === "apps" && this.view.live) return;
+      const kept = readKnownAppCatalog().filter((app) => typeof app.launch_url === "string");
+      this.view = kept.length > 0 ? { kind: "apps", apps: kept, live: false, failed: false } : { kind: "loading" };
+      this.render();
+    }
+    isOpen() {
+      if (!this.native) return !this.panel.hidden;
+      try {
+        return this.panel.matches(":popover-open");
+      } catch {
+        return false;
+      }
+    }
+    open() {
+      if (this.button.disabled || this.isOpen()) return;
+      if (this.native) {
+        this.panel.showPopover();
+        return;
+      }
+      this.panel.hidden = false;
+      document.addEventListener("pointerdown", this.outside, true);
+      this.toggled(true);
+    }
+    close() {
+      if (!this.isOpen()) return;
+      if (this.native) {
+        this.panel.hidePopover();
+        return;
+      }
+      this.panel.hidden = true;
+      document.removeEventListener("pointerdown", this.outside, true);
+      this.toggled(false);
+    }
+    toggled(open) {
+      this.button.setAttribute("aria-expanded", String(open));
+      if (!open) {
+        if (this.restoreFocus && this.isConnected) this.button.focus();
+        this.restoreFocus = false;
+        return;
+      }
+      this.position();
+      if (this.signin !== null) {
+        this.goSignIn(this.signin);
+        return;
+      }
+      this.focusFirst();
+      this.refresh();
+    }
+    position() {
+      const box = this.button.getBoundingClientRect();
+      const width = Math.min(292, window.innerWidth - 16);
+      this.panel.style.width = `${width}px`;
+      this.panel.style.left = `${Math.max(8, Math.min(box.right - width, window.innerWidth - width - 8))}px`;
+      this.panel.style.top = `${box.bottom + 6}px`;
+      this.panel.style.maxHeight = `${Math.max(60, window.innerHeight - box.bottom - 14)}px`;
+    }
+    tiles() {
+      return [...this.body.querySelectorAll("a[href]")];
+    }
+    focusFirst() {
+      (this.tiles()[0] ?? this.panel).focus();
+    }
+    key(event) {
+      if (event.key === "Escape") {
+        this.restoreFocus = true;
+        if (!this.native) {
+          event.preventDefault();
+          this.close();
+        }
+        return;
+      }
+      const tiles = this.tiles();
+      const active = this.shadowRoot?.activeElement ?? null;
+      if (event.key === "Tab") {
+        const first = tiles[0];
+        const last = tiles.at(-1);
+        if (first === void 0 || last === void 0) {
+          event.preventDefault();
+          return;
+        }
+        if (event.shiftKey && (active === first || active === this.panel)) {
+          event.preventDefault();
+          last.focus();
+        } else if (!event.shiftKey && (active === last || active === this.panel)) {
+          event.preventDefault();
+          first.focus();
+        }
+        return;
+      }
+      const at = tiles.indexOf(active);
+      const step = { ArrowRight: 1, ArrowLeft: -1, ArrowDown: 3, ArrowUp: -3 };
+      let next = null;
+      if (event.key === "Home") next = 0;
+      else if (event.key === "End") next = tiles.length - 1;
+      else if (event.key in step) next = at === -1 ? 0 : Math.max(0, Math.min(tiles.length - 1, at + (step[event.key] ?? 0)));
+      if (next === null || tiles.length === 0) return;
+      event.preventDefault();
+      tiles[next]?.focus();
+    }
+    render() {
+      const view = this.view;
+      if (view.kind !== "apps") {
+        const text = view.kind === "empty" ? this.copy.empty : view.kind === "unavailable" ? this.copy.unavailable : this.copy.loading;
+        const message = document.createElement("p");
+        message.className = "message";
+        message.textContent = text;
+        if (view.kind === "unavailable") message.setAttribute("role", "status");
+        this.body.replaceChildren(message);
+        return;
+      }
+      const hadFocus = this.shadowRoot?.activeElement instanceof HTMLAnchorElement;
+      const nav = document.createElement("nav");
+      nav.className = "grid";
+      nav.setAttribute("aria-label", this.copy.title);
+      const current = this.getAttribute("current");
+      for (const app of view.apps) {
+        if (typeof app.launch_url !== "string") continue;
+        const tile = document.createElement("a");
+        tile.className = "tile";
+        tile.href = app.launch_url;
+        const description = "description" in app && typeof app.description === "string" ? app.description : null;
+        tile.title = description ?? displayName(app.name);
+        const label = document.createElement("span");
+        label.className = "label";
+        label.textContent = displayName(app.name);
+        tile.append(appIcon(app, "initials"), label);
+        if (app.key === current) {
+          tile.setAttribute("aria-current", "true");
+          const check = document.createElement("span");
+          check.className = "check";
+          check.append(checkIcon());
+          tile.append(check);
+        }
+        tile.addEventListener("click", () => {
+          this.close();
+        });
+        nav.append(tile);
+      }
+      const parts = [];
+      if (view.failed) {
+        const message = document.createElement("p");
+        message.className = "message";
+        message.setAttribute("role", "status");
+        message.textContent = this.copy.unavailable;
+        parts.push(message);
+      }
+      parts.push(nav);
+      this.body.replaceChildren(...parts);
+      if (hadFocus || this.isOpen() && this.shadowRoot?.activeElement === this.panel) this.focusFirst();
+    }
+    async load() {
+      const endpoint = this.getAttribute("endpoint");
+      if (!endpoint || this.flight !== null) return;
+      let source;
+      try {
+        source = new URL(endpoint, window.location.href);
+      } catch {
+        this.fail(false);
+        return;
+      }
+      if (source.origin !== window.location.origin) {
+        this.fail(false);
+        return;
+      }
+      const request = new AbortController();
+      this.flight = request;
+      try {
+        const response = await fetch(source.href, {
+          credentials: "same-origin",
+          cache: "no-store",
+          redirect: "error",
+          headers: { Accept: "application/json", "X-Requested-With": "XMLHttpRequest" },
+          signal: request.signal
+        });
+        const body = await response.json().catch(() => null);
+        if (request.signal.aborted || !this.isConnected) return;
+        const state = parseAppCatalog(response.ok, body);
+        if (state.status === "ready") {
+          this.failures = 0;
+          clearTimeout(this.retry);
+          this.retry = void 0;
+          this.signin = null;
+          markSentTo(null);
+          this.expires = Date.now() + state.refreshAfter * 1e3;
+          this.view = state.apps.length > 0 ? { kind: "apps", apps: state.apps, live: true, failed: false } : { kind: "empty" };
+          rememberAppCatalog(state.apps);
+          this.render();
+          return;
+        }
+        const target = state.status === "signin_required" ? signInTarget(state, window.location) : null;
+        if (target === null) {
+          this.fail(true);
+          return;
+        }
+        this.signin = target;
+        this.expires = 0;
+        if (this.isOpen()) this.goSignIn(target);
+      } catch {
+        if (!request.signal.aborted) this.fail(true);
+      } finally {
+        if (this.flight === request) this.flight = null;
+      }
+    }
+    /** Quietly say the apps could not be loaded, keep any grid, and try again by itself. */
+    fail(again) {
+      this.expires = 0;
+      this.view = this.view.kind === "apps" ? { ...this.view, failed: true } : { kind: "unavailable" };
+      this.render();
+      if (!again) return;
+      this.failures += 1;
+      clearTimeout(this.retry);
+      const delay = Math.min(REFRESH_INTERVAL_MS, 2e3 * 2 ** (this.failures - 1));
+      this.retry = setTimeout(() => {
+        this.retry = void 0;
+        this.refresh();
+      }, delay);
+    }
+    /** The person has to sign in again: go there, no question asked (but never in a loop). */
+    goSignIn(url) {
+      if (recentlySentTo(url)) {
+        this.signin = null;
+        this.fail(true);
+        return;
+      }
+      const event = new CustomEvent(SIGNIN_EVENT, { detail: { url }, bubbles: true, composed: true, cancelable: true });
+      if (!this.dispatchEvent(event)) return;
+      markSentTo(url);
+      navigateTop(url);
+    }
+  };
+}
+function defineServiceMark() {
+  return class CboxServiceMarkElement extends HTMLElement {
+    static observedAttributes = ["service", "theme"];
+    frame;
+    stops = [];
+    paint = () => {
+      const app = readKnownAppCatalog().find((entry) => entry.key === this.getAttribute("service"));
+      this.frame.replaceChildren(...app !== void 0 && secureIconUrl(app.icon_url) !== null ? [appIcon(app, "nothing")] : []);
+    };
+    syncTheme = () => {
+      this.frame.classList.toggle("dark", isDark(themeMode(this.getAttribute("theme"))));
+    };
+    constructor() {
+      super();
+      const shadow = this.attachShadow({ mode: "open" });
+      adopt(shadow, MARK_CSS);
+      this.frame = document.createElement("span");
+      this.frame.className = "root";
+      shadow.append(this.frame);
+    }
+    connectedCallback() {
+      this.stops.forEach((stop2) => stop2());
+      this.stops = [subscribeKnownAppCatalog(this.paint), subscribeTheme(this.syncTheme)];
+      this.syncTheme();
+      this.paint();
+    }
+    disconnectedCallback() {
+      this.stops.forEach((stop2) => stop2());
+      this.stops = [];
+    }
+    attributeChangedCallback(name) {
+      if (!this.isConnected) return;
+      if (name === "theme") this.syncTheme();
+      else this.paint();
+    }
+  };
+}
+function defineCboxAppSwitcher() {
+  if (typeof window === "undefined" || typeof customElements === "undefined") return;
+  if (customElements.get("cbox-service-mark") === void 0) customElements.define("cbox-service-mark", defineServiceMark());
+  if (customElements.get("cbox-app-switcher") === void 0) customElements.define("cbox-app-switcher", defineSwitcher());
+}
+
+export { DEFAULT_LABELS, SIGNIN_EVENT, authorizeHref, defineCboxAppSwitcher, initials, isDark, parseAppCatalog, readKnownAppCatalog, rememberAppCatalog, secureIconUrl, signInTarget, subscribeKnownAppCatalog };
+//# sourceMappingURL=chunk-AJCYF7SS.js.map
+//# sourceMappingURL=chunk-AJCYF7SS.js.map