@smartnet360/svelte-components 0.0.135 → 0.0.137

package/dist/core/CellTable/CellTablePanel.svelte

@@ -1,833 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import CellTable from './CellTable.svelte';
-	import CellTableToolbar from './CellTableToolbar.svelte';
-	import { getColumnMetadata, getPresetVisibleFields, DEFAULT_TECH_COLORS, DEFAULT_STATUS_COLORS, FBAND_COLORS } from './column-config';
-	import type {
-		CellData,
-		CellTableGroupField,
-		ColumnPreset,
-		RowSelectionEvent,
-		RowClickEvent,
-		RowDblClickEvent,
-		RowContextMenuEvent,
-		DataChangeEvent,
-		TechColorMap,
-		StatusColorMap,
-		GroupOption
-	} from './types';
-
-	interface Props {
-		/** Cell data array to display */
-		cells: CellData[];
-		/** Initial grouping field */
-		groupBy?: CellTableGroupField;
-		/** Custom grouping options (overrides default tech/fband/status options) */
-		groupOptions?: GroupOption[];
-		/** Initial column preset */
-		columnPreset?: ColumnPreset;
-		/** Enable row selection */
-		selectable?: boolean;
-		/** Enable multi-row selection */
-		multiSelect?: boolean;
-		/** Panel height (CSS value) */
-		height?: string;
-		/** Show toolbar */
-		showToolbar?: boolean;
-		/** Show column presets dropdown and column picker (set false for simple tables) */
-		showColumnPresets?: boolean;
-		/** Show export buttons */
-		showExport?: boolean;
-		/** Show JSON export button (requires showExport=true) */
-		showJsonExport?: boolean;
-		/** Technology color mapping */
-		techColors?: TechColorMap;
-		/** Status color mapping */
-		statusColors?: StatusColorMap;
-		/** Enable header filters */
-		headerFilters?: boolean;
-		/** Panel title */
-		title?: string;
-		/** Show details sidebar */
-		showDetailsSidebar?: boolean;
-		/** Sidebar width in pixels */
-		sidebarWidth?: number;
-		/** Persist settings (groupBy, visibleColumns) to localStorage */
-		persistSettings?: boolean;
-		/** Storage key prefix for persisted settings */
-		storageKey?: string;
-		/** Enable Tabulator persistence for column widths, order, visibility */
-		persistLayout?: boolean;
-		/** Show scrollspy navigation bar for quick group navigation */
-		showScrollSpy?: boolean;
-		/** Bindable reference to table methods */
-		tableRef?: { redraw: () => void } | null;
-		/** Row selection change event */
-		onselectionchange?: (event: RowSelectionEvent) => void;
-		/** Row click event */
-		onrowclick?: (event: RowClickEvent) => void;
-		/** Row double-click event */
-		onrowdblclick?: (event: RowDblClickEvent) => void;
-		/** Custom header search slot (appears next to title) */
-		headerSearch?: Snippet;
-		/** Custom header actions slot */
-		headerActions?: Snippet;
-		/** Custom footer slot */
-		footer?: Snippet<[{ selectedRows: CellData[]; selectedCount: number }]>;
-		/** Custom details sidebar content */
-		detailsContent?: Snippet<[{ cell: CellData | null; closeSidebar: () => void }]>;
-		/** Custom context menu content (right-click on row) */
-		contextMenu?: Snippet<[{ row: CellData; closeMenu: () => void }]>;
-	}
-
-	let {
-		cells = [],
-		groupBy = $bindable('none'),
-		groupOptions,
-		columnPreset = $bindable('default'),
-		selectable = true,
-		multiSelect = true,
-		height = '100%',
-		showToolbar = true,
-		showColumnPresets = true,
-		showExport = true,
-		showJsonExport = false,
-		techColors,
-		statusColors,
-		headerFilters = true,
-		title = 'Cell Data',
-		showDetailsSidebar = false,
-		sidebarWidth = 320,
-		persistSettings = true,
-		storageKey = 'cell-table',
-		persistLayout = true,
-		showScrollSpy = false,
-		tableRef = $bindable(null),
-		onselectionchange,
-		onrowclick,
-		onrowdblclick,
-		headerSearch,
-		headerActions,
-		footer,
-		detailsContent,
-		contextMenu
-	}: Props = $props();
-
-	// Context menu state
-	let contextMenuVisible = $state(false);
-	let contextMenuRow: CellData | null = $state(null);
-	let contextMenuPosition = $state({ x: 0, y: 0 });
-
-	// Storage keys
-	const STORAGE_KEY_GROUP = `${storageKey}-groupBy`;
-	const STORAGE_KEY_FILTERS = `${storageKey}-filtersVisible`;
-	const STORAGE_KEY_SCROLLSPY = `${storageKey}-scrollSpyEnabled`;
-	const STORAGE_KEY_PRESET = `${storageKey}-columnPreset`;
-	
-	// Per-preset column visibility storage key
-	function getColumnsStorageKey(preset: ColumnPreset): string {
-		return `${storageKey}-visibleColumns-${preset}`;
-	}
-
-	// Load persisted settings
-	function loadPersistedSettings() {
-		if (!persistSettings || typeof localStorage === 'undefined') return { filtersVisible: true, scrollSpyEnabled: showScrollSpy, preset: null };
-		
-		let filters = true;
-		let scrollSpy = showScrollSpy;
-		let preset: ColumnPreset | null = null;
-		
-		try {
-			const savedGroup = localStorage.getItem(STORAGE_KEY_GROUP);
-			if (savedGroup) {
-				groupBy = savedGroup as CellTableGroupField;
-			}
-			
-			const savedPreset = localStorage.getItem(STORAGE_KEY_PRESET);
-			if (savedPreset) {
-				preset = savedPreset as ColumnPreset;
-			}
-			
-			const savedFilters = localStorage.getItem(STORAGE_KEY_FILTERS);
-			if (savedFilters !== null) {
-				filters = savedFilters === 'true';
-			}
-			
-			const savedScrollSpy = localStorage.getItem(STORAGE_KEY_SCROLLSPY);
-			if (savedScrollSpy !== null) {
-				scrollSpy = savedScrollSpy === 'true';
-			}
-		} catch (e) {
-			console.warn('Failed to load CellTable settings:', e);
-		}
-		return { filtersVisible: filters, scrollSpyEnabled: scrollSpy, preset };
-	}
-	
-	// Load columns for a specific preset
-	function loadColumnsForPreset(preset: ColumnPreset): string[] {
-		if (!persistSettings || typeof localStorage === 'undefined') {
-			return getPresetVisibleFields(preset);
-		}
-		try {
-			const saved = localStorage.getItem(getColumnsStorageKey(preset));
-			if (saved) {
-				return JSON.parse(saved) as string[];
-			}
-		} catch (e) {
-			console.warn('Failed to load columns for preset:', e);
-		}
-		return getPresetVisibleFields(preset);
-	}
-
-	// Save group setting
-	function saveGroupSetting(group: CellTableGroupField) {
-		if (!persistSettings || typeof localStorage === 'undefined') return;
-		try {
-			localStorage.setItem(STORAGE_KEY_GROUP, group);
-		} catch (e) {
-			console.warn('Failed to save group setting:', e);
-		}
-	}
-
-	// Save column visibility for current preset
-	function saveColumnVisibility(columns: string[]) {
-		if (!persistSettings || typeof localStorage === 'undefined') return;
-		try {
-			localStorage.setItem(getColumnsStorageKey(columnPreset), JSON.stringify(columns));
-		} catch (e) {
-			console.warn('Failed to save column visibility:', e);
-		}
-	}
-
-	// Save filter visibility
-	function saveFilterVisibility(visible: boolean) {
-		if (!persistSettings || typeof localStorage === 'undefined') return;
-		try {
-			localStorage.setItem(STORAGE_KEY_FILTERS, String(visible));
-		} catch (e) {
-			console.warn('Failed to save filter visibility:', e);
-		}
-	}
-
-	// Save scrollspy state
-	function saveScrollSpyState(enabled: boolean) {
-		if (!persistSettings || typeof localStorage === 'undefined') return;
-		try {
-			localStorage.setItem(STORAGE_KEY_SCROLLSPY, String(enabled));
-		} catch (e) {
-			console.warn('Failed to save scrollspy state:', e);
-		}
-	}
-
-	// Save column preset
-	function savePreset(preset: ColumnPreset) {
-		if (!persistSettings || typeof localStorage === 'undefined') return;
-		try {
-			localStorage.setItem(STORAGE_KEY_PRESET, preset);
-		} catch (e) {
-			console.warn('Failed to save preset:', e);
-		}
-	}
-
-	let cellTable: CellTable;
-	let selectedCount = $state(0);
-	let selectedRows = $state<CellData[]>([]);
-	let filteredCount = $state(cells.length);
-	let sidebarOpen = $state(false);
-	let clickedCell: CellData | null = $state(null);
-	let tableRefSet = false;
-
-	// Column visibility management
-	const columnMeta = getColumnMetadata();
-	
-	// Initialize from storage or defaults
-	const persistedSettings = loadPersistedSettings();
-	let filtersVisible = $state(persistedSettings.filtersVisible);
-	
-	// Apply persisted preset if available
-	if (persistedSettings.preset) {
-		columnPreset = persistedSettings.preset;
-	}
-	
-	// Load columns for the current preset (with any saved customizations)
-	let visibleColumns = $state<string[]>(loadColumnsForPreset(columnPreset));
-	
-	// ScrollSpy state - initialize from persisted settings
-	let scrollSpyGroups = $state<{ key: string; count: number }[]>([]);
-	let scrollSpyEnabled = $state(persistedSettings.scrollSpyEnabled);
-
-	// Track preset changes to load per-preset columns
-	let prevPreset: ColumnPreset | null = columnPreset;
-	
-	// Apply column visibility to Tabulator
-	function applyColumnVisibility(columns: string[]) {
-		if (!cellTable) return;
-		columnMeta.forEach(col => {
-			if (columns.includes(col.field)) {
-				cellTable.showColumn(col.field);
-			} else {
-				cellTable.hideColumn(col.field);
-			}
-		});
-	}
-	
-	// Update visible columns when preset changes - load saved customizations for that preset
-	$effect(() => {
-		if (columnPreset !== prevPreset) {
-			prevPreset = columnPreset;
-			// Load saved columns for this preset (or preset defaults if none saved)
-			const newColumns = loadColumnsForPreset(columnPreset);
-			visibleColumns = newColumns;
-			// Apply to Tabulator
-			applyColumnVisibility(newColumns);
-		}
-	});
-
-	// Expose table methods via tableRef - only set once
-	$effect(() => {
-		if (cellTable && !tableRefSet) {
-			tableRefSet = true;
-			tableRef = {
-				redraw: () => cellTable?.redraw()
-			};
-			// Apply persisted column visibility after table is ready
-			setTimeout(() => applyColumnVisibility(visibleColumns), 100);
-			// Apply persisted filter visibility after table is ready
-			if (!filtersVisible) {
-				setTimeout(() => cellTable?.toggleHeaderFilters(false), 100);
-			}
-		}
-	});
-
-	function handleSelectionChange(event: RowSelectionEvent) {
-		selectedCount = event.rows.length;
-		selectedRows = event.rows;
-		onselectionchange?.(event);
-	}
-
-	function handleRowClick(event: RowClickEvent) {
-		if (showDetailsSidebar) {
-			clickedCell = event.row;
-			sidebarOpen = true;
-			setTimeout(() => cellTable?.redraw(), 320);
-		}
-		onrowclick?.(event);
-	}
-
-	function handleDataChange(event: DataChangeEvent) {
-		filteredCount = event.filteredCount;
-		// Update scrollspy groups when data changes
-		updateScrollSpyGroups();
-	}
-
-	function handleRowContextMenu(event: RowContextMenuEvent) {
-		if (contextMenu) {
-			contextMenuRow = event.row;
-			contextMenuPosition = { x: event.event.clientX, y: event.event.clientY };
-			contextMenuVisible = true;
-		}
-	}
-
-	function closeContextMenu() {
-		contextMenuVisible = false;
-		contextMenuRow = null;
-	}
-
-	function handleClickOutside(event: MouseEvent) {
-		const target = event.target as HTMLElement;
-		if (!target.closest('.context-menu-container')) {
-			closeContextMenu();
-		}
-	}
-
-	function updateScrollSpyGroups() {
-		if (scrollSpyEnabled && groupBy !== 'none') {
-			// Small delay to ensure table has updated
-			setTimeout(() => {
-				scrollSpyGroups = cellTable?.getGroups() ?? [];
-			}, 50);
-		} else {
-			scrollSpyGroups = [];
-		}
-	}
-
-	function handleScrollToGroup(key: string) {
-		cellTable?.scrollToGroup(key);
-	}
-
-	function handleToggleScrollSpy() {
-		scrollSpyEnabled = !scrollSpyEnabled;
-		saveScrollSpyState(scrollSpyEnabled);
-		if (scrollSpyEnabled && groupBy !== 'none') {
-			updateScrollSpyGroups();
-		} else {
-			scrollSpyGroups = [];
-		}
-	}
-
-	function handleGroupChange(group: CellTableGroupField) {
-		groupBy = group;
-		saveGroupSetting(group);
-		// Update scrollspy groups after grouping changes
-		if (scrollSpyEnabled) {
-			setTimeout(() => updateScrollSpyGroups(), 100);
-		}
-	}
-
-	function handlePresetChange(preset: ColumnPreset) {
-		columnPreset = preset;
-		savePreset(preset);
-	}
-
-	function handleExportCSV() {
-		cellTable?.downloadCSV(`cells-${new Date().toISOString().slice(0, 10)}.csv`);
-	}
-
-	function handleExportJSON() {
-		cellTable?.downloadJSON(`cells-${new Date().toISOString().slice(0, 10)}.json`);
-	}
-
-	function handleClearFilters() {
-		cellTable?.clearFilters();
-	}
-
-	function handleCollapseAll() {
-		cellTable?.collapseAll();
-	}
-
-	function handleExpandAll() {
-		cellTable?.expandAll();
-	}
-
-	function handleToggleFilters() {
-		filtersVisible = !filtersVisible;
-		cellTable?.toggleHeaderFilters(filtersVisible);
-		saveFilterVisibility(filtersVisible);
-	}
-
-	function handleColumnVisibilityChange(field: string, visible: boolean) {
-		if (visible) {
-			if (!visibleColumns.includes(field)) {
-				visibleColumns = [...visibleColumns, field];
-			}
-			cellTable?.showColumn(field);
-		} else {
-			visibleColumns = visibleColumns.filter(f => f !== field);
-			cellTable?.hideColumn(field);
-		}
-		saveColumnVisibility(visibleColumns);
-	}
-
-	function handleResetColumns() {
-		const defaultFields = getPresetVisibleFields(columnPreset);
-		visibleColumns = defaultFields;
-		// Show/hide columns to match preset
-		columnMeta.forEach(col => {
-			if (defaultFields.includes(col.field)) {
-				cellTable?.showColumn(col.field);
-			} else {
-				cellTable?.hideColumn(col.field);
-			}
-		});
-		// Clear persisted column visibility for this preset (use preset defaults)
-		if (persistSettings && typeof localStorage !== 'undefined') {
-			try {
-				localStorage.removeItem(getColumnsStorageKey(columnPreset));
-			} catch (e) {
-				console.warn('Failed to clear column visibility:', e);
-			}
-		}
-	}
-
-	function toggleSidebar() {
-		sidebarOpen = !sidebarOpen;
-		setTimeout(() => cellTable?.redraw(), 320);
-	}
-
-	function closeSidebar() {
-		sidebarOpen = false;
-		setTimeout(() => cellTable?.redraw(), 320);
-	}
-
-	// Expose table methods
-	export function getSelectedRows(): CellData[] {
-		return cellTable?.getSelectedRows() ?? [];
-	}
-
-	export function clearSelection(): void {
-		cellTable?.clearSelection();
-	}
-
-	export function scrollToRow(id: string): void {
-		cellTable?.scrollToRow(id);
-	}
-
-	export function redraw(): void {
-		cellTable?.redraw();
-	}
-
-	export function openSidebar(): void {
-		sidebarOpen = true;
-		setTimeout(() => cellTable?.redraw(), 320);
-	}
-</script>
-
-<div class="cell-table-panel d-flex flex-column" style:height>
-	<!-- Header -->
-	<div class="panel-header d-flex align-items-center justify-content-between px-3 py-2 bg-body-secondary border-bottom">
-		<div class="d-flex align-items-center gap-3">
-			<h6 class="mb-0 d-flex align-items-center gap-2">
-				<i class="bi bi-table text-primary"></i>
-				{title}
-			</h6>
-			{#if headerSearch}
-				{@render headerSearch()}
-			{/if}
-		</div>
-		<div class="d-flex align-items-center gap-2">
-			{#if headerActions}
-				<div class="header-actions">
-					{@render headerActions()}
-				</div>
-			{/if}
-			{#if showDetailsSidebar}
-				<button 
-					class="btn btn-sm"
-					class:btn-outline-secondary={!sidebarOpen}
-					class:btn-secondary={sidebarOpen}
-					onclick={toggleSidebar}
-					title={sidebarOpen ? 'Hide details' : 'Show details'}
-				>
-					<i class="bi" class:bi-layout-sidebar-reverse={!sidebarOpen} class:bi-x-lg={sidebarOpen}></i>
-				</button>
-			{/if}
-		</div>
-	</div>
-
-	<!-- Toolbar -->
-	{#if showToolbar}
-		<CellTableToolbar
-			{groupBy}
-			{groupOptions}
-			{columnPreset}
-			totalCount={cells.length}
-			{filteredCount}
-			{selectedCount}
-			{showExport}
-			{showJsonExport}
-			showPresets={showColumnPresets}
-			ongroupchange={handleGroupChange}
-			onpresetchange={handlePresetChange}
-			onexportcsv={handleExportCSV}
-			onexportjson={handleExportJSON}
-			onclearfilters={handleClearFilters}
-			oncollapseall={handleCollapseAll}
-			onexpandall={handleExpandAll}
-			{filtersVisible}
-			ontogglefilters={handleToggleFilters}
-			{columnMeta}
-			{visibleColumns}
-			oncolumnvisibilitychange={handleColumnVisibilityChange}
-			onresetcolumns={handleResetColumns}
-			{scrollSpyEnabled}
-			showScrollSpyToggle={showScrollSpy}
-			ontogglescrollspy={handleToggleScrollSpy}
-		/>
-	{/if}
-
-	<!-- ScrollSpy Navigation Bar -->
-	{#if scrollSpyEnabled && groupBy !== 'none' && scrollSpyGroups.length > 0}
-		<div class="scrollspy-bar d-flex align-items-center gap-2 px-3 py-2 bg-body-tertiary border-bottom overflow-auto">
-			<span class="text-muted small me-1">
-				<i class="bi bi-signpost-split"></i> Jump to:
-			</span>
-			{#each scrollSpyGroups as group (group.key)}
-				{@const bgColor = groupBy === 'tech' 
-					? (techColors?.[group.key] ?? DEFAULT_TECH_COLORS[group.key] ?? '#6c757d')
-					: groupBy === 'fband'
-						? (FBAND_COLORS[group.key] ?? '#6c757d')
-						: groupBy === 'status'
-							? (statusColors?.[group.key] ?? DEFAULT_STATUS_COLORS[group.key] ?? '#6c757d')
-							: '#6c757d'}
-				<button
-					type="button"
-					class="btn btn-sm scrollspy-badge"
-					style="background-color: {bgColor}; border-color: {bgColor}; color: white;"
-					onclick={() => handleScrollToGroup(group.key)}
-					title="Scroll to {group.key} ({group.count} cells)"
-				>
-					<span class="badge rounded-pill bg-light text-dark me-1">{group.count}</span>
-					{group.key}
-				</button>
-			{/each}
-		</div>
-	{/if}
-
-	<!-- Main content with optional sidebar -->
-	<div class="content-area d-flex flex-grow-1 overflow-hidden">
-		<!-- Table -->
-		<div class="table-wrapper flex-grow-1 overflow-hidden">
-			<CellTable
-				bind:this={cellTable}
-				{cells}
-				{groupBy}
-				{columnPreset}
-				{selectable}
-				{multiSelect}
-				height="100%"
-				{techColors}
-				{statusColors}
-				{headerFilters}
-				{persistLayout}
-				storageKey="{storageKey}-tabulator"
-				onselectionchange={handleSelectionChange}
-				ondatachange={handleDataChange}
-				onrowclick={handleRowClick}
-				onrowcontextmenu={handleRowContextMenu}
-				{onrowdblclick}
-			/>
-		</div>
-
-		<!-- Details Sidebar -->
-		{#if showDetailsSidebar}
-			<aside 
-				class="details-sidebar border-start bg-white overflow-auto"
-				class:open={sidebarOpen}
-				style:--sidebar-width="{sidebarWidth}px"
-			>
-				<div class="sidebar-content" style:width="{sidebarWidth}px">
-					<div class="d-flex align-items-center justify-content-between p-3 border-bottom bg-light sticky-top">
-						<h6 class="mb-0">
-							<i class="bi bi-info-circle text-primary"></i> Details
-						</h6>
-						<button 
-							class="btn btn-sm btn-outline-secondary" 
-							onclick={closeSidebar}
-							title="Close"
-						>
-							<i class="bi bi-x-lg"></i>
-						</button>
-					</div>
-					
-					<div class="p-3">
-						{#if detailsContent}
-							{@render detailsContent({ cell: clickedCell, closeSidebar })}
-						{:else if clickedCell}
-							<!-- Default details view -->
-							<dl class="row mb-0 small">
-								<dt class="col-5 text-muted">ID</dt>
-								<dd class="col-7"><code class="text-primary">{clickedCell.id}</code></dd>
-
-								<dt class="col-5 text-muted">Cell Name</dt>
-								<dd class="col-7 fw-medium">{clickedCell.cellName}</dd>
-
-								<dt class="col-5 text-muted">Site</dt>
-								<dd class="col-7">{clickedCell.siteId}</dd>
-
-								<dt class="col-5 text-muted">Technology</dt>
-								<dd class="col-7">
-									<span class="badge" style="background-color: {techColors?.[clickedCell.tech] ?? DEFAULT_TECH_COLORS[clickedCell.tech] ?? '#6c757d'}; color: white;">{clickedCell.tech}</span>
-								</dd>
-
-								<dt class="col-5 text-muted">Band</dt>
-								<dd class="col-7">
-									<span class="badge" style="background-color: {FBAND_COLORS[clickedCell.fband] ?? '#6c757d'}; color: white;">{clickedCell.fband}</span>
-								</dd>
-
-								<dt class="col-5 text-muted">Frequency</dt>
-								<dd class="col-7">{clickedCell.frq} MHz</dd>
-
-								<dt class="col-5 text-muted">Status</dt>
-								<dd class="col-7">
-									<span class="badge" style="background-color: {statusColors?.[clickedCell.status] ?? DEFAULT_STATUS_COLORS[clickedCell.status] ?? '#6c757d'}; color: white;">{clickedCell.status.replace(/_/g, ' ')}</span>
-								</dd>
-
-								<dt class="col-12 text-muted mt-2 mb-1 border-top pt-2">Physical</dt>
-								
-								<dt class="col-5 text-muted">Azimuth</dt>
-								<dd class="col-7">{clickedCell.azimuth}°</dd>
-
-								<dt class="col-5 text-muted">Height</dt>
-								<dd class="col-7">{clickedCell.height}m</dd>
-
-								<dt class="col-5 text-muted">Beamwidth</dt>
-								<dd class="col-7">{clickedCell.beamwidth}°</dd>
-
-								<dt class="col-5 text-muted">E-Tilt</dt>
-								<dd class="col-7">{clickedCell.electricalTilt}°</dd>
-
-								<dt class="col-5 text-muted">Antenna</dt>
-								<dd class="col-7 text-truncate" title={clickedCell.antenna}>
-									{clickedCell.antenna}
-								</dd>
-
-								<dt class="col-12 text-muted mt-2 mb-1 border-top pt-2">Location</dt>
-								
-								<dt class="col-5 text-muted">Latitude</dt>
-								<dd class="col-7">{clickedCell.latitude.toFixed(6)}</dd>
-
-								<dt class="col-5 text-muted">Longitude</dt>
-								<dd class="col-7">{clickedCell.longitude.toFixed(6)}</dd>
-
-								<dt class="col-12 text-muted mt-2 mb-1 border-top pt-2">Planning</dt>
-
-								<dt class="col-5 text-muted">Planner</dt>
-								<dd class="col-7">{clickedCell.planner}</dd>
-
-								<dt class="col-5 text-muted">On Air</dt>
-								<dd class="col-7">{clickedCell.onAirDate}</dd>
-
-								{#if clickedCell.comment}
-									<dt class="col-5 text-muted">Comment</dt>
-									<dd class="col-7 fst-italic">{clickedCell.comment}</dd>
-								{/if}
-
-								<!-- Dynamic Other Properties -->
-								{#if clickedCell.other && Object.keys(clickedCell.other).length > 0}
-									<dt class="col-12 text-muted mt-2 mb-1 border-top pt-2">Other</dt>
-									
-									{#each Object.entries(clickedCell.other) as [key, value]}
-										<dt class="col-5 text-muted text-capitalize">{key.replace(/_/g, ' ')}</dt>
-										<dd class="col-7">
-											{#if value === null || value === undefined}
-												<span class="text-muted fst-italic">—</span>
-											{:else if typeof value === 'boolean'}
-												<span class="badge" class:bg-success={value} class:bg-secondary={!value}>
-													{value ? 'Yes' : 'No'}
-												</span>
-											{:else if typeof value === 'number'}
-												<code>{value}</code>
-											{:else if typeof value === 'object'}
-												<code class="small text-break">{JSON.stringify(value)}</code>
-											{:else}
-												{String(value)}
-											{/if}
-										</dd>
-									{/each}
-								{/if}
-							</dl>
-						{:else}
-							<div class="text-center text-muted py-5">
-								<i class="bi bi-hand-index fs-1 opacity-50"></i>
-								<p class="mt-2 mb-0">Click a row to see details</p>
-							</div>
-						{/if}
-					</div>
-				</div>
-			</aside>
-		{/if}
-	</div>
-
-	<!-- Footer -->
-	{#if footer}
-		<div class="panel-footer border-top p-2 bg-body-tertiary">
-			{@render footer({ selectedRows, selectedCount })}
-		</div>
-	{/if}
-
-	<!-- Context Menu (portal-like, fixed position) -->
-	{#if contextMenuVisible && contextMenuRow && contextMenu}
-		<div 
-			class="context-menu-container"
-			style="position: fixed; left: {contextMenuPosition.x}px; top: {contextMenuPosition.y}px; z-index: 1050;"
-		>
-			{@render contextMenu({ row: contextMenuRow, closeMenu: closeContextMenu })}
-		</div>
-	{/if}
-</div>
-
-<!-- Click outside handler -->
-<svelte:window onclick={contextMenuVisible ? handleClickOutside : undefined} />
-
-<style>
-	.cell-table-panel {
-		background-color: var(--bs-body-bg, #fff);
-		border: 1px solid var(--bs-border-color, #dee2e6);
-		border-radius: var(--bs-border-radius, 0.375rem);
-		overflow: hidden;
-	}
-
-	.panel-header {
-		min-height: 48px;
-	}
-
-	.panel-header h6 {
-		font-weight: 600;
-		color: var(--bs-body-color, #212529);
-	}
-
-	.content-area {
-		min-height: 0;
-	}
-
-	.table-wrapper {
-		min-height: 0;
-		transition: all 0.3s ease;
-	}
-
-	.details-sidebar {
-		width: 0;
-		min-width: 0;
-		opacity: 0;
-		transition: width 0.3s ease, opacity 0.3s ease, min-width 0.3s ease;
-	}
-
-	.details-sidebar.open {
-		width: var(--sidebar-width, 320px);
-		min-width: var(--sidebar-width, 320px);
-		opacity: 1;
-	}
-
-	.panel-footer {
-		min-height: 48px;
-	}
-
-	/* ScrollSpy bar styling */
-	.scrollspy-bar {
-		min-height: 40px;
-		flex-wrap: nowrap;
-		scrollbar-width: thin;
-	}
-
-	.scrollspy-bar::-webkit-scrollbar {
-		height: 4px;
-	}
-
-	.scrollspy-bar::-webkit-scrollbar-thumb {
-		background: var(--bs-secondary-color, #6c757d);
-		border-radius: 2px;
-	}
-
-	.scrollspy-badge {
-		white-space: nowrap;
-		font-size: 0.75rem;
-		padding: 0.25rem 0.5rem;
-		transition: transform 0.15s ease, box-shadow 0.15s ease;
-	}
-
-	.scrollspy-badge:hover {
-		transform: translateY(-1px);
-		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-		filter: brightness(1.1);
-	}
-
-	.scrollspy-badge:active {
-		transform: translateY(0);
-	}
-
-	/* Context menu styling */
-	.context-menu-container {
-		animation: contextMenuFadeIn 0.1s ease-out;
-	}
-
-	@keyframes contextMenuFadeIn {
-		from {
-			opacity: 0;
-			transform: scale(0.95);
-		}
-		to {
-			opacity: 1;
-			transform: scale(1);
-		}
-	}
-</style>