@drupal-canvas/cli 0.3.0 → 0.5.0

package/dist/index.js

@@ -1,10 +1,10 @@
 #!/usr/bin/env node
 import chalk2 from 'chalk';
 import { Command } from 'commander';
-import * as p9 from '@clack/prompts';
+import * as p from '@clack/prompts';
 import * as fs from 'fs';
 import fs__default, { realpathSync as realpathSync$1, readlinkSync, readdirSync, readdir as readdir$1, lstatSync, promises } from 'fs';
-import path11, { win32, posix } from 'path';
+import path3, { win32, posix } from 'path';
 import dotenv from 'dotenv';
 import { transform, Features } from 'lightningcss';
 import axios from 'axios';
@@ -14,27 +14,27 @@ import { transformSync } from '@swc/wasm';
 import { basename } from 'path/win32';
 import { ESLint } from 'eslint';
 import { required } from '@drupal-canvas/eslint-config';
-import { table } from 'table';
 import { fileURLToPath } from 'url';
 import { EventEmitter } from 'events';
 import Stream from 'stream';
 import { StringDecoder } from 'string_decoder';
+import { table } from 'table';
 import * as yaml from 'js-yaml';
 import yaml__default from 'js-yaml';
 import { parse } from '@babel/parser';
 
 // package.json
 var package_default = {
-  version: "0.3.0"};
+  version: "0.5.0"};
 function loadEnvFiles() {
   const homeDir = process.env.HOME || process.env.USERPROFILE || "";
   if (homeDir) {
-    const homeEnvPath = path11.resolve(homeDir, ".canvasrc");
+    const homeEnvPath = path3.resolve(homeDir, ".canvasrc");
     if (fs__default.existsSync(homeEnvPath)) {
       dotenv.config({ path: homeEnvPath });
     }
   }
-  const localEnvPath = path11.resolve(process.cwd(), ".env");
+  const localEnvPath = path3.resolve(process.cwd(), ".env");
   if (fs__default.existsSync(localEnvPath)) {
     dotenv.config({ path: localEnvPath });
   }
@@ -65,7 +65,7 @@ async function ensureConfig(requiredKeys) {
 async function promptForConfig(key) {
   switch (key) {
     case "siteUrl": {
-      const value = await p9.text({
+      const value = await p.text({
         message: "Enter the site URL",
         placeholder: "https://example.com",
         validate: (value2) => {
@@ -75,45 +75,45 @@ async function promptForConfig(key) {
           return;
         }
       });
-      if (p9.isCancel(value)) {
-        p9.cancel("Operation cancelled");
+      if (p.isCancel(value)) {
+        p.cancel("Operation cancelled");
         process.exit(0);
       }
       setConfig({ siteUrl: value });
       break;
     }
     case "clientId": {
-      const value = await p9.text({
+      const value = await p.text({
         message: "Enter your client ID",
         validate: (value2) => {
           if (!value2) return "Client ID is required";
           return;
         }
       });
-      if (p9.isCancel(value)) {
-        p9.cancel("Operation cancelled");
+      if (p.isCancel(value)) {
+        p.cancel("Operation cancelled");
         process.exit(0);
       }
       setConfig({ clientId: value });
       break;
     }
     case "clientSecret": {
-      const value = await p9.password({
+      const value = await p.password({
         message: "Enter your client secret",
         validate: (value2) => {
           if (!value2) return "Client secret is required";
           return;
         }
       });
-      if (p9.isCancel(value)) {
-        p9.cancel("Operation cancelled");
+      if (p.isCancel(value)) {
+        p.cancel("Operation cancelled");
         process.exit(0);
       }
       setConfig({ clientSecret: value });
       break;
     }
     case "componentDir": {
-      const value = await p9.text({
+      const value = await p.text({
         message: "Enter the component directory",
         placeholder: "./components",
         validate: (value2) => {
@@ -121,8 +121,8 @@ async function promptForConfig(key) {
           return;
         }
       });
-      if (p9.isCancel(value)) {
-        p9.cancel("Operation cancelled");
+      if (p.isCancel(value)) {
+        p.cancel("Operation cancelled");
         process.exit(0);
       }
       setConfig({ componentDir: value });
@@ -10805,26 +10805,26 @@ function createApiService() {
     userAgent: config2.userAgent
   });
 }
-var CANVAS_CACHE_DIR = path11.join(os.homedir(), ".canvas");
+var CANVAS_CACHE_DIR = path3.join(os.homedir(), ".canvas");
 async function downloadJsSourceFromCanvas(componentsToDownload) {
   for (const key in componentsToDownload) {
     const component = componentsToDownload[key];
     try {
-      const componentDir = path11.join(CANVAS_CACHE_DIR, component.machineName);
+      const componentDir = path3.join(CANVAS_CACHE_DIR, component.machineName);
       await fs2.rm(componentDir, { recursive: true, force: true });
       await fs2.mkdir(componentDir, { recursive: true });
       if (component.sourceCodeJs) {
         await fs2.writeFile(
-          path11.join(componentDir, `index.jsx`),
+          path3.join(componentDir, `index.jsx`),
           component.sourceCodeJs,
           "utf-8"
         );
       }
     } catch (error) {
       if (error instanceof Error) {
-        p9.note(chalk2.red(`Error: ${error.message}`));
+        p.note(chalk2.red(`Error: ${error.message}`));
       } else {
-        p9.note(chalk2.red(`Unknown error: ${String(error)}`));
+        p.note(chalk2.red(`Unknown error: ${String(error)}`));
       }
     }
   }
@@ -10833,22 +10833,22 @@ async function copyLocalJsSource(componentsToCopy) {
   try {
     await fs2.mkdir(CANVAS_CACHE_DIR, { recursive: true });
     for (const componentPath of componentsToCopy) {
-      const baseName = path11.basename(componentPath);
+      const baseName = path3.basename(componentPath);
       const sourcePath = componentPath;
-      const targetPath = path11.join(CANVAS_CACHE_DIR, baseName);
+      const targetPath = path3.join(CANVAS_CACHE_DIR, baseName);
       const stats = await fs2.stat(sourcePath);
       if (stats.isDirectory()) {
         await fs2.mkdir(targetPath, { recursive: true });
-        const sourceFile = path11.join(sourcePath, "index.jsx");
-        const targetFile = path11.join(targetPath, "index.jsx");
+        const sourceFile = path3.join(sourcePath, "index.jsx");
+        const targetFile = path3.join(targetPath, "index.jsx");
         await fs2.copyFile(sourceFile, targetFile);
       }
     }
   } catch (error) {
     if (error instanceof Error) {
-      p9.note(chalk2.red(`Error: ${error.message}`));
+      p.note(chalk2.red(`Error: ${error.message}`));
     } else {
-      p9.note(chalk2.red(`Unknown error: ${String(error)}`));
+      p.note(chalk2.red(`Unknown error: ${String(error)}`));
     }
   }
 }
@@ -10858,7 +10858,7 @@ async function cleanUpCacheDirectory() {
       withFileTypes: true
     });
     for (const entry of cacheEntries) {
-      const entryPath = path11.join(CANVAS_CACHE_DIR, entry.name);
+      const entryPath = path3.join(CANVAS_CACHE_DIR, entry.name);
       if (entry.isDirectory()) {
         await fs2.rm(entryPath, { recursive: true, force: true });
       } else {
@@ -10866,15 +10866,39 @@ async function cleanUpCacheDirectory() {
       }
     }
   } catch (error) {
-    p9.note(
+    p.note(
       chalk2.red(
         `Failed to clean cache directory contents: ${error instanceof Error ? error.message : String(error)}`
       )
     );
   }
 }
+async function fileExists(filePath) {
+  try {
+    await fs2.access(filePath);
+    return true;
+  } catch {
+    return false;
+  }
+}
+async function directoryExists(dirPath) {
+  return await fs2.stat(dirPath).then(() => true).catch(() => false);
+}
 
 // src/utils/build-tailwind.ts
+async function downloadGlobalCssInBackground() {
+  const apiService = await createApiService();
+  const globalAssetLibrary = await apiService.getGlobalAssetLibrary();
+  return globalAssetLibrary.css.original;
+}
+async function getGlobalCss(useLocal = true) {
+  const config2 = getConfig();
+  const localGlobalCssPath = path3.join(config2.componentDir, "global.css");
+  if (useLocal && await fileExists(localGlobalCssPath)) {
+    return await promises.readFile(localGlobalCssPath, "utf-8");
+  }
+  return await downloadGlobalCssInBackground();
+}
 async function getAllClassNameCandidatesFromCacheDir(componentsToDownload, localComponentsToCopy) {
   if (Object.keys(componentsToDownload).length > 0) {
     await downloadJsSourceFromCanvas(componentsToDownload);
@@ -10883,7 +10907,7 @@ async function getAllClassNameCandidatesFromCacheDir(componentsToDownload, local
   const cacheEntries = await promises.readdir(CANVAS_CACHE_DIR, {
     withFileTypes: true
   });
-  const cacheDirs = cacheEntries.filter((entry) => entry.isDirectory()).map((dir) => path11.join(CANVAS_CACHE_DIR, dir.name));
+  const cacheDirs = cacheEntries.filter((entry) => entry.isDirectory()).map((dir) => path3.join(CANVAS_CACHE_DIR, dir.name));
   let allClassNameCandidates = [];
   for (const cacheDir of cacheDirs) {
     const componentClassNameCandidates = await getClassNameCandidatesForComponent(cacheDir);
@@ -10901,16 +10925,16 @@ async function buildTailwindCss(classNameCandidates, globalSourceCodeCss, distDi
     globalSourceCodeCss
   );
   const transformedTwCss = await transformCss(compiledTwCss);
-  await promises.writeFile(path11.join(distDir, "index.css"), transformedTwCss);
+  await promises.writeFile(path3.join(distDir, "index.css"), transformedTwCss);
 }
 async function getClassNameCandidatesForComponent(dir) {
-  const componentName = path11.basename(dir);
+  const componentName = path3.basename(dir);
   const config2 = getConfig();
   const componentsDir = config2.componentDir;
-  const distDir = path11.join(componentsDir, "dist");
-  const jsSource = await promises.readFile(path11.join(dir, "index.jsx"), "utf-8");
+  const distDir = path3.join(componentsDir, "dist");
+  const jsSource = await promises.readFile(path3.join(dir, "index.jsx"), "utf-8");
   const currentGlobalSourceCodeJs = await promises.readFile(
-    path11.join(distDir, "index.js"),
+    path3.join(distDir, "index.js"),
     "utf-8"
   );
   const classNameCandidates = OE(jsSource);
@@ -10919,20 +10943,20 @@ async function getClassNameCandidatesForComponent(dir) {
     componentName,
     classNameCandidates
   );
-  await promises.writeFile(path11.join(distDir, "index.js"), globalJSClassNameIndex);
+  await promises.writeFile(path3.join(distDir, "index.js"), globalJSClassNameIndex);
   return nextClassNameCandidates;
 }
-async function buildTailwindForComponents(selectedComponents) {
+async function buildTailwindForComponents(selectedComponents, useLocalGlobalCss = true) {
   try {
     const config2 = getConfig();
     const apiService = await createApiService();
     const onlineComponents = await apiService.listComponents();
+    const globalSourceCodeCss = await getGlobalCss(useLocalGlobalCss);
     const globalAssetLibrary = await apiService.getGlobalAssetLibrary();
     const globalSourceCodeJs = globalAssetLibrary.js.original;
-    const globalSourceCodeCss = globalAssetLibrary.css.original;
-    const distDir = path11.join(config2.componentDir, "dist");
+    const distDir = path3.join(config2.componentDir, "dist");
     await promises.mkdir(distDir, { recursive: true });
-    const targetFile = path11.join(distDir, "index.js");
+    const targetFile = path3.join(distDir, "index.js");
     await promises.writeFile(targetFile, globalSourceCodeJs, "utf-8");
     const allClassNameCandidates = await getAllClassNameCandidatesFromCacheDir(
       onlineComponents,
@@ -10984,17 +11008,6 @@ function compileJS(source) {
   const { code } = transformSync(source, SWC_OPTIONS);
   return code;
 }
-async function fileExists(filePath) {
-  try {
-    await fs2.access(filePath);
-    return true;
-  } catch {
-    return false;
-  }
-}
-async function directoryExists(dirPath) {
-  return await fs2.stat(dirPath).then(() => true).catch(() => false);
-}
 async function validateComponent(componentDir, fix = false) {
   const eslint = new ESLint({
     overrideConfigFile: true,
@@ -11012,7 +11025,7 @@ async function validateComponent(componentDir, fix = false) {
       (msg) => `Line ${msg.line}, Column ${msg.column}: ` + msg.message + (msg.ruleId ? ` (${msg.ruleId})` : "")
     );
     details.push({
-      heading: path11.relative(process.cwd(), result.filePath),
+      heading: path3.relative(process.cwd(), result.filePath),
       content: messages.join("\n\n")
     });
   });
@@ -11024,8 +11037,8 @@ async function validateComponent(componentDir, fix = false) {
 }
 
 // src/utils/build.ts
-async function buildComponent(componentDir) {
-  const componentName = path11.basename(componentDir);
+async function buildComponent(componentDir, useLocalGlobalCss = true) {
+  const componentName = path3.basename(componentDir);
   const result = {
     itemName: componentName,
     success: true,
@@ -11037,7 +11050,7 @@ async function buildComponent(componentDir) {
     result.details = validationResult.details;
     return result;
   }
-  const distDir = path11.join(componentDir, "dist");
+  const distDir = path3.join(componentDir, "dist");
   try {
     await promises.mkdir(distDir, { recursive: true });
   } catch (error) {
@@ -11050,11 +11063,11 @@ async function buildComponent(componentDir) {
   }
   try {
     const jsSource = await promises.readFile(
-      path11.join(componentDir, "index.jsx"),
+      path3.join(componentDir, "index.jsx"),
       "utf-8"
     );
     const jsCompiled = compileJS(jsSource);
-    await promises.writeFile(path11.join(distDir, "index.js"), jsCompiled);
+    await promises.writeFile(path3.join(distDir, "index.js"), jsCompiled);
   } catch (error) {
     result.success = false;
     result.details?.push({
@@ -11062,11 +11075,9 @@ async function buildComponent(componentDir) {
       content: String(error)
     });
   }
-  const apiService = await createApiService();
-  const globalAssetLibrary = await apiService.getGlobalAssetLibrary();
-  const globalSourceCodeCss = globalAssetLibrary.css.original;
+  const globalSourceCodeCss = await getGlobalCss(useLocalGlobalCss);
   try {
-    const cssPath = path11.join(componentDir, "index.css");
+    const cssPath = path3.join(componentDir, "index.css");
     const cssFileExists = await fileExists(cssPath);
     if (cssFileExists) {
       const cssSource = await promises.readFile(cssPath, "utf-8");
@@ -11075,7 +11086,7 @@ async function buildComponent(componentDir) {
         globalSourceCodeCss
       );
       const cssTranspiled = await transformCss(cssCompiled);
-      await promises.writeFile(path11.join(distDir, "index.css"), cssTranspiled);
+      await promises.writeFile(path3.join(distDir, "index.css"), cssTranspiled);
     }
   } catch (error) {
     result.success = false;
@@ -11086,57 +11097,28 @@ async function buildComponent(componentDir) {
   }
   return result;
 }
-function reportResults(results, title, itemLabel = "Component") {
-  results.sort((a, b) => a.itemName.localeCompare(b.itemName));
-  const successful = results.filter((r) => r.success).length;
-  const failed = results.filter((r) => !r.success).length;
-  const hasDetails = results.some((r) => (r.details?.length ?? 0) > 0);
-  const succeededText = failed === 0 ? chalk2.green(`${successful} succeeded`) : `${successful} succeeded`;
-  const failedText = failed > 0 ? chalk2.red(`${failed} failed`) : chalk2.dim(`${failed} failed`);
-  const summary = `${succeededText}, ${failedText}`;
-  if (results.length > 0) {
-    const tableData = [
-      hasDetails ? [chalk2.bold(title), "", ""] : [chalk2.bold(title), ""],
-      hasDetails ? [itemLabel, "Status", "Details"] : [itemLabel, "Status"],
-      ...results.map(
-        (r) => hasDetails ? [
-          r.itemName,
-          r.success ? chalk2.green("Success") : chalk2.red("Failed"),
-          r.details?.map(
-            (d2) => d2.heading ? `${chalk2.underline(d2.heading)}:
-${d2.content}` : d2.content
-          ).join("\n\n")
-        ] : [
-          r.itemName,
-          r.success ? chalk2.green("Success") : chalk2.red("Failed")
-        ]
-      ),
-      hasDetails ? ["SUMMARY", "", summary] : ["SUMMARY", summary]
-    ];
-    p9.log.info(
-      table(tableData, {
-        spanningCells: [
-          {
-            row: 0,
-            col: 0,
-            colSpan: hasDetails ? 3 : 2,
-            alignment: "center"
-          },
-          {
-            row: results.length + 2,
-            col: 0,
-            colSpan: hasDetails ? 2 : 1,
-            alignment: hasDetails ? "right" : "left"
-          }
-        ],
-        columns: {
-          // Limit the width of the details column for improved readability of long details.
-          2: { width: 100, wrapWord: true }
-        }
-      })
+
+// src/utils/command-helpers.ts
+var ALL_COMPONENTS_SELECTOR = "_allComponents";
+function validateComponentOptions(options) {
+  if (options.components && options.all) {
+    throw new Error(
+      "Cannot use --all and --components options together. Please use either:\n   \u2022 --components to specify specific components, or\n   \u2022 --all to process everything."
     );
   }
 }
+function updateConfigFromOptions(options) {
+  if (options.clientId) setConfig({ clientId: options.clientId });
+  if (options.clientSecret) setConfig({ clientSecret: options.clientSecret });
+  if (options.siteUrl) setConfig({ siteUrl: options.siteUrl });
+  if (options.dir) setConfig({ componentDir: options.dir });
+  if (options.scope) setConfig({ scope: options.scope });
+  if (options.all) setConfig({ all: options.all });
+  if (options.verbose) setConfig({ verbose: true });
+}
+function pluralizeComponent(count) {
+  return count === 1 ? "component" : "components";
+}
 
 // ../node_modules/@isaacs/balanced-match/dist/esm/index.js
 var balanced = (a, b, str) => {
@@ -17757,11 +17739,11 @@ async function findComponentDirectories(baseDir) {
     const namedYmls = await glob(`${baseDir}/**/*.component.yml`);
     const allComponentPaths = [...standardYmls, ...namedYmls];
     const uniqueDirs = new Set(
-      allComponentPaths.map((filePath) => path11.dirname(filePath))
+      allComponentPaths.map((filePath) => path3.dirname(filePath))
     );
     let componentDirs = Array.from(uniqueDirs).sort();
     let sdcs = await glob(`${baseDir}/**/*.twig`);
-    sdcs = sdcs.map((sdc) => path11.dirname(sdc));
+    sdcs = sdcs.map((sdc) => path3.dirname(sdc));
     componentDirs = componentDirs.filter(
       (componentDir) => !sdcs.includes(componentDir)
     );
@@ -17772,50 +17754,333 @@ async function findComponentDirectories(baseDir) {
   }
 }
 
-// src/utils/select-local-components.ts
-async function selectLocalComponents(allFlag, message = "Select components", baseDir) {
+// src/utils/component-selector.ts
+var GLOBAL_CSS_SELECTOR = "__GLOBAL_CSS__";
+function determineGlobalCssSelection(options) {
+  if (options.cssOnly) {
+    return true;
+  }
+  if (options.skipCss) {
+    return false;
+  }
+  if (!options.includeGlobalCss) {
+    return void 0;
+  }
+  return options.globalCssDefault !== false;
+}
+async function selectLocalComponents(options) {
   const config2 = getConfig();
-  const searchDir = config2.componentDir;
-  const componentDirs = await findComponentDirectories(searchDir);
-  if (componentDirs.length === 0) {
-    p9.outro(`\u{1F4C2} No local components were found in ${searchDir}`);
-    return null;
+  const componentDir = options.componentDir || config2.componentDir;
+  const globalCssSelection = determineGlobalCssSelection(options);
+  if (options.cssOnly) {
+    return {
+      directories: [],
+      includeGlobalCss: true
+    };
   }
-  if (allFlag) {
-    p9.log.info(`Selected all components`);
-    return componentDirs;
+  const allLocalDirs = await findComponentDirectories(componentDir);
+  if (allLocalDirs.length === 0) {
+    throw new Error(`No local components were found in ${componentDir}`);
   }
-  const selectedDirs = await p9.multiselect({
-    message,
-    options: [
-      {
-        value: "_allComponents",
-        label: "All components"
-      },
-      ...componentDirs.map((dir) => ({
-        value: dir,
-        label: path11.basename(dir)
-      }))
-    ],
+  if (options.components) {
+    return selectSpecificLocalComponents(
+      options.components,
+      allLocalDirs,
+      options,
+      globalCssSelection
+    );
+  }
+  if (options.all) {
+    if (!options.skipConfirmation) {
+      const confirmed = await confirmSelection(
+        allLocalDirs.length,
+        options.confirmMessage
+      );
+      if (!confirmed) {
+        throw new Error("Operation cancelled by user");
+      }
+    }
+    p.log.info(`Selected all components`);
+    return {
+      directories: allLocalDirs,
+      includeGlobalCss: globalCssSelection
+    };
+  }
+  return selectLocalComponentsInteractive(
+    allLocalDirs,
+    options,
+    globalCssSelection
+  );
+}
+async function selectSpecificLocalComponents(componentsInput, allLocalDirs, options, globalCssSelection) {
+  const requestedNames = componentsInput.split(",").map((name) => name.trim()).filter((name) => name.length > 0);
+  const notFound = [];
+  const foundDirs = [];
+  for (const requestedName of requestedNames) {
+    const dir = allLocalDirs.find((d2) => path3.basename(d2) === requestedName);
+    if (dir) {
+      foundDirs.push(dir);
+    } else {
+      notFound.push(requestedName);
+    }
+  }
+  if (notFound.length > 0) {
+    const message = options.notFoundMessage || `The following component(s) were not found locally: ${notFound.join(", ")}`;
+    throw new Error(message);
+  }
+  if (!options.skipConfirmation) {
+    const confirmed = await confirmSelection(
+      foundDirs.length,
+      options.confirmMessage
+    );
+    if (!confirmed) {
+      throw new Error("Operation cancelled by user");
+    }
+  }
+  return {
+    directories: foundDirs,
+    includeGlobalCss: globalCssSelection
+  };
+}
+async function selectLocalComponentsInteractive(allLocalDirs, options, globalCssSelection) {
+  const multiSelectOptions = [
+    {
+      value: ALL_COMPONENTS_SELECTOR,
+      label: "All components"
+    }
+  ];
+  if (options.includeGlobalCss) {
+    multiSelectOptions.push({
+      value: GLOBAL_CSS_SELECTOR,
+      label: "Global CSS"
+    });
+  }
+  multiSelectOptions.push(
+    ...allLocalDirs.map((dir) => ({
+      value: dir,
+      label: path3.basename(dir)
+    }))
+  );
+  const selectedItems = await p.multiselect({
+    message: options.selectMessage || "Select items",
+    options: multiSelectOptions,
+    initialValues: options.includeGlobalCss && options.globalCssDefault !== false ? [GLOBAL_CSS_SELECTOR] : [],
     required: true
   });
-  if (p9.isCancel(selectedDirs)) {
-    p9.cancel("Operation cancelled");
-    return null;
+  if (p.isCancel(selectedItems)) {
+    throw new Error("Operation cancelled by user");
+  }
+  const includesAllComponents = selectedItems.includes(
+    ALL_COMPONENTS_SELECTOR
+  );
+  const includesGlobalCss = selectedItems.includes(
+    GLOBAL_CSS_SELECTOR
+  );
+  const finalDirs = includesAllComponents ? allLocalDirs : selectedItems.filter(
+    (item) => item !== ALL_COMPONENTS_SELECTOR && item !== GLOBAL_CSS_SELECTOR
+  );
+  if (!options.skipConfirmation) {
+    const confirmed = await confirmSelection(
+      finalDirs.length,
+      options.confirmMessage
+    );
+    if (!confirmed) {
+      throw new Error("Operation cancelled by user");
+    }
+  }
+  const finalGlobalCss = options.includeGlobalCss ? includesGlobalCss : globalCssSelection;
+  return {
+    directories: finalDirs,
+    includeGlobalCss: finalGlobalCss
+  };
+}
+async function selectRemoteComponents(allComponents, options) {
+  const componentCount = Object.keys(allComponents).length;
+  const globalCssSelection = determineGlobalCssSelection(options);
+  if (options.cssOnly) {
+    return {
+      components: {},
+      includeGlobalCss: true
+    };
+  }
+  if (componentCount === 0) {
+    throw new Error("No components found");
+  }
+  if (options.all) {
+    if (!options.skipConfirmation) {
+      const confirmed = await confirmSelection(
+        componentCount,
+        options.confirmMessage
+      );
+      if (!confirmed) {
+        throw new Error("Operation cancelled by user");
+      }
+    }
+    return {
+      components: allComponents,
+      includeGlobalCss: globalCssSelection
+    };
+  }
+  if (options.components) {
+    return selectSpecificRemoteComponents(
+      options.components,
+      allComponents,
+      options,
+      globalCssSelection
+    );
+  }
+  return selectRemoteComponentsInteractive(
+    allComponents,
+    options,
+    globalCssSelection
+  );
+}
+async function selectSpecificRemoteComponents(componentsInput, allComponents, options, globalCssSelection) {
+  const requestedNames = componentsInput.split(",").map((name) => name.trim()).filter((name) => name.length > 0);
+  const notFound = [];
+  const selected = {};
+  for (const requestedName of requestedNames) {
+    const component = allComponents[requestedName];
+    if (component) {
+      selected[requestedName] = component;
+    } else {
+      notFound.push(requestedName);
+    }
+  }
+  if (notFound.length > 0) {
+    const message = options.notFoundMessage || `The following component(s) were not found: ${notFound.join(", ")}`;
+    throw new Error(message);
+  }
+  if (!options.skipConfirmation) {
+    const confirmed = await confirmSelection(
+      Object.keys(selected).length,
+      options.confirmMessage
+    );
+    if (!confirmed) {
+      throw new Error("Operation cancelled by user");
+    }
+  }
+  return {
+    components: selected,
+    includeGlobalCss: globalCssSelection
+  };
+}
+async function selectRemoteComponentsInteractive(allComponents, options, globalCssSelection) {
+  const multiSelectOptions = [
+    {
+      value: ALL_COMPONENTS_SELECTOR,
+      label: "All components"
+    }
+  ];
+  if (options.includeGlobalCss) {
+    multiSelectOptions.push({
+      value: GLOBAL_CSS_SELECTOR,
+      label: "Global CSS"
+    });
   }
-  const count = selectedDirs.includes("_allComponents") ? componentDirs.length : selectedDirs.length;
-  const confirmBuild = await p9.confirm({
-    message: `Process ${count} components`,
+  multiSelectOptions.push(
+    ...Object.keys(allComponents).map((key) => ({
+      value: allComponents[key].machineName,
+      label: `${allComponents[key].name} (${allComponents[key].machineName})`
+    }))
+  );
+  const selectedItems = await p.multiselect({
+    message: options.selectMessage || "Select items to download",
+    options: multiSelectOptions,
+    initialValues: options.includeGlobalCss && options.globalCssDefault !== false ? [GLOBAL_CSS_SELECTOR] : [],
+    required: true
+  });
+  if (p.isCancel(selectedItems)) {
+    throw new Error("Operation cancelled by user");
+  }
+  const includesAllComponents = selectedItems.includes(
+    ALL_COMPONENTS_SELECTOR
+  );
+  const includesGlobalCss = selectedItems.includes(
+    GLOBAL_CSS_SELECTOR
+  );
+  const selected = includesAllComponents ? allComponents : Object.fromEntries(
+    Object.entries(allComponents).filter(
+      ([, component]) => selectedItems.includes(component.machineName)
+    )
+  );
+  if (!options.skipConfirmation) {
+    const confirmed = await confirmSelection(
+      Object.keys(selected).length,
+      options.confirmMessage
+    );
+    if (!confirmed) {
+      throw new Error("Operation cancelled by user");
+    }
+  }
+  const finalGlobalCss = options.includeGlobalCss ? includesGlobalCss : globalCssSelection;
+  return {
+    components: selected,
+    includeGlobalCss: finalGlobalCss
+  };
+}
+async function confirmSelection(count, customMessage) {
+  const componentLabel = count === 1 ? "component" : "components";
+  const message = customMessage || `Process ${count} ${componentLabel}?`;
+  const confirmed = await p.confirm({
+    message,
     initialValue: true
   });
-  if (p9.isCancel(confirmBuild) || !confirmBuild) {
-    p9.cancel("Operation cancelled");
-    return null;
+  if (p.isCancel(confirmed) || !confirmed) {
+    return false;
   }
-  if (selectedDirs.includes("_allComponents")) {
-    return componentDirs;
+  return true;
+}
+function reportResults(results, title, itemLabel = "Component") {
+  results.sort((a, b) => a.itemName.localeCompare(b.itemName));
+  const successful = results.filter((r) => r.success).length;
+  const failed = results.filter((r) => !r.success).length;
+  const hasDetails = results.some((r) => (r.details?.length ?? 0) > 0);
+  const succeededText = failed === 0 ? chalk2.green(`${successful} succeeded`) : `${successful} succeeded`;
+  const failedText = failed > 0 ? chalk2.red(`${failed} failed`) : chalk2.dim(`${failed} failed`);
+  const summary = `${succeededText}, ${failedText}`;
+  if (results.length > 0) {
+    const tableData = [
+      hasDetails ? [chalk2.bold(title), "", ""] : [chalk2.bold(title), ""],
+      hasDetails ? [itemLabel, "Status", "Details"] : [itemLabel, "Status"],
+      ...results.map(
+        (r) => hasDetails ? [
+          r.itemName,
+          r.success ? chalk2.green("Success") : chalk2.red("Failed"),
+          r.details?.map(
+            (d2) => d2.heading ? `${chalk2.underline(d2.heading)}:
+${d2.content}` : d2.content
+          ).join("\n\n") ?? ""
+        ] : [
+          r.itemName,
+          r.success ? chalk2.green("Success") : chalk2.red("Failed")
+        ]
+      ),
+      hasDetails ? ["SUMMARY", "", summary] : ["SUMMARY", summary]
+    ];
+    p.log.info(
+      table(tableData, {
+        spanningCells: [
+          {
+            row: 0,
+            col: 0,
+            colSpan: hasDetails ? 3 : 2,
+            alignment: "center"
+          },
+          {
+            row: results.length + 2,
+            col: 0,
+            colSpan: hasDetails ? 2 : 1,
+            alignment: hasDetails ? "right" : "left"
+          }
+        ],
+        columns: {
+          // Limit the width of the details column for improved readability of long details.
+          2: { width: 100, wrapWord: true }
+        }
+      })
+    );
   }
-  return selectedDirs;
 }
 
 // src/commands/build.ts
@@ -17823,75 +18088,89 @@ function buildCommand(program2) {
   program2.command("build").description("build local components and Tailwind CSS assets").option(
     "-d, --dir <directory>",
     "Component directory to build the components in"
-  ).option("--all", "Build all components").option("--no-tailwind", "Skip Tailwind CSS building").option("--client-id <id>", "Client ID").option("--client-secret <secret>", "Client Secret").option("--site-url <url>", "Site URL").option("--verbose", "Enable verbose output").action(async (options) => {
-    p9.intro(chalk2.bold("Drupal Canvas CLI: build"));
-    const allFlag = options.all || false;
-    const skipTailwind = !options.tailwind;
-    if (options.dir) setConfig({ componentDir: options.dir });
-    if (options.clientId) setConfig({ clientId: options.clientId });
-    if (options.clientSecret)
-      setConfig({ clientSecret: options.clientSecret });
-    if (options.siteUrl) setConfig({ siteUrl: options.siteUrl });
-    if (options.verbose) setConfig({ verbose: true });
-    if (!skipTailwind) {
-      await ensureConfig(["siteUrl", "clientId", "clientSecret"]);
-    }
-    const selectedComponents = await selectLocalComponents(
-      allFlag,
-      "Select components to build"
-    );
-    if (!selectedComponents || selectedComponents.length === 0) {
-      return;
-    }
-    const componentLabelPluralized = selectedComponents.length === 1 ? "component" : "components";
-    const s1 = p9.spinner();
-    s1.start(`Building ${componentLabelPluralized}`);
-    const results = [];
-    for (const componentDir of selectedComponents) {
-      results.push(await buildComponent(componentDir));
-    }
-    s1.stop(
-      chalk2.green(
-        `Processed ${selectedComponents.length} ${componentLabelPluralized}`
-      )
-    );
-    reportResults(results, "Built components", "Component");
-    if (results.map((result) => result.success).includes(false)) {
-      process.exit(1);
-    }
-    if (skipTailwind) {
-      p9.log.info("Skipping Tailwind CSS build");
-    } else {
-      const s2 = p9.spinner();
-      s2.start("Building Tailwind CSS");
-      const tailwindResult = await buildTailwindForComponents(
-        selectedComponents
+  ).option("--all", "Build all components").option(
+    "-c, --components <names>",
+    "Specific component(s) to build (comma-separated)"
+  ).option("--no-tailwind", "Skip Tailwind CSS building").option("-y, --yes", "Skip confirmation prompts").option("--client-id <id>", "Client ID").option("--client-secret <secret>", "Client Secret").option("--site-url <url>", "Site URL").option("--verbose", "Enable verbose output").action(async (options) => {
+    try {
+      p.intro(chalk2.bold("Drupal Canvas CLI: build"));
+      validateComponentOptions(options);
+      const allFlag = options.all || options.yes && !options.components || false;
+      const skipTailwind = !options.tailwind;
+      updateConfigFromOptions(options);
+      if (!skipTailwind) {
+        await ensureConfig(["siteUrl", "clientId", "clientSecret"]);
+      }
+      const { directories: componentsToBuild } = await selectLocalComponents({
+        all: allFlag,
+        components: options.components,
+        skipConfirmation: options.yes,
+        selectMessage: "Select components to build"
+      });
+      const componentLabelPluralized = pluralizeComponent(
+        componentsToBuild.length
       );
-      s2.stop(
+      const s1 = p.spinner();
+      s1.start(`Building ${componentLabelPluralized}`);
+      const results = [];
+      for (const componentDir of componentsToBuild) {
+        results.push(await buildComponent(componentDir));
+      }
+      s1.stop(
         chalk2.green(
-          `Processed Tailwind CSS classes from ${selectedComponents.length} selected local ${componentLabelPluralized} and all online components`
+          `Processed ${componentsToBuild.length} ${componentLabelPluralized}`
         )
       );
-      reportResults([tailwindResult], "Built assets", "Asset");
-      if (!tailwindResult.success) {
-        return process.exit(1);
+      reportResults(results, "Built components", "Component");
+      if (results.map((result) => result.success).includes(false)) {
+        process.exit(1);
+      }
+      if (skipTailwind) {
+        p.log.info("Skipping Tailwind CSS build");
+      } else {
+        const s2 = p.spinner();
+        s2.start("Building Tailwind CSS");
+        const tailwindResult = await buildTailwindForComponents(
+          componentsToBuild
+        );
+        s2.stop(
+          chalk2.green(
+            `Processed Tailwind CSS classes from ${componentsToBuild.length} selected local ${componentLabelPluralized} and all online components`
+          )
+        );
+        reportResults([tailwindResult], "Built assets", "Asset");
+        if (!tailwindResult.success) {
+          return process.exit(1);
+        }
+      }
+      p.outro(`\u{1F4E6} Build completed`);
+    } catch (error) {
+      if (error instanceof Error) {
+        p.note(chalk2.red(`Error: ${error.message}`));
+      } else {
+        p.note(chalk2.red(`Unknown error: ${String(error)}`));
       }
+      process.exit(1);
     }
-    p9.outro(`\u{1F4E6} Build completed`);
   });
 }
 function downloadCommand(program2) {
-  program2.command("download").description("download components to your local filesystem").option("--client-id <id>", "Client ID").option("--client-secret <secret>", "Client Secret").option("--site-url <url>", "Site URL").option("--scope <scope>", "Scope").option("-d, --dir <directory>", "Component directory").option("-c, --component <name>", "Specific component to download").option("--all", "Download all components").option("--verbose", "Enable verbose output").action(async (options) => {
-    p9.intro(chalk2.bold("Drupal Canvas CLI: download"));
+  program2.command("download").description("download components to your local filesystem").option("--client-id <id>", "Client ID").option("--client-secret <secret>", "Client Secret").option("--site-url <url>", "Site URL").option("--scope <scope>", "Scope").option("-d, --dir <directory>", "Component directory").option(
+    "-c, --components <names>",
+    "Specific component(s) to download (comma-separated)"
+  ).option("--all", "Download all components").option("-y, --yes", "Skip all confirmation prompts").option(
+    "--skip-overwrite",
+    "Skip downloading components that already exist locally"
+  ).option("--skip-css", "Skip downloading global CSS").option("--css-only", "Download only global CSS (skip components)").option("--verbose", "Enable verbose output").action(async (options) => {
+    p.intro(chalk2.bold("Drupal Canvas CLI: download"));
     try {
-      if (options.clientId) setConfig({ clientId: options.clientId });
-      if (options.clientSecret)
-        setConfig({ clientSecret: options.clientSecret });
-      if (options.siteUrl) setConfig({ siteUrl: options.siteUrl });
-      if (options.dir) setConfig({ componentDir: options.dir });
-      if (options.all) setConfig({ all: options.all });
-      if (options.scope) setConfig({ scope: options.scope });
-      if (options.verbose) setConfig({ verbose: true });
+      validateComponentOptions(options);
+      if (options.skipCss && options.cssOnly) {
+        throw new Error(
+          "Cannot use both --skip-css and --css-only flags together"
+        );
+      }
+      updateConfigFromOptions(options);
       await ensureConfig([
         "siteUrl",
         "clientId",
@@ -17901,77 +18180,52 @@ function downloadCommand(program2) {
       ]);
       const config2 = getConfig();
       const apiService = await createApiService();
-      const s = p9.spinner();
-      s.start("Fetching components");
-      const components = await apiService.listComponents();
-      const {
-        css: { original: globalCss }
-      } = await apiService.getGlobalAssetLibrary();
-      if (Object.keys(components).length === 0) {
-        s.stop("No components found");
-        p9.outro("Download cancelled - no components were found");
-        return;
-      }
-      s.stop(`Found ${Object.keys(components).length} components`);
-      let componentsToDownload = {};
-      if (options.all) {
-        componentsToDownload = components;
-      } else if (options.component) {
-        const component = Object.values(components).find(
-          (c) => c.machineName === options.component || c.name === options.component
-        );
-        if (!component) {
-          p9.note(chalk2.red(`Component "${options.component}" not found`));
-          p9.outro("Download cancelled");
-          return;
-        }
-        componentsToDownload = { component };
+      let components = {};
+      let globalCss;
+      const s = p.spinner();
+      if (options.cssOnly) {
+        s.start("Fetching global CSS");
+        const {
+          css: { original }
+        } = await apiService.getGlobalAssetLibrary();
+        globalCss = original;
+        s.stop("Global CSS fetched");
       } else {
-        const selectedComponents = await p9.multiselect({
-          message: "Select components to download",
-          options: [
-            {
-              value: "_allComponents",
-              label: "All components"
-            },
-            ...Object.keys(components).map((key) => ({
-              value: components[key].machineName,
-              label: `${components[key].name} (${components[key].machineName})`
-            }))
-          ],
-          required: true
-        });
-        if (p9.isCancel(selectedComponents)) {
-          p9.cancel("Operation cancelled");
+        s.start("Fetching components and global CSS");
+        const [fetchedComponents, globalAssetLibrary] = await Promise.all([
+          apiService.listComponents(),
+          apiService.getGlobalAssetLibrary()
+        ]);
+        components = fetchedComponents;
+        globalCss = globalAssetLibrary.css.original;
+        if (Object.keys(components).length === 0) {
+          s.stop("No components found");
+          p.outro("Download cancelled - no components were found");
           return;
         }
-        if (selectedComponents.includes("_allComponents")) {
-          componentsToDownload = components;
-        } else {
-          componentsToDownload = Object.fromEntries(
-            Object.entries(components).filter(
-              ([, component]) => selectedComponents.includes(
-                component.machineName
-              )
-            )
-          );
-        }
-      }
-      const componentPluralized = `component${Object.keys(componentsToDownload).length > 1 ? "s" : ""}`;
-      const confirmDownload = await p9.confirm({
-        message: `Download ${Object.keys(componentsToDownload).length} ${componentPluralized} to ${config2.componentDir}?`,
-        initialValue: true
+        s.stop(`Found ${Object.keys(components).length} components`);
+      }
+      const allFlag = options.all || options.yes && !options.components || false;
+      const { components: componentsToDownload, includeGlobalCss } = await selectRemoteComponents(components, {
+        all: allFlag,
+        components: options.components,
+        skipConfirmation: options.yes,
+        skipCss: options.skipCss,
+        cssOnly: options.cssOnly,
+        includeGlobalCss: !options.skipCss,
+        globalCssDefault: true,
+        selectMessage: "Select items to download",
+        confirmMessage: `Download to ${config2.componentDir}?`
       });
-      if (p9.isCancel(confirmDownload) || !confirmDownload) {
-        p9.cancel("Operation cancelled");
-        return;
-      }
+      const componentCount = Object.keys(componentsToDownload).length;
+      const componentPluralized = pluralizeComponent(componentCount);
       const results = [];
-      s.start(`Downloading ${componentPluralized}`);
+      const downloadMessage = options.cssOnly ? "Downloading global CSS" : componentCount > 0 ? `Downloading ${componentPluralized}` : "Processing request";
+      s.start(downloadMessage);
       for (const key in componentsToDownload) {
         const component = componentsToDownload[key];
         try {
-          const componentDir = path11.join(
+          const componentDir = path3.join(
             config2.componentDir,
             component.machineName
           );
@@ -17979,13 +18233,27 @@ function downloadCommand(program2) {
           if (dirExists) {
             const files = await fs2.readdir(componentDir);
             if (files.length > 0) {
-              const confirmDelete = await p9.confirm({
-                message: `The "${componentDir}" directory is not empty. Are you sure you want to delete and overwrite this directory?`,
-                initialValue: true
-              });
-              if (p9.isCancel(confirmDelete) || !confirmDelete) {
-                p9.cancel("Operation cancelled");
-                process.exit(0);
+              if (options.skipOverwrite) {
+                results.push({
+                  itemName: component.machineName,
+                  success: true,
+                  details: [
+                    {
+                      content: "Skipped (already exists)"
+                    }
+                  ]
+                });
+                continue;
+              }
+              if (!options.yes) {
+                const confirmDelete = await p.confirm({
+                  message: `The "${componentDir}" directory is not empty. Are you sure you want to delete and overwrite this directory?`,
+                  initialValue: true
+                });
+                if (p.isCancel(confirmDelete) || !confirmDelete) {
+                  p.cancel("Operation cancelled");
+                  process.exit(0);
+                }
               }
             }
           }
@@ -18002,20 +18270,20 @@ function downloadCommand(program2) {
             slots: component.slots || {}
           };
           await fs2.writeFile(
-            path11.join(componentDir, `component.yml`),
+            path3.join(componentDir, `component.yml`),
             yaml__default.dump(metadata),
             "utf-8"
           );
           if (component.sourceCodeJs) {
             await fs2.writeFile(
-              path11.join(componentDir, `index.jsx`),
+              path3.join(componentDir, `index.jsx`),
               component.sourceCodeJs,
               "utf-8"
             );
           }
           if (component.sourceCodeCss) {
             await fs2.writeFile(
-              path11.join(componentDir, `index.css`),
+              path3.join(componentDir, `index.css`),
               component.sourceCodeCss,
               "utf-8"
             );
@@ -18036,16 +18304,15 @@ function downloadCommand(program2) {
           });
         }
       }
-      s.stop(
-        chalk2.green(
-          `Processed ${Object.keys(componentsToDownload).length} ${componentPluralized}`
-        )
-      );
-      reportResults(results, "Downloaded components", "Component");
-      if (globalCss) {
+      const successMessage = options.cssOnly && componentCount === 0 ? "Global CSS download completed" : `Processed ${componentCount} ${componentPluralized}`;
+      s.stop(chalk2.green(successMessage));
+      if (componentCount > 0) {
+        reportResults(results, "Downloaded components", "Component");
+      }
+      if (includeGlobalCss && typeof globalCss === "string") {
         let globalCssResult;
         try {
-          const globalCssPath = path11.join(config2.componentDir, "global.css");
+          const globalCssPath = path3.join(config2.componentDir, "global.css");
           await fs2.writeFile(globalCssPath, globalCss, "utf-8");
           globalCssResult = {
             itemName: "global.css",
@@ -18065,12 +18332,13 @@ function downloadCommand(program2) {
         }
         reportResults([globalCssResult], "Downloaded assets", "Asset");
       }
-      p9.outro(`\u2B07\uFE0F Download command completed`);
+      const outroMessage = options.cssOnly && componentCount === 0 ? "\u2B07\uFE0F Global CSS downloaded successfully" : includeGlobalCss && componentCount > 0 ? "\u2B07\uFE0F Components and global CSS downloaded successfully" : componentCount > 0 ? "\u2B07\uFE0F Components downloaded successfully" : "\u2B07\uFE0F Download command completed";
+      p.outro(outroMessage);
     } catch (error) {
       if (error instanceof Error) {
-        p9.note(chalk2.red(`Error: ${error.message}`));
+        p.note(chalk2.red(`Error: ${error.message}`));
       } else {
-        p9.note(chalk2.red(`Unknown error: ${String(error)}`));
+        p.note(chalk2.red(`Unknown error: ${String(error)}`));
       }
       process.exit(1);
     }
@@ -18084,7 +18352,7 @@ function scaffoldCommand(program2) {
     "-d, --dir <directory>",
     "Component directory to create component in"
   ).option("--verbose", "Enable verbose output").action(async (options) => {
-    p9.intro(chalk2.bold("Drupal Canvas CLI: scaffold"));
+    p.intro(chalk2.bold("Drupal Canvas CLI: scaffold"));
     try {
       if (options.dir) setConfig({ componentDir: options.dir });
       if (options.verbose) setConfig({ verbose: options.verbose });
@@ -18092,7 +18360,7 @@ function scaffoldCommand(program2) {
       const baseDir = config2.componentDir;
       let componentName = options.name;
       if (!componentName) {
-        const name = await p9.text({
+        const name = await p.text({
           message: "Enter the component name",
           placeholder: "my-component",
           validate: (value) => {
@@ -18102,57 +18370,57 @@ function scaffoldCommand(program2) {
             return;
           }
         });
-        if (p9.isCancel(name)) {
-          p9.cancel("Operation cancelled");
+        if (p.isCancel(name)) {
+          p.cancel("Operation cancelled");
           return;
         }
         componentName = name;
       }
-      const componentDir = path11.join(baseDir, componentName);
-      const s = p9.spinner();
+      const componentDir = path3.join(baseDir, componentName);
+      const s = p.spinner();
       s.start(`Creating component "${componentName}"`);
       try {
         await fs2.mkdir(componentDir, { recursive: true });
-        const templateDir = path11.join(
-          path11.dirname(new URL(import.meta.url).pathname),
+        const templateDir = path3.join(
+          path3.dirname(new URL(import.meta.url).pathname),
           "templates/hello-world"
         );
         const files = await fs2.readdir(templateDir);
         const newDirFiles = await fs2.readdir(componentDir);
         if (newDirFiles.length > 0) {
-          const confirmDelete = await p9.confirm({
+          const confirmDelete = await p.confirm({
             message: `The "${componentDir}" directory is not empty. Do you want to proceed and potentially overwrite existing files?`,
             initialValue: true
           });
-          if (p9.isCancel(confirmDelete) || !confirmDelete) {
-            p9.cancel("Operation cancelled");
+          if (p.isCancel(confirmDelete) || !confirmDelete) {
+            p.cancel("Operation cancelled");
             process.exit(0);
           }
         }
         for (const file of files) {
-          const srcPath = path11.join(templateDir, file);
-          const destPath = path11.join(componentDir, file);
+          const srcPath = path3.join(templateDir, file);
+          const destPath = path3.join(componentDir, file);
           let content = await fs2.readFile(srcPath, "utf-8");
           const { pascalCaseName, className, displayName, machineName } = generateComponentNameFormats(componentName);
           content = content.replace(/HelloWorld/g, pascalCaseName).replace(/hello-world-component/g, className).replace(/Hello World/g, displayName).replace(/hello_world/g, machineName);
           await fs2.writeFile(destPath, content, "utf-8");
         }
         s.stop(chalk2.green(`Created component "${componentName}"`));
-        p9.note(`Component "${componentName}" has been created:
+        p.note(`Component "${componentName}" has been created:
 - Directory: ${componentDir}
-- Component metadata: ${path11.join(componentDir, `component.yml`)}
-- Source file: ${path11.join(componentDir, `index.jsx`)}
-- CSS file: ${path11.join(componentDir, `index.css`)}`);
-        p9.outro("\u{1F3D7}\uFE0F Scaffold command completed");
+- Component metadata: ${path3.join(componentDir, `component.yml`)}
+- Source file: ${path3.join(componentDir, `index.jsx`)}
+- CSS file: ${path3.join(componentDir, `index.css`)}`);
+        p.outro("\u{1F3D7}\uFE0F Scaffold command completed");
       } catch (error) {
         s.stop(chalk2.red(`Failed to create component "${componentName}"`));
         throw error;
       }
     } catch (error) {
       if (error instanceof Error) {
-        p9.note(chalk2.red(`Error: ${error.message}`));
+        p.note(chalk2.red(`Error: ${error.message}`));
       } else {
-        p9.note(chalk2.red(`Unknown error: ${String(error)}`));
+        p.note(chalk2.red(`Unknown error: ${String(error)}`));
       }
       process.exit(1);
     }
@@ -18220,20 +18488,20 @@ var getDataDependenciesFromAst = (ast) => ast.program.body.filter((d2) => d2.typ
 async function processComponentFiles(componentDir) {
   const metadataPath = await findMetadataPath(componentDir);
   const metadata = await readComponentMetadata(metadataPath);
-  const distDir = path11.join(componentDir, "dist");
+  const distDir = path3.join(componentDir, "dist");
   const sourceCodeJs = await promises.readFile(
-    path11.join(componentDir, "index.jsx"),
+    path3.join(componentDir, "index.jsx"),
     "utf-8"
   );
-  const compiledJs = await promises.readFile(path11.join(distDir, "index.js"), "utf-8");
+  const compiledJs = await promises.readFile(path3.join(distDir, "index.js"), "utf-8");
   let sourceCodeCss = "";
   let compiledCss = "";
   try {
     sourceCodeCss = await promises.readFile(
-      path11.join(componentDir, "index.css"),
+      path3.join(componentDir, "index.css"),
       "utf-8"
     );
-    compiledCss = await promises.readFile(path11.join(distDir, "index.css"), "utf-8");
+    compiledCss = await promises.readFile(path3.join(distDir, "index.css"), "utf-8");
   } catch {
   }
   return {
@@ -18245,7 +18513,7 @@ async function processComponentFiles(componentDir) {
   };
 }
 async function findMetadataPath(componentDir) {
-  const metadataPath = path11.join(componentDir, "component.yml");
+  const metadataPath = path3.join(componentDir, "component.yml");
   try {
     await promises.access(metadataPath);
     return metadataPath;
@@ -18266,10 +18534,10 @@ async function readComponentMetadata(filePath) {
     }
     const metadata = rawMetadata;
     if (!metadata.name) {
-      metadata.name = path11.basename(path11.dirname(filePath));
+      metadata.name = path3.basename(path3.dirname(filePath));
     }
     if (!metadata.machineName) {
-      metadata.machineName = path11.basename(path11.dirname(filePath));
+      metadata.machineName = path3.basename(path3.dirname(filePath));
     }
     if (!metadata.slots || typeof metadata.slots !== "object") {
       metadata.slots = {};
@@ -18347,12 +18615,12 @@ async function processInPool(items, processor, concurrency = 10) {
   }
   return results.sort((a, b) => a.index - b.index);
 }
-function createProgressCallback(spinner5, operation, total) {
+function createProgressCallback(spinner6, operation, total) {
   let completed = 0;
   return () => {
     completed++;
     const percentage = Math.round(completed / total * 100);
-    spinner5.message(`${operation} (${completed}/${total} - ${percentage}%)`);
+    spinner6.message(`${operation} (${completed}/${total} - ${percentage}%)`);
   };
 }
 
@@ -18436,19 +18704,21 @@ async function uploadComponents(uploadTasks, apiService, onProgress) {
   });
 }
 function uploadCommand(program2) {
-  program2.command("upload").description("build and upload local components and global CSS assets").option("--client-id <id>", "Client ID").option("--client-secret <secret>", "Client Secret").option("--site-url <url>", "Site URL").option("--scope <scope>", "Scope").option("-d, --dir <directory>", "Component directory").option("--all", "Upload all components").option("--verbose", "Verbose output").option("--no-tailwind", "Skip Tailwind CSS building").action(async (options) => {
-    const allFlag = options.all || false;
+  program2.command("upload").description("build and upload local components and global CSS assets").option("--client-id <id>", "Client ID").option("--client-secret <secret>", "Client Secret").option("--site-url <url>", "Site URL").option("--scope <scope>", "Scope").option("-d, --dir <directory>", "Component directory").option(
+    "-c, --components <names>",
+    "Specific component(s) to upload (comma-separated)"
+  ).option("--all", "Upload all components").option("-y, --yes", "Skip confirmation prompts").option("--verbose", "Verbose output").option("--no-tailwind", "Skip Tailwind CSS building").option("--skip-css", "Skip global CSS upload").option("--css-only", "Upload only global CSS (skip components)").action(async (options) => {
+    const allFlag = options.all || options.yes && !options.components || false;
     const skipTailwind = !options.tailwind;
     try {
-      p9.intro(chalk2.bold("Drupal Canvas CLI: upload"));
-      if (options.clientId) setConfig({ clientId: options.clientId });
-      if (options.clientSecret)
-        setConfig({ clientSecret: options.clientSecret });
-      if (options.siteUrl) setConfig({ siteUrl: options.siteUrl });
-      if (options.dir) setConfig({ componentDir: options.dir });
-      if (options.scope) setConfig({ scope: options.scope });
-      if (options.all) setConfig({ all: options.all });
-      if (options.verbose) setConfig({ verbose: options.verbose });
+      p.intro(chalk2.bold("Drupal Canvas CLI: upload"));
+      validateComponentOptions(options);
+      if (options.skipCss && options.cssOnly) {
+        throw new Error(
+          "Cannot use both --skip-css and --css-only flags together"
+        );
+      }
+      updateConfigFromOptions(options);
       await ensureConfig([
         "siteUrl",
         "clientId",
@@ -18457,28 +18727,42 @@ function uploadCommand(program2) {
         "componentDir"
       ]);
       const config2 = getConfig();
-      const componentsToUpload = await selectLocalComponents(
-        allFlag,
-        "Select components to upload"
-      );
-      if (!componentsToUpload || componentsToUpload.length === 0) {
-        return;
-      }
+      const { directories: componentsToUpload, includeGlobalCss } = await selectLocalComponents({
+        all: allFlag,
+        components: options.components,
+        skipConfirmation: options.yes,
+        skipCss: options.skipCss,
+        cssOnly: options.cssOnly,
+        includeGlobalCss: !options.skipCss,
+        globalCssDefault: true,
+        selectMessage: "Select items to upload"
+      });
       const apiService = await createApiService();
-      const componentResults = await getBuildAndUploadResults(
-        componentsToUpload,
-        apiService
-      );
-      reportResults(componentResults, "Uploaded components", "Component");
+      let componentResults = [];
+      if (!options.cssOnly && componentsToUpload.length > 0) {
+        componentResults = await getBuildAndUploadResults(
+          componentsToUpload,
+          apiService,
+          includeGlobalCss ?? false
+        );
+        reportResults(componentResults, "Uploaded components", "Component");
+        if (componentResults.some((result) => !result.success)) {
+          process.exit(1);
+        }
+      }
       if (skipTailwind) {
-        p9.log.info("Skipping Tailwind CSS build");
+        p.log.info("Skipping Tailwind CSS build");
       } else {
-        const s2 = p9.spinner();
+        const s2 = p.spinner();
         s2.start("Building Tailwind CSS");
         const tailwindResult = await buildTailwindForComponents(
-          componentsToUpload
+          componentsToUpload,
+          includeGlobalCss
+          // Use local CSS if includeGlobalCss is true
+        );
+        const componentLabelPluralized = pluralizeComponent(
+          componentsToUpload.length
         );
-        const componentLabelPluralized = componentsToUpload.length === 1 ? "component" : "components";
         s2.stop(
           chalk2.green(
             `Processed Tailwind CSS classes from ${componentsToUpload.length} selected local ${componentLabelPluralized} and all online components`
@@ -18486,23 +18770,29 @@ function uploadCommand(program2) {
         );
         if (!tailwindResult.success && tailwindResult.details) {
           reportResults([tailwindResult], "Built assets", "Asset");
-          p9.note(
+          p.note(
             chalk2.red(`Tailwind build failed, global assets upload aborted.`)
           );
         } else {
-          const globalCssResult = await uploadGlobalAssetLibrary(
-            apiService,
-            config2.componentDir
-          );
-          reportResults([globalCssResult], "Uploaded assets", "Asset");
+          if (includeGlobalCss) {
+            const globalCssResult = await uploadGlobalAssetLibrary(
+              apiService,
+              config2.componentDir
+            );
+            reportResults([globalCssResult], "Uploaded assets", "Asset");
+          } else {
+            p.log.info("Skipping global CSS upload");
+          }
         }
       }
-      p9.outro("\u2B06\uFE0F Upload command completed");
+      const componentCount = componentsToUpload.length;
+      const outroMessage = options.cssOnly && componentCount === 0 ? "\u2B06\uFE0F Global CSS uploaded successfully" : includeGlobalCss && componentCount > 0 ? "\u2B06\uFE0F Components and global CSS uploaded successfully" : componentCount > 0 ? "\u2B06\uFE0F Components uploaded successfully" : "\u2B06\uFE0F Upload command completed";
+      p.outro(outroMessage);
     } catch (error) {
       if (error instanceof Error) {
-        p9.note(chalk2.red(`Error: ${error.message}`));
+        p.note(chalk2.red(`Error: ${error.message}`));
       } else {
-        p9.note(chalk2.red(`Unknown error: ${String(error)}`));
+        p.note(chalk2.red(`Unknown error: ${String(error)}`));
       }
       process.exit(1);
     }
@@ -18513,11 +18803,11 @@ async function prepareComponentsForUpload(successfulBuilds, componentsToUpload)
   const failed = [];
   for (const buildResult of successfulBuilds) {
     const dir = buildResult.itemName ? componentsToUpload.find(
-      (d2) => path11.basename(d2) === buildResult.itemName
+      (d2) => path3.basename(d2) === buildResult.itemName
     ) : void 0;
     if (!dir) continue;
     try {
-      const componentName = path11.basename(dir);
+      const componentName = path3.basename(dir);
       const { sourceCodeJs, compiledJs, sourceCodeCss, compiledCss, metadata } = await processComponentFiles(dir);
       if (!metadata) {
         throw new Error("Invalid metadata file");
@@ -18534,7 +18824,7 @@ async function prepareComponentsForUpload(successfulBuilds, componentsToUpload)
         importedJsComponents = getImportsFromAst(ast, scope);
         dataDependencies = getDataDependenciesFromAst(ast);
       } catch (error) {
-        p9.note(chalk2.red(`Error: ${error}`));
+        p.note(chalk2.red(`Error: ${error}`));
       }
       const componentPayloadArg = {
         metadata,
@@ -18570,32 +18860,35 @@ async function prepareComponentsForUpload(successfulBuilds, componentsToUpload)
   }
   return { prepared, failed };
 }
-async function getBuildAndUploadResults(componentsToUpload, apiService) {
+async function getBuildAndUploadResults(componentsToUpload, apiService, includeGlobalCss) {
   const results = [];
-  const spinner5 = p9.spinner();
-  spinner5.start("Building components");
-  const buildResults = await buildSelectedComponents(componentsToUpload);
+  const spinner6 = p.spinner();
+  spinner6.start("Building components");
+  const buildResults = await buildSelectedComponents(
+    componentsToUpload,
+    includeGlobalCss
+  );
   const successfulBuilds = buildResults.filter((build) => build.success);
   const failedBuilds = buildResults.filter((build) => !build.success);
   if (successfulBuilds.length === 0) {
     const message = "All component builds failed.";
-    spinner5.stop(chalk2.red(message));
+    spinner6.stop(chalk2.red(message));
     return failedBuilds;
   }
-  spinner5.message("Preparing components for upload");
+  spinner6.message("Preparing components for upload");
   const { prepared: preparedComponents, failed: preparationFailures } = await prepareComponentsForUpload(successfulBuilds, componentsToUpload);
   results.push(...preparationFailures);
   if (preparedComponents.length === 0) {
-    spinner5.stop(chalk2.red("All component preparations failed"));
+    spinner6.stop(chalk2.red("All component preparations failed"));
     return [...results, ...failedBuilds];
   }
   const machineNames = preparedComponents.map((c) => c.machineName);
   const existenceProgress = createProgressCallback(
-    spinner5,
+    spinner6,
     "Checking component existence",
     machineNames.length
   );
-  spinner5.message("Checking component existence");
+  spinner6.message("Checking component existence");
   const existenceResults = await checkComponentsExist(
     machineNames,
     apiService,
@@ -18607,11 +18900,11 @@ async function getBuildAndUploadResults(componentsToUpload, apiService) {
     shouldUpdate: existenceResults[index]?.exists || false
   }));
   const uploadProgress = createProgressCallback(
-    spinner5,
+    spinner6,
     "Uploading components",
     uploadTasks.length
   );
-  spinner5.message("Uploading components");
+  spinner6.message("Uploading components");
   const uploadResults = await uploadComponents(
     uploadTasks,
     apiService,
@@ -18644,34 +18937,33 @@ async function getBuildAndUploadResults(componentsToUpload, apiService) {
   }
   results.push(...failedBuilds);
   const componentLabelPluralized = results.length === 1 ? "component" : "components";
-  spinner5.stop(
+  spinner6.stop(
     chalk2.green(`Processed ${results.length} ${componentLabelPluralized}`)
   );
   return results;
 }
-async function buildSelectedComponents(componentDirs) {
+async function buildSelectedComponents(componentDirs, useLocalGlobalCss = true) {
   const buildResults = [];
   for (const dir of componentDirs) {
-    buildResults.push(await buildComponent(dir));
+    buildResults.push(await buildComponent(dir, useLocalGlobalCss));
   }
   return buildResults;
 }
 async function uploadGlobalAssetLibrary(apiService, componentDir) {
   try {
-    const distDir = path11.join(componentDir, "dist");
-    const globalCompiledCssPath = path11.join(distDir, "index.css");
+    const distDir = path3.join(componentDir, "dist");
+    const globalCompiledCssPath = path3.join(distDir, "index.css");
     const globalCompiledCssExists = await fileExists(globalCompiledCssPath);
     if (globalCompiledCssExists) {
       const globalCompiledCss = await fs2.readFile(
-        path11.join(distDir, "index.css"),
+        path3.join(distDir, "index.css"),
         "utf-8"
       );
       const classNameCandidateIndexFile = await fs2.readFile(
-        path11.join(distDir, "index.js"),
+        path3.join(distDir, "index.js"),
         "utf-8"
       );
-      const current = await apiService.getGlobalAssetLibrary();
-      const originalCss = current.css.original;
+      const originalCss = await getGlobalCss();
       await apiService.updateGlobalAssetLibrary({
         css: {
           original: originalCss,
@@ -18714,33 +19006,54 @@ function validateCommand(program2) {
   program2.command("validate").description("validate local components").option(
     "-d, --dir <directory>",
     "Component directory to validate the components in"
-  ).option("--all", "Validate all components").option("--verbose", "Enable verbose output").option(
+  ).option(
+    "-c, --components <names>",
+    "Specific component(s) to validate (comma-separated)"
+  ).option("--all", "Validate all components").option("-y, --yes", "Skip confirmation prompts").option("--verbose", "Enable verbose output").option(
     "--fix",
     "Apply available automatic fixes for linting issues",
     false
   ).action(async (options) => {
-    p9.intro(chalk2.bold("Drupal Canvas CLI: validate"));
-    const allFlag = options.all || false;
-    if (options.dir) setConfig({ componentDir: options.dir });
-    if (options.verbose) setConfig({ verbose: true });
-    const selectedComponents = await selectLocalComponents(
-      allFlag,
-      "Select components to validate"
-    );
-    if (!selectedComponents || selectedComponents.length === 0) {
-      return;
-    }
-    const results = [];
-    for (const componentDir of selectedComponents) {
-      results.push(await validateComponent(componentDir, options.fix));
-    }
-    reportResults(results, "Validation results");
-    const hasErrors = results.some((r) => !r.success);
-    if (hasErrors) {
-      p9.outro(`\u274C Validation completed with errors`);
+    try {
+      p.intro(chalk2.bold("Drupal Canvas CLI: validate"));
+      validateComponentOptions(options);
+      const allFlag = options.all || options.yes && !options.components || false;
+      updateConfigFromOptions(options);
+      const { directories: componentsToValidate } = await selectLocalComponents({
+        all: allFlag,
+        components: options.components,
+        skipConfirmation: options.yes,
+        selectMessage: "Select components to validate"
+      });
+      const componentPluralized = pluralizeComponent(
+        componentsToValidate.length
+      );
+      const s = p.spinner();
+      s.start(`Validating ${componentPluralized}`);
+      const results = [];
+      for (const componentDir of componentsToValidate) {
+        results.push(await validateComponent(componentDir, options.fix));
+      }
+      s.stop(
+        chalk2.green(
+          `Processed ${componentsToValidate.length} ${componentPluralized}`
+        )
+      );
+      reportResults(results, "Validation results", "Component");
+      const hasErrors = results.some((r) => !r.success);
+      if (hasErrors) {
+        p.outro(`\u274C Validation completed with errors`);
+        process.exit(1);
+      }
+      p.outro(`\u2705 Validation completed`);
+    } catch (error) {
+      if (error instanceof Error) {
+        p.note(chalk2.red(`Error: ${error.message}`));
+      } else {
+        p.note(chalk2.red(`Unknown error: ${String(error)}`));
+      }
       process.exit(1);
     }
-    p9.outro(`\u2705 Validation completed`);
   });
 }