@bakapiano/ccsm 0.22.6 → 0.22.8

package/public/js/components/Popover.js

@@ -1,55 +1,55 @@
-// Tiny popover primitive — positions a floating panel relative to an
-// anchor element, closes on outside click + Escape. Used by the unified
-// pickers (CLI / Folder / Repo) so they all share interaction behavior.
-//
-// Usage:
-//   const [open, setOpen] = useState(false);
-//   const anchor = useRef(null);
-//   <button ref=${anchor} onClick=${() => setOpen(true)}>Trigger</button>
-//   ${open ? html`<${Popover} anchor=${anchor} onClose=${() => setOpen(false)}>
-//     ...panel contents...
-//   </${Popover}>` : null}
-
-import { html } from '../html.js';
-import { useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
-import { createPortal } from 'preact/compat';
-
-export function Popover({ anchor, onClose, align = 'left', width, children }) {
-  const panelRef = useRef(null);
-  const [pos, setPos] = useState({ top: 0, left: 0, width: width || 320 });
-
-  useLayoutEffect(() => {
-    const a = anchor && anchor.current;
-    if (!a) return;
-    const rect = a.getBoundingClientRect();
-    const w = width || Math.max(rect.width, 320);
-    let left = align === 'right' ? rect.right - w : rect.left;
-    // Clamp to viewport with 8px margin.
-    left = Math.max(8, Math.min(window.innerWidth - w - 8, left));
-    const top = rect.bottom + 6;
-    setPos({ top, left, width: w });
-  }, [anchor, align, width]);
-
-  useEffect(() => {
-    const onDown = (ev) => {
-      if (panelRef.current?.contains(ev.target)) return;
-      if (anchor.current?.contains(ev.target)) return;
-      onClose?.();
-    };
-    const onKey = (ev) => { if (ev.key === 'Escape') onClose?.(); };
-    document.addEventListener('mousedown', onDown, true);
-    document.addEventListener('keydown', onKey, true);
-    return () => {
-      document.removeEventListener('mousedown', onDown, true);
-      document.removeEventListener('keydown', onKey, true);
-    };
-  }, [anchor, onClose]);
-
-  return createPortal(
-    html`<div ref=${panelRef} class="popover-panel"
-              style=${`top:${pos.top}px;left:${pos.left}px;width:${pos.width}px;`}>
-      ${children}
-    </div>`,
-    document.body
-  );
-}
+// Tiny popover primitive — positions a floating panel relative to an
+// anchor element, closes on outside click + Escape. Used by the unified
+// pickers (CLI / Folder / Repo) so they all share interaction behavior.
+//
+// Usage:
+//   const [open, setOpen] = useState(false);
+//   const anchor = useRef(null);
+//   <button ref=${anchor} onClick=${() => setOpen(true)}>Trigger</button>
+//   ${open ? html`<${Popover} anchor=${anchor} onClose=${() => setOpen(false)}>
+//     ...panel contents...
+//   </${Popover}>` : null}
+
+import { html } from '../html.js';
+import { useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
+import { createPortal } from 'preact/compat';
+
+export function Popover({ anchor, onClose, align = 'left', width, children }) {
+  const panelRef = useRef(null);
+  const [pos, setPos] = useState({ top: 0, left: 0, width: width || 320 });
+
+  useLayoutEffect(() => {
+    const a = anchor && anchor.current;
+    if (!a) return;
+    const rect = a.getBoundingClientRect();
+    const w = width || Math.max(rect.width, 320);
+    let left = align === 'right' ? rect.right - w : rect.left;
+    // Clamp to viewport with 8px margin.
+    left = Math.max(8, Math.min(window.innerWidth - w - 8, left));
+    const top = rect.bottom + 6;
+    setPos({ top, left, width: w });
+  }, [anchor, align, width]);
+
+  useEffect(() => {
+    const onDown = (ev) => {
+      if (panelRef.current?.contains(ev.target)) return;
+      if (anchor.current?.contains(ev.target)) return;
+      onClose?.();
+    };
+    const onKey = (ev) => { if (ev.key === 'Escape') onClose?.(); };
+    document.addEventListener('mousedown', onDown, true);
+    document.addEventListener('keydown', onKey, true);
+    return () => {
+      document.removeEventListener('mousedown', onDown, true);
+      document.removeEventListener('keydown', onKey, true);
+    };
+  }, [anchor, onClose]);
+
+  return createPortal(
+    html`<div ref=${panelRef} class="popover-panel"
+              style=${`top:${pos.top}px;left:${pos.left}px;width:${pos.width}px;`}>
+      ${children}
+    </div>`,
+    document.body
+  );
+}

package/public/js/components/RestartOverlay.js

@@ -1,36 +1,36 @@
-// Small top-of-viewport banner shown while a user-initiated backend
-// restart is in flight. Used to be a full-screen blocking modal;
-// turned out the user just wanted visible "we're working" feedback,
-// not a giant card-and-button covering the page. Self-dismisses when
-// /api/health reports a fresh PID (different from the one we captured
-// at click time), or after 30s as a safety net.
-
-import { html } from '../html.js';
-import { useEffect } from 'preact/hooks';
-import { restartInFlight, serverHealth } from '../state.js';
-import { refreshAll } from '../api.js';
-
-export function RestartOverlay() {
-  const info = restartInFlight.value;
-  const h = serverHealth.value;
-
-  useEffect(() => {
-    if (!info) return;
-    if (h.state === 'online' && h.pid && h.pid !== info.prevPid) {
-      restartInFlight.value = null;
-      refreshAll().catch(() => {});
-    }
-    const id = setTimeout(() => {
-      if (restartInFlight.value === info) restartInFlight.value = null;
-    }, 30_000);
-    return () => clearTimeout(id);
-  }, [info, h.state, h.pid]);
-
-  if (!info) return null;
-
-  return html`
-    <div class="restart-banner" role="status" aria-live="polite">
-      <span class="restart-banner-spinner" aria-hidden="true"></span>
-      <span class="restart-banner-text">Restarting backend…</span>
-    </div>`;
-}
+// Small top-of-viewport banner shown while a user-initiated backend
+// restart is in flight. Used to be a full-screen blocking modal;
+// turned out the user just wanted visible "we're working" feedback,
+// not a giant card-and-button covering the page. Self-dismisses when
+// /api/health reports a fresh PID (different from the one we captured
+// at click time), or after 30s as a safety net.
+
+import { html } from '../html.js';
+import { useEffect } from 'preact/hooks';
+import { restartInFlight, serverHealth } from '../state.js';
+import { refreshAll } from '../api.js';
+
+export function RestartOverlay() {
+  const info = restartInFlight.value;
+  const h = serverHealth.value;
+
+  useEffect(() => {
+    if (!info) return;
+    if (h.state === 'online' && h.pid && h.pid !== info.prevPid) {
+      restartInFlight.value = null;
+      refreshAll().catch(() => {});
+    }
+    const id = setTimeout(() => {
+      if (restartInFlight.value === info) restartInFlight.value = null;
+    }, 30_000);
+    return () => clearTimeout(id);
+  }, [info, h.state, h.pid]);
+
+  if (!info) return null;
+
+  return html`
+    <div class="restart-banner" role="status" aria-live="polite">
+      <span class="restart-banner-spinner" aria-hidden="true"></span>
+      <span class="restart-banner-text">Restarting backend…</span>
+    </div>`;
+}