@tdk-landscape/tdk-cli-core 1.3.15 → 1.3.26

package/ext/ui-enhancements/ui/help-panel.css

@@ -0,0 +1,279 @@
+/* ============================================================================
+   HELP PANEL CSS - UI Enhancements Extension
+   Provides slide-in help panel for developer onboarding
+   ============================================================================ */
+
+/* Help button in header */
+.tilt-help-button {
+  position: fixed;
+  top: 12px;
+  right: 80px;
+  z-index: 1000;
+  background: #2d2d44;
+  color: #e0e0e0;
+  border: 1px solid #3d3d5c;
+  border-radius: 6px;
+  padding: 8px 16px;
+  font-size: 14px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  transition:
+    background 0.2s,
+    border-color 0.2s;
+}
+
+.tilt-help-button:hover {
+  background: #3d3d5c;
+  border-color: #4d4d6c;
+}
+
+.tilt-help-button svg {
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+}
+
+/* Help panel overlay */
+.tilt-help-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1001;
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity 0.3s,
+    visibility 0.3s;
+}
+
+.tilt-help-overlay.visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Help panel */
+.tilt-help-panel {
+  position: fixed;
+  top: 0;
+  right: -450px;
+  width: 450px;
+  height: 100vh;
+  background: #1a1a2e;
+  border-left: 1px solid #2d2d44;
+  z-index: 1002;
+  display: flex;
+  flex-direction: column;
+  transition: right 0.3s ease;
+  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
+}
+
+.tilt-help-panel.open {
+  right: 0;
+}
+
+/* Help panel header */
+.tilt-help-header {
+  padding: 20px;
+  border-bottom: 1px solid #2d2d44;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.tilt-help-header h2 {
+  margin: 0;
+  color: #fff;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.tilt-help-close {
+  background: none;
+  border: none;
+  color: #808090;
+  font-size: 24px;
+  cursor: pointer;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition:
+    background 0.2s,
+    color 0.2s;
+}
+
+.tilt-help-close:hover {
+  background: #2d2d44;
+  color: #fff;
+}
+
+/* Search box */
+.tilt-help-search {
+  padding: 15px 20px;
+  border-bottom: 1px solid #2d2d44;
+}
+
+.tilt-help-search input {
+  width: 100%;
+  padding: 10px 14px;
+  background: #2d2d44;
+  border: 1px solid #3d3d5c;
+  border-radius: 6px;
+  color: #e0e0e0;
+  font-size: 14px;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.tilt-help-search input:focus {
+  border-color: #64b5f6;
+}
+
+.tilt-help-search input::placeholder {
+  color: #808090;
+}
+
+/* Help content */
+.tilt-help-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+}
+
+/* Section styling */
+.tilt-help-section {
+  margin-bottom: 24px;
+}
+
+.tilt-help-section:last-child {
+  margin-bottom: 0;
+}
+
+.tilt-help-section h3 {
+  color: #64b5f6;
+  font-size: 14px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin: 0 0 12px 0;
+}
+
+.tilt-help-section p {
+  color: #b0b0c0;
+  font-size: 14px;
+  line-height: 1.6;
+  margin: 0 0 12px 0;
+}
+
+/* Resource type list */
+.tilt-help-resource-type {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 0;
+  border-bottom: 1px solid #2d2d44;
+}
+
+.tilt-help-resource-type:last-child {
+  border-bottom: none;
+}
+
+.tilt-help-resource-type .icon {
+  width: 20px;
+  height: 20px;
+  color: #64b5f6;
+}
+
+.tilt-help-resource-type .info {
+  flex: 1;
+}
+
+.tilt-help-resource-type .name {
+  color: #e0e0e0;
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.tilt-help-resource-type .desc {
+  color: #808090;
+  font-size: 12px;
+  margin-top: 2px;
+}
+
+/* Keyboard shortcuts */
+.tilt-help-shortcut {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+  border-bottom: 1px solid #2d2d44;
+}
+
+.tilt-help-shortcut:last-child {
+  border-bottom: none;
+}
+
+.tilt-help-shortcut .action {
+  color: #b0b0c0;
+  font-size: 14px;
+}
+
+.tilt-help-shortcut .key {
+  background: #2d2d44;
+  color: #e0e0e0;
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-family: monospace;
+  border: 1px solid #3d3d5c;
+}
+
+/* Common tasks */
+.tilt-help-task {
+  padding: 12px;
+  background: #2d2d44;
+  border-radius: 6px;
+  margin-bottom: 10px;
+}
+
+.tilt-help-task:last-child {
+  margin-bottom: 0;
+}
+
+.tilt-help-task .title {
+  color: #e0e0e0;
+  font-weight: 500;
+  font-size: 14px;
+  margin-bottom: 6px;
+}
+
+.tilt-help-task .steps {
+  color: #808090;
+  font-size: 13px;
+  line-height: 1.5;
+  margin: 0;
+  padding-left: 16px;
+}
+
+.tilt-help-task .steps li {
+  margin-bottom: 4px;
+}
+
+/* Search results highlighting */
+.tilt-help-section.hidden {
+  display: none;
+}
+
+.tilt-help-section .highlight {
+  background: rgba(100, 181, 246, 0.2);
+  padding: 2px 4px;
+  border-radius: 3px;
+}

package/ext/ui-enhancements/ui/icons.css

@@ -0,0 +1,125 @@
+/* ============================================================================
+   ICONS CSS - UI Enhancements Extension
+   Provides visual icons for resource type identification
+   ============================================================================ */
+
+/* Icon base styles */
+.tilt-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+  flex-shrink: 0;
+}
+
+.tilt-icon svg {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+
+/* Status-based icon colors */
+.tilt-icon.status-ready,
+.tilt-icon.status-success {
+  color: #4caf50;
+}
+
+.tilt-icon.status-pending,
+.tilt-icon.status-warning {
+  color: #ff9800;
+}
+
+.tilt-icon.status-error,
+.tilt-icon.status-failed {
+  color: #f44336;
+}
+
+.tilt-icon.status-running {
+  color: #2196f3;
+  animation: tilt-pulse 1.5s ease-in-out infinite;
+}
+
+.tilt-icon.status-idle,
+.tilt-icon.status-paused {
+  color: #9e9e9e;
+}
+
+/* Pulse animation for running state */
+@keyframes tilt-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+/* Resource type specific icons */
+/* Service icon - box/server */
+.tilt-icon-type-service {
+  color: #64b5f6;
+}
+
+/* Job icon - play/check */
+.tilt-icon-type-job {
+  color: #81c784;
+}
+
+/* Test icon - beaker */
+.tilt-icon-type-test {
+  color: #ffb74d;
+}
+
+/* Infrastructure icon - database */
+.tilt-icon-type-infrastructure,
+.tilt-icon-type-db {
+  color: #ba68c8;
+}
+
+/* Cron icon - clock */
+.tilt-icon-type-cron {
+  color: #4dd0e1;
+}
+
+/* Frontend icon - web */
+.tilt-icon-type-frontend {
+  color: #ff8a65;
+}
+
+/* Backend icon - server */
+.tilt-icon-type-backend {
+  color: #7986cb;
+}
+
+/* Library icon - package */
+.tilt-icon-type-library {
+  color: #a1887f;
+}
+
+/* Maintenance icon - tools */
+.tilt-icon-type-maintenance {
+  color: #90a4ae;
+}
+
+/* Quality icon - checkmark */
+.tilt-icon-type-quality {
+  color: #69f0ae;
+}
+
+/* Position icon next to resource name */
+.tilt-resource-with-icon {
+  display: inline-flex;
+  align-items: center;
+}
+
+.tilt-resource-with-icon .tilt-icon {
+  margin-right: 6px;
+}
+
+/* Ensure icons don't interfere with click targets */
+.tilt-icon {
+  pointer-events: none;
+}

package/ext/ui-enhancements/ui/tooltips.css

@@ -0,0 +1,114 @@
+/* ============================================================================
+   TOOLTIPS CSS - UI Enhancements Extension
+   Provides contextual tooltips for Tilt UI elements
+   ============================================================================ */
+
+/* Tooltip container */
+.tilt-tooltip {
+  position: absolute;
+  background: #1a1a2e;
+  color: #e0e0e0;
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-size: 13px;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  max-width: 300px;
+  z-index: 10000;
+  pointer-events: none;
+  opacity: 0;
+  transform: translateY(4px);
+  transition:
+    opacity 0.15s ease,
+    transform 0.15s ease;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+  border: 1px solid #2d2d44;
+  line-height: 1.4;
+}
+
+/* Tooltip visible state */
+.tilt-tooltip.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Tooltip arrow */
+.tilt-tooltip::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+
+/* Tooltip arrow pointing up (default) */
+.tilt-tooltip[data-position="bottom"]::after {
+  top: -6px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 0 6px 6px 6px;
+  border-color: transparent transparent #1a1a2e transparent;
+}
+
+/* Tooltip arrow pointing down */
+.tilt-tooltip[data-position="top"]::after {
+  bottom: -6px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 6px 6px 0 6px;
+  border-color: #1a1a2e transparent transparent transparent;
+}
+
+/* Tooltip arrow pointing left */
+.tilt-tooltip[data-position="right"]::after {
+  left: -6px;
+  top: 50%;
+  transform: translateY(-50%);
+  border-width: 6px 6px 6px 0;
+  border-color: transparent #1a1a2e transparent transparent;
+}
+
+/* Tooltip arrow pointing right */
+.tilt-tooltip[data-position="left"]::after {
+  right: -6px;
+  top: 50%;
+  transform: translateY(-50%);
+  border-width: 6px 0 6px 6px;
+  border-color: transparent transparent transparent #1a1a2e;
+}
+
+/* Resource name tooltip trigger */
+[data-tilt-tooltip] {
+  cursor: help;
+}
+
+/* Status indicator tooltips */
+.tilt-status-indicator[data-tilt-tooltip] {
+  cursor: help;
+}
+
+/* Control button tooltips */
+.tilt-control-btn[data-tilt-tooltip] {
+  cursor: help;
+}
+
+/* Tooltip content formatting */
+.tilt-tooltip .tooltip-title {
+  font-weight: 600;
+  color: #fff;
+  margin-bottom: 4px;
+  display: block;
+}
+
+.tilt-tooltip .tooltip-description {
+  color: #b0b0c0;
+  display: block;
+}
+
+.tilt-tooltip .tooltip-meta {
+  margin-top: 6px;
+  padding-top: 6px;
+  border-top: 1px solid #2d2d44;
+  font-size: 11px;
+  color: #808090;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tdk-landscape/tdk-cli-core",
-  "version": "1.3.15",
+  "version": "1.3.26",
   "description": "TDK CLI - Tilt Development Kit command line interface",
   "keywords": [
     "tdk",
@@ -9,13 +9,13 @@
     "local-dev",
     "microservices"
   ],
-  "homepage": "https://github.com/tdk-landscape/tdk-cli#readme",
+  "homepage": "https://github.com/tdk-landscape/tdk-cli-core#readme",
   "bugs": {
-    "url": "https://github.com/tdk-landscape/tdk-cli/issues"
+    "url": "https://github.com/tdk-landscape/tdk-cli-core/issues"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/tdk-landscape/tdk-cli.git",
+    "url": "git+https://github.com/tdk-landscape/tdk-cli-core.git",
     "directory": "cli"
   },
   "license": "MIT",
@@ -31,7 +31,12 @@
     "dist",
     "bin",
     "templates",
-    "README.md"
+    "README.md",
+    "Tiltfile",
+    "engine",
+    "discovery",
+    "specs",
+    "ext"
   ],
   "scripts": {
     "build": "tsc",
@@ -43,7 +48,7 @@
     "dev": "bun run build:watch",
     "test": "vitest run",
     "test:watch": "vitest",
-    "prepublishOnly": "npm run build"
+    "prepack": "../scripts/stage-npm-engine.sh && npm run build"
   },
   "dependencies": {
     "@types/react": "^19.2.14",
@@ -52,10 +57,9 @@
     "handlebars": "^4.7.8",
     "ink": "^7.0.1",
     "ink-select-input": "^6.2.0",
-    "inquirer": "^9.2.0",
     "ora": "^8.0.0",
-    "react": "^19.2.5",
-    "react-devtools-core": "^8.0.0"
+    "prompts": "^2.4.2",
+    "react": "^19.2.5"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.5.13",