Refine playground settings and bottom nav

- Panel max-height is now a percentage slider (10% steps, default 70%)
  driving every panel via the manager value, replacing the px slider and
  the inert per-bubble override; the snippet always emits it as a percent.
- Reorder settings (Accent below Theme), move Reset into the panel
  header, and relabel the dock-side control to Initial dock side.
- Bottom control bar: solid surface instead of a border, sharper inner
  button corners with concentric outer rounding, tighter padding.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: githyperplexed

playground/components/app.svelte

@@ -8,7 +8,7 @@
 	import { effectiveTheme, toBubblesOptions } from "$playground/options";
 	import type { Card } from "$playground/types";
 	import { writeConfig } from "$playground/url";
-	import { createBubbles, type PanelLength } from "$src/index";
+	import { createBubbles } from "$src/index";
 	import { untrack } from "svelte";
 
 	// initialState is a live setting (Settings → Initial state). At "open"
@@ -37,11 +37,9 @@
 	manager.on("dismiss", ({ id }) => drop(id));
 
 	// The README panel gets a fixed width — prose needs the room; the rest
-	// ride the configurable panel width. Every panel caps its height at 70%
-	// of the viewport so its content scrolls inside a contained panel; the
-	// "%" tracks resizes on its own.
+	// ride the configurable panel width. Panel height comes from the settings
+	// max-height slider (a viewport percentage), shared by every panel.
 	const DOCS_PANEL_WIDTH = 960;
-	const PANEL_MAX_HEIGHT: PanelLength = "70%";
 
 	const panelWidthFor = (card: Card): number | undefined =>
 		card.id === "docs" ? DOCS_PANEL_WIDTH : undefined;
@@ -52,8 +50,7 @@
 			label: card.title,
 			icon: mountInto(BubbleGlyph, { icon: card.icon }),
 			content: mountInto(card.panel),
-			panelWidth: panelWidthFor(card),
-			panelMaxHeight: PANEL_MAX_HEIGHT
+			panelWidth: panelWidthFor(card)
 		});
 		spawned[card.id] = added;
 		if (added) order.push(card.id);

playground/components/cards.svelte

@@ -16,6 +16,15 @@
 	// tap-away — registering the row keeps a toggle-in from collapsing the
 	// flock a beat before the new bubble enters.
 	const trigger = (node: HTMLElement) => ({ destroy: registerTrigger(node) });
+
+	// Connected look: each button keeps the row's roundedness on its outer
+	// corners and goes sharp (xs) on the inner corners facing a neighbor.
+	const corners = (i: number, total: number): string => {
+		if (total === 1) return "rounded-xl";
+		if (i === 0) return "rounded-l-xl rounded-r-xs";
+		if (i === total - 1) return "rounded-l-xs rounded-r-xl";
+		return "rounded-xs";
+	};
 </script>
 
 <!-- A floating, bottom-mounted control bar — fixed and centered on every
@@ -26,15 +35,15 @@
 >
 	<div
 		use:trigger
-		class="pointer-events-auto flex items-center gap-1 rounded-2xl border border-zinc-800 bg-black/70 p-1.5 shadow-lg backdrop-blur-md light:border-zinc-200 light:bg-white/70"
+		class="pointer-events-auto flex items-center gap-1 rounded-2xl bg-zinc-900 p-1 shadow-lg light:bg-white"
 	>
-		{#each cards as card (card.id)}
+		{#each cards as card, i (card.id)}
 			<button
 				type="button"
 				onclick={() => toggle(card)}
 				aria-pressed={spawned[card.id] ? "true" : "false"}
 				aria-label={card.title}
-				class="focus-ring flex cursor-pointer items-center gap-2 rounded-xl px-3.5 py-2.5 text-sm font-medium transition-colors {spawned[
+				class="focus-ring flex cursor-pointer items-center gap-2 {corners(i, cards.length)} px-3.5 py-2.5 text-sm font-medium transition-colors {spawned[
 					card.id
 				]
 					? 'bg-zinc-800 text-white light:bg-zinc-200 light:text-zinc-900'

playground/components/settings-panel.svelte

@@ -7,7 +7,7 @@
 	import MinusIcon from "$playground/components/icons/minus-icon.svelte";
 	import PlusIcon from "$playground/components/icons/plus-icon.svelte";
 	import { config } from "$playground/config.svelte";
-	import { AUTO_PANEL_MAX_HEIGHT, defaults, ranges } from "$playground/defaults";
+	import { defaults, ranges } from "$playground/defaults";
 	import { configSnippet } from "$playground/snippet";
 	import type { Swatch } from "$playground/types";
 
@@ -68,6 +68,15 @@
 			<span class="truncate text-sm font-semibold">Customize</span>
 			<span class="truncate text-xs text-zinc-400 light:text-zinc-600">Changes apply live</span>
 		</div>
+		{#if dirty}
+			<button
+				type="button"
+				onclick={reset}
+				class="focus-ring flex h-7 shrink-0 cursor-pointer items-center rounded-md border border-zinc-700 px-2.5 text-xs light:border-zinc-300"
+			>
+				Reset
+			</button>
+		{/if}
 	</header>
 
 	<div class="panel-scroll mb-4 flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4 pb-0">
@@ -82,26 +91,6 @@
 			onSelect={(theme) => (config.theme = theme)}
 		/>
 
-		<ControlSegmented
-			label="Initial state"
-			options={[
-				{ value: "docked", label: "Docked" },
-				{ value: "open", label: "Open" }
-			]}
-			value={config.initialState}
-			onSelect={(initialState) => (config.initialState = initialState)}
-		/>
-
-		<ControlSegmented
-			label="Dock side"
-			options={[
-				{ value: "left", label: "Left" },
-				{ value: "right", label: "Right" }
-			]}
-			value={config.side}
-			onSelect={(side) => (config.side = side)}
-		/>
-
 		<div class="flex flex-col gap-1.5">
 			<span class="text-xs text-zinc-400 light:text-zinc-600">Accent</span>
 			<div class="flex flex-wrap items-center gap-2">
@@ -155,6 +144,26 @@
 			</div>
 		</div>
 
+		<ControlSegmented
+			label="Initial state"
+			options={[
+				{ value: "docked", label: "Docked" },
+				{ value: "open", label: "Open" }
+			]}
+			value={config.initialState}
+			onSelect={(initialState) => (config.initialState = initialState)}
+		/>
+
+		<ControlSegmented
+			label="Initial dock side"
+			options={[
+				{ value: "left", label: "Left" },
+				{ value: "right", label: "Right" }
+			]}
+			value={config.side}
+			onSelect={(side) => (config.side = side)}
+		/>
+
 		<ControlSlider
 			label="Dock vertical"
 			min={ranges.vertical.min}
@@ -181,7 +190,7 @@
 			max={ranges.panelMaxHeight.max}
 			step={ranges.panelMaxHeight.step}
 			value={config.panelMaxHeight}
-			format={(v) => (v === AUTO_PANEL_MAX_HEIGHT ? "Auto" : `${v}px`)}
+			format={(v) => `${v}%`}
 			onCommit={(v) => (config.panelMaxHeight = v)}
 		/>
 
@@ -214,15 +223,6 @@
 			<span class="flex items-center justify-between">
 				<span class="text-xs text-zinc-400 light:text-zinc-600">Your config</span>
 				<span class="flex items-center gap-2">
-					{#if dirty}
-						<button
-							type="button"
-							onclick={reset}
-							class="focus-ring flex h-6 cursor-pointer items-center rounded-md border border-zinc-700 px-2 text-xs light:border-zinc-300"
-						>
-							Reset
-						</button>
-					{/if}
 					<button
 						type="button"
 						aria-label="Copy config"

playground/defaults.ts

@@ -1,15 +1,13 @@
 import type { PlaygroundConfig } from "$playground/types";
 
-/** Slider ceiling that means "no panel height cap". */
-export const AUTO_PANEL_MAX_HEIGHT = 720;
-
 /** Slider bounds, shared by the controls and the URL param clamping. */
 export const ranges = {
 	vertical: { min: 0, max: 1, step: 0.05 },
 	// The top end exceeds any common viewport; the library clamps the
 	// panel inside the screen margins, so max reads as "full width".
 	panelWidth: { min: 280, max: 1600, step: 20 },
-	panelMaxHeight: { min: 240, max: AUTO_PANEL_MAX_HEIGHT, step: 40 },
+	// Panel max height as a viewport percentage — the library takes "%".
+	panelMaxHeight: { min: 10, max: 100, step: 10 },
 	maxBubbles: { min: 1, max: 5 }
 } as const;
 
@@ -27,6 +25,6 @@ export const defaults: PlaygroundConfig = {
 	side: "right",
 	vertical: 0.5,
 	panelWidth: 480,
-	panelMaxHeight: AUTO_PANEL_MAX_HEIGHT,
+	panelMaxHeight: 70,
 	maxBubbles: 5
 };

playground/options.ts

@@ -1,4 +1,3 @@
-import { AUTO_PANEL_MAX_HEIGHT } from "$playground/defaults";
 import type { PlaygroundConfig } from "$playground/types";
 import {
 	bubbleThemes,
@@ -47,7 +46,6 @@ export const toBubblesOptions = (config: PlaygroundConfig): BubblesOptions => ({
 	side: config.side,
 	vertical: config.vertical,
 	panelWidth: config.panelWidth,
-	panelMaxHeight:
-		config.panelMaxHeight === AUTO_PANEL_MAX_HEIGHT ? undefined : config.panelMaxHeight,
+	panelMaxHeight: `${config.panelMaxHeight}%`,
 	maxBubbles: config.maxBubbles
 });

playground/snippet.ts

@@ -25,9 +25,10 @@ export const configSnippet = (config: PlaygroundConfig): string => {
 	if (config.panelWidth !== defaults.panelWidth) {
 		lines.push(`\tpanelWidth: ${config.panelWidth}`);
 	}
-	if (config.panelMaxHeight !== defaults.panelMaxHeight) {
-		lines.push(`\tpanelMaxHeight: ${config.panelMaxHeight}`);
-	}
+	// Always emitted: the demo caps panel height while the library leaves it
+	// uncapped by default, so omitting it would make the copied snippet render
+	// full-height panels instead of the contained ones on screen.
+	lines.push(`\tpanelMaxHeight: "${config.panelMaxHeight}%"`);
 	if (config.maxBubbles !== defaults.maxBubbles) lines.push(`\tmaxBubbles: ${config.maxBubbles}`);
 
 	if (lines.length === 0) return "createBubbles();";

playground/types/index.ts

@@ -11,7 +11,7 @@ export interface PlaygroundConfig {
 	side: BubbleSide;
 	vertical: number;
 	panelWidth: number;
-	/** AUTO_PANEL_MAX_HEIGHT means "no cap" — the slider's top end. */
+	/** Panel max height as a percentage of the viewport (10–100). */
 	panelMaxHeight: number;
 	maxBubbles: number;
 }