feat(shared-ui): add InputBar context menu with settings

- Add InputBarContextMenu with settings toggles (syntax highlighting, auto-focus)
- Add InputBarHelpModal for keyboard shortcuts and syntax help
- Add inputBarSettings store with localStorage persistence
- Add recentInputHistory store for tracking used tags/references
- Integrate context menu in calendar app with default calendar selection
- Right-click on InputBar opens settings menu

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

apps/calendar/apps/web/src/routes/(app)/+layout.svelte

@@ -3,7 +3,7 @@
 	import { page } from '$app/stores';
 	import { onMount } from 'svelte';
 	import { locale } from 'svelte-i18n';
-	import { PillNavigation, QuickInputBar } from '@manacore/shared-ui';
+	import { PillNavigation, QuickInputBar, InputBarHelpModal } from '@manacore/shared-ui';
 	import {
 		SplitPaneContainer,
 		setSplitPanelContext,
@@ -150,6 +150,42 @@
 	let isCollapsed = $state(false);
 	let isToolbarCollapsed = $state(true); // Default to collapsed - FAB next to InputBar
 
+	// InputBar help modal state
+	let helpModalOpen = $state(false);
+	let helpModalMode = $state<'shortcuts' | 'syntax'>('shortcuts');
+
+	function handleShowShortcuts() {
+		helpModalMode = 'shortcuts';
+		helpModalOpen = true;
+	}
+
+	function handleShowSyntaxHelp() {
+		helpModalMode = 'syntax';
+		helpModalOpen = true;
+	}
+
+	function handleCloseHelpModal() {
+		helpModalOpen = false;
+	}
+
+	// Default calendar for InputBar quick create
+	let selectedDefaultCalendarId = $derived(
+		calendarsStore.calendars.find((c) => c.isDefault)?.id || calendarsStore.calendars[0]?.id
+	);
+
+	function handleDefaultCalendarChange(id: string) {
+		// Update the default calendar via API
+		calendarsStore.setAsDefault(id);
+	}
+
+	// Calendar options for InputBar context menu
+	let calendarOptions = $derived(
+		calendarsStore.calendars.map((c) => ({
+			id: c.id,
+			label: c.name,
+		}))
+	);
+
 	// Use theme store's isDark directly
 	let isDark = $derived(theme.isDark);
 
@@ -431,7 +467,6 @@
 			onParseCreate={handleParseCreate}
 			createText="Erstellen"
 			appIcon="calendar"
-			autoFocus={true}
 			bottomOffset={isSidebarMode
 				? '0px'
 				: showCalendarToolbar && !isToolbarCollapsed
@@ -439,6 +474,12 @@
 					: '70px'}
 			hasFabRight={showCalendarToolbar && !isSidebarMode}
 			hasFabLeft={showCalendarToolbar && !isSidebarMode && settingsStore.dateStripCollapsed}
+			defaultOptions={calendarOptions}
+			selectedDefaultId={selectedDefaultCalendarId}
+			defaultOptionLabel="Standard-Kalender"
+			onDefaultChange={handleDefaultCalendarChange}
+			onShowShortcuts={handleShowShortcuts}
+			onShowSyntaxHelp={handleShowSyntaxHelp}
 		/>
 	</div>
 </SplitPaneContainer>
@@ -446,6 +487,9 @@
 <!-- Global Event Context Menu - rendered at top level for proper z-index -->
 <EventContextMenu onEdit={handleContextMenuEdit} />
 
+<!-- InputBar Help Modal -->
+<InputBarHelpModal open={helpModalOpen} onClose={handleCloseHelpModal} mode={helpModalMode} />
+
 <style>
 	.layout-container {
 		display: flex;

packages/shared-ui/src/index.ts

@@ -124,8 +124,28 @@ export { CommandBar } from './command-bar';
 export type { CommandBarItem } from './command-bar';
 
 // Input Bar
-export { InputBar, QuickInputBar } from './quick-input';
+export {
-export type { QuickInputItem, QuickAction, CreatePreview } from './quick-input';
+	InputBar,
+	QuickInputBar,
+	InputBarContextMenu,
+	InputBarHelpModal,
+	// Recent history
+	getRecentTags,
+	getRecentReferences,
+	addRecentTag,
+	addRecentReference,
+	extractAndSaveFromInput,
+	clearRecentHistory,
+	createRecentInputHistoryStore,
+	// Settings
+	loadInputBarSettings,
+	saveInputBarSettings,
+	updateInputBarSetting,
+	resetInputBarSettings,
+	createInputBarSettingsStore,
+	getInputBarSettingsStore,
+} from './quick-input';
+export type { QuickInputItem, QuickAction, CreatePreview, InputBarSettings } from './quick-input';
 
 // Pages
 export { default as AppsPage } from './pages/AppsPage.svelte';

packages/shared-ui/src/quick-input/InputBar.svelte

@@ -2,6 +2,11 @@
 	import { onMount } from 'svelte';
 	import { slide } from 'svelte/transition';
 	import type { QuickInputItem, CreatePreview } from './types';
+	import InputBarContextMenu from './InputBarContextMenu.svelte';
+	import { getInputBarSettingsStore } from './inputBarSettings.svelte';
+
+	// Settings store
+	const settingsStore = getInputBarSettingsStore();
 
 	// Syntax highlighting patterns for command keywords
 	interface HighlightPattern {
@@ -44,6 +49,11 @@
 		return result;
 	}
 
+	interface DefaultOption {
+		id: string;
+		label: string;
+	}
+
 	interface Props {
 		onSearch: (query: string) => Promise<QuickInputItem[]>;
 		onSelect: (item: QuickInputItem) => void;
@@ -55,13 +65,26 @@
 		searchingText?: string;
 		createText?: string;
 		appIcon?: string;
-		autoFocus?: boolean;
 		/** Bottom offset from viewport bottom (default: '70px') */
 		bottomOffset?: string;
 		/** Whether to leave space for a FAB button on the right side on mobile (default: false) */
 		hasFabRight?: boolean;
 		/** Whether to leave space for a FAB button on the left side on mobile (default: false) */
 		hasFabLeft?: boolean;
+		/** Enable context menu on right-click (default: true) */
+		enableContextMenu?: boolean;
+		/** App-specific default options for context menu (e.g., calendars) */
+		defaultOptions?: DefaultOption[];
+		/** Currently selected default option ID */
+		selectedDefaultId?: string;
+		/** Label for the default option selector (e.g., "Standard-Kalender") */
+		defaultOptionLabel?: string;
+		/** Callback when default option changes */
+		onDefaultChange?: (id: string) => void;
+		/** Callback to show keyboard shortcuts help */
+		onShowShortcuts?: () => void;
+		/** Callback to show syntax help */
+		onShowSyntaxHelp?: () => void;
 	}
 
 	let {
@@ -75,12 +98,21 @@
 		searchingText = 'Suche...',
 		createText = 'Erstellen',
 		appIcon = 'search',
-		autoFocus = true,
 		bottomOffset = '70px',
 		hasFabRight = false,
 		hasFabLeft = false,
+		enableContextMenu = true,
+		defaultOptions = [],
+		selectedDefaultId,
+		defaultOptionLabel = 'Standard-Kalender',
+		onDefaultChange,
+		onShowShortcuts,
+		onShowSyntaxHelp,
 	}: Props = $props();
 
+	// Use settings for autoFocus
+	let effectiveAutoFocus = $derived(settingsStore.autoFocus);
+
 	let searchQuery = $state('');
 	let results = $state<QuickInputItem[]>([]);
 	let loading = $state(false);
@@ -91,13 +123,20 @@
 	let searchTimeout: ReturnType<typeof setTimeout>;
 	let inputElement = $state<HTMLInputElement | null>(null);
 
+	// Context menu state
+	let contextMenuVisible = $state(false);
+	let contextMenuX = $state(0);
+	let contextMenuY = $state(0);
+
 	// Computed create preview
 	let createPreview = $derived(
 		searchQuery.trim() && onParseCreate ? onParseCreate(searchQuery) : null
 	);
 
-	// Highlighted text for overlay
+	// Highlighted text for overlay (respects syntax highlighting setting)
-	let highlightedQuery = $derived(highlightText(searchQuery));
+	let highlightedQuery = $derived(
+		settingsStore.syntaxHighlighting ? highlightText(searchQuery) : searchQuery
+	);
 
 	// Check if create option is selected (it's always first when available)
 	let isCreateSelected = $derived(selectedIndex === 0 && createPreview !== null);
@@ -107,13 +146,19 @@
 		showPanel = isFocused && searchQuery.trim().length > 0;
 	});
 
-	// Auto-focus on mount
+	// Auto-focus on mount (respects autoFocus setting)
 	onMount(() => {
-		if (autoFocus) {
+		if (effectiveAutoFocus) {
 			setTimeout(() => inputElement?.focus(), 100);
 		}
 	});
 
+	// Handler for settings changes (to trigger re-render)
+	function handleSettingsChange() {
+		// Force reactivity update by accessing the store
+		settingsStore.refresh();
+	}
+
 	async function handleSearch() {
 		clearTimeout(searchTimeout);
 
@@ -244,6 +289,22 @@
 			isFocused = false;
 		}, 150);
 	}
+
+	// Context menu handlers
+	function handleContextMenu(event: MouseEvent) {
+		if (!enableContextMenu) return;
+
+		event.preventDefault();
+		event.stopPropagation();
+
+		contextMenuX = event.clientX;
+		contextMenuY = event.clientY;
+		contextMenuVisible = true;
+	}
+
+	function handleContextMenuClose() {
+		contextMenuVisible = false;
+	}
 </script>
 
 <div
@@ -340,7 +401,8 @@
 	{/if}
 
 	<!-- Input Bar (always visible) -->
-	<div class="input-container">
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class="input-container" oncontextmenu={handleContextMenu}>
 		<div class="app-icon">
 			<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
 				{#if appIcon === 'check-square' || appIcon === 'todo'}
@@ -418,6 +480,21 @@
 			</button>
 		{/if}
 	</div>
+
+	<!-- Context Menu -->
+	<InputBarContextMenu
+		visible={contextMenuVisible}
+		x={contextMenuX}
+		y={contextMenuY}
+		onClose={handleContextMenuClose}
+		onSettingsChange={handleSettingsChange}
+		{defaultOptions}
+		{selectedDefaultId}
+		{defaultOptionLabel}
+		{onDefaultChange}
+		{onShowShortcuts}
+		{onShowSyntaxHelp}
+	/>
 </div>
 
 <style>

packages/shared-ui/src/quick-input/InputBarContextMenu.svelte

@@ -0,0 +1,174 @@
+<script lang="ts">
+	import { ContextMenu, type ContextMenuItem } from '../context-menu';
+	import {
+		HighlighterCircle,
+		Target,
+		Calendar,
+		Trash,
+		Keyboard,
+		Question,
+	} from '@manacore/shared-icons';
+	import { getInputBarSettingsStore } from './inputBarSettings.svelte';
+	import { clearRecentHistory } from './recentInputHistory';
+
+	interface DefaultOption {
+		id: string;
+		label: string;
+	}
+
+	interface Props {
+		visible: boolean;
+		x: number;
+		y: number;
+		onClose: () => void;
+		/** Callback when settings change (to update parent component) */
+		onSettingsChange?: () => void;
+		/** Callback to show keyboard shortcuts help */
+		onShowShortcuts?: () => void;
+		/** Callback to show syntax help */
+		onShowSyntaxHelp?: () => void;
+		/** App-specific default options (e.g., calendars for calendar app) */
+		defaultOptions?: DefaultOption[];
+		/** Currently selected default option ID */
+		selectedDefaultId?: string;
+		/** Label for the default option (e.g., "Standard-Kalender") */
+		defaultOptionLabel?: string;
+		/** Callback when default option changes */
+		onDefaultChange?: (id: string) => void;
+	}
+
+	let {
+		visible,
+		x,
+		y,
+		onClose,
+		onSettingsChange,
+		onShowShortcuts,
+		onShowSyntaxHelp,
+		defaultOptions = [],
+		selectedDefaultId,
+		defaultOptionLabel = 'Standard',
+		onDefaultChange,
+	}: Props = $props();
+
+	// Get settings store
+	const settingsStore = getInputBarSettingsStore();
+
+	// Toggle handlers
+	function toggleSyntaxHighlighting() {
+		settingsStore.toggle('syntaxHighlighting');
+		onSettingsChange?.();
+	}
+
+	function toggleAutoFocus() {
+		settingsStore.toggle('autoFocus');
+		onSettingsChange?.();
+	}
+
+	function handleClearHistory() {
+		clearRecentHistory();
+		onSettingsChange?.();
+	}
+
+	function handleDefaultChange(id: string) {
+		onDefaultChange?.(id);
+	}
+
+	// Build menu items dynamically
+	let menuItems = $derived.by((): ContextMenuItem[] => {
+		const items: ContextMenuItem[] = [];
+
+		// === Appearance Settings ===
+		items.push({
+			id: 'syntax-highlighting',
+			label: 'Syntax Highlighting',
+			icon: HighlighterCircle,
+			toggle: true,
+			checked: settingsStore.syntaxHighlighting,
+			action: toggleSyntaxHighlighting,
+		});
+
+		items.push({
+			id: 'auto-focus',
+			label: 'Auto-Focus',
+			icon: Target,
+			toggle: true,
+			checked: settingsStore.autoFocus,
+			action: toggleAutoFocus,
+		});
+
+		// === App-specific Default Option ===
+		if (defaultOptions.length > 0 && onDefaultChange) {
+			items.push({
+				id: 'divider-defaults',
+				label: '',
+				type: 'divider',
+			});
+
+			// Show current selection with submenu-like display
+			const selectedOption = defaultOptions.find((o) => o.id === selectedDefaultId);
+			items.push({
+				id: 'default-option-header',
+				label: defaultOptionLabel,
+				icon: Calendar,
+				disabled: true,
+			});
+
+			// Show options as selectable items
+			defaultOptions.forEach((option) => {
+				items.push({
+					id: `default-${option.id}`,
+					label: option.label,
+					toggle: true,
+					checked: option.id === selectedDefaultId,
+					action: () => handleDefaultChange(option.id),
+				});
+			});
+		}
+
+		// === History ===
+		items.push({
+			id: 'divider-history',
+			label: '',
+			type: 'divider',
+		});
+
+		items.push({
+			id: 'clear-history',
+			label: 'Verlauf löschen',
+			icon: Trash,
+			variant: 'danger',
+			action: handleClearHistory,
+		});
+
+		// === Help ===
+		items.push({
+			id: 'divider-help',
+			label: '',
+			type: 'divider',
+		});
+
+		if (onShowShortcuts) {
+			items.push({
+				id: 'shortcuts',
+				label: 'Tastenkürzel',
+				icon: Keyboard,
+				shortcut: '?',
+				action: onShowShortcuts,
+			});
+		}
+
+		if (onShowSyntaxHelp) {
+			items.push({
+				id: 'syntax-help',
+				label: 'Syntax-Hilfe',
+				icon: Question,
+				action: onShowSyntaxHelp,
+			});
+		}
+
+		return items;
+	});
+</script>
+
+<ContextMenu {visible} {x} {y} items={menuItems} {onClose} />

packages/shared-ui/src/quick-input/InputBarHelpModal.svelte

@@ -0,0 +1,205 @@
+<script lang="ts">
+	import { Modal } from '../organisms';
+	import { Keyboard, Hash, At, Calendar, Clock, ArrowFatLineRight } from '@manacore/shared-icons';
+
+	interface Props {
+		open: boolean;
+		onClose: () => void;
+		mode?: 'shortcuts' | 'syntax';
+	}
+
+	let { open, onClose, mode = 'shortcuts' }: Props = $props();
+
+	const shortcuts = [
+		{ keys: 'Enter', description: 'Ausgewähltes Item auswählen oder erstellen' },
+		{ keys: '⌘/Ctrl + Enter', description: 'Direkt erstellen (ohne Auswahl)' },
+		{ keys: 'Esc', description: 'Eingabe löschen und schließen' },
+		{ keys: '↑ / ↓', description: 'In Ergebnissen navigieren' },
+		{ keys: 'Rechtsklick', description: 'Einstellungen öffnen' },
+	];
+
+	const syntaxExamples = [
+		{ icon: Hash, pattern: '#tag', description: 'Tag hinzufügen', example: '#arbeit #wichtig' },
+		{
+			icon: At,
+			pattern: '@referenz',
+			description: 'Kalender/Projekt zuweisen',
+			example: '@privat @team',
+		},
+		{
+			icon: Calendar,
+			pattern: 'Datum',
+			description: 'Datum festlegen',
+			example: 'heute, morgen, montag, in 3 tagen',
+		},
+		{ icon: Clock, pattern: 'Zeit', description: 'Uhrzeit festlegen', example: '14:00, 9 uhr' },
+		{
+			icon: ArrowFatLineRight,
+			pattern: 'Priorität',
+			description: 'Priorität setzen',
+			example: '!!! dringend, !! wichtig',
+		},
+	];
+</script>
+
+<Modal visible={open} {onClose} title={mode === 'shortcuts' ? 'Tastenkürzel' : 'Syntax-Hilfe'}>
+	{#if mode === 'shortcuts'}
+		<div class="help-content">
+			<div class="shortcuts-list">
+				{#each shortcuts as { keys, description }}
+					<div class="shortcut-row">
+						<kbd class="shortcut-keys">{keys}</kbd>
+						<span class="shortcut-desc">{description}</span>
+					</div>
+				{/each}
+			</div>
+		</div>
+	{:else}
+		<div class="help-content">
+			<p class="help-intro">
+				Du kannst natürliche Sprache verwenden, um schnell Einträge zu erstellen. Die InputBar
+				erkennt automatisch Daten, Zeiten, Tags und mehr.
+			</p>
+
+			<div class="syntax-list">
+				{#each syntaxExamples as { icon: Icon, pattern, description, example }}
+					<div class="syntax-row">
+						<div class="syntax-icon">
+							<Icon size={18} />
+						</div>
+						<div class="syntax-info">
+							<div class="syntax-pattern">
+								<code>{pattern}</code>
+								<span class="syntax-desc">{description}</span>
+							</div>
+							<div class="syntax-example">{example}</div>
+						</div>
+					</div>
+				{/each}
+			</div>
+
+			<div class="help-example">
+				<p class="example-label">Beispiel:</p>
+				<code class="example-text">Meeting mit Team morgen 14:00 @arbeit #wichtig</code>
+			</div>
+		</div>
+	{/if}
+</Modal>
+
+<style>
+	.help-content {
+		padding: 0.5rem 0;
+	}
+
+	.help-intro {
+		font-size: 0.875rem;
+		color: hsl(var(--color-muted-foreground));
+		margin-bottom: 1.25rem;
+		line-height: 1.5;
+	}
+
+	.shortcuts-list {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+	}
+
+	.shortcut-row {
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+	}
+
+	.shortcut-keys {
+		min-width: 140px;
+		padding: 0.375rem 0.625rem;
+		font-size: 0.75rem;
+		font-family: inherit;
+		background: hsl(var(--color-muted));
+		border: 1px solid hsl(var(--color-border));
+		border-radius: var(--radius-sm);
+		color: hsl(var(--color-foreground));
+		text-align: center;
+	}
+
+	.shortcut-desc {
+		font-size: 0.875rem;
+		color: hsl(var(--color-foreground));
+	}
+
+	.syntax-list {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	.syntax-row {
+		display: flex;
+		gap: 0.75rem;
+		align-items: flex-start;
+	}
+
+	.syntax-icon {
+		width: 32px;
+		height: 32px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: hsl(var(--color-primary) / 0.1);
+		color: hsl(var(--color-primary));
+		border-radius: var(--radius-md);
+		flex-shrink: 0;
+	}
+
+	.syntax-info {
+		flex: 1;
+	}
+
+	.syntax-pattern {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		margin-bottom: 0.25rem;
+	}
+
+	.syntax-pattern code {
+		font-size: 0.8125rem;
+		font-weight: 600;
+		color: hsl(var(--color-primary));
+		background: hsl(var(--color-primary) / 0.1);
+		padding: 0.125rem 0.375rem;
+		border-radius: var(--radius-sm);
+	}
+
+	.syntax-desc {
+		font-size: 0.8125rem;
+		color: hsl(var(--color-muted-foreground));
+	}
+
+	.syntax-example {
+		font-size: 0.75rem;
+		color: hsl(var(--color-muted-foreground));
+		font-style: italic;
+	}
+
+	.help-example {
+		margin-top: 1.5rem;
+		padding: 1rem;
+		background: hsl(var(--color-muted) / 0.5);
+		border-radius: var(--radius-md);
+	}
+
+	.example-label {
+		font-size: 0.75rem;
+		font-weight: 500;
+		color: hsl(var(--color-muted-foreground));
+		margin-bottom: 0.5rem;
+	}
+
+	.example-text {
+		display: block;
+		font-size: 0.875rem;
+		color: hsl(var(--color-foreground));
+		background: transparent;
+	}
+</style>

packages/shared-ui/src/quick-input/index.ts

@@ -1,4 +1,28 @@
 export { default as InputBar } from './InputBar.svelte';
 // Alias for backwards compatibility
 export { default as QuickInputBar } from './InputBar.svelte';
+export { default as InputBarContextMenu } from './InputBarContextMenu.svelte';
+export { default as InputBarHelpModal } from './InputBarHelpModal.svelte';
 export type { QuickInputItem, QuickAction, CreatePreview } from './types';
+
+// Recent input history (tags, references)
+export {
+	getRecentTags,
+	getRecentReferences,
+	addRecentTag,
+	addRecentReference,
+	extractAndSaveFromInput,
+	clearRecentHistory,
+	createRecentInputHistoryStore,
+} from './recentInputHistory';
+
+// InputBar settings
+export {
+	loadInputBarSettings,
+	saveInputBarSettings,
+	updateInputBarSetting,
+	resetInputBarSettings,
+	createInputBarSettingsStore,
+	getInputBarSettingsStore,
+} from './inputBarSettings.svelte';
+export type { InputBarSettings } from './inputBarSettings.svelte';

packages/shared-ui/src/quick-input/inputBarSettings.svelte.ts

@@ -0,0 +1,127 @@
+/**
+ * InputBar Settings Store
+ *
+ * Persisted settings for InputBar behavior and appearance.
+ * Stored in localStorage for cross-session retention.
+ */
+
+const STORAGE_KEY = 'inputbar-settings';
+
+export interface InputBarSettings {
+	/** Enable syntax highlighting for #tags, @refs, dates, etc. */
+	syntaxHighlighting: boolean;
+	/** Auto-focus InputBar on page load */
+	autoFocus: boolean;
+}
+
+const DEFAULT_SETTINGS: InputBarSettings = {
+	syntaxHighlighting: true,
+	autoFocus: true,
+};
+
+/**
+ * Load settings from localStorage
+ */
+export function loadInputBarSettings(): InputBarSettings {
+	if (typeof window === 'undefined') return { ...DEFAULT_SETTINGS };
+
+	try {
+		const stored = localStorage.getItem(STORAGE_KEY);
+		if (stored) {
+			const parsed = JSON.parse(stored);
+			return { ...DEFAULT_SETTINGS, ...parsed };
+		}
+	} catch {
+		// Ignore parse errors
+	}
+
+	return { ...DEFAULT_SETTINGS };
+}
+
+/**
+ * Save settings to localStorage
+ */
+export function saveInputBarSettings(settings: InputBarSettings): void {
+	if (typeof window === 'undefined') return;
+
+	try {
+		localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
+	} catch {
+		// Ignore storage errors
+	}
+}
+
+/**
+ * Update a single setting
+ */
+export function updateInputBarSetting<K extends keyof InputBarSettings>(
+	key: K,
+	value: InputBarSettings[K]
+): InputBarSettings {
+	const current = loadInputBarSettings();
+	const updated = { ...current, [key]: value };
+	saveInputBarSettings(updated);
+	return updated;
+}
+
+/**
+ * Reset settings to defaults
+ */
+export function resetInputBarSettings(): InputBarSettings {
+	saveInputBarSettings(DEFAULT_SETTINGS);
+	return { ...DEFAULT_SETTINGS };
+}
+
+/**
+ * Create a reactive Svelte 5 store for InputBar settings
+ */
+export function createInputBarSettingsStore() {
+	let settings = $state<InputBarSettings>(loadInputBarSettings());
+
+	function refresh() {
+		settings = loadInputBarSettings();
+	}
+
+	function set<K extends keyof InputBarSettings>(key: K, value: InputBarSettings[K]) {
+		settings = updateInputBarSetting(key, value);
+	}
+
+	function toggle(key: keyof InputBarSettings) {
+		if (typeof settings[key] === 'boolean') {
+			set(key, !settings[key] as InputBarSettings[typeof key]);
+		}
+	}
+
+	function reset() {
+		settings = resetInputBarSettings();
+	}
+
+	return {
+		get settings() {
+			return settings;
+		},
+		get syntaxHighlighting() {
+			return settings.syntaxHighlighting;
+		},
+		get autoFocus() {
+			return settings.autoFocus;
+		},
+		set,
+		toggle,
+		reset,
+		refresh,
+	};
+}
+
+// Global singleton store instance
+let globalStore: ReturnType<typeof createInputBarSettingsStore> | null = null;
+
+/**
+ * Get the global InputBar settings store instance
+ */
+export function getInputBarSettingsStore() {
+	if (!globalStore) {
+		globalStore = createInputBarSettingsStore();
+	}
+	return globalStore;
+}

packages/shared-ui/src/quick-input/recentInputHistory.ts

@@ -0,0 +1,167 @@
+/**
+ * Recent Input History Store
+ *
+ * Tracks recently used tags (#) and references (@) for quick access in the InputBar context menu.
+ * Persists to localStorage for cross-session retention.
+ */
+
+const STORAGE_KEY_TAGS = 'inputbar-recent-tags';
+const STORAGE_KEY_REFS = 'inputbar-recent-references';
+const MAX_ITEMS = 10;
+
+/**
+ * Get recent tags from localStorage
+ */
+export function getRecentTags(): string[] {
+	if (typeof window === 'undefined') return [];
+	try {
+		const stored = localStorage.getItem(STORAGE_KEY_TAGS);
+		return stored ? JSON.parse(stored) : [];
+	} catch {
+		return [];
+	}
+}
+
+/**
+ * Get recent references from localStorage
+ */
+export function getRecentReferences(): string[] {
+	if (typeof window === 'undefined') return [];
+	try {
+		const stored = localStorage.getItem(STORAGE_KEY_REFS);
+		return stored ? JSON.parse(stored) : [];
+	} catch {
+		return [];
+	}
+}
+
+/**
+ * Add a tag to recent history
+ * @param tag - The tag to add (with or without #)
+ */
+export function addRecentTag(tag: string): void {
+	if (typeof window === 'undefined') return;
+
+	// Normalize tag (ensure it starts with #)
+	const normalizedTag = tag.startsWith('#') ? tag : `#${tag}`;
+
+	try {
+		const current = getRecentTags();
+		// Remove if already exists (will be re-added at front)
+		const filtered = current.filter((t) => t.toLowerCase() !== normalizedTag.toLowerCase());
+		// Add to front, limit to MAX_ITEMS
+		const updated = [normalizedTag, ...filtered].slice(0, MAX_ITEMS);
+		localStorage.setItem(STORAGE_KEY_TAGS, JSON.stringify(updated));
+	} catch {
+		// Ignore storage errors
+	}
+}
+
+/**
+ * Add a reference to recent history
+ * @param reference - The reference to add (with or without @)
+ */
+export function addRecentReference(reference: string): void {
+	if (typeof window === 'undefined') return;
+
+	// Normalize reference (ensure it starts with @)
+	const normalizedRef = reference.startsWith('@') ? reference : `@${reference}`;
+
+	try {
+		const current = getRecentReferences();
+		// Remove if already exists (will be re-added at front)
+		const filtered = current.filter((r) => r.toLowerCase() !== normalizedRef.toLowerCase());
+		// Add to front, limit to MAX_ITEMS
+		const updated = [normalizedRef, ...filtered].slice(0, MAX_ITEMS);
+		localStorage.setItem(STORAGE_KEY_REFS, JSON.stringify(updated));
+	} catch {
+		// Ignore storage errors
+	}
+}
+
+/**
+ * Extract and save tags and references from input text
+ * Call this when user creates an item to track their usage patterns
+ * @param text - The input text to parse
+ */
+export function extractAndSaveFromInput(text: string): void {
+	if (!text) return;
+
+	// Extract tags (#word)
+	const tagMatches = text.match(/#\w+/g);
+	if (tagMatches) {
+		tagMatches.forEach((tag) => addRecentTag(tag));
+	}
+
+	// Extract references (@word)
+	const refMatches = text.match(/@\w+/g);
+	if (refMatches) {
+		refMatches.forEach((ref) => addRecentReference(ref));
+	}
+}
+
+/**
+ * Clear all recent history
+ */
+export function clearRecentHistory(): void {
+	if (typeof window === 'undefined') return;
+	try {
+		localStorage.removeItem(STORAGE_KEY_TAGS);
+		localStorage.removeItem(STORAGE_KEY_REFS);
+	} catch {
+		// Ignore storage errors
+	}
+}
+
+/**
+ * Create a reactive store for use in Svelte 5 components
+ * Returns reactive state that updates when history changes
+ */
+export function createRecentInputHistoryStore() {
+	let tags = $state<string[]>(getRecentTags());
+	let references = $state<string[]>(getRecentReferences());
+
+	// Refresh from localStorage
+	function refresh() {
+		tags = getRecentTags();
+		references = getRecentReferences();
+	}
+
+	// Add tag and refresh
+	function addTag(tag: string) {
+		addRecentTag(tag);
+		refresh();
+	}
+
+	// Add reference and refresh
+	function addReference(ref: string) {
+		addRecentReference(ref);
+		refresh();
+	}
+
+	// Extract from text and refresh
+	function extractAndSave(text: string) {
+		extractAndSaveFromInput(text);
+		refresh();
+	}
+
+	// Clear and refresh
+	function clear() {
+		clearRecentHistory();
+		refresh();
+	}
+
+	return {
+		get tags() {
+			return tags;
+		},
+		get references() {
+			return references;
+		},
+		addTag,
+		addReference,
+		extractAndSave,
+		clear,
+		refresh,
+	};
+}