@d34dman/flowdrop 0.0.43 → 0.0.45

package/dist/components/ConfigPanel.svelte

@@ -9,6 +9,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import ReadOnlyDetails from './ReadOnlyDetails.svelte';
+	import { uiSettings } from '../stores/settingsStore.js';
 
 	/**
 	 * A single detail item with label and value
@@ -56,7 +57,7 @@
 	const hasDetails = $derived(id !== undefined || details.length > 0 || description !== undefined);
 </script>
 
-<div class="config-panel">
+<div class="config-panel" class:config-panel--compact={$uiSettings.compactMode}>
 	<!-- Header -->
 	<div class="config-panel__header">
 		<h2 class="config-panel__title">{title}</h2>
@@ -86,7 +87,7 @@
 		height: 100%;
 		display: flex;
 		flex-direction: column;
-		background-color: #ffffff;
+		background-color: var(--fd-background);
 	}
 
 	.config-panel__header {
@@ -94,8 +95,8 @@
 		justify-content: space-between;
 		align-items: center;
 		padding: 0.875rem 1rem;
-		border-bottom: 1px solid #e5e7eb;
-		background-color: #f9fafb;
+		border-bottom: 1px solid var(--fd-border);
+		background-color: var(--fd-muted);
 		flex-shrink: 0;
 	}
 
@@ -103,7 +104,7 @@
 		margin: 0;
 		font-size: 1rem;
 		font-weight: 600;
-		color: #111827;
+		color: var(--fd-foreground);
 	}
 
 	.config-panel__close {
@@ -112,23 +113,23 @@
 		font-size: 1.25rem;
 		line-height: 1;
 		cursor: pointer;
-		color: #6b7280;
+		color: var(--fd-muted-foreground);
 		padding: 0.25rem;
-		border-radius: 0.25rem;
+		border-radius: var(--fd-radius-sm);
 		transition:
-			color 0.15s,
-			background-color 0.15s;
+			color var(--fd-transition-fast),
+			background-color var(--fd-transition-fast);
 	}
 
 	.config-panel__close:hover {
-		color: #374151;
-		background-color: #f3f4f6;
+		color: var(--fd-foreground);
+		background-color: var(--fd-subtle);
 	}
 
 	.config-panel__details {
 		padding: 0.75rem 1rem;
-		border-bottom: 1px solid #f3f4f6;
-		background-color: #fafafa;
+		border-bottom: 1px solid var(--fd-border-muted);
+		background-color: var(--fd-muted);
 		flex-shrink: 0;
 	}
 
@@ -146,10 +147,36 @@
 
 	.config-panel__section-title {
 		margin: 0;
-		font-size: 0.75rem;
+		font-size: var(--fd-text-xs);
 		font-weight: 600;
-		color: #6b7280;
+		color: var(--fd-muted-foreground);
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
 	}
+
+	/* Compact Mode Styles */
+	.config-panel--compact .config-panel__header {
+		padding: 0.5rem 0.75rem;
+	}
+
+	.config-panel--compact .config-panel__title {
+		font-size: 0.875rem;
+	}
+
+	.config-panel--compact .config-panel__close {
+		font-size: 1rem;
+		padding: 0.125rem;
+	}
+
+	.config-panel--compact .config-panel__details {
+		padding: 0.5rem 0.75rem;
+	}
+
+	.config-panel--compact .config-panel__content {
+		padding: 0.75rem;
+	}
+
+	.config-panel--compact .config-panel__section {
+		gap: 0.5rem;
+	}
 </style>

package/dist/components/LogsSidebar.svelte

@@ -66,19 +66,20 @@
 
 	/**
 	 * Get log level color
+	 * Returns CSS variable references for theme consistency
 	 */
 	function getLogLevelColor(level: string): string {
 		switch (level) {
 			case 'error':
-				return '#ef4444';
+				return 'var(--fd-error)';
 			case 'warning':
-				return '#f59e0b';
+				return 'var(--fd-warning)';
 			case 'success':
-				return '#10b981';
+				return 'var(--fd-success)';
 			case 'info':
-				return '#3b82f6';
+				return 'var(--fd-info)';
 			default:
-				return '#6b7280';
+				return 'var(--fd-muted-foreground)';
 		}
 	}
 
@@ -282,10 +283,10 @@
 <style>
 	.logs-sidebar {
 		position: fixed;
-		top: var(--flowdrop-navbar-height, 60px); /* Start below navbar */
+		top: var(--fd-navbar-height); /* Start below navbar */
 		right: 0;
 		width: 400px;
-		height: calc(100vh - var(--flowdrop-navbar-height, 60px)); /* Account for navbar height */
+		height: calc(100vh - var(--fd-navbar-height)); /* Account for navbar height */
 		background-color: #ffffff;
 		border-left: 1px solid #e5e7eb;
 		box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
@@ -388,31 +389,31 @@
 	}
 
 	.logs-sidebar__log-entry {
-		background-color: #f9fafb;
-		border: 1px solid #e5e7eb;
-		border-radius: 0.5rem;
+		background-color: var(--fd-muted);
+		border: 1px solid var(--fd-border);
+		border-radius: var(--fd-radius-lg);
 		padding: 0.75rem;
-		transition: all 0.2s ease-in-out;
+		transition: all var(--fd-transition-fast);
 	}
 
 	.logs-sidebar__log-entry--error {
-		border-left: 4px solid #ef4444;
-		background-color: #fef2f2;
+		border-left: 4px solid var(--fd-error);
+		background-color: var(--fd-error-muted);
 	}
 
 	.logs-sidebar__log-entry--warning {
-		border-left: 4px solid #f59e0b;
-		background-color: #fffbeb;
+		border-left: 4px solid var(--fd-warning);
+		background-color: var(--fd-warning-muted);
 	}
 
 	.logs-sidebar__log-entry--success {
-		border-left: 4px solid #10b981;
-		background-color: #f0fdf4;
+		border-left: 4px solid var(--fd-success);
+		background-color: var(--fd-success-muted);
 	}
 
 	.logs-sidebar__log-entry--info {
-		border-left: 4px solid #3b82f6;
-		background-color: #eff6ff;
+		border-left: 4px solid var(--fd-info);
+		background-color: var(--fd-info-muted);
 	}
 
 	.logs-sidebar__log-header {

package/dist/components/Navbar.svelte

@@ -9,6 +9,7 @@
 <script lang="ts">
 	import Icon from '@iconify/svelte';
 	import Logo from './Logo.svelte';
+	import SettingsModal from './SettingsModal.svelte';
 
 	interface NavbarAction {
 		label: string;
@@ -16,6 +17,8 @@
 		icon?: string;
 		variant?: 'primary' | 'secondary' | 'outline';
 		onclick?: (event: Event) => void;
+		/** If true, opens link in new tab with proper security attributes */
+		external?: boolean;
 	}
 
 	interface BreadcrumbItem {
@@ -25,17 +28,32 @@
 	}
 
 	interface Props {
+		/** Primary action buttons */
 		primaryActions?: NavbarAction[];
+		/** Show connection status indicator */
 		showStatus?: boolean;
+		/** Page title */
 		title?: string;
+		/** Breadcrumb navigation items */
 		breadcrumbs?: BreadcrumbItem[];
+		/** Show settings gear icon */
+		showSettings?: boolean;
 	}
 
-	let { primaryActions = [], showStatus = true, title, breadcrumbs = [] }: Props = $props();
+	let {
+		primaryActions = [],
+		showStatus = true,
+		title,
+		breadcrumbs = [],
+		showSettings = true
+	}: Props = $props();
 
 	// Dropdown state
 	let isDropdownOpen = $state(false);
 
+	// Settings modal state
+	let isSettingsOpen = $state(false);
+
 	// Close dropdown when clicking outside
 	function handleClickOutside(event: MouseEvent) {
 		const target = event.target as HTMLElement;
@@ -130,6 +148,8 @@
 					class="flowdrop-navbar__primary-action flowdrop-navbar__action--{primaryAction.variant ||
 						'primary'}"
 					onclick={primaryAction.onclick}
+					target={primaryAction.external ? '_blank' : undefined}
+					rel={primaryAction.external ? 'noopener noreferrer' : undefined}
 				>
 					{#if primaryAction.icon}
 						<span class="flowdrop-navbar__action-icon">
@@ -162,11 +182,16 @@
 										action.onclick?.(e);
 										isDropdownOpen = false;
 									}}
+									target={action.external ? '_blank' : undefined}
+									rel={action.external ? 'noopener noreferrer' : undefined}
 								>
 									{#if action.icon}
 										<Icon icon={action.icon} class="w-4 h-4" />
 									{/if}
 									<span>{action.label}</span>
+									{#if action.external}
+										<Icon icon="mdi:open-in-new" class="w-3 h-3" />
+									{/if}
 								</a>
 							{/each}
 						</div>
@@ -177,21 +202,35 @@
 	</div>
 
 	<div class="flowdrop-navbar__end">
-		<!-- Additional actions or content can go here -->
+		{#if showSettings}
+			<button
+				class="flowdrop-navbar__settings-btn"
+				onclick={() => (isSettingsOpen = true)}
+				title="Settings"
+				aria-label="Open settings"
+			>
+				<Icon icon="mdi:cog" />
+			</button>
+		{/if}
 	</div>
 </div>
 
+<!-- Settings Modal -->
+{#if showSettings}
+	<SettingsModal bind:open={isSettingsOpen} />
+{/if}
+
 <style>
 	.flowdrop-navbar {
-		height: var(--flowdrop-navbar-height, 60px);
+		height: var(--fd-navbar-height);
 		width: 100%;
 		max-width: 100%;
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
 		padding: 0 1rem;
-		background-color: #ffffff;
-		border-bottom: 1px solid #e5e7eb;
+		background-color: var(--fd-background);
+		border-bottom: 1px solid var(--fd-border);
 		z-index: 10;
 	}
 
@@ -204,7 +243,7 @@
 	}
 
 	.flowdrop-logo--container {
-		color: #000;
+		color: var(--fd-foreground);
 	}
 
 	.flowdrop-logo--header {
@@ -247,7 +286,7 @@
 		margin: 0;
 		font-size: 1rem;
 		font-weight: 600;
-		color: #111827;
+		color: var(--fd-foreground);
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -287,17 +326,17 @@
 		align-items: center;
 		gap: 0.25rem;
 		padding: 0.25rem 0.5rem;
-		border-radius: 0.375rem;
+		border-radius: var(--fd-radius-md);
 		text-decoration: none;
-		color: #6b7280;
-		font-size: 0.875rem;
+		color: var(--fd-muted-foreground);
+		font-size: var(--fd-text-sm);
 		font-weight: 500;
-		transition: all 0.2s ease;
+		transition: all var(--fd-transition-normal);
 	}
 
 	.flowdrop-navbar__breadcrumb-link:hover {
-		color: #111827;
-		background-color: #f3f4f6;
+		color: var(--fd-foreground);
+		background-color: var(--fd-muted);
 	}
 
 	.flowdrop-navbar__breadcrumb-current {
@@ -305,8 +344,8 @@
 		align-items: center;
 		gap: 0.25rem;
 		padding: 0.25rem 0.5rem;
-		color: #111827;
-		font-size: 0.875rem;
+		color: var(--fd-foreground);
+		font-size: var(--fd-text-sm);
 		font-weight: 600;
 	}
 
@@ -323,7 +362,7 @@
 	.flowdrop-navbar__breadcrumb-separator {
 		display: flex;
 		align-items: center;
-		color: #9ca3af;
+		color: var(--fd-muted-foreground);
 	}
 
 	.flowdrop-navbar__breadcrumb-chevron {
@@ -342,24 +381,24 @@
 		align-items: center;
 		gap: 0.375rem;
 		padding: 0.125rem 0.5rem;
-		background-color: #f0fdf4;
-		border: 1px solid #bbf7d0;
-		border-radius: 0.375rem;
-		font-size: 0.75rem;
+		background-color: var(--fd-success-muted);
+		border: 1px solid var(--fd-success);
+		border-radius: var(--fd-radius-md);
+		font-size: var(--fd-text-xs);
 		font-weight: 500;
 	}
 
 	.flowdrop-navbar__status-indicator {
 		width: 0.375rem;
 		height: 0.375rem;
-		background-color: #22c55e;
+		background-color: var(--fd-success);
 		border-radius: 50%;
 		animation: pulse 2s infinite;
 	}
 
 	.flowdrop-navbar__status-text {
-		color: #166534;
-		font-size: 0.75rem;
+		color: var(--fd-success);
+		font-size: var(--fd-text-xs);
 		font-weight: 500;
 	}
 
@@ -387,21 +426,21 @@
 		gap: 0.5rem;
 		padding: 0.5rem 1rem;
 		text-decoration: none;
-		border: 1px solid #d1d5db;
-		border-radius: 0.375rem 0 0 0.375rem;
-		transition: all 0.2s ease-in-out;
+		border: 1px solid var(--fd-border-strong);
+		border-radius: var(--fd-radius-md) 0 0 var(--fd-radius-md);
+		transition: all var(--fd-transition-normal);
 		font-weight: 500;
-		font-size: 0.875rem;
+		font-size: var(--fd-text-sm);
 		height: 2.5rem;
 		box-sizing: border-box;
-		background-color: #ffffff;
-		color: #374151;
+		background-color: var(--fd-background);
+		color: var(--fd-foreground);
 		border-right: none;
 	}
 
 	.flowdrop-navbar__primary-action:hover {
-		background-color: #f9fafb;
-		color: #111827;
+		background-color: var(--fd-muted);
+		color: var(--fd-foreground);
 	}
 
 	.flowdrop-navbar__dropdown {
@@ -417,24 +456,24 @@
 		justify-content: center;
 		width: 2rem;
 		height: 2.5rem;
-		border: 1px solid #d1d5db;
+		border: 1px solid var(--fd-border-strong);
 		border-left: none;
-		border-radius: 0 0.375rem 0.375rem 0;
-		background-color: #ffffff;
-		color: #374151;
+		border-radius: 0 var(--fd-radius-md) var(--fd-radius-md) 0;
+		background-color: var(--fd-background);
+		color: var(--fd-foreground);
 		cursor: pointer;
-		transition: all 0.2s ease-in-out;
+		transition: all var(--fd-transition-normal);
 		box-sizing: border-box;
 	}
 
 	.flowdrop-navbar__dropdown-trigger:hover {
-		background-color: #f9fafb;
-		color: #111827;
+		background-color: var(--fd-muted);
+		color: var(--fd-foreground);
 	}
 
 	.flowdrop-navbar__dropdown-trigger[aria-expanded='true'] {
-		background-color: #f3f4f6;
-		color: #111827;
+		background-color: var(--fd-subtle);
+		color: var(--fd-foreground);
 	}
 
 	.flowdrop-navbar__dropdown-menu {
@@ -444,12 +483,10 @@
 		z-index: 50;
 		margin-top: 0.25rem;
 		min-width: 12rem;
-		background-color: #ffffff;
-		border: 1px solid #e5e7eb;
-		border-radius: 0.5rem;
-		box-shadow:
-			0 10px 15px -3px rgba(0, 0, 0, 0.1),
-			0 4px 6px -2px rgba(0, 0, 0, 0.05);
+		background-color: var(--fd-card);
+		border: 1px solid var(--fd-border);
+		border-radius: var(--fd-radius-lg);
+		box-shadow: var(--fd-shadow-lg);
 		overflow: hidden;
 	}
 
@@ -459,18 +496,19 @@
 		gap: 0.75rem;
 		padding: 0.75rem 1rem;
 		text-decoration: none;
-		color: #374151;
-		font-size: 0.875rem;
+		color: var(--fd-foreground);
+		font-size: var(--fd-text-sm);
 		font-weight: 500;
-		transition: background-color 0.2s ease-in-out;
+		transition: background-color var(--fd-transition-normal);
 		border: none;
 		width: 100%;
 		text-align: left;
+		background-color: transparent;
 	}
 
 	.flowdrop-navbar__dropdown-item:hover {
-		background-color: #f9fafb;
-		color: #111827;
+		background-color: var(--fd-muted);
+		color: var(--fd-foreground);
 	}
 
 	.flowdrop-navbar__dropdown-item:first-child {
@@ -487,52 +525,52 @@
 		gap: 0.5rem;
 		padding: 0.5rem 1rem;
 		text-decoration: none;
-		border-radius: 0.375rem;
-		transition: all 0.2s ease-in-out;
+		border-radius: var(--fd-radius-md);
+		transition: all var(--fd-transition-normal);
 		font-weight: 500;
-		font-size: 0.875rem;
+		font-size: var(--fd-text-sm);
 		border: 1px solid transparent;
 	}
 
 	.flowdrop-navbar__action--primary {
-		background-color: #3b82f6;
-		color: #ffffff;
-		border-color: #3b82f6;
+		background-color: var(--fd-primary);
+		color: var(--fd-primary-foreground);
+		border-color: var(--fd-primary);
 	}
 
 	.flowdrop-navbar__action--primary:hover {
-		background-color: #2563eb;
-		border-color: #2563eb;
-		color: #ffffff;
+		background-color: var(--fd-primary-hover);
+		border-color: var(--fd-primary-hover);
+		color: var(--fd-primary-foreground);
 	}
 
 	.flowdrop-navbar__action--secondary {
-		background-color: #f3f4f6;
-		color: #374151;
-		border-color: #d1d5db;
+		background-color: var(--fd-secondary);
+		color: var(--fd-secondary-foreground);
+		border-color: var(--fd-border-strong);
 	}
 
 	.flowdrop-navbar__action--secondary:hover {
-		background-color: #e5e7eb;
-		color: #111827;
+		background-color: var(--fd-secondary-hover);
+		color: var(--fd-foreground);
 	}
 
 	.flowdrop-navbar__action--outline {
 		background-color: transparent;
-		color: #374151;
-		border-color: #d1d5db;
+		color: var(--fd-foreground);
+		border-color: var(--fd-border-strong);
 	}
 
 	.flowdrop-navbar__action--outline:hover {
-		background-color: #f9fafb;
-		color: #111827;
-		border-color: #9ca3af;
+		background-color: var(--fd-muted);
+		color: var(--fd-foreground);
+		border-color: var(--fd-muted-foreground);
 	}
 
 	.flowdrop-navbar__action--active {
-		background-color: #eff6ff;
-		color: #1d4ed8;
-		border-color: #93c5fd;
+		background-color: var(--fd-primary-muted);
+		color: var(--fd-primary);
+		border-color: var(--fd-primary);
 	}
 
 	.flowdrop-navbar__action-icon {
@@ -552,6 +590,38 @@
 	.flowdrop-navbar__end {
 		display: flex;
 		align-items: center;
+		gap: var(--fd-space-2);
+		margin-left: var(--fd-space-3);
+	}
+
+	.flowdrop-navbar__settings-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 36px;
+		height: 36px;
+		border: 1px solid var(--fd-border);
+		border-radius: var(--fd-radius-md);
+		background-color: var(--fd-background);
+		color: var(--fd-muted-foreground);
+		font-size: 1.25rem;
+		cursor: pointer;
+		transition: all var(--fd-transition-fast);
+	}
+
+	.flowdrop-navbar__settings-btn:hover {
+		background-color: var(--fd-muted);
+		color: var(--fd-foreground);
+		border-color: var(--fd-border-strong);
+	}
+
+	.flowdrop-navbar__settings-btn:focus {
+		outline: none;
+		box-shadow: 0 0 0 2px var(--fd-ring);
+	}
+
+	.flowdrop-navbar__settings-btn:active {
+		transform: scale(0.95);
 	}
 
 	.flowdrop-api-status {
@@ -559,19 +629,19 @@
 		align-items: center;
 		gap: 0.5rem;
 		padding: 0.25rem 0.5rem;
-		border-radius: 0.375rem;
-		background-color: #f3f4f6;
+		border-radius: var(--fd-radius-md);
+		background-color: var(--fd-muted);
 	}
 
 	.flowdrop-api-status__indicator {
 		width: 0.5rem;
 		height: 0.5rem;
 		border-radius: 50%;
-		transition: background-color 0.2s ease-in-out;
+		transition: background-color var(--fd-transition-normal);
 	}
 
 	.flowdrop-api-status__indicator--connected {
-		background-color: #10b981;
+		background-color: var(--fd-success);
 	}
 
 	/* Utility classes */
@@ -589,17 +659,17 @@
 	}
 
 	.flowdrop-text--tagline {
-		font-size: 0.75rem;
+		font-size: var(--fd-text-xs);
 		line-height: 0.5rem;
 	}
 
 	.flowdrop-text--xs {
-		font-size: 0.75rem;
+		font-size: var(--fd-text-xs);
 		line-height: 1rem;
 	}
 
 	.flowdrop-text--gray {
-		color: #6b7280;
+		color: var(--fd-muted-foreground);
 	}
 
 	.flowdrop-font--bold {

package/dist/components/Navbar.svelte.d.ts

@@ -4,6 +4,8 @@ interface NavbarAction {
     icon?: string;
     variant?: 'primary' | 'secondary' | 'outline';
     onclick?: (event: Event) => void;
+    /** If true, opens link in new tab with proper security attributes */
+    external?: boolean;
 }
 interface BreadcrumbItem {
     label: string;
@@ -11,10 +13,16 @@ interface BreadcrumbItem {
     icon?: string;
 }
 interface Props {
+    /** Primary action buttons */
     primaryActions?: NavbarAction[];
+    /** Show connection status indicator */
     showStatus?: boolean;
+    /** Page title */
     title?: string;
+    /** Breadcrumb navigation items */
     breadcrumbs?: BreadcrumbItem[];
+    /** Show settings gear icon */
+    showSettings?: boolean;
 }
 declare const Navbar: import("svelte").Component<Props, {}, "">;
 type Navbar = ReturnType<typeof Navbar>;