Split workspace into electron and ui packages

packages/ui/src/styles/components/badges.css

@@ -0,0 +1,46 @@
+/* Badge + status utilities */
+.neutral-badge {
+  @apply inline-flex items-center rounded px-1.5 py-0.5 text-xs font-normal;
+  background-color: var(--badge-neutral-bg);
+  color: var(--badge-neutral-text);
+}
+
+.status-badge {
+  @apply inline-flex items-center gap-1.5 rounded px-2 py-1 text-xs font-medium;
+}
+
+.status-badge.ready {
+  background-color: var(--status-ready-bg);
+  color: var(--status-ready-fg);
+}
+
+.status-badge.starting {
+  background-color: var(--status-starting-bg);
+  color: var(--status-starting-fg);
+}
+
+.status-badge.error {
+  background-color: var(--status-error-bg);
+  color: var(--status-error-fg);
+}
+
+.status-badge.stopped {
+  background-color: var(--status-stopped-bg);
+  color: var(--status-stopped-fg);
+}
+
+.status-dot.ready {
+  background-color: var(--status-ready-fg);
+}
+
+.status-dot.starting {
+  background-color: var(--status-starting-fg);
+}
+
+.status-dot.error {
+  background-color: var(--status-error-fg);
+}
+
+.status-dot.stopped {
+  background-color: var(--status-stopped-fg);
+}

packages/ui/src/styles/components/buttons.css

@@ -0,0 +1,56 @@
+/* Button component styles */
+.button-primary,
+button.button-primary {
+  @apply px-6 py-3 text-base rounded-lg;
+  background-color: var(--button-primary-bg);
+  color: var(--button-primary-text);
+  border-color: var(--button-primary-bg);
+}
+
+.button-primary:hover:not(:disabled),
+button.button-primary:hover:not(:disabled) {
+  background-color: var(--button-primary-hover-bg);
+  border-color: var(--button-primary-hover-bg);
+}
+
+.button-primary:focus-visible,
+button.button-primary:focus-visible {
+  box-shadow: 0 0 0 2px var(--focus-ring-offset), 0 0 0 4px var(--focus-ring-color);
+}
+
+.button-secondary,
+button.button-secondary {
+  @apply px-6 py-3 text-base rounded-lg;
+  background-color: var(--surface-secondary);
+  color: var(--text-primary);
+  border-color: var(--border-base);
+}
+
+.button-secondary:hover:not(:disabled),
+button.button-secondary:hover:not(:disabled) {
+  background-color: var(--surface-hover);
+}
+
+.button-secondary:focus-visible,
+button.button-secondary:focus-visible {
+  box-shadow: 0 0 0 2px var(--focus-ring-offset), 0 0 0 4px var(--focus-ring-color);
+}
+
+.button-tertiary,
+button.button-tertiary {
+  @apply px-4 py-2 text-sm rounded-lg;
+  background-color: transparent;
+  color: var(--text-secondary);
+  border-color: var(--border-base);
+}
+
+.button-tertiary:hover:not(:disabled),
+button.button-tertiary:hover:not(:disabled) {
+  color: var(--text-primary);
+  background-color: var(--surface-hover);
+}
+
+.button-tertiary:focus-visible,
+button.button-tertiary:focus-visible {
+  box-shadow: 0 0 0 2px var(--focus-ring-offset), 0 0 0 4px var(--focus-ring-color);
+}

packages/ui/src/styles/components/dropdown.css

@@ -0,0 +1,72 @@
+/* Dropdown utilities */
+.dropdown-surface {
+  @apply absolute w-full rounded-md shadow-lg z-50;
+  background-color: var(--surface-base);
+  border: 1px solid var(--border-base);
+}
+
+.dropdown-header {
+  @apply px-3 py-2 border-b;
+  border-color: var(--border-base);
+  background-color: var(--surface-secondary);
+}
+
+.dropdown-header-title {
+  @apply text-xs font-medium;
+  color: var(--text-muted);
+}
+
+.dropdown-section-header {
+  @apply px-3 py-1.5 text-xs font-semibold;
+  color: var(--text-muted);
+  background-color: var(--surface-secondary);
+}
+
+.dropdown-content {
+  @apply overflow-y-auto;
+}
+
+.dropdown-item {
+  @apply cursor-pointer px-3 py-2 transition-colors;
+  color: var(--text-primary);
+}
+
+.dropdown-item:hover {
+  background-color: var(--surface-hover);
+}
+
+.dropdown-item-highlight {
+  background-color: var(--dropdown-highlight-bg);
+  color: var(--dropdown-highlight-text);
+}
+
+.dropdown-empty {
+  @apply px-3 py-4 text-center text-sm;
+  color: var(--text-muted);
+}
+
+.dropdown-loading {
+  @apply p-4 text-center text-sm;
+  color: var(--text-muted);
+}
+
+.dropdown-footer {
+  @apply border-t px-3 py-2 text-xs;
+  border-color: var(--border-base);
+  color: var(--text-muted);
+}
+
+.dropdown-badge {
+  @apply rounded px-1.5 py-0.5 text-xs font-normal;
+  background-color: var(--accent-primary);
+  color: var(--text-inverted);
+}
+
+.dropdown-icon {
+  @apply flex-shrink-0;
+  color: var(--text-muted);
+}
+
+.dropdown-icon-accent {
+  color: var(--accent-primary);
+}

packages/ui/src/styles/components/env-vars.css

@@ -0,0 +1,29 @@
+/* Environment variables display */
+.env-vars-container {
+  @apply px-4 py-3 border-b;
+  background-color: var(--env-vars-bg);
+  border-color: var(--env-vars-border);
+}
+
+.env-vars-title {
+  @apply text-xs font-medium mb-2;
+  color: var(--env-vars-text);
+}
+
+.env-var-item {
+  @apply flex items-center gap-2 text-xs;
+}
+
+.env-var-key {
+  @apply font-mono font-medium min-w-0 flex-1;
+  color: var(--env-vars-text);
+}
+
+.env-var-separator {
+  color: var(--env-vars-text);
+}
+
+.env-var-value {
+  @apply font-mono min-w-0 flex-1;
+  color: var(--env-vars-text);
+}

packages/ui/src/styles/components/folder-loading.css

@@ -0,0 +1,32 @@
+/* Folder loading overlay */
+.folder-loading-overlay {
+  position: absolute;
+  inset: 0;
+  background-color: var(--folder-overlay-bg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 50;
+  backdrop-filter: blur(2px);
+}
+
+.folder-loading-indicator {
+  @apply flex flex-col items-center gap-3 text-center;
+  padding: 24px 32px;
+  border-radius: var(--folder-card-radius);
+  background-color: var(--surface-base);
+  border: 1px solid var(--border-base);
+  box-shadow: var(--folder-card-shadow);
+  min-width: 260px;
+}
+
+.folder-loading-text {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+}
+
+.folder-loading-subtext {
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+}

packages/ui/src/styles/components/selector.css

@@ -0,0 +1,252 @@
+/* Selector component utilities */
+.selector-trigger {
+  @apply inline-flex items-center justify-between gap-2 px-2 py-1 border rounded outline-none transition-colors text-xs min-w-[180px];
+  background-color: var(--surface-base);
+  border-color: var(--border-base);
+  color: var(--text-primary);
+}
+
+.selector-trigger:hover {
+  background-color: var(--surface-hover);
+}
+
+.selector-trigger:focus {
+  @apply ring-2;
+  ring-color: var(--accent-primary);
+}
+
+.selector-trigger-disabled {
+  @apply opacity-50 cursor-not-allowed;
+}
+
+.selector-trigger-label {
+  @apply flex flex-col min-w-0;
+}
+
+.selector-trigger-label--stacked {
+  @apply items-start;
+}
+
+.selector-trigger-primary {
+  @apply text-sm font-medium truncate;
+  color: var(--text-primary);
+}
+
+.selector-trigger-primary--align-left {
+  @apply text-left w-full;
+}
+
+.selector-trigger-secondary {
+  @apply text-xs text-left truncate;
+  color: var(--text-muted);
+}
+
+.selector-trigger-icon {
+  @apply flex-shrink-0;
+  color: var(--text-muted);
+}
+
+.selector-popover {
+  @apply rounded-md shadow-lg overflow-hidden z-50 min-w-[300px];
+  background-color: var(--surface-base);
+  border: 1px solid var(--border-base);
+}
+
+.selector-search-container {
+  @apply p-2 border-b;
+  border-color: var(--border-base);
+}
+
+.selector-search-input {
+  @apply w-full px-3 py-1.5 text-xs border rounded outline-none transition-colors;
+  background-color: var(--surface-base);
+  border-color: var(--border-base);
+  color: var(--text-primary);
+}
+
+.selector-search-input:focus {
+  @apply ring-2;
+  ring-color: var(--accent-primary);
+}
+
+.selector-search-input::placeholder {
+  color: var(--text-muted);
+}
+
+.selector-listbox {
+  @apply max-h-64 overflow-auto p-1;
+  background-color: var(--surface-base);
+}
+
+.selector-option {
+  @apply px-3 py-2 cursor-pointer rounded outline-none transition-colors flex items-start gap-2 w-full;
+  color: var(--text-primary);
+}
+
+.selector-option:hover {
+  background-color: var(--surface-hover);
+}
+
+.selector-option[data-highlighted],
+.selector-option[data-focused] {
+  background-color: var(--selection-highlight-bg);
+}
+
+.selector-option[data-selected],
+.selector-option-selected {
+  background-color: var(--selection-highlight-strong-bg);
+}
+
+.selector-option-content {
+  @apply flex flex-col flex-1 min-w-0;
+}
+
+.selector-option-label {
+  @apply font-medium text-sm;
+  color: var(--text-primary);
+}
+
+.selector-option-description {
+  @apply text-xs;
+  color: var(--text-muted);
+}
+
+.selector-option .remove-binary-button {
+  opacity: 0;
+}
+
+.selector-option:hover .remove-binary-button {
+  opacity: 1;
+}
+
+.remove-binary-button {
+  @apply p-1 rounded transition-all;
+  color: var(--text-muted);
+}
+
+.remove-binary-button:hover {
+  background-color: var(--danger-soft-bg);
+  color: var(--status-error);
+}
+
+.selector-option-indicator {
+  @apply flex-shrink-0 mt-0.5;
+  color: var(--accent-primary);
+}
+
+.selector-section {
+  @apply px-3 py-2 border-b;
+  border-color: var(--border-base);
+  background-color: var(--surface-secondary);
+}
+
+.selector-section-title {
+  @apply text-xs font-medium;
+  color: var(--text-muted);
+}
+
+.selector-badge {
+  @apply rounded px-1.5 py-0.5 text-xs font-normal;
+  background-color: var(--accent-primary);
+  color: var(--text-inverted);
+}
+
+.selector-badge-version {
+  @apply text-xs;
+  color: var(--text-muted);
+}
+
+.selector-badge-time {
+  @apply text-xs;
+  color: var(--text-muted);
+}
+
+.selector-validation-error {
+  @apply p-2 rounded border;
+  background-color: var(--message-error-bg);
+  border-color: var(--status-error);
+  color: var(--status-error);
+}
+
+.selector-validation-error-content {
+  @apply flex items-start gap-2;
+}
+
+.selector-validation-error-icon {
+  @apply w-4 h-4 mt-0.5 flex-shrink-0;
+  color: var(--status-error);
+}
+
+.selector-validation-error-text {
+  @apply text-xs;
+}
+
+.selector-input-group {
+  @apply flex gap-2;
+}
+
+.selector-input {
+  @apply flex-1 px-2 py-1.5 text-sm border rounded outline-none transition-colors;
+  background-color: var(--surface-base);
+  border-color: var(--border-base);
+  color: var(--text-primary);
+}
+
+.selector-input:focus {
+  @apply ring-1;
+  ring-color: var(--accent-primary);
+}
+
+.selector-input::placeholder {
+  color: var(--text-muted);
+}
+
+.selector-button {
+  @apply px-3 py-1.5 text-sm rounded transition-colors cursor-pointer w-full inline-flex items-center justify-center font-medium;
+  background-color: var(--surface-secondary);
+  color: var(--text-primary);
+  border: 1px solid var(--border-base);
+}
+
+.selector-button-primary {
+  background-color: var(--accent-primary) !important;
+  color: var(--text-inverted) !important;
+  border: 1px solid var(--accent-primary) !important;
+}
+
+.selector-button-primary:hover:not(:disabled) {
+  background-color: var(--accent-hover);
+}
+
+.selector-button-primary:disabled {
+  @apply opacity-50 cursor-not-allowed;
+  background-color: var(--surface-muted);
+}
+
+.selector-button-secondary {
+  background-color: var(--surface-secondary);
+  color: var(--text-primary);
+}
+
+.selector-button-secondary:hover:not(:disabled) {
+  background-color: var(--surface-hover);
+}
+
+.selector-button-secondary:disabled {
+  @apply opacity-50 cursor-not-allowed;
+}
+
+.selector-empty-state {
+  @apply p-4 text-center text-sm;
+  color: var(--text-muted);
+}
+
+.selector-loading {
+  @apply flex items-center gap-2;
+  color: var(--text-muted);
+}
+
+.selector-loading-spinner {
+  @apply w-4 h-4 animate-spin;
+  color: var(--accent-primary);
+}