web_plsql 1.0.0 → 1.3.0

package/src/admin/js/templates/poolCard.ts

@@ -1,61 +0,0 @@
-import type {StatusResponse} from '../schemas.js';
-
-type PoolInfo = StatusResponse['pools'][number];
-
-/**
- * Pool card template.
- *
- * @param p - The pool data.
- * @returns HTML string for the pool card.
- */
-export function poolCard(p: PoolInfo): string {
-	const utilization = p.connectionsOpen > 0 ? Math.round((p.connectionsInUse / p.connectionsOpen) * 100) : 0;
-	const utilColor = utilization > 90 ? 'var(--danger)' : utilization > 70 ? 'var(--warning)' : 'var(--success)';
-
-	const stats = p.stats ?? undefined;
-
-	return `
-        <div class="card card-clickable transition-all duration-200">
-            <div class="card-header">
-                <span class="material-symbols-rounded">database</span>
-                <h3 class="text-lg font-bold text-bright">${p.name}</h3>
-            </div>
-            <div class="mb-6">
-                <div class="flex justify-between items-baseline mb-2">
-                    <span class="text-3xl font-bold text-bright">${utilization}%</span>
-                    <span class="text-main font-mono">${p.connectionsInUse} / ${p.connectionsOpen}</span>
-                </div>
-                <div class="progress-bar">
-                    <div class="progress-bar-fill transition-all duration-300" style="width: ${utilization}%; background: ${utilColor}"></div>
-                </div>
-                <small class="description mt-2 block opacity-75">Pool Utilization (Active / Open)</small>
-            </div>
-            
-            <div class="stat-row text-sm">
-                <span class="text-xs uppercase font-bold opacity-75">Connections Open</span>
-                <span class="font-mono text-accent font-bold">${p.connectionsOpen}</span>
-            </div>
-            <div class="stat-row text-sm">
-                <span class="text-xs uppercase font-bold opacity-75">Connections In Use</span>
-                <span class="font-mono text-accent font-bold">${p.connectionsInUse}</span>
-            </div>
-
-            ${
-				stats
-					? `
-                <div class="mt-4 pt-4 border-t">
-                    <div class="stat-row text-sm">
-                        <span>Total Requests</span>
-                        <span class="font-mono text-accent font-bold">${stats.totalRequests.toLocaleString()}</span>
-                    </div>
-                    <div class="stat-row text-sm">
-                        <span>Total Timeouts</span>
-                        <span class="font-mono ${stats.totalTimeouts > 0 ? 'text-danger' : 'text-accent'} font-bold">${stats.totalTimeouts.toLocaleString()}</span>
-                    </div>
-                </div>
-            `
-					: ''
-			}
-        </div>
-    `;
-}

package/src/admin/js/tsconfig.json

@@ -1,24 +0,0 @@
-{
-	"compilerOptions": {
-		"noEmit": true,
-		"target": "es2020",
-		"module": "es2020",
-		"moduleResolution": "bundler",
-		"esModuleInterop": true,
-		"skipLibCheck": true,
-		"allowSyntheticDefaultImports": true,
-		"allowJs": true,
-		"checkJs": true,
-		"strict": true,
-		"noImplicitAny": true,
-		"strictNullChecks": true,
-		"strictFunctionTypes": true,
-		"strictBindCallApply": true,
-		"noImplicitThis": true,
-		"useUnknownInCatchVariables": true,
-		"alwaysStrict": true,
-		"lib": ["es2020", "dom", "dom.iterable"]
-	},
-	"include": ["**/*.js", "**/*.ts", "**/*.d.ts"],
-	"exclude": ["lib/**"]
-}

package/src/admin/js/types.ts

@@ -1,223 +0,0 @@
-/**
- * Cache statistics for a cache type.
- */
-export type CacheStats = {
-	hits: number;
-	misses: number;
-};
-
-/**
- * Cache information for a specific cache type.
- */
-export type CacheInfo = {
-	size: number;
-	stats: CacheStats;
-};
-
-/**
- * Cache data for a connection pool.
- */
-export type CacheData = {
-	poolName: string;
-	procedureNameCache: CacheInfo;
-	argumentCache: CacheInfo;
-};
-
-/**
- * Pool statistics.
- */
-export type PoolStats = {
-	totalRequests: number;
-	totalTimeouts: number;
-	totalRequestsEnqueued: number | undefined;
-	totalRequestsDequeued: number | undefined;
-	totalRequestsFailed: number | undefined;
-};
-
-/**
- * Pool information.
- */
-export type PoolInfo = {
-	name: string;
-	connectionsInUse: number;
-	connectionsOpen: number;
-	stats: PoolStats | null;
-};
-
-/**
- * Server metrics.
- */
-export type Metrics = {
-	requestCount: number;
-	errorCount: number;
-	avgResponseTime: number;
-};
-
-/**
- * Server configuration - route.
- */
-export type RouteConfig = {
-	route: string;
-	// PL/SQL specific
-	user?: string;
-	password?: string;
-	connectString?: string;
-	defaultPage?: string;
-	pathAlias?: string;
-	pathAliasProcedure?: string;
-	documentTable?: string;
-	exclusionList?: string[];
-	requestValidationFunction?: string;
-	transactionMode?: unknown;
-	errorStyle?: string;
-	// Static specific
-	directoryPath?: string;
-};
-
-/**
- * Server configuration.
- */
-export type ServerConfig = {
-	port: number;
-	adminRoute?: string;
-	adminUser?: string;
-	adminPassword?: string;
-	loggerFilename: string;
-	uploadFileSizeLimit?: number;
-	routePlSql: RouteConfig[];
-	routeStatic: RouteConfig[];
-};
-
-/**
- * Server status response.
- */
-export type Status = {
-	version: string;
-	status: 'running' | 'paused' | 'stopped';
-	uptime: number;
-	startTime: string;
-	metrics: Metrics;
-	pools: PoolInfo[];
-	config: Partial<ServerConfig>;
-};
-
-/**
- * Historical data for charts.
- */
-export type HistoryData = {
-	labels: string[];
-	requests: number[];
-	avgResponseTimes: number[];
-	poolUsage: Record<string, number[]>;
-};
-
-/**
- * Chart grid options.
- */
-export type ChartGridOptions = {
-	color: string;
-};
-
-/**
- * Chart ticks options.
- */
-export type ChartTicksOptions = {
-	color: string;
-	display?: boolean;
-};
-
-/**
- * Chart scale options.
- */
-export type ChartScaleOptions = {
-	grid?: ChartGridOptions;
-	ticks?: ChartTicksOptions;
-	title?: {
-		display: boolean;
-		text: string;
-		color: string;
-	};
-};
-
-/**
- * Chart options.
- */
-export type ChartOptions = {
-	scales?: {
-		x?: ChartScaleOptions;
-		y?: ChartScaleOptions;
-		y1?: ChartScaleOptions;
-	};
-	plugins?: {
-		legend?: {
-			labels?: {
-				color: string;
-			};
-		};
-	};
-};
-
-/**
- * Chart dataset.
- */
-export type ChartDataset = {
-	label: string;
-	data: number[];
-	borderColor: string;
-	backgroundColor: string | undefined;
-	fill: boolean | undefined;
-	tension: number | undefined;
-};
-
-/**
- * Chart data.
- */
-export type ChartData = {
-	labels: string[];
-	datasets: ChartDataset[];
-};
-
-/**
- * Chart instance interface.
- */
-export type ChartInstance = {
-	data: ChartData;
-	options: ChartOptions;
-	update: () => void;
-};
-
-/**
- * Error log entry.
- */
-export type ErrorLog = {
-	timestamp: string;
-	req:
-		| {
-				method: string;
-				url: string;
-		  }
-		| undefined;
-	message: string;
-	details:
-		| {
-				fullMessage: string;
-		  }
-		| undefined;
-};
-
-import type {StatusResponse} from './schemas.js';
-
-/**
- * Application state.
- */
-export type State = {
-	currentView: string;
-	status: Partial<StatusResponse>;
-	maxHistoryPoints: number;
-	lastRequestCount: number;
-	lastErrorCount: number;
-	lastUpdateTime: number;
-	refreshTimer: ReturnType<typeof setInterval> | null;
-	history: HistoryData;
-	charts: Record<string, ChartInstance>;
-};

package/src/admin/js/ui/theme.ts

@@ -1,93 +0,0 @@
-import type {State, ChartInstance} from '../types.js';
-
-/**
- * Theme colors for charts based on theme mode.
- */
-interface ChartColors {
-	gridColor: string;
-	textColor: string;
-}
-
-/**
- * Get chart colors for the current theme.
- * @param isDark - Whether dark mode is active.
- * @returns Chart color configuration.
- */
-function getChartColors(isDark: boolean): ChartColors {
-	return {
-		gridColor: isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)',
-		textColor: isDark ? '#94a3b8' : '#475569',
-	};
-}
-
-/**
- * Update chart options for theme change.
- * @param chart - Chart instance to update.
- * @param colors - Chart colors for the current theme.
- */
-function updateChartForTheme(chart: ChartInstance, colors: ChartColors): void {
-	if (!chart.options.scales) return;
-
-	const scales = chart.options.scales;
-
-	if (scales.x) {
-		if (scales.x.grid) scales.x.grid.color = colors.gridColor;
-		if (scales.x.ticks) scales.x.ticks.color = colors.textColor;
-	}
-
-	if (scales.y?.grid) {
-		scales.y.grid.color = colors.gridColor;
-	}
-	if (scales.y?.ticks) {
-		scales.y.ticks.color = colors.textColor;
-	}
-
-	if (scales.y1?.grid) {
-		scales.y1.grid.color = colors.gridColor;
-	}
-	if (scales.y1?.ticks) {
-		scales.y1.ticks.color = colors.textColor;
-	}
-
-	if (scales.y?.title) {
-		scales.y.title.color = colors.textColor;
-	}
-
-	if (scales.y1?.title) {
-		scales.y1.title.color = colors.textColor;
-	}
-
-	if (chart.options.plugins?.legend?.labels) {
-		chart.options.plugins.legend.labels.color = colors.textColor;
-	}
-
-	chart.update();
-}
-
-/**
- * Initialize theme management.
- * @param state - Application state containing chart instances.
- */
-export function initTheme(state: State): void {
-	const theme = localStorage.getItem('theme') ?? 'dark';
-	const btn = document.getElementById('theme-toggle-btn');
-	if (!btn) return;
-
-	document.body.className = theme;
-
-	btn.onclick = (): void => {
-		const isDark = document.body.classList.contains('dark');
-		const newTheme = isDark ? 'light' : 'dark';
-		document.body.className = newTheme;
-		localStorage.setItem('theme', newTheme);
-
-		const colors = getChartColors(newTheme === 'dark');
-
-		Object.values(state.charts).forEach((chartInstance): void => {
-			const chart = chartInstance;
-			if (chart?.options) {
-				updateChartForTheme(chart, colors);
-			}
-		});
-	};
-}

package/src/admin/js/ui/views.ts

@@ -1,164 +0,0 @@
-import {typedApi} from '../api.js';
-import {formatDuration, formatDateTime} from '../util/format.js';
-import {errorRow, poolCard} from '../templates/index.js';
-import {renderConfig} from '../templates/config.js';
-import type {State, ServerConfig} from '../types.js';
-
-/**
- * Refresh the error logs view.
- */
-export async function refreshErrors(): Promise<void> {
-	const logs = await typedApi.getErrorLogs();
-	const tbody = document.querySelector('#errors-table tbody');
-	if (!tbody) return;
-
-	tbody.innerHTML = logs.map((l) => errorRow(l)).join('');
-}
-
-/**
- * Refresh the access logs view.
- */
-export async function refreshAccess(): Promise<void> {
-	const result = await typedApi.getAccessLogs();
-	const el = document.getElementById('access-log-view');
-	if (!el) return;
-
-	if (Array.isArray(result)) {
-		el.textContent = result.join('\n');
-	} else if (result && typeof result === 'object' && 'message' in result) {
-		el.textContent = result.message;
-	} else {
-		el.textContent = 'No logs available';
-	}
-
-	if (el.parentElement) {
-		el.parentElement.scrollTop = el.parentElement.scrollHeight;
-	}
-}
-
-/**
- * Refresh the pools view.
- *
- * @param status - The status data.
- */
-export function refreshPools(status: Partial<State['status']>): void {
-	const poolsCont = document.getElementById('pools-container');
-	if (!poolsCont || !status.pools) return;
-
-	poolsCont.innerHTML = status.pools.map((p) => poolCard(p)).join('');
-}
-
-/**
- * Refresh the config view.
- *
- * @param state - The application state.
- */
-export function refreshConfig(state: State): void {
-	const config = state.status.config;
-	if (!config) return;
-
-	const cont = document.getElementById('config-view');
-	if (!cont) return;
-
-	// Use type assertion to bypass exactOptionalPropertyTypes check if needed
-	cont.innerHTML = renderConfig(config as Partial<ServerConfig>);
-}
-
-/**
- * Format bytes to human readable format.
- *
- * @param bytes - The number of bytes.
- * @returns Formatted string.
- */
-function formatBytes(bytes: number): string {
-	if (bytes === 0) return '0 B';
-	const k = 1024;
-	const sizes = ['B', 'KB', 'MB', 'GB'];
-	const i = Math.floor(Math.log(bytes) / Math.log(k));
-	return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
-}
-
-/**
- * Format microseconds to milliseconds.
- *
- * @param microseconds - CPU time in microseconds.
- * @returns Formatted string.
- */
-function formatCpuTime(microseconds: number): string {
-	const milliseconds = microseconds / 1000;
-	return `${milliseconds.toFixed(2)} ms`;
-}
-
-/**
- * Refresh the system info view.
- *
- * @param status - The status data.
- */
-export function refreshSystem(status: Partial<State['status']>): void {
-	const middlewareVersion = document.getElementById('middleware-version');
-	if (middlewareVersion && status.version) middlewareVersion.textContent = status.version;
-
-	const nodeVersion = document.getElementById('node-version');
-	if (nodeVersion && status.system) nodeVersion.textContent = status.system.nodeVersion;
-
-	const platform = document.getElementById('platform-info');
-	if (platform && status.system) platform.textContent = `${status.system.platform} (${status.system.arch})`;
-
-	const systemUptime = document.getElementById('system-uptime');
-	if (systemUptime && status.uptime) systemUptime.textContent = formatDuration(status.uptime);
-
-	const systemStartTime = document.getElementById('system-start-time');
-	if (systemStartTime && status.startTime) systemStartTime.textContent = formatDateTime(status.startTime);
-
-	const systemStatusText = document.getElementById('system-status-text');
-	if (systemStatusText) systemStatusText.textContent = status.status?.toUpperCase() ?? '-';
-
-	const totalRequests = document.getElementById('total-requests');
-	if (totalRequests && status.metrics) totalRequests.textContent = status.metrics.requestCount.toLocaleString();
-
-	const totalErrors = document.getElementById('total-errors');
-	if (totalErrors && status.metrics) totalErrors.textContent = status.metrics.errorCount.toLocaleString();
-
-	const activePools = document.getElementById('active-pools');
-	if (activePools && status.pools) activePools.textContent = status.pools.length.toString();
-
-	// Memory usage
-	if (status.system?.memory) {
-		const memHeapUsed = document.getElementById('memory-heap-used');
-		if (memHeapUsed) memHeapUsed.textContent = formatBytes(status.system.memory.heapUsed);
-
-		const memHeapTotal = document.getElementById('memory-heap-total');
-		if (memHeapTotal) memHeapTotal.textContent = formatBytes(status.system.memory.heapTotal);
-
-		const memRss = document.getElementById('memory-rss');
-		if (memRss) memRss.textContent = formatBytes(status.system.memory.rss);
-
-		const memExternal = document.getElementById('memory-external');
-		if (memExternal) memExternal.textContent = formatBytes(status.system.memory.external);
-	}
-
-	// CPU usage
-	if (status.system?.cpu) {
-		const cpuUser = document.getElementById('cpu-user');
-		if (cpuUser) cpuUser.textContent = formatCpuTime(status.system.cpu.user);
-
-		const cpuSystem = document.getElementById('cpu-system');
-		if (cpuSystem) cpuSystem.textContent = formatCpuTime(status.system.cpu.system);
-	}
-
-	const systemRefreshStatus = document.getElementById('system-refresh-status');
-	const autoRefreshToggle = document.getElementById('auto-refresh-toggle') as HTMLInputElement | null;
-	const refreshInterval = document.getElementById('refresh-interval') as HTMLSelectElement | null;
-	if (systemRefreshStatus && autoRefreshToggle && refreshInterval) {
-		if (autoRefreshToggle.checked) {
-			const intervalSec = parseInt(refreshInterval.value) / 1000;
-			systemRefreshStatus.textContent = `Active (${intervalSec}s)`;
-			systemRefreshStatus.classList.add('text-success');
-			systemRefreshStatus.classList.remove('text-accent');
-		} else {
-			systemRefreshStatus.textContent = 'Paused';
-			systemRefreshStatus.classList.remove('text-success');
-			systemRefreshStatus.classList.add('text-accent');
-		}
-	}
-}

package/src/admin/js/util/format.ts

@@ -1,27 +0,0 @@
-/**
- * Format a duration in seconds to a human-readable string.
- * @param {number} seconds - Duration in seconds.
- * @returns {string} Formatted duration string (e.g., "2d 3h 45m 30s").
- */
-export function formatDuration(seconds: number): string {
-	const d = Math.floor(seconds / (3600 * 24));
-	const h = Math.floor((seconds % (3600 * 24)) / 3600);
-	const m = Math.floor((seconds % 3600) / 60);
-	const s = Math.floor(seconds % 60);
-	const parts: string[] = [];
-	if (d > 0) parts.push(`${d}d`);
-	if (h > 0) parts.push(`${h}h`);
-	if (m > 0) parts.push(`${m}m`);
-	parts.push(`${s}s`);
-	return parts.join(' ');
-}
-
-/**
- * Format an ISO date string to a localized date time string.
- * @param isoDate - ISO date string.
- * @returns Formatted date time string or "-" if invalid.
- */
-export function formatDateTime(isoDate: string): string {
-	if (!isoDate) return '-';
-	return new Date(isoDate).toLocaleString();
-}

package/src/admin/lib/assets/main-zpdhQ1gD.css

@@ -1 +0,0 @@
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-font-weight:initial;--tw-tracking:initial;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-3xl:1.875rem;--text-3xl--line-height: 1.2 ;--font-weight-bold:700;--tracking-wider:.05em;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-success:#10b981;--color-danger:#ef4444}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.fixed{position:fixed}.static{position:static}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-6{margin-top:calc(var(--spacing)*6)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.mb-8{margin-bottom:calc(var(--spacing)*8)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.table{display:table}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.resize{resize:both}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.items-baseline{align-items:baseline}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-3{gap:calc(var(--spacing)*3)}.gap-6{gap:calc(var(--spacing)*6)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.pt-4{padding-top:calc(var(--spacing)*4)}.font-mono{font-family:var(--font-mono)}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.break-all{word-break:break-all}.text-danger{color:var(--color-danger)}.text-success{color:var(--color-success)}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.opacity-75{opacity:.75}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}@media(min-width:48rem){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}}body{-webkit-font-smoothing:antialiased;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}body.dark{--bg-main:#0f172a;--bg-side:#1e293b;--bg-card:#1e293b;--bg-hover:#334155;--text-main:#94a3b8;--text-bright:#f8fafc;--border:#334155}body:not(.dark){--bg-main:#f8fafc;--bg-side:#fff;--bg-card:#fff;--bg-hover:#f1f5f9;--text-main:#475569;--text-bright:#0f172a;--border:#e2e8f0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}