@d34dman/flowdrop 0.0.43 → 0.0.44

package/dist/components/playground/Playground.svelte

@@ -510,95 +510,99 @@
 	class:playground--embedded={mode === 'embedded'}
 	class:playground--standalone={mode === 'standalone'}
 	class:playground--modal={mode === 'modal'}
+	class:playground--no-sidebar={config.showSidebar === false}
 >
 	<div class="playground__container">
-		<!-- Sidebar -->
-		<aside class="playground__sidebar">
-			<!-- Sidebar Header -->
-			<div class="playground__sidebar-header">
-				<div class="playground__sidebar-title">
-					<Icon icon="mdi:play-circle-outline" />
-					<span>Playground</span>
+		<!-- Sidebar (conditionally rendered based on config.showSidebar) -->
+		{#if config.showSidebar !== false}
+			<aside class="playground__sidebar">
+				<!-- Sidebar Header -->
+				<div class="playground__sidebar-header">
+					<div class="playground__sidebar-title">
+						<span>Playground</span>
+					</div>
+					{#if (mode === 'embedded' || mode === 'modal') && onClose}
+						<button
+							type="button"
+							class="playground__sidebar-close"
+							onclick={onClose}
+							title="Close playground"
+						>
+							{#if mode === 'modal'}
+								<Icon icon="mdi:close" />
+							{:else}
+								<Icon icon="mdi:dock-right" />
+							{/if}
+						</button>
+					{/if}
 				</div>
-				{#if (mode === 'embedded' || mode === 'modal') && onClose}
-					<button
-						type="button"
-						class="playground__sidebar-close"
-						onclick={onClose}
-						title="Close playground"
-					>
-						{#if mode === 'modal'}
-							<Icon icon="mdi:close" />
-						{:else}
-							<Icon icon="mdi:dock-right" />
-						{/if}
-					</button>
-				{/if}
-			</div>
 
-			<!-- Chat Section -->
-			<div class="playground__section">
-				<div class="playground__section-header">
-					<div class="playground__section-title">
-						<Icon icon="mdi:chat-outline" />
-						<span>Chat</span>
-					</div>
+				<!-- New Session Section -->
+				<div class="playground__section">
 					<button
 						type="button"
-						class="playground__add-btn"
+						class="playground__new-session-btn"
 						onclick={handleCreateSession}
 						disabled={$isLoading}
-						title="New chat session"
+						title="Start a new session"
 					>
 						<Icon icon="mdi:plus" />
+						<span>New Session</span>
 					</button>
-				</div>
 
-				<!-- Sessions List -->
-				<div class="playground__sessions">
-					{#if $sessions.length === 0 && !$isLoading}
-						<div class="playground__sessions-empty">
-							<span>No sessions yet</span>
-						</div>
-					{:else}
-						{#each $sessions as session (session.id)}
-							<div
-								class="playground__session"
-								class:playground__session--active={$currentSession?.id === session.id}
-								role="button"
-								tabindex="0"
-								onclick={() => handleSelectSession(session.id)}
-								onkeydown={(e) => e.key === 'Enter' && handleSelectSession(session.id)}
-							>
-								<span class="playground__session-name" title={session.name}>
-									{session.name}
-								</span>
-								<button
-									type="button"
-									class="playground__session-menu"
-									class:playground__session-menu--delete={pendingDeleteId === session.id}
-									onclick={(e) => handleDeleteClick(e, session.id)}
-									title={pendingDeleteId === session.id
-										? 'Click to confirm delete'
-										: 'Delete session'}
-								>
-									{#if pendingDeleteId === session.id}
-										<Icon icon="mdi:check" />
-									{:else}
-										<Icon icon="mdi:dots-horizontal" />
-									{/if}
-								</button>
+					<!-- Sessions List - click a session to load it -->
+					<div class="playground__sessions-wrap">
+						{#if $sessions.length > 0}
+							<p class="playground__sessions-hint">Click a session to load it</p>
+						{/if}
+						<div class="playground__sessions">
+						{#if $sessions.length === 0 && !$isLoading}
+							<div class="playground__sessions-empty">
+								<span>No sessions yet</span>
 							</div>
-						{/each}
-					{/if}
+						{:else}
+							{#each $sessions as session (session.id)}
+								<div
+									class="playground__session"
+									class:playground__session--active={$currentSession?.id === session.id}
+									role="button"
+									tabindex="0"
+									title="Click to load this session"
+									aria-label="Load session: {session.name}"
+									onclick={() => handleSelectSession(session.id)}
+									onkeydown={(e) => e.key === 'Enter' && handleSelectSession(session.id)}
+								>
+									<span class="playground__session-name" title={session.name}>
+										{session.name}
+									</span>
+									<button
+										type="button"
+										class="playground__session-menu"
+										class:playground__session-menu--delete={pendingDeleteId === session.id}
+										onclick={(e) => handleDeleteClick(e, session.id)}
+										title={pendingDeleteId === session.id
+											? 'Click to confirm delete'
+											: 'Delete session'}
+									>
+										{#if pendingDeleteId === session.id}
+											<Icon icon="mdi:check" />
+										{:else}
+											<Icon icon="mdi:dots-horizontal" />
+										{/if}
+									</button>
+								</div>
+							{/each}
+						{/if}
+						</div>
+					</div>
 				</div>
-			</div>
-		</aside>
+			</aside>
+		{/if}
 
 		<!-- Main Content -->
 		<main class="playground__main">
-			<!-- Session Header -->
-			{#if $currentSession}
+			<!-- Session Header (conditionally rendered based on config.showSessionHeader) -->
+			{#if $currentSession && config.showSessionHeader !== false}
 				<header class="playground__header">
 					<h2 class="playground__header-title">{$currentSession.name}</h2>
 					<button
@@ -659,18 +663,24 @@
 		flex-direction: column;
 		height: 100%;
 		overflow: hidden; /* Prevent playground-level scrolling */
-		background-color: #f8fafc;
+		background-color: var(--fd-muted);
 		font-family:
 			-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
 	}
 
 	.playground--embedded {
-		border-left: 1px solid #e2e8f0;
+		border-left: 1px solid var(--fd-border);
 		box-shadow: -4px 0 20px rgba(0, 0, 0, 0.08);
 	}
 
 	.playground--standalone {
 		height: 100vh;
+		background: var(--fd-layout-background, var(--fd-muted));
+	}
+
+	/* Dark mode override for standalone */
+	:global([data-theme='dark']) .playground--standalone {
+		background: linear-gradient(135deg, #141418 0%, #1a1a2e 50%, #16162a 100%);
 	}
 
 	.playground--modal {
@@ -678,6 +688,11 @@
 		width: 100%;
 	}
 
+	/* No sidebar mode - minimal chat widget experience */
+	.playground--no-sidebar .playground__main {
+		border-left: none;
+	}
+
 	/* Container */
 	.playground__container {
 		display: flex;
@@ -688,18 +703,22 @@
 	/* Sidebar */
 	.playground__sidebar {
 		width: 220px;
-		background-color: #fafbfc;
-		border-right: 1px solid #e5e7eb;
+		background-color: var(--fd-background);
+		border-right: 1px solid var(--fd-border);
 		display: flex;
 		flex-direction: column;
 	}
 
+	/* Fixed height so sidebar and main session header align on same horizontal line */
 	.playground__sidebar-header {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		padding: 1rem;
-		border-bottom: 1px solid #e5e7eb;
+		height: 3.25rem;
+		padding: 0 1rem;
+		border-bottom: 1px solid var(--fd-border);
+		box-sizing: border-box;
+		flex-shrink: 0;
 	}
 
 	.playground__sidebar-title {
@@ -708,7 +727,8 @@
 		gap: 0.5rem;
 		font-size: 0.9375rem;
 		font-weight: 600;
-		color: #1f2937;
+		line-height: 1.25;
+		color: var(--fd-foreground);
 	}
 
 	.playground__sidebar-close {
@@ -720,14 +740,14 @@
 		border: none;
 		border-radius: 0.375rem;
 		background: transparent;
-		color: #6b7280;
+		color: var(--fd-muted-foreground);
 		cursor: pointer;
 		transition: all 0.15s ease;
 	}
 
 	.playground__sidebar-close:hover {
-		background-color: #f3f4f6;
-		color: #374151;
+		background-color: var(--fd-muted);
+		color: var(--fd-foreground);
 	}
 
 	/* Section */
@@ -736,96 +756,118 @@
 		display: flex;
 		flex-direction: column;
 		min-height: 0;
+		padding: 0.75rem 0.5rem 0;
 	}
 
-	.playground__section-header {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 0.75rem 1rem;
-	}
-
-	.playground__section-title {
+	/* New Session – neutral full-width button with icon */
+	.playground__new-session-btn {
 		display: flex;
 		align-items: center;
+		justify-content: center;
 		gap: 0.5rem;
-		font-size: 0.8125rem;
+		width: 100%;
+		padding: 0.625rem 1rem;
+		border: 1px solid var(--fd-border);
+		border-radius: var(--fd-radius-md);
+		background-color: var(--fd-background);
+		color: var(--fd-foreground);
+		font-size: 0.875rem;
 		font-weight: 500;
-		color: #6b7280;
+		cursor: pointer;
+		transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
+		box-sizing: border-box;
 	}
 
-	.playground__add-btn {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 1.5rem;
-		height: 1.5rem;
-		border: none;
-		border-radius: 0.375rem;
-		background: transparent;
-		color: #6b7280;
-		cursor: pointer;
-		transition: all 0.15s ease;
+	.playground__new-session-btn:hover:not(:disabled) {
+		background-color: var(--fd-muted);
+		border-color: var(--fd-border);
+		transform: translateY(-1px);
 	}
 
-	.playground__add-btn:hover:not(:disabled) {
-		background-color: #e5e7eb;
-		color: #374151;
+	.playground__new-session-btn:focus {
+		outline: none;
+		box-shadow: 0 0 0 2px var(--fd-ring);
 	}
 
-	.playground__add-btn:disabled {
+	.playground__new-session-btn:disabled {
 		opacity: 0.5;
 		cursor: not-allowed;
+		transform: none;
+	}
+
+	.playground__new-session-btn :global(svg) {
+		width: 1.125rem;
+		height: 1.125rem;
 	}
 
 	/* Sessions */
+	.playground__sessions-wrap {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		min-height: 0;
+	}
+
+	.playground__sessions-hint {
+		font-size: 0.6875rem;
+		color: var(--fd-muted-foreground);
+		margin: 0.75rem 0 0.375rem 0.75rem;
+		line-height: 1.3;
+	}
+
 	.playground__sessions {
 		flex: 1;
 		overflow-y: auto;
 		padding: 0 0.5rem 1rem;
+		min-height: 0;
 	}
 
 	.playground__sessions-empty {
 		padding: 1rem;
 		text-align: center;
 		font-size: 0.8125rem;
-		color: #9ca3af;
+		color: var(--fd-muted-foreground);
 	}
 
+	/* Session row - clickable to load session; clear hover/active affordance */
 	.playground__session {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
 		padding: 0.625rem 0.75rem;
 		margin-bottom: 0.25rem;
-		border-radius: 0.5rem;
+		border-radius: var(--fd-radius-md);
+		border-left: 3px solid transparent;
 		cursor: pointer;
-		transition: all 0.15s ease;
+		transition: background-color 0.15s ease, border-left-color 0.15s ease;
 	}
 
 	.playground__session:hover {
-		background-color: #f3f4f6;
+		background-color: var(--fd-muted);
+		border-left-color: var(--fd-border);
 	}
 
 	.playground__session--active {
-		background-color: #e0e7ff;
+		background-color: var(--fd-primary-muted);
+		border-left-color: var(--fd-primary);
 	}
 
 	.playground__session--active:hover {
-		background-color: #c7d2fe;
+		background-color: var(--fd-primary-muted);
+		border-left-color: var(--fd-primary);
 	}
 
 	.playground__session-name {
 		flex: 1;
 		font-size: 0.875rem;
-		color: #374151;
+		color: var(--fd-foreground);
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
 
 	.playground__session--active .playground__session-name {
-		color: #4338ca;
+		color: var(--fd-primary);
 		font-weight: 500;
 	}
 
@@ -838,7 +880,7 @@
 		border: none;
 		border-radius: 0.25rem;
 		background: transparent;
-		color: #9ca3af;
+		color: var(--fd-muted-foreground);
 		cursor: pointer;
 		opacity: 0;
 		transition: all 0.15s ease;
@@ -849,19 +891,19 @@
 	}
 
 	.playground__session-menu:hover {
-		background-color: #fecaca;
-		color: #dc2626;
+		background-color: var(--fd-error-muted);
+		color: var(--fd-error);
 	}
 
 	.playground__session-menu--delete {
 		opacity: 1;
-		background-color: #dcfce7;
-		color: #16a34a;
+		background-color: var(--fd-success-muted);
+		color: var(--fd-success);
 	}
 
 	.playground__session-menu--delete:hover {
-		background-color: #bbf7d0;
-		color: #15803d;
+		background-color: var(--fd-success-muted);
+		color: var(--fd-success-hover);
 	}
 
 	/* Main Content */
@@ -872,23 +914,27 @@
 		min-width: 0;
 		min-height: 0; /* Allow proper flex shrinking */
 		overflow: hidden; /* Prevent scrolling - ChatPanel handles it */
-		background-color: #ffffff;
+		background-color: var(--fd-background);
 	}
 
-	/* Header */
+	/* Header - exact same height as playground__sidebar-header for alignment */
 	.playground__header {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		padding: 0.875rem 1.25rem;
-		border-bottom: 1px solid #e5e7eb;
-		background-color: #fafbfc;
+		height: 3.25rem;
+		padding: 0 1.25rem;
+		border-bottom: 1px solid var(--fd-border);
+		background-color: var(--fd-background);
+		box-sizing: border-box;
+		flex-shrink: 0;
 	}
 
 	.playground__header-title {
 		font-size: 0.9375rem;
 		font-weight: 600;
-		color: #1f2937;
+		line-height: 1.25;
+		color: var(--fd-foreground);
 		margin: 0;
 	}
 
@@ -901,14 +947,14 @@
 		border: none;
 		border-radius: 0.375rem;
 		background: transparent;
-		color: #6b7280;
+		color: var(--fd-muted-foreground);
 		cursor: pointer;
 		transition: all 0.15s ease;
 	}
 
 	.playground__header-close:hover {
-		background-color: #f3f4f6;
-		color: #374151;
+		background-color: var(--fd-muted);
+		color: var(--fd-foreground);
 	}
 
 	/* Error */
@@ -917,9 +963,9 @@
 		align-items: center;
 		gap: 0.5rem;
 		padding: 0.75rem 1rem;
-		background-color: #fef2f2;
-		border-bottom: 1px solid #fecaca;
-		color: #dc2626;
+		background-color: var(--fd-error-muted);
+		border-bottom: 1px solid var(--fd-error);
+		color: var(--fd-error);
 		font-size: 0.875rem;
 	}
 
@@ -933,13 +979,13 @@
 		border: none;
 		border-radius: 0.25rem;
 		background: transparent;
-		color: #dc2626;
+		color: var(--fd-error);
 		cursor: pointer;
 		transition: background-color 0.15s ease;
 	}
 
 	.playground__error-dismiss:hover {
-		background-color: #fee2e2;
+		background-color: var(--fd-error-muted);
 	}
 
 	/* Content */
@@ -958,7 +1004,7 @@
 		justify-content: center;
 		flex: 1;
 		gap: 1rem;
-		color: #6b7280;
+		color: var(--fd-muted-foreground);
 	}
 
 	:global(.playground__loading-icon) {

package/dist/components/playground/PlaygroundModal.svelte

@@ -115,20 +115,19 @@
 		left: 0;
 		right: 0;
 		bottom: 0;
-		background-color: rgba(0, 0, 0, 0.5);
+		background-color: var(--fd-backdrop);
+		backdrop-filter: var(--fd-backdrop-blur);
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		z-index: 1100;
-		padding: 1rem;
+		padding: var(--fd-space-4);
 	}
 
 	.playground-modal {
-		background: white;
-		border-radius: 0.75rem;
-		box-shadow:
-			0 20px 25px -5px rgba(0, 0, 0, 0.1),
-			0 10px 10px -5px rgba(0, 0, 0, 0.04);
+		background: var(--fd-background);
+		border-radius: var(--fd-radius-xl);
+		box-shadow: var(--fd-shadow-xl);
 		width: 100%;
 		max-width: 90vw;
 		min-width: 800px;
@@ -142,19 +141,19 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		padding: 1rem 1.25rem;
-		border-bottom: 1px solid #e5e7eb;
-		background-color: #fafbfc;
+		padding: var(--fd-space-4) var(--fd-space-5);
+		border-bottom: 1px solid var(--fd-border);
+		background-color: var(--fd-muted);
 		flex-shrink: 0;
 	}
 
 	.playground-modal__title {
 		display: flex;
 		align-items: center;
-		gap: 0.5rem;
-		font-size: 1rem;
+		gap: var(--fd-space-2);
+		font-size: var(--fd-text-base);
 		font-weight: 600;
-		color: #1f2937;
+		color: var(--fd-foreground);
 		margin: 0;
 	}
 
@@ -166,15 +165,15 @@
 		height: 2rem;
 		border: none;
 		background: transparent;
-		border-radius: 0.375rem;
-		color: #6b7280;
+		border-radius: var(--fd-radius-md);
+		color: var(--fd-muted-foreground);
 		cursor: pointer;
-		transition: all 0.2s;
+		transition: all var(--fd-transition-normal);
 	}
 
 	.playground-modal__close-btn:hover {
-		background-color: #f3f4f6;
-		color: #374151;
+		background-color: var(--fd-secondary);
+		color: var(--fd-foreground);
 	}
 
 	.playground-modal__content {
@@ -208,7 +207,7 @@
 		}
 
 		.playground-modal__header {
-			padding: 0.875rem 1rem;
+			padding: var(--fd-space-3) var(--fd-space-4);
 		}
 	}