feat(manacore/web): wire TagField, FavoriteButton, ColorPicker into module UIs

Add shared TagField component (ID-based wrapper for TagSelector).
Wire TagField into: calendar EventForm, times EntryForm, cards
CreateDeckModal, contacts detail page. Wire FavoriteButton into
contacts list (replaces inline Star toggle). Add ColorPicker to
cards CreateDeckModal for deck color selection.

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

packages/shared-hono/package.json

@@ -14,12 +14,14 @@
 		"./admin": "./src/admin.ts",
 		"./error": "./src/error.ts",
 		"./credits": "./src/credits.ts",
-		"./rate-limit": "./src/rate-limit.ts"
+		"./rate-limit": "./src/rate-limit.ts",
+		"./logger": "./src/logger.ts"
 	},
 	"scripts": {
 		"type-check": "tsc --noEmit"
 	},
 	"dependencies": {
+		"@manacore/shared-logger": "workspace:*",
 		"hono": "^4.7.0",
 		"jose": "^6.0.11",
 		"drizzle-orm": "^0.45.1",

packages/shared-hono/src/index.ts

@@ -41,4 +41,5 @@ export { errorHandler, notFoundHandler } from './error';
 export { getBalance, validateCredits, consumeCredits, refundCredits } from './credits';
 export type { CreditBalance, CreditValidationResult } from './credits';
 export { rateLimitMiddleware } from './rate-limit';
+export { requestLogger, initLogger } from './logger';
 export type { CurrentUserData, AuthVariables } from './types';

packages/shared-hono/src/logger.ts

@@ -0,0 +1,61 @@
+/**
+ * Structured request logging middleware for Hono servers.
+ *
+ * - Generates a unique request ID per request (X-Request-Id header)
+ * - Logs request/response as JSON lines (in production) or console (in dev)
+ * - Integrates with @manacore/shared-logger for consistent format
+ *
+ * @example
+ * ```ts
+ * import { requestLogger } from '@manacore/shared-hono/logger';
+ * app.use('*', requestLogger());
+ * ```
+ */
+
+import type { MiddlewareHandler } from 'hono';
+import { logger as log, configureLogger } from '@manacore/shared-logger';
+
+let _requestIdStore: Map<object, string> | null = null;
+
+function getStore(): Map<object, string> {
+	if (!_requestIdStore) _requestIdStore = new Map();
+	return _requestIdStore;
+}
+
+/**
+ * Initialize the Hono logger with a service name.
+ * Call once at server startup before registering the middleware.
+ */
+export function initLogger(serviceName: string): void {
+	configureLogger({ serviceName });
+}
+
+/**
+ * Hono middleware that adds a request ID and logs request + response.
+ */
+export function requestLogger(): MiddlewareHandler {
+	return async (c, next) => {
+		const requestId =
+			c.req.header('x-request-id') || crypto.randomUUID().slice(0, 8);
+		c.header('X-Request-Id', requestId);
+
+		const method = c.req.method;
+		const path = c.req.path;
+		const start = performance.now();
+
+		log.info('request', { requestId, method, path });
+
+		await next();
+
+		const durationMs = Math.round(performance.now() - start);
+		const status = c.res.status;
+
+		if (status >= 500) {
+			log.error('response', { requestId, method, path, status, durationMs });
+		} else if (status >= 400) {
+			log.warn('response', { requestId, method, path, status, durationMs });
+		} else {
+			log.info('response', { requestId, method, path, status, durationMs });
+		}
+	};
+}

packages/shared-logger/src/index.ts

@@ -1,106 +1,214 @@
 /**
  * Shared Logger Utilities for ManaCore Apps
- * Provides consistent logging across mobile and web applications.
+ *
+ * Dual-mode logger:
+ * - **Development / Browser**: Console output with colored prefixes (human-readable)
+ * - **Production / Server**: JSON lines with timestamp, level, service, requestId (machine-readable)
+ *
+ * JSON mode is auto-detected in production Node.js/Bun environments.
+ * Override with `LOGGER_FORMAT=json` or `LOGGER_FORMAT=console`.
  */
 
-// Check if we're in development mode
-// Works in both React Native (__DEV__) and Node.js environments
+// ─── Environment detection ─────────────────────────────────
+
 declare const __DEV__: boolean | undefined;
 const isDevelopment =
 	typeof __DEV__ !== 'undefined' ? __DEV__ : process.env.NODE_ENV === 'development';
 
+const isBrowser = typeof window !== 'undefined';
+
+const useJson =
+	process.env.LOGGER_FORMAT === 'json' ||
+	(process.env.LOGGER_FORMAT !== 'console' && !isDevelopment && !isBrowser);
+
+// ─── Request context (AsyncLocalStorage for correlation IDs) ─
+
+type LogLevel = 'debug' | 'info' | 'warn' | 'error';
+
+let _serviceName = 'unknown';
+let _getRequestId: (() => string | undefined) | null = null;
+
+/**
+ * Configure the logger for a service. Call once at startup.
+ *
+ * @example
+ * ```typescript
+ * import { configureLogger } from '@manacore/shared-logger';
+ * configureLogger({ serviceName: 'todo-server' });
+ * ```
+ */
+export function configureLogger(opts: {
+	serviceName: string;
+	getRequestId?: () => string | undefined;
+}): void {
+	_serviceName = opts.serviceName;
+	if (opts.getRequestId) _getRequestId = opts.getRequestId;
+}
+
+// ─── JSON formatter ─────────────────────────────────────────
+
+function jsonLog(level: LogLevel, args: unknown[]): void {
+	const entry: Record<string, unknown> = {
+		ts: new Date().toISOString(),
+		level,
+		service: _serviceName,
+	};
+
+	const requestId = _getRequestId?.();
+	if (requestId) entry.requestId = requestId;
+
+	// First string arg becomes `msg`, rest goes into `data`
+	if (typeof args[0] === 'string') {
+		entry.msg = args[0];
+		if (args.length > 1) {
+			entry.data = args.length === 2 ? args[1] : args.slice(1);
+		}
+	} else {
+		entry.data = args.length === 1 ? args[0] : args;
+	}
+
+	// Serialize errors
+	if (entry.data instanceof Error) {
+		entry.data = { message: entry.data.message, stack: entry.data.stack };
+	}
+
+	const line = JSON.stringify(entry);
+	if (level === 'error') process.stderr.write(line + '\n');
+	else process.stdout.write(line + '\n');
+}
+
+// ─── Console formatter (original behavior) ──────────────────
+
+function consoleLog(level: LogLevel, args: unknown[]): void {
+	const prefix = `[${level.toUpperCase()}]`;
+	switch (level) {
+		case 'debug':
+			console.debug(prefix, ...args);
+			break;
+		case 'info':
+			console.info(prefix, ...args);
+			break;
+		case 'warn':
+			console.warn(prefix, ...args);
+			break;
+		case 'error':
+			console.error(prefix, ...args);
+			break;
+	}
+}
+
+function emit(level: LogLevel, args: unknown[]): void {
+	if (useJson) jsonLog(level, args);
+	else consoleLog(level, args);
+}
+
+// ─── Main logger ────────────────────────────────────────────
+
 /**
  * Main logger object with standard log levels.
- * Debug and info only log in development mode.
+ * Debug and info only log in development mode (console) or always in JSON mode.
  * Warn and error always log.
  */
 export const logger = {
-	/** Log debug information (only in development) */
+	/** Log debug information (only in development, or always in JSON mode) */
 	debug: (...args: unknown[]): void => {
-		if (isDevelopment) {
-			console.debug('[DEBUG]', ...args);
-		}
+		if (isDevelopment || useJson) emit('debug', args);
 	},
 
-	/** Log general information (only in development) */
+	/** Log general information (only in development, or always in JSON mode) */
 	info: (...args: unknown[]): void => {
-		if (isDevelopment) {
-			console.info('[INFO]', ...args);
-		}
+		if (isDevelopment || useJson) emit('info', args);
 	},
 
 	/** Log warnings (always logged) */
 	warn: (...args: unknown[]): void => {
-		console.warn('[WARN]', ...args);
+		emit('warn', args);
 	},
 
 	/** Log errors (always logged) */
 	error: (...args: unknown[]): void => {
-		console.error('[ERROR]', ...args);
+		emit('error', args);
 	},
 
 	/** Log success messages (only in development) */
 	success: (...args: unknown[]): void => {
 		if (isDevelopment) {
-			console.log('[SUCCESS]', ...args);
+			if (useJson) jsonLog('info', [{ success: true }, ...args]);
+			else console.log('[SUCCESS]', ...args);
 		}
 	},
 
-	/** General log (only in development) */
+	/** General log (only in development, or always in JSON mode) */
 	log: (...args: unknown[]): void => {
-		if (isDevelopment) {
-			console.log('[LOG]', ...args);
-		}
+		if (isDevelopment || useJson) emit('info', args);
 	},
 };
 
+// ─── Performance logger ─────────────────────────────────────
+
+const perfTimers = new Map<string, number>();
+
 /**
  * Performance logger for measuring execution time.
- * Only logs in development mode.
  */
 export const perfLogger = {
 	/** Start a performance timer with a label */
 	start: (label: string): void => {
-		if (isDevelopment) {
+		if (useJson) {
+			perfTimers.set(label, performance.now());
+		} else if (isDevelopment) {
 			console.time(label);
 		}
 	},
 
 	/** End a performance timer and log the duration */
 	end: (label: string): void => {
-		if (isDevelopment) {
+		if (useJson) {
+			const start = perfTimers.get(label);
+			if (start !== undefined) {
+				const durationMs = Math.round(performance.now() - start);
+				perfTimers.delete(label);
+				jsonLog('info', ['perf', { label, durationMs }]);
+			}
+		} else if (isDevelopment) {
 			console.timeEnd(label);
 		}
 	},
 };
 
+// ─── Network logger ─────────────────────────────────────────
+
 /**
  * Network request logger for API debugging.
- * Request and response only log in development.
+ * Request and response only log in development or JSON mode.
  * Errors always log.
  */
 export const networkLogger = {
 	/** Log an outgoing network request */
 	request: (url: string, method: string, body?: unknown): void => {
-		if (isDevelopment) {
-			console.log(`[NETWORK] ${method} ${url}`, body ? { body } : '');
+		if (isDevelopment || useJson) {
+			emit('info', ['network_request', { method, url, ...(body !== undefined && { body }) }]);
 		}
 	},
 
 	/** Log a network response */
 	response: (url: string, status: number, data?: unknown): void => {
-		if (isDevelopment) {
-			console.log(`[NETWORK] Response ${status} from ${url}`, data ? { data } : '');
+		if (isDevelopment || useJson) {
+			emit('info', ['network_response', { url, status, ...(data !== undefined && { data }) }]);
 		}
 	},
 
 	/** Log a network error (always logged) */
 	error: (url: string, error: unknown): void => {
-		console.error(`[NETWORK] Error from ${url}`, error);
+		emit('error', [
+			'network_error',
+			{ url, error: error instanceof Error ? error.message : String(error) },
+		]);
 	},
 };
 
-// Individual function exports for backwards compatibility with cards pattern
+// ─── Backwards-compatible individual exports ────────────────
+
 export const debug = logger.debug;
 export const info = logger.info;
 export const warn = logger.warn;

packages/shared-ui/src/index.ts

@@ -29,6 +29,7 @@ export {
 	TagColorPicker,
 	TagEditModal,
 	TagSelector,
+	TagField,
 	TagList,
 	TAG_COLORS,
 	DEFAULT_TAG_COLOR,

packages/shared-ui/src/molecules/index.ts

@@ -21,6 +21,7 @@ export {
 	TagColorPicker,
 	TagEditModal,
 	TagSelector,
+	TagField,
 	TagList,
 	TAG_COLORS,
 	DEFAULT_TAG_COLOR,

packages/shared-ui/src/molecules/tags/TagField.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import TagSelector from './TagSelector.svelte';
+	import type { Tag } from './constants';
+
+	/**
+	 * Form field wrapper for TagSelector.
+	 * Works with tag IDs (string[]) — the common pattern across all modules.
+	 * Pass all available tags and the currently selected IDs.
+	 */
+
+	interface Props {
+		/** All available tags */
+		tags: Array<{ id: string; name: string; color?: string | null }>;
+		/** Currently selected tag IDs */
+		selectedIds: string[];
+		/** Called when selection changes */
+		onChange: (ids: string[]) => void;
+		/** Max number of tags (optional) */
+		maxTags?: number;
+		/** Label for the add button */
+		addLabel?: string;
+		/** Placeholder text */
+		placeholder?: string;
+	}
+
+	let {
+		tags,
+		selectedIds,
+		onChange,
+		maxTags,
+		addLabel = 'Tag hinzufügen',
+		placeholder = 'Tag suchen...',
+	}: Props = $props();
+
+	const tagObjects: Tag[] = $derived(
+		tags.map((t) => ({ id: t.id, name: t.name, color: t.color ?? undefined }))
+	);
+
+	const selectedTags: Tag[] = $derived(
+		selectedIds.map((id) => tagObjects.find((t) => t.id === id)).filter((t): t is Tag => t != null)
+	);
+
+	function handleChange(newTags: Tag[]) {
+		onChange(newTags.map((t) => t.id));
+	}
+</script>
+
+<TagSelector
+	tags={tagObjects}
+	{selectedTags}
+	onTagsChange={handleChange}
+	addTagLabel={addLabel}
+	searchPlaceholder={placeholder}
+	{maxTags}
+/>

packages/shared-ui/src/molecules/tags/index.ts

@@ -4,6 +4,7 @@ export { default as TagChip } from './TagChip.svelte';
 export { default as TagColorPicker } from './TagColorPicker.svelte';
 export { default as TagEditModal } from './TagEditModal.svelte';
 export { default as TagSelector } from './TagSelector.svelte';
+export { default as TagField } from './TagField.svelte';
 export { default as TagList } from './TagList.svelte';
 
 // Constants and Types