@johndimm/constellations 1.0.1 → 1.0.3

package/components/NodeContextMenu.tsx

@@ -1,6 +1,7 @@
+"use client";
 import React from 'react';
 import { GraphNode } from '../types';
-import { Maximize, Plus, Sparkles, Trash2 } from 'lucide-react';
+import { ListMusic, Loader2, Maximize, Plus, Sparkles, Trash2 } from 'lucide-react';
 
 interface NodeContextMenuProps {
     node: GraphNode;
@@ -8,7 +9,9 @@ interface NodeContextMenuProps {
     y: number;
     onExpandLeaves: (node: GraphNode) => void;
     onAddMore: (node: GraphNode) => void;
-    onFindBetterPhoto: (nodeId: number) => void;
+    onFindBetterPhoto: (nodeId: number | string) => void;
+    /** When set (e.g. Soundings player), create a new channel seeded from this node. */
+    onNewChannelFromNode?: (node: GraphNode) => void;
     onDelete: (node: GraphNode) => void;
     onClose: () => void;
     isProcessing?: boolean;
@@ -21,6 +24,7 @@ const NodeContextMenu: React.FC<NodeContextMenuProps> = ({
     onExpandLeaves,
     onAddMore,
     onFindBetterPhoto,
+    onNewChannelFromNode,
     onDelete,
     onClose,
     isProcessing
@@ -30,12 +34,104 @@ const NodeContextMenu: React.FC<NodeContextMenuProps> = ({
         onClose();
     };
 
+    /**
+     * During fetch, `useExpansion` sets both `expanded` and `isLoading` on the parent,
+     * so we must not require `!expanded` — use `isLoading` only.
+     * (The menu receives the live node from App so `isLoading` stays current while open.)
+     */
+    const expansionInProgress = Boolean(node.isLoading);
+    /** While this node is expanding, do not block "new channel" on global isProcessing. */
+    const newChannelDisabled = isProcessing && !expansionInProgress;
+
     // Calculate position to keep menu on screen
     const menuWidth = 220;
-    const menuHeight = 180;
+    const menuHeight = expansionInProgress
+        ? (onNewChannelFromNode ? 150 : 100)
+        : onNewChannelFromNode
+            ? 230
+            : 180;
     const adjustedX = Math.min(x, window.innerWidth - menuWidth - 20);
     const adjustedY = Math.min(y, window.innerHeight - menuHeight - 20);
 
+    if (expansionInProgress) {
+        return (
+            <>
+                <div
+                    className="fixed inset-0 z-40"
+                    style={{ position: 'fixed', inset: 0, zIndex: 999998 }}
+                    onClick={onClose}
+                />
+                <div
+                    className="fixed z-50"
+                    style={{
+                        position: 'fixed',
+                        zIndex: 999999,
+                        left: `${adjustedX}px`,
+                        top: `${adjustedY}px`,
+                        minWidth: '240px',
+                        maxWidth: 'min(360px, 92vw)',
+                        padding: '10px 10px 8px',
+                        borderRadius: '10px',
+                        backgroundColor: 'rgba(15, 23, 42, 0.98)',
+                        border: '1px solid #334155',
+                        boxShadow: '0 20px 45px rgba(0,0,0,0.35)',
+                        color: '#f8fafc'
+                    }}
+                >
+                    <div
+                        style={{
+                            display: 'flex',
+                            alignItems: 'flex-start',
+                            gap: '8px',
+                            marginBottom: onNewChannelFromNode ? 10 : 0,
+                            fontSize: '12px',
+                            lineHeight: 1.35,
+                            color: '#94a3b8'
+                        }}
+                    >
+                        <Loader2 size={16} className="text-indigo-400 shrink-0 mt-0.5 animate-spin" />
+                        <div>
+                            <div className="text-slate-200 font-medium text-[13px] line-clamp-2" title={node.title}>
+                                {node.title}
+                            </div>
+                            <div className="mt-0.5">Expanding connections…</div>
+                        </div>
+                    </div>
+                    {onNewChannelFromNode && (
+                        <button
+                            onClick={() => handleAction(() => onNewChannelFromNode(node))}
+                            disabled={newChannelDisabled}
+                            className="disabled:opacity-50 disabled:cursor-not-allowed"
+                            type="button"
+                            style={{
+                                width: '100%',
+                                padding: '8px 12px',
+                                textAlign: 'left',
+                                fontSize: '13px',
+                                color: 'inherit',
+                                background: 'rgba(34, 211, 238, 0.08)',
+                                border: '1px solid rgba(34, 211, 238, 0.25)',
+                                borderRadius: '8px',
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: '10px',
+                                cursor: newChannelDisabled ? 'not-allowed' : 'pointer'
+                            }}
+                        >
+                            <ListMusic size={16} className="text-cyan-400" />
+                            <span>New channel from this node</span>
+                        </button>
+                    )}
+                    {!onNewChannelFromNode && (
+                        <p style={{ fontSize: '11px', color: '#64748b', margin: 0, lineHeight: 1.4 }}>
+                            Open the menu again after expansion for more actions.
+                        </p>
+                    )}
+                </div>
+            </>
+        );
+    }
+
     return (
         <>
             {/* Backdrop to close menu on click outside */}
@@ -131,6 +227,30 @@ const NodeContextMenu: React.FC<NodeContextMenuProps> = ({
                     <span>Find Better Photo</span>
                 </button>
 
+                {onNewChannelFromNode && (
+                    <button
+                        onClick={() => handleAction(() => onNewChannelFromNode(node))}
+                        disabled={newChannelDisabled}
+                        className="disabled:opacity-50 disabled:cursor-not-allowed"
+                        style={{
+                            width: '100%',
+                            padding: '8px 12px',
+                            textAlign: 'left',
+                            fontSize: '13px',
+                            color: 'inherit',
+                            background: 'transparent',
+                            border: 'none',
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '10px',
+                            cursor: newChannelDisabled ? 'not-allowed' : 'pointer'
+                        }}
+                    >
+                        <ListMusic size={16} className="text-cyan-400" />
+                        <span>New channel from node</span>
+                    </button>
+                )}
+
                 <div style={{ height: '1px', background: '#334155', margin: '6px 0' }} />
 
                 <button

package/components/PeopleBrowserSidebar.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React, { useState, useEffect, useCallback } from 'react';
 import { Search, X, Filter, ChevronRight } from 'lucide-react';
 
@@ -36,6 +37,10 @@ interface PeopleBrowserSidebarProps {
   isOpen: boolean;
   onClose: () => void;
   onSelectPerson: (personName: string) => void;
+  /** With `useAbsoluteLayout`, use `top-14` in the constellations `main`; with `fixed`, use viewport top. */
+  offsetTopClass?: string;
+  /** When true, position inside the graph `main` (embedded hosts); avoids broken `fixed` in iframes/clipped roots. */
+  useAbsoluteLayout?: boolean;
 }
 
 const sumPageViews = (pageviews: Record<string, number> | undefined) => {
@@ -49,7 +54,7 @@ const sumPageViews = (pageviews: Record<string, number> | undefined) => {
 const cleanCategoryLabel = (category: string) =>
   category.replace(/^Category:/i, '').replace(/_/g, ' ');
 
-const PeopleBrowserSidebar: React.FC<PeopleBrowserSidebarProps> = ({ isOpen, onClose, onSelectPerson }) => {
+const PeopleBrowserSidebar: React.FC<PeopleBrowserSidebarProps> = ({ isOpen, onClose, onSelectPerson, offsetTopClass = "top-16", useAbsoluteLayout = false }) => {
   const [people, setPeople] = useState<Person[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -456,15 +461,19 @@ const PeopleBrowserSidebar: React.FC<PeopleBrowserSidebarProps> = ({ isOpen, onC
 
   if (!isOpen) return null;
 
-  // Position at the same location as regular sidebar, but with higher z-index when open
-  const panelClasses = `fixed top-16 right-3 sm:right-4 z-[60] transition-transform duration-300 ease-in-out ${isCollapsed ? 'translate-x-[calc(100%+2rem)]' : 'translate-x-0'}`;
+  const pos = useAbsoluteLayout ? "absolute bottom-0" : "fixed";
+  const panelClasses = `${pos} right-3 sm:right-4 z-[60] transition-transform duration-300 ease-in-out ${isCollapsed ? "translate-x-[calc(100%+2rem)]" : "translate-x-0"} ${offsetTopClass}`;
   const panelStyle = isMobile
-    ? { width: 'calc(100% - 1.5rem)', maxWidth: '28rem' }
-    : { width: '28rem' };
+    ? { width: "calc(100% - 1.5rem)", maxWidth: "28rem" }
+    : { width: "28rem" };
 
   return (
     <div className={panelClasses} style={panelStyle}>
-      <div className="bg-slate-900/95 backdrop-blur-xl rounded-xl border border-slate-700 shadow-2xl relative pointer-events-auto flex flex-col max-h-[calc(100vh-2rem)]">
+      <div
+        className={`bg-slate-900/95 backdrop-blur-xl rounded-xl border border-slate-700 shadow-2xl relative pointer-events-auto flex flex-col ${
+          useAbsoluteLayout ? "max-h-[calc(100%-1.5rem)]" : "max-h-[calc(100vh-2rem)]"
+        }`}
+      >
         {/* Header */}
         <div className="p-4 border-b border-slate-700 flex-shrink-0">
           <div className="flex items-center justify-between mb-3">

package/components/Sidebar.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React, { useState, useEffect, useRef } from 'react';
 import { GraphNode, GraphLink } from '../types';
 import { X, ExternalLink, ChevronLeft, ChevronRight } from 'lucide-react';
@@ -11,11 +12,23 @@ interface SidebarProps {
   externalToggleSignal?: number;
   isAdminMode?: boolean;
   forceExpanded?: boolean;
+  /**
+   * Top offset: with `useAbsoluteLayout`, this is from the constellations `main` (use `top-14`).
+   * With `position: fixed`, use viewport space (e.g. `top-14` standalone or `top-[6.25rem]` over a host).
+   */
+  offsetTopClass?: string;
+  /**
+   * When true (e.g. embedded in Trailer), use `position: absolute` in the constellations root so
+   * the panel is not `fixed` to the wrong viewport/clip. Must match the control bar (`top-14` in `main`).
+   */
+  useAbsoluteLayout?: boolean;
 }
 
-const Sidebar: React.FC<SidebarProps> = ({ selectedNode, selectedLink, onClose, onCollapseChange, externalToggleSignal, isAdminMode, forceExpanded }) => {
+const Sidebar: React.FC<SidebarProps> = ({ selectedNode, selectedLink, onClose, onCollapseChange, externalToggleSignal, isAdminMode, forceExpanded, offsetTopClass = "top-14", useAbsoluteLayout = false }) => {
   const [isCollapsed, setIsCollapsed] = useState(false);
-  const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
+  const [isMobile, setIsMobile] = useState(
+    () => typeof window !== "undefined" && window.innerWidth < 768
+  );
   const [showFullSummary, setShowFullSummary] = useState(false);
   const userManuallyCollapsedRef = useRef(false);
   const lastToggleSignalRef = useRef<number | undefined>(undefined);
@@ -60,7 +73,7 @@ const Sidebar: React.FC<SidebarProps> = ({ selectedNode, selectedLink, onClose,
     setShowFullSummary(false);
   }, [selectedNode, selectedLink, isMobile, forceExpanded]);
 
-  // External toggle (from header button)
+  // External toggle (from header) — use functional setState (effect must not call a stale handler)
   useEffect(() => {
     if (externalToggleSignal === undefined) return;
     if (lastToggleSignalRef.current === undefined) {
@@ -69,15 +82,20 @@ const Sidebar: React.FC<SidebarProps> = ({ selectedNode, selectedLink, onClose,
     }
     if (externalToggleSignal !== lastToggleSignalRef.current) {
       lastToggleSignalRef.current = externalToggleSignal;
-      handleToggleCollapse();
+      setIsCollapsed((c) => {
+        const next = !c;
+        userManuallyCollapsedRef.current = next;
+        return next;
+      });
     }
   }, [externalToggleSignal]);
 
   const handleToggleCollapse = () => {
-    const newCollapsed = !isCollapsed;
-    setIsCollapsed(newCollapsed);
-    // Track that user manually collapsed it
-    userManuallyCollapsedRef.current = newCollapsed;
+    setIsCollapsed((c) => {
+      const next = !c;
+      userManuallyCollapsedRef.current = next;
+      return next;
+    });
   };
 
   if (!selectedNode && !selectedLink) return null;
@@ -86,35 +104,44 @@ const Sidebar: React.FC<SidebarProps> = ({ selectedNode, selectedLink, onClose,
   const isPerson = selectedNode ? (selectedNode.is_atomic === true || selectedNode.is_person === true || (selectedNode.type.toLowerCase() === 'person' || selectedNode.type.toLowerCase() === 'actor')) : false;
 
   // Unified side panel styling - slides right on both mobile and desktop
-  // Side panel styling - always slides right.
-  // When collapsed, we translate most of it away but leave 24px (1.5rem-ish) for the handle.
+  // When embedded, `absolute` + same `top` as control bar avoids `fixed` viewport/clip bugs in hosts.
   const effectiveMobile = forceExpanded ? false : isMobile;
-  const panelWidth = effectiveMobile ? 'calc(100vw - 1.5rem)' : '26rem';
-  const panelClasses = `fixed top-16 right-0 z-50 transition-transform duration-300 ease-in-out ${isCollapsed ? 'translate-x-[calc(100%-24px)]' : 'translate-x-0'}`;
-  const panelStyle = { width: panelWidth, maxWidth: '28rem', paddingRight: effectiveMobile ? '0.75rem' : '1rem' };
+  const panelWidth = effectiveMobile
+    ? useAbsoluteLayout
+      ? "calc(100% - 1.5rem)"
+      : "calc(100vw - 1.5rem)"
+    : "26rem";
+  const pos = useAbsoluteLayout ? "absolute" : "fixed";
+  const panelClasses = `${pos} bottom-0 right-0 z-[55] transition-transform duration-300 ease-in-out ${isCollapsed ? "translate-x-[calc(100%-24px)]" : "translate-x-0"} ${offsetTopClass}`;
+  const panelStyle: React.CSSProperties = {
+    width: panelWidth,
+    maxWidth: "28rem",
+    paddingRight: effectiveMobile ? "0.75rem" : "1rem",
+  };
 
   return (
     <>
       <div className={panelClasses} style={panelStyle}>
-        <div className="bg-slate-900/95 backdrop-blur-xl rounded-xl border border-slate-700 shadow-2xl relative pointer-events-auto flex flex-col p-6 h-[calc(100vh-6rem)] overflow-visible">
+        <div className="bg-slate-900/95 backdrop-blur-xl rounded-xl border border-slate-700 shadow-2xl relative pointer-events-auto flex h-full min-h-0 flex-col overflow-hidden p-4 sm:p-6">
           {/* Persistent Toggle Handle */}
           <button
+            type="button"
             onClick={handleToggleCollapse}
             className={`absolute top-1/2 -translate-y-1/2 -left-8 w-8 h-24 bg-slate-800 border border-slate-700 border-r-0 rounded-l-xl flex flex-col items-center justify-center text-slate-400 hover:text-white transition-all group shadow-xl ${isCollapsed ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'}`}
-            title={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+            title={isCollapsed ? "Expand details panel" : "Collapse details panel"}
           >
             {isCollapsed ? <ChevronLeft size={16} /> : <ChevronRight size={16} />}
             <div className="[writing-mode:vertical-lr] text-[9px] uppercase tracking-tighter mt-1 font-bold">Details</div>
           </button>
 
-          <div className="flex-1 overflow-visible">
-            <div className="flex justify-between items-start mb-4">
-              <h2 className="text-xl font-bold text-white leading-tight">
+          <div className="flex min-h-0 flex-1 flex-col overflow-y-auto pr-1 custom-scrollbar">
+            <div className="mb-3 shrink-0">
+              <h2 className="text-xl font-bold leading-tight text-white">
                 {selectedNode ? selectedNode.title : "Connection Details"}
               </h2>
             </div>
 
-            <div className="space-y-4 overflow-y-auto pr-1">
+            <div className="min-h-0 space-y-4 pb-1">
               {/* Selected Edge Evidence (when user clicks an edge) */}
               {selectedLink && (
                 <div className="p-3 bg-slate-800/40 rounded-lg border border-slate-600/40">

package/components/TimelineView.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React from 'react';
 // This component has been deprecated and its functionality integrated into Graph.tsx
 const TimelineView: React.FC = () => null;