@smartnet360/svelte-components 0.0.124 → 0.0.126

package/dist/core/LandingPage/App.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	import { browser } from '$app/environment';
+	import { LoginForm } from '../Auth/index.js';
+	import { LandingPage } from '../LandingPage/index.js';
+	import { createAuthState } from '../Auth/auth.svelte.js';
+	import { getDevConfig, isDevMode, DEFAULT_CATEGORIES, DEFAULT_APPS } from '../Auth/config.js';
+	import type { CategoryInfo, AppDefinition, AuthConfig } from '../Auth/types.js';
+
+	interface Props {
+		/** Page title */
+		title?: string;
+		/** Page subtitle */
+		subtitle?: string;
+		/** Logo URL */
+		logo?: string;
+		/** Categories to display */
+		categories?: CategoryInfo[];
+		/** Apps to display */
+		apps?: AppDefinition[];
+		/** Auth configuration */
+		authConfig?: Partial<AuthConfig>;
+		/** Force dev mode (auto-login) */
+		forceDevMode?: boolean;
+	}
+
+	let {
+		title = 'RF Tool Components',
+		subtitle = 'Network Planning and Visualization Suite',
+		logo,
+		categories = DEFAULT_CATEGORIES,
+		apps = DEFAULT_APPS,
+		authConfig = {},
+		forceDevMode = false
+	}: Props = $props();
+
+	// Create auth state
+	const auth = createAuthState(authConfig);
+
+	// Auto-login in dev mode
+	const devMode = forceDevMode || isDevMode();
+	
+	$effect(() => {
+		if (browser && devMode && !auth.isAuthenticated && auth.initialized) {
+			const config = getDevConfig();
+			auth.loginDev(config.devUser, config.devPermissions);
+		}
+	});
+
+	// Show loading state until initialized
+	const showLoading = $derived(!auth.initialized);
+	
+	// Show login form if not authenticated and not in dev mode
+	const showLogin = $derived(auth.initialized && !auth.isAuthenticated && !devMode);
+	
+	// Show landing page if authenticated
+	const showLandingPage = $derived(auth.initialized && auth.isAuthenticated);
+</script>
+
+{#if showLoading}
+	<!-- Loading State -->
+	<div class="loading-container d-flex justify-content-center align-items-center vh-100">
+		<div class="text-center">
+			<div class="spinner-border text-primary mb-3" role="status">
+				<span class="visually-hidden">Loading...</span>
+			</div>
+			<p class="text-muted">Loading application...</p>
+		</div>
+	</div>
+{:else if showLogin}
+	<!-- Login Form -->
+	<LoginForm
+		{auth}
+		{title}
+		{subtitle}
+		{logo}
+	/>
+{:else if showLandingPage}
+	<!-- Landing Page -->
+	<LandingPage
+		{auth}
+		{title}
+		{subtitle}
+		{logo}
+		{categories}
+		{apps}
+	/>
+{/if}
+
+<style>
+	.loading-container {
+		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+	}
+
+	.loading-container .spinner-border {
+		width: 3rem;
+		height: 3rem;
+	}
+
+	.loading-container p {
+		color: white !important;
+	}
+</style>

package/dist/core/LandingPage/App.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { CategoryInfo, AppDefinition, AuthConfig } from '../Auth/types.js';
+interface Props {
+    /** Page title */
+    title?: string;
+    /** Page subtitle */
+    subtitle?: string;
+    /** Logo URL */
+    logo?: string;
+    /** Categories to display */
+    categories?: CategoryInfo[];
+    /** Apps to display */
+    apps?: AppDefinition[];
+    /** Auth configuration */
+    authConfig?: Partial<AuthConfig>;
+    /** Force dev mode (auto-login) */
+    forceDevMode?: boolean;
+}
+declare const App: import("svelte").Component<Props, {}, "">;
+type App = ReturnType<typeof App>;
+export default App;

package/dist/core/LandingPage/LandingPage.svelte

@@ -0,0 +1,480 @@
+<script lang="ts">
+	import type { AppDefinition, CategoryInfo } from '../Auth/types.js';
+	import type { AuthState } from '../Auth/auth.svelte.js';
+	import { base } from '$app/paths';
+
+	interface Props {
+		/** Auth state instance */
+		auth: AuthState;
+		/** Page title */
+		title?: string;
+		/** Page subtitle */
+		subtitle?: string;
+		/** Logo URL */
+		logo?: string;
+		/** Categories to display */
+		categories: CategoryInfo[];
+		/** Apps to display */
+		apps: AppDefinition[];
+		/** Show only accessible apps (based on permissions) */
+		filterByPermissions?: boolean;
+	}
+
+	let {
+		auth,
+		title = 'RF Tool Components',
+		subtitle = 'Network Planning and Visualization Suite',
+		logo,
+		categories,
+		apps,
+		filterByPermissions = true
+	}: Props = $props();
+
+	// Filter apps based on permissions if enabled
+	const accessibleApps = $derived(
+		filterByPermissions && auth.isAuthenticated
+			? apps.filter(app => {
+					if (!app.enabled) return false;
+					if (!app.requiredPermission) return true;
+					return auth.hasPermission(app.requiredPermission, 'view');
+				})
+			: apps.filter(app => app.enabled)
+	);
+
+	// Group apps by category
+	const appsByCategory = $derived(
+		categories
+			.map(cat => ({
+				category: cat,
+				apps: accessibleApps.filter(app => app.category === cat.id)
+			}))
+			.filter(group => group.apps.length > 0)
+	);
+
+	function handleLogout() {
+		auth.logout();
+	}
+</script>
+
+<div class="landing-page">
+	<!-- Navbar -->
+	<nav class="navbar">
+		<div class="navbar-brand">
+			{#if logo}
+				<img src={logo} alt="Logo" class="navbar-logo" />
+			{:else}
+				<i class="bi bi-broadcast-pin"></i>
+			{/if}
+			<div class="navbar-title">
+				<span class="title">{title}</span>
+				<span class="subtitle">{subtitle}</span>
+			</div>
+		</div>
+
+		{#if auth.isAuthenticated && auth.user}
+			<div class="navbar-user">
+				<div class="user-info">
+					<span class="user-name">{auth.user.displayName}</span>
+					<span class="user-email">{auth.user.email || auth.user.username}</span>
+				</div>
+				<button class="logout-btn" onclick={handleLogout} title="Sign Out" aria-label="Sign Out">
+					<i class="bi bi-box-arrow-right"></i>
+				</button>
+			</div>
+		{/if}
+	</nav>
+
+	<!-- Content -->
+	<main class="content">
+		{#each appsByCategory as { category, apps: categoryApps }, index (category.id)}
+			<!-- Category Section -->
+			<section class="category-section">
+				<div class="category-header">
+					<div class="category-icon" style="--cat-color: {category.color}">
+						<i class="bi {category.icon}"></i>
+					</div>
+					<div class="category-info">
+						<h2>{category.title}</h2>
+						<p>{category.description}</p>
+					</div>
+					<span class="category-count">{categoryApps.length}</span>
+				</div>
+
+				<div class="apps-grid">
+					{#each categoryApps as app (app.id)}
+						<a href="{base}{app.route}" class="app-card" style="--cat-color: {category.color}">
+							<div class="app-icon">
+								<i class="bi {app.icon}"></i>
+							</div>
+							<div class="app-info">
+								<h3>
+									{app.title}
+									{#if app.badge}
+										<span class="app-badge" class:new={app.badge === 'New'} class:beta={app.badge === 'Beta'}>
+											{app.badge}
+										</span>
+									{/if}
+								</h3>
+								<p>{app.description}</p>
+							</div>
+							<i class="bi bi-chevron-right app-arrow"></i>
+						</a>
+					{/each}
+				</div>
+			</section>
+
+			{#if index < appsByCategory.length - 1}
+				<div class="section-divider"></div>
+			{/if}
+		{/each}
+
+		<!-- Empty State -->
+		{#if appsByCategory.length === 0}
+			<div class="empty-state">
+				<i class="bi bi-inbox"></i>
+				<h3>No Applications Available</h3>
+				<p>You don't have access to any applications yet.</p>
+			</div>
+		{/if}
+	</main>
+
+	<!-- Footer -->
+	<footer class="footer">
+		<div class="footer-left">
+			<i class="bi bi-shield-check"></i>
+			{#if auth.isAuthenticated}
+				Signed in as <strong>{auth.user?.username}</strong>
+			{:else}
+				Not authenticated
+			{/if}
+		</div>
+		<div class="footer-right">
+			RF Tool Components © {new Date().getFullYear()}
+		</div>
+	</footer>
+</div>
+
+<style>
+	.landing-page {
+		min-height: 100vh;
+		display: flex;
+		flex-direction: column;
+		background: #f1f5f9;
+	}
+
+	/* Navbar */
+	.navbar {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0 1.5rem;
+		height: 64px;
+		background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+		color: #fff;
+		flex-shrink: 0;
+	}
+
+	.navbar-brand {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+	}
+
+	.navbar-brand > i {
+		font-size: 1.75rem;
+		color: #3b82f6;
+	}
+
+	.navbar-logo {
+		height: 36px;
+	}
+
+	.navbar-title {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.navbar-title .title {
+		font-size: 1.125rem;
+		font-weight: 600;
+		line-height: 1.2;
+	}
+
+	.navbar-title .subtitle {
+		font-size: 0.75rem;
+		color: #94a3b8;
+	}
+
+	.navbar-user {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+	}
+
+	.user-info {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-end;
+	}
+
+	.user-name {
+		font-size: 0.875rem;
+		font-weight: 500;
+	}
+
+	.user-email {
+		font-size: 0.75rem;
+		color: #94a3b8;
+	}
+
+	.logout-btn {
+		width: 36px;
+		height: 36px;
+		border-radius: 8px;
+		border: 1px solid rgba(255, 255, 255, 0.2);
+		background: rgba(255, 255, 255, 0.05);
+		color: #fff;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		transition: all 0.15s;
+	}
+
+	.logout-btn:hover {
+		background: rgba(239, 68, 68, 0.2);
+		border-color: #ef4444;
+		color: #ef4444;
+	}
+
+	/* Content */
+	.content {
+		flex: 1;
+		overflow-y: auto;
+		padding: 2rem;
+	}
+
+	/* Category Section */
+	.category-section {
+		max-width: 1400px;
+		margin: 0 auto;
+	}
+
+	.category-header {
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+		margin-bottom: 1.25rem;
+	}
+
+	.category-icon {
+		width: 48px;
+		height: 48px;
+		border-radius: 12px;
+		background: color-mix(in srgb, var(--cat-color, #3b82f6) 15%, transparent);
+		color: var(--cat-color, #3b82f6);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 1.25rem;
+	}
+
+	.category-info h2 {
+		font-size: 1.25rem;
+		font-weight: 600;
+		color: #0f172a;
+		margin: 0;
+	}
+
+	.category-info p {
+		font-size: 0.875rem;
+		color: #64748b;
+		margin: 0.125rem 0 0;
+	}
+
+	.category-count {
+		margin-left: auto;
+		background: #e2e8f0;
+		color: #475569;
+		padding: 0.25rem 0.625rem;
+		border-radius: 999px;
+		font-size: 0.75rem;
+		font-weight: 500;
+	}
+
+	/* Apps Grid */
+	.apps-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+		gap: 1rem;
+	}
+
+	.app-card {
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+		padding: 1rem 1.25rem;
+		background: #fff;
+		border-radius: 12px;
+		border: 1px solid #e2e8f0;
+		text-decoration: none;
+		color: inherit;
+		transition: all 0.2s;
+	}
+
+	.app-card:hover {
+		border-color: var(--cat-color, #3b82f6);
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+		transform: translateY(-2px);
+	}
+
+	.app-icon {
+		width: 44px;
+		height: 44px;
+		border-radius: 10px;
+		background: color-mix(in srgb, var(--cat-color, #3b82f6) 12%, transparent);
+		color: var(--cat-color, #3b82f6);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 1.25rem;
+		flex-shrink: 0;
+	}
+
+	.app-info {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.app-info h3 {
+		font-size: 0.9375rem;
+		font-weight: 600;
+		color: #0f172a;
+		margin: 0;
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	.app-info p {
+		font-size: 0.8125rem;
+		color: #64748b;
+		margin: 0.25rem 0 0;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.app-badge {
+		font-size: 0.625rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		padding: 0.125rem 0.375rem;
+		border-radius: 4px;
+		background: #e2e8f0;
+		color: #475569;
+	}
+
+	.app-badge.new {
+		background: #dcfce7;
+		color: #16a34a;
+	}
+
+	.app-badge.beta {
+		background: #fef3c7;
+		color: #d97706;
+	}
+
+	.app-arrow {
+		color: #cbd5e1;
+		transition: color 0.15s, transform 0.15s;
+	}
+
+	.app-card:hover .app-arrow {
+		color: var(--cat-color, #3b82f6);
+		transform: translateX(3px);
+	}
+
+	/* Section Divider */
+	.section-divider {
+		max-width: 1400px;
+		margin: 2rem auto;
+		height: 1px;
+		background: linear-gradient(90deg, transparent, #cbd5e1, transparent);
+	}
+
+	/* Empty State */
+	.empty-state {
+		text-align: center;
+		padding: 4rem 2rem;
+		color: #64748b;
+	}
+
+	.empty-state i {
+		font-size: 4rem;
+		color: #cbd5e1;
+	}
+
+	.empty-state h3 {
+		font-size: 1.25rem;
+		font-weight: 600;
+		margin: 1rem 0 0.5rem;
+		color: #475569;
+	}
+
+	.empty-state p {
+		margin: 0;
+	}
+
+	/* Footer */
+	.footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 1rem 2rem;
+		background: #fff;
+		border-top: 1px solid #e2e8f0;
+		font-size: 0.8125rem;
+		color: #64748b;
+		flex-shrink: 0;
+	}
+
+	.footer-left {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+	}
+
+	.footer-left strong {
+		color: #334155;
+	}
+
+	/* Responsive */
+	@media (max-width: 640px) {
+		.navbar {
+			padding: 0 1rem;
+		}
+
+		.navbar-title .subtitle {
+			display: none;
+		}
+
+		.user-info {
+			display: none;
+		}
+
+		.content {
+			padding: 1.5rem 1rem;
+		}
+
+		.apps-grid {
+			grid-template-columns: 1fr;
+		}
+
+		.footer {
+			flex-direction: column;
+			gap: 0.5rem;
+			text-align: center;
+		}
+	}
+</style>

package/dist/core/LandingPage/LandingPage.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { AppDefinition, CategoryInfo } from '../Auth/types.js';
+import type { AuthState } from '../Auth/auth.svelte.js';
+interface Props {
+    /** Auth state instance */
+    auth: AuthState;
+    /** Page title */
+    title?: string;
+    /** Page subtitle */
+    subtitle?: string;
+    /** Logo URL */
+    logo?: string;
+    /** Categories to display */
+    categories: CategoryInfo[];
+    /** Apps to display */
+    apps: AppDefinition[];
+    /** Show only accessible apps (based on permissions) */
+    filterByPermissions?: boolean;
+}
+declare const LandingPage: import("svelte").Component<Props, {}, "">;
+type LandingPage = ReturnType<typeof LandingPage>;
+export default LandingPage;

package/dist/core/LandingPage/index.d.ts

@@ -0,0 +1,2 @@
+export { default as LandingPage } from './LandingPage.svelte';
+export { default as App } from './App.svelte';

package/dist/core/LandingPage/index.js

@@ -0,0 +1,3 @@
+// LandingPage module barrel export
+export { default as LandingPage } from './LandingPage.svelte';
+export { default as App } from './App.svelte';

package/dist/core/index.d.ts

@@ -6,3 +6,5 @@ export * from './logger/index.js';
 export * from './CellTable/index.js';
 export * from './FeatureRegistry/index.js';
 export * from './Benchmark/index.js';
+export * from './Auth/index.js';
+export * from './LandingPage/index.js';

package/dist/core/index.js

@@ -19,3 +19,7 @@ export * from './CellTable/index.js';
 export * from './FeatureRegistry/index.js';
 // Benchmark - Performance testing for Svelte reactivity
 export * from './Benchmark/index.js';
+// Auth - Authentication and authorization system
+export * from './Auth/index.js';
+// LandingPage - Main application landing page with app grid
+export * from './LandingPage/index.js';

package/dist/map-v3/demo/DemoMap.svelte

@@ -20,6 +20,12 @@
 	import SiteFilterControl from '../features/sites/components/SiteFilterControl.svelte';
 	import { createSiteRegistry } from '../features/sites/stores/site.registry.svelte';
 	import FeatureSelectionControl from '../features/selection/components/FeatureSelectionControl.svelte';
+	// Custom Cells Feature
+	import { 
+		CustomCellsLayer, 
+		CustomCellSetManager, 
+		createCustomCellSetsStore 
+	} from '../features/cells/custom';
 	import { demoCells } from './demo-cells';
 	import { demoRepeaters } from './demo-repeaters';
 
@@ -42,6 +48,9 @@
 	const repeaterRegistry = createRepeaterRegistry('demo-map');
 	const repeaterDisplay = new RepeaterDisplayStore();
 
+	// Custom Cells Store
+	const customCellSets = createCustomCellSetsStore(cellData, 'demo-map');
+
 	onMount(() => {
 		// Load dummy data
 		// Need to cast or map if types slightly differ, but they should match
@@ -81,6 +90,12 @@
 			displayStore={repeaterDisplay}
 		/>
 
+		<!-- Custom Cells Manager (includes filter controls for each set) -->
+		<CustomCellSetManager 
+			position="top-left" 
+			setsStore={customCellSets}
+		/>
+
 		<FeatureSettingsControl 
 			position="top-right" 
 			cellDisplayStore={cellDisplay} 
@@ -99,6 +114,9 @@
 		<RepeatersLayer dataStore={repeaterData} registry={repeaterRegistry} displayStore={repeaterDisplay} />
 		<RepeaterLabelsLayer dataStore={repeaterData} registry={repeaterRegistry} displayStore={repeaterDisplay} />
 
+		<!-- Custom Cells Layer (renders on top of regular cells) -->
+		<CustomCellsLayer setsStore={customCellSets} />
+
 		<FeatureSelectionControl
 			position="bottom-left"
 			cellDataStore={cellData}