@nocturnium/svelte-ide 1.0.0-rc.1

package/dist/styles/theme.css

@@ -0,0 +1,623 @@
+/**
+ * @nocturnium/svelte-ide — default theme
+ *
+ * Ships the design tokens (CSS custom properties), keyframes, and the
+ * `.ide-*` helper classes that the components rely on. Import once near your
+ * app entry to get the built-in dark "Nocturnium" theme:
+ *
+ *   import '@nocturnium/svelte-ide/theme.css';
+ *
+ * Every value is a CSS variable on :root, so you can override any token in your
+ * own stylesheet (loaded after this one) to retheme without forking.
+ *
+ * Note: this file intentionally does NOT set global html/body/* resets so it
+ * won't fight your application's base styles — only tokens, keyframes, and the
+ * opt-in `.ide-*` utility classes are defined.
+ */
+
+/* Nocturnium Design System */
+:root {
+	/* Core Brand Colors */
+	--color-nocturnium-night: #0d1421;
+	--color-nocturnium-deep: #1a2744;
+	--color-nocturnium-ocean: #2d5a7b;
+	--color-nocturnium-wave: #4a8db7;
+	--color-nocturnium-foam: #a8c5d9;
+	--color-nocturnium-ember: #d4793a;
+	--color-nocturnium-flame: #e9a456;
+	--color-nocturnium-moon: #f4f1e0;
+	--color-nocturnium-glow: #fffdf5;
+	--color-nocturnium-teal: #5eead4;
+
+	/* Aurora Accents */
+	--color-nocturnium-aurora-blue: #60a5fa;
+	--color-nocturnium-aurora-purple: #a78bfa;
+	--color-nocturnium-aurora-green: #4ade80;
+	--color-nocturnium-aurora-yellow: #facc15;
+	--color-nocturnium-aurora-pink: #f472b6;
+
+	/* IDE Surface Colors */
+	--ide-bg-primary: var(--color-nocturnium-night);
+	--ide-bg-secondary: var(--color-nocturnium-deep);
+	--ide-bg-tertiary: var(--color-nocturnium-ocean);
+	--ide-bg-elevated: color-mix(in srgb, var(--ide-bg-secondary) 90%, white 10%);
+	--ide-bg-hover: color-mix(in srgb, var(--ide-bg-tertiary) 50%, transparent);
+	--ide-bg-active: var(--ide-bg-tertiary);
+	--ide-bg-selection-secondary: color-mix(in srgb, var(--color-nocturnium-aurora-purple) 22%, transparent);
+
+	/* IDE Text Colors */
+	--ide-text-primary: var(--color-nocturnium-moon);
+	--ide-text-secondary: var(--color-nocturnium-foam);
+	--ide-text-muted: color-mix(in srgb, var(--ide-text-secondary) 60%, transparent);
+	--ide-text-accent: var(--color-nocturnium-ember);
+	--ide-text-inverse: var(--color-nocturnium-night);
+
+	/* IDE Interactive Colors */
+	--ide-interactive: var(--color-nocturnium-wave);
+	--ide-interactive-hover: var(--color-nocturnium-flame);
+	--ide-interactive-active: var(--color-nocturnium-ember);
+	--ide-interactive-focus: var(--color-nocturnium-aurora-blue);
+	--ide-interactive-muted: color-mix(in srgb, var(--ide-interactive) 70%, transparent);
+
+	/* IDE Accent Colors */
+	--ide-accent: var(--color-nocturnium-wave);
+	--ide-accent-strong: var(--color-nocturnium-flame);
+
+	/* IDE Semantic Colors */
+	--ide-success: var(--color-nocturnium-aurora-green);
+	--ide-warning: var(--color-nocturnium-aurora-yellow);
+	--ide-error: #ef4444;
+	--ide-info: var(--color-nocturnium-aurora-blue);
+
+	/* AI Panel Colors */
+	--ide-ai-user: var(--color-nocturnium-ocean);
+	--ide-ai-assistant: var(--color-nocturnium-aurora-purple);
+	--ide-ai-system: var(--color-nocturnium-deep);
+	--ide-ai-thinking: var(--color-nocturnium-aurora-blue);
+	--ide-ai-tool: var(--color-nocturnium-aurora-green);
+
+	/* Plugin Status Colors */
+	--ide-plugin-draft: var(--ide-text-muted);
+	--ide-plugin-reviewing: var(--color-nocturnium-aurora-yellow);
+	--ide-plugin-approved: var(--color-nocturnium-aurora-green);
+	--ide-plugin-rejected: var(--ide-error);
+	--ide-plugin-deploying: var(--color-nocturnium-aurora-blue);
+	--ide-plugin-deployed: var(--color-nocturnium-aurora-green);
+
+	/* CRDT Collaboration Colors */
+	--ide-collab-cursor-1: var(--color-nocturnium-aurora-blue);
+	--ide-collab-cursor-2: var(--color-nocturnium-aurora-purple);
+	--ide-collab-cursor-3: var(--color-nocturnium-aurora-green);
+	--ide-collab-cursor-4: var(--color-nocturnium-aurora-pink);
+	--ide-collab-cursor-5: var(--color-nocturnium-aurora-yellow);
+	--ide-collab-ai: var(--color-nocturnium-ember);
+
+	/* IDE Borders */
+	--ide-border: color-mix(in srgb, var(--ide-text-secondary) 20%, transparent);
+	--ide-border-focus: var(--ide-interactive);
+	--ide-border-error: var(--ide-error);
+
+	/* IDE Shadows */
+	--ide-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+	--ide-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
+	--ide-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
+	--ide-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6);
+
+	/* IDE Typography */
+	--ide-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+	--ide-font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Monaco, 'Courier New', monospace;
+	--ide-font-size-xs: 0.75rem;
+	--ide-font-size-sm: 0.875rem;
+	--ide-font-size-base: 1rem;
+	--ide-font-size-lg: 1.125rem;
+	--ide-font-size-xl: 1.25rem;
+	--ide-font-size-2xl: 1.5rem;
+	--ide-font-size-3xl: 2rem;
+	--ide-font-size-4xl: 2.75rem;
+	--ide-line-height-tight: 1.25;
+	--ide-line-height-normal: 1.5;
+	--ide-line-height-relaxed: 1.75;
+
+	/* IDE Spacing */
+	--ide-spacing-xs: 0.25rem;
+	--ide-spacing-sm: 0.5rem;
+	--ide-spacing-md: 1rem;
+	--ide-spacing-lg: 1.5rem;
+	--ide-spacing-xl: 2rem;
+	--ide-spacing-2xl: 3rem;
+
+	/* IDE Radii */
+	--ide-radius-sm: 0.25rem;
+	--ide-radius-md: 0.375rem;
+	--ide-radius-lg: 0.5rem;
+	--ide-radius-xl: 0.75rem;
+	--ide-radius-full: 9999px;
+
+	/* IDE Transitions */
+	--ide-transition-fast: 100ms ease;
+	--ide-transition-normal: 200ms ease;
+	--ide-transition-slow: 300ms ease;
+	--ide-transition-bounce: 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
+
+	/* IDE Z-Index Scale */
+	--ide-z-base: 0;
+	--ide-z-dropdown: 100;
+	--ide-z-sticky: 200;
+	--ide-z-overlay: 300;
+	--ide-z-modal: 400;
+	--ide-z-popover: 500;
+	--ide-z-tooltip: 600;
+	--ide-z-notification: 700;
+
+	/* IDE Layout Sizes */
+	--ide-activity-bar-width: 48px;
+	--ide-sidebar-width: 260px;
+	--ide-sidebar-min-width: 180px;
+	--ide-sidebar-max-width: 500px;
+	--ide-panel-height: 200px;
+	--ide-panel-min-height: 100px;
+	--ide-panel-max-height: 500px;
+	--ide-status-bar-height: 24px;
+	--ide-tab-height: 36px;
+	--ide-header-height: 40px;
+
+	/* Agent Status Colors */
+	--ide-agent-online: var(--color-nocturnium-aurora-green);
+	--ide-agent-busy: var(--color-nocturnium-aurora-yellow);
+	--ide-agent-offline: var(--ide-text-muted);
+	--ide-agent-error: var(--ide-error);
+	--ide-agent-stalled: var(--color-nocturnium-aurora-pink);
+
+	/* Agent Type Colors */
+	--ide-agent-human: var(--color-nocturnium-aurora-blue);
+	--ide-agent-ai-primary: var(--color-nocturnium-ember);
+	--ide-agent-ai-secondary: var(--color-nocturnium-aurora-purple);
+	--ide-agent-system: var(--color-nocturnium-ocean);
+
+	/* Lock Status Colors */
+	--ide-lock-owned: var(--color-nocturnium-aurora-green);
+	--ide-lock-other: var(--color-nocturnium-aurora-yellow);
+	--ide-lock-pending: var(--color-nocturnium-aurora-blue);
+	--ide-lock-expired: var(--ide-text-muted);
+	--ide-lock-conflict: var(--ide-error);
+
+	/* Transaction Status Colors */
+	--ide-transaction-staged: var(--color-nocturnium-aurora-blue);
+	--ide-transaction-pending: var(--color-nocturnium-aurora-yellow);
+	--ide-transaction-committed: var(--color-nocturnium-aurora-green);
+	--ide-transaction-failed: var(--ide-error);
+
+	/* Progress Indicators */
+	--ide-progress-track: var(--ide-bg-tertiary);
+	--ide-progress-fill: var(--color-nocturnium-wave);
+	--ide-progress-stalled: var(--color-nocturnium-aurora-pink);
+
+	/* Agent Glow Effects */
+	--ide-agent-glow: 0 0 12px color-mix(in srgb, var(--ide-agent-ai-primary) 40%, transparent);
+	--ide-lock-glow: 0 0 8px color-mix(in srgb, var(--ide-lock-other) 30%, transparent);
+}
+
+/* Utility Classes */
+.ide-font-mono {
+	font-family: var(--ide-font-mono);
+}
+
+.ide-truncate {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.ide-visually-hidden {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+
+/* Animation Keyframes */
+@keyframes ide-spin {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+@keyframes ide-pulse {
+	0%,
+	100% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0.5;
+	}
+}
+
+@keyframes ide-bounce {
+	0%,
+	100% {
+		transform: translateY(-5%);
+		animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+	}
+	50% {
+		transform: translateY(0);
+		animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+	}
+}
+
+@keyframes ide-fade-in {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes ide-slide-up {
+	from {
+		opacity: 0;
+		transform: translateY(10px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+@keyframes ide-slide-down {
+	from {
+		opacity: 0;
+		transform: translateY(-10px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+@keyframes ide-thinking-dots {
+	0%,
+	20% {
+		opacity: 0.2;
+	}
+	40% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0.2;
+	}
+}
+
+/* CRDT Collaboration Cursor Styles */
+.ide-collab-cursor {
+	position: absolute;
+	width: 2px;
+	pointer-events: none;
+}
+
+.ide-collab-cursor::before {
+	content: attr(data-user);
+	position: absolute;
+	top: -1.4em;
+	left: 0;
+	padding: 2px 6px;
+	font-size: var(--ide-font-size-xs);
+	font-family: var(--ide-font-sans);
+	border-radius: var(--ide-radius-sm);
+	white-space: nowrap;
+	color: white;
+}
+
+.ide-collab-cursor[data-index='0'] {
+	background-color: var(--ide-collab-cursor-1);
+}
+.ide-collab-cursor[data-index='0']::before {
+	background-color: var(--ide-collab-cursor-1);
+}
+
+.ide-collab-cursor[data-index='1'] {
+	background-color: var(--ide-collab-cursor-2);
+}
+.ide-collab-cursor[data-index='1']::before {
+	background-color: var(--ide-collab-cursor-2);
+}
+
+.ide-collab-cursor[data-index='2'] {
+	background-color: var(--ide-collab-cursor-3);
+}
+.ide-collab-cursor[data-index='2']::before {
+	background-color: var(--ide-collab-cursor-3);
+}
+
+.ide-collab-cursor[data-ai='true'] {
+	background-color: var(--ide-collab-ai);
+}
+.ide-collab-cursor[data-ai='true']::before {
+	background-color: var(--ide-collab-ai);
+}
+
+/* Plugin Status Badge Styles */
+.ide-plugin-status {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--ide-spacing-xs);
+	padding: 2px 8px;
+	font-size: var(--ide-font-size-xs);
+	font-weight: 500;
+	border-radius: var(--ide-radius-full);
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+}
+
+.ide-plugin-status--draft {
+	background-color: color-mix(in srgb, var(--ide-plugin-draft) 20%, transparent);
+	color: var(--ide-plugin-draft);
+}
+
+.ide-plugin-status--reviewing {
+	background-color: color-mix(in srgb, var(--ide-plugin-reviewing) 20%, transparent);
+	color: var(--ide-plugin-reviewing);
+}
+
+.ide-plugin-status--approved {
+	background-color: color-mix(in srgb, var(--ide-plugin-approved) 20%, transparent);
+	color: var(--ide-plugin-approved);
+}
+
+.ide-plugin-status--rejected {
+	background-color: color-mix(in srgb, var(--ide-plugin-rejected) 20%, transparent);
+	color: var(--ide-plugin-rejected);
+}
+
+.ide-plugin-status--deploying {
+	background-color: color-mix(in srgb, var(--ide-plugin-deploying) 20%, transparent);
+	color: var(--ide-plugin-deploying);
+}
+
+.ide-plugin-status--deployed {
+	background-color: color-mix(in srgb, var(--ide-plugin-deployed) 20%, transparent);
+	color: var(--ide-plugin-deployed);
+}
+
+/* Agent Status Animations */
+@keyframes ide-agent-pulse {
+	0%,
+	100% {
+		box-shadow: 0 0 0 0 var(--pulse-color);
+	}
+	50% {
+		box-shadow: 0 0 0 4px transparent;
+	}
+}
+
+@keyframes ide-agent-ring-spin {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+@keyframes ide-lock-warning {
+	0%,
+	100% {
+		border-color: var(--ide-lock-other);
+	}
+	50% {
+		border-color: var(--ide-warning);
+	}
+}
+
+@keyframes ide-progress-fill {
+	0% {
+		stroke-dashoffset: 100;
+	}
+}
+
+@keyframes ide-conflict-flash {
+	0%,
+	100% {
+		background: transparent;
+	}
+	50% {
+		background: color-mix(in srgb, var(--ide-error) 20%, transparent);
+	}
+}
+
+@keyframes ide-cursor-appear {
+	from {
+		opacity: 0;
+		transform: scale(0.8);
+	}
+	to {
+		opacity: 1;
+		transform: scale(1);
+	}
+}
+
+@keyframes ide-typing-pulse {
+	0%,
+	100% {
+		transform: scale(0.8);
+		opacity: 0.5;
+	}
+	50% {
+		transform: scale(1.2);
+		opacity: 1;
+	}
+}
+
+/* Agent Presence Utilities */
+.ide-agent-status-ring {
+	position: absolute;
+	inset: -2px;
+	border: 2px solid transparent;
+	border-radius: 50%;
+	animation: ide-agent-pulse 2s infinite;
+}
+
+.ide-agent-status-ring--online {
+	border-color: var(--ide-agent-online);
+	--pulse-color: var(--ide-agent-online);
+}
+
+.ide-agent-status-ring--busy {
+	border-color: var(--ide-agent-busy);
+	animation: ide-agent-ring-spin 3s linear infinite;
+}
+
+.ide-agent-status-ring--stalled {
+	border-color: var(--ide-agent-stalled);
+	animation: ide-lock-warning 0.5s infinite;
+}
+
+/* Lock Status Utilities */
+.ide-lock-badge {
+	position: absolute;
+	bottom: -2px;
+	right: -2px;
+	width: 14px;
+	height: 14px;
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 8px;
+	background: var(--ide-bg-secondary);
+	border: 1px solid var(--ide-border);
+}
+
+.ide-lock-badge--owned {
+	color: var(--ide-lock-owned);
+}
+
+.ide-lock-badge--other {
+	color: var(--ide-lock-other);
+}
+
+.ide-lock-badge--pending {
+	color: var(--ide-lock-pending);
+	animation: ide-pulse 1s infinite;
+}
+
+.ide-lock-badge--conflict {
+	color: var(--ide-lock-conflict);
+	animation: ide-conflict-flash 0.5s infinite;
+}
+
+.ide-lock-overlay {
+	position: absolute;
+	inset: 0;
+	background: color-mix(in srgb, var(--ide-bg-primary) 80%, transparent);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 50;
+}
+
+/* Transaction Status Utilities */
+.ide-transaction-indicator {
+	position: absolute;
+	left: 0;
+	top: 0;
+	bottom: 0;
+	width: 3px;
+}
+
+.ide-transaction-indicator--staged {
+	background: var(--ide-transaction-staged);
+}
+
+.ide-transaction-indicator--pending {
+	background: var(--ide-transaction-pending);
+	animation: ide-pulse 1s infinite;
+}
+
+.ide-transaction-indicator--committed {
+	background: var(--ide-transaction-committed);
+}
+
+/* Agent Cursor Styles */
+.ide-agent-cursor {
+	position: absolute;
+	width: 2px;
+	pointer-events: none;
+	z-index: 50;
+	animation: ide-cursor-appear 0.2s ease-out;
+}
+
+.ide-agent-cursor--ai {
+	background: linear-gradient(180deg, var(--ide-agent-ai-primary) 0%, var(--color-nocturnium-flame) 100%);
+	box-shadow: var(--ide-agent-glow);
+}
+
+.ide-agent-cursor::before {
+	content: '';
+	position: absolute;
+	top: -8px;
+	left: -1px;
+	width: 4px;
+	height: 8px;
+	background: inherit;
+	clip-path: polygon(0 0, 100% 50%, 0 100%);
+}
+
+.ide-agent-cursor__label {
+	position: absolute;
+	top: -20px;
+	left: 0;
+	padding: 2px 6px 2px 20px;
+	font-size: var(--ide-font-size-xs);
+	border-radius: var(--ide-radius-sm);
+	white-space: nowrap;
+	display: flex;
+	align-items: center;
+	gap: 4px;
+}
+
+.ide-agent-cursor__label--ai {
+	background: linear-gradient(
+		90deg,
+		var(--ide-agent-ai-primary) 0%,
+		color-mix(in srgb, var(--ide-agent-ai-primary) 80%, var(--ide-bg-primary)) 100%
+	);
+}
+
+.ide-agent-cursor--typing::after {
+	content: '';
+	position: absolute;
+	bottom: 0;
+	left: 4px;
+	width: 6px;
+	height: 6px;
+	background: currentColor;
+	border-radius: 50%;
+	animation: ide-typing-pulse 0.6s infinite;
+}
+
+.ide-agent-selection {
+	position: absolute;
+	pointer-events: none;
+	opacity: 0.2;
+}
+
+.ide-agent-selection--ai {
+	background: var(--ide-agent-ai-primary);
+}
+
+/* Force default cursor on editor gutter/line numbers */
+[class*="gutter"],
+[class*="line-number"],
+[data-cursor-type="default"],
+[data-cursor-type="default"] * {
+	cursor: default !important;
+}