@catalystsoftware/ui 1.0.15 → 1.0.16

package/dist/components/catalyst-ui/tools/monaco-sidebar.tsx

@@ -11,6 +11,45 @@ import monaco from "./monaco"
 import { STORAGE_KEY } from "./editor"
 
 const posts = [
+  {// search - include all
+    title: "search - include all",
+    content: `
+project-config.json, global-navigator-config.json, f:/DevStack/*,
+ 
+ 
+ `,
+    tags: ["monorepo", "github", "submodules"],
+  },
+  {// search - exclude all
+    title: "search - exclude all",
+    content: `
+ *.js, *.json, *.d.ts, *.js.map, *.log, *.css, *.mjs, *.md, *.cjs, *.mjs.map, **/node_modules/**, 
+ 
+ 
+ `,
+    tags: ["monorepo", "github", "submodules"],
+  },
+  {// regex cursor manipulation
+    title: "regex cursor manipulation",
+    content: `
+Highlight the Section You Want to Edit:
+
+Select the specific block of code where you want to place the cursors.
+Open the Find Widget in Selection Mode:
+
+Press Ctrl+F (or Cmd+F on macOS) to open the Find widget.
+Click on the three dots (...) on the right side of the Find widget and ensure "Find in Selection" is checked (it will limit the search to your highlighted area).
+Enable Regular Expressions:
+
+Click on the .\\* (the “Use Regular Expression” button) in the Find widget to enable regular expressions.
+Search for Lines Starting with {:
+
+Enter the pattern ^\\s\\*\\{ in the search field. This pattern matches lines that begin with { (allowing for any leading whitespace).
+Select All Matches:
+
+Press Alt+Enter (or Option+Enter on macOS) to select all occurrences. This will place a cursor at the start of each line that begins with { within your highlighted selection`,
+    tags: ["monorepo", "github", "submodules"],
+  },
   {// submodules cmds
     title: "submodules cmds",
     content: `cd apps/*
@@ -198,7 +237,7 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
     localStorage.setItem("config", config)
   }, [config])\`\`\``,
   },
-  {// generate Template Content
+  {// generate usage example
     title: "generate Template Content",
     content: `export function generateTemplateContent(
   compValue: string,
@@ -236,6 +275,181 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
 
   return \`\${simpleTemplate}\n\n\${fullTemplate}\`;
 }`,
+  },
+  { // generate usage example2
+    title: "generate usage example2", content: `
+interface PropDefinition {
+  name: string;
+  type: string;
+  default: string;
+}
+
+interface ComponentMetadata {
+  name: string;
+  value: string;
+  importPath: string;
+  multiImport: string;
+  path?: string;
+  source?: string | null;
+  usagePath?: string;
+  basicusage?: string;
+  usage?: string;
+  lofi?: null;
+  premium: boolean;
+  category: string;
+  tags: string[];
+  features: string[];
+  dependencies: string[];
+  demo?: any[];
+  props: Record<string, PropDefinition[]>;
+  desc?: string | null;
+  status?: string | null;
+  lastUpdated?: string | null;
+}
+
+interface UsageExamples {
+  basic: string;
+  advanced: string;
+}
+
+function hasChildrenProp(props: PropDefinition[]): boolean {
+  return props.some(prop => prop.name === 'children');
+}
+
+function generatePropString(props: PropDefinition[], includeChildren: boolean = true): string {
+  return props
+    .filter(prop => {
+      // Skip children prop in attribute list
+      if (prop.name === 'children') return false;
+      return true;
+    })
+    .map(prop => {
+      const propName = prop.name;
+      
+      // Handle different prop types
+      if (prop.type === 'boolean') {
+        return `${propName}={false}`;
+      } else if (prop.type.includes('function') || prop.type.includes('=>')) {
+        return `${propName}={() => {}}`;
+      } else if (prop.type.includes('React.ReactNode') || prop.type.includes('ReactNode')) {
+        return `${propName}={null}`;
+      } else if (prop.type.includes('number')) {
+        return `${propName}={0}`;
+      } else if (prop.type.includes('|')) {
+        // Enum type - use first value
+        const firstValue = prop.type.split('|')[0].trim().replace(/['"]/g, '');
+        return `${propName}="${firstValue}"`;
+      } else {
+        // Default to empty string
+        return `${propName}=""`;
+      }
+    })
+    .join('\n  ');
+}
+
+function generateUsageExamples(component: ComponentMetadata): UsageExamples {
+  const componentNames = component.multiImport.split(',').map(name => name.trim());
+  const mainComponentName = componentNames[0];
+  
+  // Check if main component has children
+  const mainComponentProps = component.props[mainComponentName] || [];
+  const hasChildren = hasChildrenProp(mainComponentProps);
+  
+  let basic = '';
+  let advanced = '';
+  
+  if (hasChildren) {
+    // Component with children - could be wrapper or complex component
+    const childComponents = componentNames.slice(1);
+    
+    if (childComponents.length > 0) {
+      // Complex component with sub-components (like DescriptionList)
+      basic = `<${mainComponentName}>\n`;
+      
+      childComponents.forEach(childComp => {
+        const childProps = component.props[childComp] || [];
+        const childHasChildren = hasChildrenProp(childProps);
+        
+        if (childHasChildren) {
+          basic += `  <${childComp}>\n  \n  </${childComp}>\n`;
+        } else {
+          basic += `  <${childComp} />\n`;
+        }
+      });
+      
+      basic += `</${mainComponentName}>`;
+      
+      // Advanced example with all props
+      advanced = `<${mainComponentName} className="">\n`;
+      
+      childComponents.forEach(childComp => {
+        const childProps = component.props[childComp] || [];
+        const childHasChildren = hasChildrenProp(childProps);
+        const propsString = generatePropString(childProps, false);
+        
+        if (childHasChildren) {
+          if (propsString) {
+            advanced += `  <${childComp}\n    ${propsString}\n  >\n  \n  </${childComp}>\n`;
+          } else {
+            advanced += `  <${childComp}>\n  \n  </${childComp}>\n`;
+          }
+        } else {
+          if (propsString) {
+            advanced += `  <${childComp}\n    ${propsString}\n  />\n`;
+          } else {
+            advanced += `  <${childComp} />\n`;
+          }
+        }
+      });
+      
+      advanced += `</${mainComponentName}>`;
+    } else {
+      // Simple wrapper component (like Card, Button with children)
+      basic = `<${mainComponentName}>\n  \n</${mainComponentName}>`;
+      
+      const propsString = generatePropString(mainComponentProps, false);
+      if (propsString) {
+        advanced = `<${mainComponentName}\n  ${propsString}\n>\n  \n</${mainComponentName}>`;
+      } else {
+        advanced = basic;
+      }
+    }
+  } else {
+    // Self-closing component (like Input, Icon)
+    basic = `<${mainComponentName} />`;
+    
+    const propsString = generatePropString(mainComponentProps, false);
+    if (propsString) {
+      advanced = `<${mainComponentName}\n  ${propsString}\n/>`;
+    } else {
+      advanced = basic;
+    }
+  }
+  
+  return {
+    basic: basic.trim(),
+    advanced: advanced.trim(),
+  };
+}
+
+// Example usage:
+function updateComponentWithGeneratedUsage(component: ComponentMetadata): ComponentMetadata {
+  const examples = generateUsageExamples(component);
+  
+  return {
+    ...component,
+    basicusage: examples.basic,
+    usage: examples.advanced,
+  };
+}
+
+// Apply to all components
+function generateAllUsageExamples(metadata: ComponentMetadata[]): ComponentMetadata[] {
+  return metadata.map(component => {
+    console.log(`📝 Generating usage for: ${component.name}`);
+    return updateComponentWithGeneratedUsage(component);
+  });
+}`
   },
   {// find and place cursor on highlighted lines
     title: "find and place cursor on highlighted lines",
@@ -251,7 +465,7 @@ then press ctrl shift L`,
     .map(word => word.charAt(0).toUpperCase() + word.slice(1))
     .join('');
 }` },
-  {// escapeTemplateContent
+  {// escape Template Content
     title: "escapeTemplateContent", content: `
 function escapeTemplateContent(content) {
   if (!content) return "";
@@ -2249,7 +2463,7 @@ export async function GetWorkSpace(context: vscode.ExtensionContext): Promise<Wo
 }
     `
   },
-  {
+  {// VSCode Regex: Place cursor on every 2nd line
     title: "VSCode Regex: Place cursor on every 2nd line", content: `1. ctrl + h - find and replace
 2. enable regex mode '.*'
 3. ^(.*)$\n.*$
@@ -2446,7 +2660,7 @@ ___Bold and italic text___
 3. Third ordered item
    1. Ordered sub-item
    2. Another ordered sub-item`,
-     CheckLists: `- [ ] First ordered item
+  CheckLists: `- [ ] First ordered item
 - [ ] Second ordered item
    - [ ] Unordered sub-item
    - [ ] Another unordered sub-item
@@ -3474,7 +3688,7 @@ Your Name - [@twitter_handle](https://twitter.com/twitter_handle) - email@email_
 </p>`,
   sectionHeader: `## <img src="https://media2.giphy.com/media/QssGEmpkyEOhBCb7e1/giphy.gif?cid=ecf05e47a0n3gi1bfqntqmob8g9aid1oyj2wr3ds3mg700bl&rid=giphy.gif" width ="25"><b> Skills</b>
 <br>`,
-badgeBuilder: `Here's a list of popular logo values for shields.io badges:
+  badgeBuilder: `Here's a list of popular logo values for shields.io badges:
 
 ![Loki AI](https://img.shields.io/badge/-Loki%20AI-7C3AED?style=flat&logo=wandb&logoColor=fff)
 ![V4 Tailwind Plugin](https://img.shields.io/badge/-V4%20Tailwind%20Plugin-06B6D4?style=flat&logo=tailwindcss&logoColor=fff)
@@ -3558,7 +3772,7 @@ badgeBuilder: `Here's a list of popular logo values for shields.io badges:
 - "logo=settings" - Settings gear
 - "logo=tool" - Tool/wrench
 `,
-chalkColorsandStuff: `
+  chalkColorsandStuff: `
 import inquirer from 'inquirer';
 import chalk from 'chalk';
 import ora from 'ora';
@@ -3584,34 +3798,6 @@ function logSuccess(message: string) {
   log(\`✔ \${message}\`, 'blue');
 }  
   `,
-  renderMenuHeader: `
-function renderMenuHeader() {
-    const header = [
-        '\n',
-        '╭────────────────────────────────────────────────────────────────────────────╮',
-        '│  \u001b[1mCATALYST UI\u001b[0m  ·  \u001b[36mINSTALL AND CONFIGURE\u001b[0m                    │',
-        '├────────────────────────────────────────────────────────────────────────────┤',
-        '│  Select a installation option:                                             │',
-        '│   1) Copy source files                                                     │',
-        '│   2) Copy for dist                                                         │',
-        '│   3) Copy free components                                                  │',
-        '│   4) Update libs                                                           │',
-        '│   5) Copy config files                                                     │',
-        '│   6) Build CLI                                                             │',
-        '╰────────────────────────────────────────────────────────────────────────────╯'
-    ];
-    for (const line of header) log(line, 'cyan');
-}`,
-  renderMenuFooter: `
-function renderMenuFooter(duration: string) {
-    const footer = [
-        '\n',
-        '╭────────────────────────────────────────────────────────────────────────────╮',
-        \`│  \u001b[32mBUILD COMPLETE\u001b[0m  —  Duration: \u001b[1m\${duration}s\u001b[0m                                     │\`,
-        '╰────────────────────────────────────────────────────────────────────────────╯\n'
-    ];
-    for (const line of footer) log(line, 'green');
-}`,
   drawBox: `
 const BOX = {
     // rounded
@@ -3777,14 +3963,17 @@ function printErrorBox(message: string) {
     console.log(chalk.red.bold(BOX.BL + BOX.H.repeat(width) + BOX.BR));
     console.log('');
 }`,
-  arrowR: `→`,
-  arrowRAlt: `➔ ➜ ➞ ➡ ⇒ ⟹`,
-  arrowL: `←`,
-  arrowLAlt: `⬅ ⇐ ⟸`,
-  arrowU: `↑`,
-  arrowUAlt: `⬆ ⇑`,
-  arrowD: `↓`,
-  arrowDAlt: `⬇ ⇓`,
+  padLine: `// Helper to pad strings for the 80-character wide box
+function padLine(text: string, width = 76) {
+  const cleanText = text.replace(/\u001b\[.*?m/g, ''); // Strip ANSI for length calc
+  return text + ' '.repeat(Math.max(0, width - cleanText.length));
+}`,
+  padLine2: `function padLine(text: string, width = 72) {
+  // Removes all ANSI escape codes to calculate real visible string length
+  const cleanText = text.replace(/[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g, '');
+  const paddingNeeded = Math.max(0, width - cleanText.length);
+  return text + ' '.repeat(paddingNeeded);
+}`,
   unorderedListHtml: `<ul><li></li></ul>`,
   orderedListHtml: `<ol><li></li></ol>`,
   rawImageURL: `https://raw.githubusercontent.com/user/repo/branch/utils/5.jpg`,
@@ -3809,145 +3998,714 @@ function printErrorBox(message: string) {
   "ocrmnavigator.bleedingEdge": true,
   "ocrmnavigator.autorunDir": "src",
 }</code><pre>`,
+  termColors: `
+const colors = {
+  // Styles
+  reset: '\x1b[0m',
+  bright: '\x1b[1m',
+  dim: '\x1b[2m',
+  italic: '\x1b[3m',
+  underline: '\x1b[4m',
+  inverse: '\x1b[7m',
+
+  // Standard Colors
+  black: '\x1b[30m',
+  red: '\x1b[31m',
+  green: '\x1b[32m',
+  yellow: '\x1b[33m',
+  blue: '\x1b[34m',
+  magenta: '\x1b[35m',
+  cyan: '\x1b[36m',
+  white: '\x1b[37m',
+  gray: '\x1b[90m',
+
+  // Bright Variants
+  brightRed: '\x1b[91m',
+  brightGreen: '\x1b[92m',
+  brightYellow: '\x1b[93m',
+  brightBlue: '\x1b[94m',
+  brightMagenta: '\x1b[95m',
+  brightCyan: '\x1b[96m',
+  brightWhite: '\x1b[97m',
+
+  // Background Colors
+  bgBlack: '\x1b[40m',
+  bgRed: '\x1b[41m',
+  bgGreen: '\x1b[42m',
+  bgYellow: '\x1b[43m',
+  bgBlue: '\x1b[44m',
+  bgMagenta: '\x1b[45m',
+  bgCyan: '\x1b[46m',
+  bgWhite: '\x1b[47m',
+};`,
   specialWeirdChars: `\`\`\`sh
-// Box Drawing Characters
-'◇'  // white diamond
-'◆'  // black diamond
-'☆'  // white star
-'○'  // white circle
-'●'  // black circle
-'★'  // black star
-'✔' // bold check
-'✓' // bold check
-'✗' // bold check
-
-// Single Line
-'─'  // horizontal line
-'│'  // vertical line
-'┌'  // top-left corner
-'┐'  // top-right corner
-'└'  // bottom-left corner
-'┘'  // bottom-right corner
-'├'  // left T-junction
-'┤'  // right T-junction
-'┬'  // top T-junction
-'┴'  // bottom T-junction
-'┼'  // cross/plus
-
-// file tree
-'├── 📂 BRANCH_TITLE/'
-'│   ├── 📄 line item ................ Description'
-'│   ├── 📄 line item 2 .............. Description' 
-'│   └── 📄 line 3 ................... Description'
-
-// Double Line
-'═'  // horizontal double
-'║'  // vertical double
-'╔'  // top-left double
-'╗'  // top-right double
-'╚'  // bottom-left double
-'╝'  // bottom-right double
-'╠'  // left T-junction double
-'╣'  // right T-junction double
-'╦'  // top T-junction double
-'╩'  // bottom T-junction double
-'╬'  // cross double
-
-// Heavy/Bold Line
-'━'  // horizontal heavy
-'┃'  // vertical heavy
-'┏'  // top-left heavy
-'┓'  // top-right heavy
-'┗'  // bottom-left heavy
-'┛'  // bottom-right heavy
-'┣'  // left T-junction heavy
-'┫'  // right T-junction heavy
-'┳'  // top T-junction heavy
-'┻'  // bottom T-junction heavy
-'╋'  // cross heavy
-
-// Mixed (single + double combinations)
-'╒'  // top-left (double horizontal, single vertical)
-'╓'  // top-left (single horizontal, double vertical)
-'╕'  // top-right (double horizontal, single vertical)
-'╖'  // top-right (single horizontal, double vertical)
-'╘'  // bottom-left (double horizontal, single vertical)
-'╙'  // bottom-left (single horizontal, double vertical)
-'╛'  // bottom-right (double horizontal, single vertical)
-'╜'  // bottom-right (single horizontal, double vertical)
-
-// Rounded Corners
-'╭'  // top-left rounded
-'╮'  // top-right rounded
-'╰'  // bottom-left rounded
-'╯'  // bottom-right rounded
-
-// Dashed/Dotted
-'┄'  // horizontal dashed (3 dots)
-'┅'  // horizontal dashed heavy
-'┆'  // vertical dashed (3 dots)
-'┇'  // vertical dashed heavy
-'┈'  // horizontal dashed (4 dots)
-'┉'  // horizontal dashed heavy (4 dots)
-'┊'  // vertical dashed (4 dots)
-'┋'  // vertical dashed heavy (4 dots)
-
-// Other Useful Characters
-'▀'  // upper half block
-'▄'  // lower half block
-'█'  // full block
-'░'  // light shade
-'▒'  // medium shade
-'▓'  // dark shade
-'▌'  // left half block
-'▐'  // right half block
-'■'  // black square
-'▪'  // white square
-'□'  // small black square
-'▫'  // small white square
-'→'  // right arrow
-'←'  // left arrow
-'↑'  // up arrow
-'↓'  // down arrow
-'⇒'  // right double arrow
-'⇐'  // left double arrow
-'•'  // bullet
-'·'  // middle dot
-'…'  // ellipsis
-'―'  // horizontal bar
-'‖'  // double vertical line 
-
-
-
-// examples
-┌───────────────────────────── VSCODE ─────────────────────────────┐
-
-└── mlops-course/
-    ├── .github/
-    │   └── workflows/
-    ├── LICENSE.md
-    ├── Makefile.js
-    ├── README.md
-    └── datasets/
-        ├── dataset.csv
-        ├── holdout.csv
-        ├── projects.csv
-        └── tags.csv
+╭───────────────────────────────────────────────────────────────────────────────────────────────────────────╮
+│           ♠             ♣               SPECIAL CHARS BUILD                 ♥                ♦            │
+├───────────────────────────────────────────────────────────────────────────────────────────────────────────┤
+│                                        Box Drawing Characters                                             │ 
+│   ◇ ────────────────────────────────────────────────────── white diamond                                  │
+│   ◆ ────────────────────────────────────────────────────── black diamond                                  │
+│   ☆ ────────────────────────────────────────────────────── white star                                     │
+│   ○  ────────────────────────────────────────────────────── white circle                                  │
+│   ●  ────────────────────────────────────────────────────── black circle                                  │
+│   ★ ────────────────────────────────────────────────────── black star                                     │
+│   ✔ ────────────────────────────────────────────────────── bold check                                     │
+│   ✓ ────────────────────────────────────────────────────── bold check                                     │
+│   ✗ ────────────────────────────────────────────────────── bold check                                     │
+│   ⚠ ────────────────────────────────────────────────────── bold check                                     │
+│   ✦   ✧  ───────────────────────────────────────────────── Four-point stars                              │
+│   ✩   ✪  ───────────────────────────────────────────────── Open/center star                              │
+│   ✫   ✬  ───────────────────────────────────────────────── Star with circle                              │
+│   ✭   ✮  ───────────────────────────────────────────────── Star outlines                                 │
+│   ✯   ✰  ───────────────────────────────────────────────── Sparkle stars                                 │
+│   ♠   ♣   ♥   ♦  ────────────────────────────────────────── Suits                                         │
+│   ☀   ☁   ☂   ☃   ☄  ──────────────────────────────────── Weather                                       │
+│   ☎   ☏  ───────────────────────────────────────────────── Phone symbols                                │
+│   ♩   ♪   ♫   ♬  ────────────────────────────────────────── Music notes                                   │
+├───────────────────────────────────────────────────────────────────────────────────────────────────────────┤
+│                                                 DOTS                                                      │
+│   ⠁ ⠂ ⠃ ⠄ ⠅ ⠆ ⠇ ⠈ ⠉ ⠊ ⠋ ⠌ ⠍ ⠎ ⠏                                                                      │
+│   ⠐ ⠑ ⠒ ⠓ ⠔ ⠕ ⠖ ⠗ ⠘ ⠙ ⠚ ⠛ ⠜ ⠝ ⠞ ⠟                                                                   │
+│   ⠠ ⠡ ⠢ ⠣ ⠤ ⠥ ⠦ ⠧ ⠨ ⠩ ⠪ ⠫ ⠬ ⠭ ⠮ ⠯                                                                   │
+│   ⠰ ⠱ ⠲ ⠳ ⠴ ⠵ ⠶ ⠷ ⠸ ⠹ ⠺ ⠻ ⠼ ⠽ ⠾ ⠿                                                                   │
+│   ⡀ ⡁ ⡂ ⡃ ⡄ ⡅ ⡆ ⡇ ⡈ ⡉ ⡊ ⡋ ⡌ ⡍ ⡎ ⡏                                                                   │
+│   ⡐ ⡑ ⡒ ⡓ ⡔ ⡕ ⡖ ⡗ ⡘ ⡙ ⡚ ⡛ ⡜ ⡝ ⡞ ⡟                                                                   │
+│   ⡠ ⡡ ⡢ ⡣ ⡤ ⡥ ⡦ ⡧ ⡨ ⡩ ⡪ ⡫ ⡬ ⡭ ⡮ ⡯                                                                   │
+│   ⡰ ⡱ ⡲ ⡳ ⡴ ⡵ ⡶ ⡷ ⡸ ⡹ ⡺ ⡻ ⡼ ⡽ ⡾ ⡿                                                                   │
+│   ⢀ ⢁ ⢂ ⢃ ⢄ ⢅ ⢆ ⢇ ⢈ ⢉ ⢊ ⢋ ⢌ ⢍ ⢎ ⢏                                                                   │
+│   ⢐ ⢑ ⢒ ⢓ ⢔ ⢕ ⢖ ⢗ ⢘ ⢙ ⢚ ⢛ ⢜ ⢝ ⢞ ⢟                                                                   │
+│   ⢠ ⢡ ⢢ ⢣ ⢤ ⢥ ⢦ ⢧ ⢨ ⢩ ⢪ ⢫ ⢬ ⢭ ⢮ ⢯                                                                   │
+│   ⢰ ⢱ ⢲ ⢳ ⢴ ⢵ ⢶ ⢷ ⢸ ⢹ ⢺ ⢻ ⢼ ⢽ ⢾ ⢿                                                                   │
+│   ⣀ ⣁ ⣂ ⣃ ⣄ ⣅ ⣆ ⣇ ⣈ ⣉ ⣊ ⣋ ⣌ ⣍ ⣎ ⣏                                                                   │
+│   ⣐ ⣑ ⣒ ⣓ ⣔ ⣕ ⣖ ⣗ ⣘ ⣙ ⣚ ⣛ ⣜ ⣝ ⣞ ⣟                                                                   │
+│   ⣠ ⣡ ⣢ ⣣ ⣤ ⣥ ⣦ ⣧ ⣨ ⣩ ⣪ ⣫ ⣬ ⣭ ⣮ ⣯                                                                   │
+│   ⣰ ⣱ ⣲ ⣳ ⣴ ⣵ ⣶ ⣷ ⣸ ⣹ ⣺ ⣻ ⣼ ⣽ ⣾ ⣿                                                                   │
+│    ⠋ ,  ⠙ ,  ⠹ ,  ⠸ ,  ⠼ ,  ⠴ ,  ⠦ ,  ⠧ ,  ⠇ ,  ⠏                                                     │
+│    ⣾ ,  ⣽ ,  ⣻ ,  ⢿ ,  ⡿ ,  ⣟ ,  ⣯ ,  ⣷                                                               │
+│    ⠁ ,  ⠂ ,  ⠄ ,  ⡀ ,  ⢀ ,  ⠠ ,  ⠐ ,  ⠈                                                               │
+│    ⠀ ,  ⡀ ,  ⣀ ,  ⣄ ,  ⣤ ,  ⣦ ,  ⣴ ,  ⣶ ,  ⣷ ,  ⣿  ───────────── 0-90%                                │
+│    ⣿ ,  ⣿⡀ ,  ⣿⣀ ,  ⣿⣄ ,  ⣿⣤ ,  ⣿⣦ ,  ⣿⣴ ,  ⣿⣶ ,  ⣿⣷ ,  ⣿⣿ ─ 100%                                 │
+│    ⠁   ⠂   ⠄   ⡀   ⠈   ⠐   ⠠   ⢀  ────────────────────────────── Individual dots                      │
+│    ⠿  ───────────────────────────────────────────────────────────── All dots (full 2x4 grid)             │
+│    ⠋  ───────────────────────────────────────────────────────────── Example pattern                      │
+│    ⁚  ────────────────────────────────────────────────────────────── two dot colon                        │
+│    ⁝  ────────────────────────────────────────────────────────────── three dot colon                      │
+│    ⁞  ────────────────────────────────────────────────────────────── four dot colon                       │
+│    ︙  ───────────────────────────────────────────────────────────── vertical ellipsis                    │
+│   ⠁ (1)     ⠂ (2)     ⠄ (4)     ⠈ (8)                                                                    │
+│   ⠐ (16)    ⠠ (32)    ⢀ (64)    ⠀ (128) - empty                                                          │
+│    ┄   // horizontal dashed (3 dots)                                                                      │
+│    ┅   // horizontal dashed heavy                                                                         │
+│    ┆   // vertical dashed (3 dots)                                                                        │
+│    ┇   // vertical dashed heavy                                                                           │
+│    ┈   // horizontal dashed (4 dots)                                                                      │
+│    ┉   // horizontal dashed heavy (4 dots)                                                                │
+│    ┊   // vertical dashed (4 dots)                                                                        │
+│    ┋   // vertical dashed heavy (4 dots)                                                                  │
+│    •   // bullet                                                                                          │
+│    ·   // middle dot                                                                                      │
+│    …   // ellipsis                                                                                        │
+│    ―   // horizontal bar 
+│   // ⠋ Loading...
+│   ⠙ Processing...
+│   ⠹ Working... 
+│   dots: [ ⠋ ,  ⠙ ,  ⠹ ,  ⠸ ,  ⠼ ,  ⠴ ,  ⠦ ,  ⠧ ,  ⠇ ,  ⠏ ],
+│   line: [ | ,  / ,  - ,  \\ ],
+│   arrow: [ ← ,  ↖ ,  ↑ ,  ↗ ,  → ,  ↘ ,  ↓ ,  ↙ ],
+│   bounce: [ ⠁ ,  ⠂ ,  ⠄ ,  ⠂ ],
+│   box: [ ◰ ,  ◳ ,  ◲ ,  ◱ ],
+│   circle: [ ◐ ,  ◓ ,  ◑ ,  ◒ ],
+│   square: [ ◰ ,  ◳ ,  ◲ ,  ◱ ],
+│   arrows: [ ▹▹▹▹▹ ,  ▸▹▹▹▹ ,  ▹▸▹▹▹ ,  ▹▹▸▹▹ ,  ▹▹▹▸▹ ,  ▹▹▹▹▸ ],
+│   growing: [ ▁ ,  ▃ ,  ▄ ,  ▅ ,  ▆ ,  ▇ ,  █ ,  ▇ ,  ▆ ,  ▅ ,  ▄ ,  ▃ ],
+│   moon: [ 🌑 ,  🌒 ,  🌓 ,  🌔 ,  🌕 ,  🌖 ,  🌗 ,  🌘 ],
+│   earth: [ 🌍 ,  🌎 ,  🌏 ],
+│   clock: [ 🕐 ,  🕑 ,  🕒 ,  🕓 ,  🕔 ,  🕕 ,  🕖 ,  🕗 ,  🕘 ,  🕙 ,  🕚 ,  🕛 ],
+│   braille: [ ⣾ ,  ⣽ ,  ⣻ ,  ⢿ ,  ⡿ ,  ⣟ ,  ⣯ ,  ⣷ ],
+│   dots2: [ ⣷ ,  ⣯ ,  ⣟ ,  ⡿ ,  ⢿ ,  ⣻ ,  ⣽ ,  ⣾ ],
+│   pulse: [ ∙∙∙ ,  ●∙∙ ,  ∙●∙ ,  ∙∙● ,  ∙∙∙ ],
+│   weather: [ ☀️  ,  ☀️  ,  ⛅  ,  🌤  ,  ⛅  ,  🌥  ,  ☁️  ,  🌧  ,  ⛈  ,  🌩  ,  🌧  ],   
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿    
+│   ⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣷⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣷⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣷⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣷⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣷⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣷⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣷⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣷⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣷⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣾⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣾⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣾⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣾⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣾⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣾⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣾⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣾⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣾
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣯
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣟
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⢿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⢿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⢿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⢿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⢿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⢿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⢿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⢿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⢿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⣿⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⡿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⣿⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⡿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⣿⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⡿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⣿⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⡿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⣿⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⡿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⣿⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⡿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⣿⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⡿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⣿⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⡿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣿⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⡿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣻⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│   ⣽⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+│                                                                           │
+├───────────────────────────────────────────────────────────────────────────────────────────────────────────┤
+│                                                 LINES                                                     │ 
+│    ─ ───────────────────────────────────────────────────────────── horizontal line                        │
+│    │ ───────────────────────────────────────────────────────────── vertical line                          │
+│    ┌ ───────────────────────────────────────────────────────────── top-left corner                        │
+│    ┐ ───────────────────────────────────────────────────────────── top-right corner                       │
+│    └ ───────────────────────────────────────────────────────────── bottom-left corner                     │
+│    ┘ ───────────────────────────────────────────────────────────── bottom-right corner                    │
+│    ├ ───────────────────────────────────────────────────────────── left T-junction                        │
+│    ┤ ───────────────────────────────────────────────────────────── right T-junction                       │
+│    ┬ ───────────────────────────────────────────────────────────── top T-junction                         │
+│    ┴ ───────────────────────────────────────────────────────────── bottom T-junction                      │
+│    ┼ ───────────────────────────────────────────────────────────── cross/plus                             │
+│    ╭   ╮   ╯   ╰ ───────────────────────────────────────────────── Light arc corners                      │
+│    ╱   ╲   ╳ ───────────────────────────────────────────────────── Diagonal lines                         │
+│    ┍   ┑   ┕   ┙ ───────────────────────────────────────────────── Alternative corners                    │
+│    ┝   ┥   ┯   ┷ ───────────────────────────────────────────────── Alternative junctions                  │
+│    ┭   ┵   ┶   ┱   ┲   ┹   ┺                                                                              │
+│    ┽   ┾   ┿   ╀   ╁   ╂   ╃                                                                              │
+│    ╄   ╅   ╆   ╇   ╈   ╉   ╊ ───────────────────────────────────── Rare junctions                         │
+│    ┕ ───────────────────────────────────────────────────────────── heavy bottom-left                      │
+│    ┖ ───────────────────────────────────────────────────────────── heavy vertical-right                   │
+│                                                                                                           │
+│                                               Double Line                                                 │
+│    ═ ───────────────────────────────────────────────────────────── horizontal double                      │
+│    ║ ───────────────────────────────────────────────────────────── vertical double                        │
+│    ╔ ───────────────────────────────────────────────────────────── top-left double                        │
+│    ╗ ───────────────────────────────────────────────────────────── top-right double                       │
+│    ╚ ───────────────────────────────────────────────────────────── bottom-left double                     │
+│    ╝ ───────────────────────────────────────────────────────────── bottom-right double                    │
+│    ╠ ───────────────────────────────────────────────────────────── left T-junction double                 │
+│    ╣ ───────────────────────────────────────────────────────────── right T-junction double                │
+│    ╦ ───────────────────────────────────────────────────────────── top T-junction double                  │
+│    ╩ ───────────────────────────────────────────────────────────── bottom T-junction double               │
+│    ╬ ───────────────────────────────────────────────────────────── cross double                           │
+│                                                                                                           │
+│                                             Heavy/Bold Line                                               │
+│    ━ ───────────────────────────────────────────────────────────── horizontal heavy                       │
+│    ┃ ───────────────────────────────────────────────────────────── vertical heavy                         │
+│    ┏ ───────────────────────────────────────────────────────────── top-left heavy                         │
+│    ┓ ───────────────────────────────────────────────────────────── top-right heavy                        │
+│    ┗ ───────────────────────────────────────────────────────────── bottom-left heavy                      │
+│    ┛ ───────────────────────────────────────────────────────────── bottom-right heavy                     │
+│    ┣ ───────────────────────────────────────────────────────────── left T-junction heavy                  │
+│    ┫ ───────────────────────────────────────────────────────────── right T-junction heavy                 │
+│    ┳ ───────────────────────────────────────────────────────────── top T-junction heavy                   │
+│    ┻ ───────────────────────────────────────────────────────────── bottom T-junction heavy                │
+│    ╋ ───────────────────────────────────────────────────────────── cross heavy                            │
+│                                                                                                           │
+│                                      Mixed (single + double combinations)                                 │
+│    ╒ ───────────────────────────────────────────────────────────── top-left ( single vertical)            │
+│    ╓ ───────────────────────────────────────────────────────────── top-left ( double vertical)            │
+│    ╕ ───────────────────────────────────────────────────────────── top-right ( single vertical)           │
+│    ╖ ───────────────────────────────────────────────────────────── top-right ( double vertical)           │
+│    ╘ ───────────────────────────────────────────────────────────── bottom-left ( single vertical)         │
+│    ╙ ───────────────────────────────────────────────────────────── bottom-left ( double vertical)         │
+│    ╛ ───────────────────────────────────────────────────────────── bottom-right ( single vertical)        │
+│    ╜ ───────────────────────────────────────────────────────────── bottom-right ( double vertical)        │
+│                                                                                                           │
+│                                             Rounded Corners                                               │
+│    ╭ ───────────────────────────────────────────────────────────── top-left rounded                       │
+│    ╮ ───────────────────────────────────────────────────────────── top-right rounded                      │
+│    ╰ ───────────────────────────────────────────────────────────── bottom-left rounded                    │
+│    ╯ ───────────────────────────────────────────────────────────── bottom-right rounded                   │
+├───────────────────────────────────────────────────────────────────────────────────────────────────────────┤
+│                                             FILE TREE                                                     │
+│                                                                                                           │ 
+│    ┌───────────────────────────── VSCODE ─────────────────────────────┐                                   │ 
+│    ├── 📂 BRANCH_TITLE/                                                                                   │ 
+│    │   ├── 📄 line item ................ Description                                                      │ 
+│    │   ├── 📄 line item 2 .............. Description                                                      │ 
+│    │   └── 📄 line 3 ................... Description                                                      │ 
+│                                                                                                           │ 
+│                                                                                                           │ 
+│   └── mlops-course/                                                                                       │ 
+│       ├── .github/                                                                                        │ 
+│       │   └── workflows/                                                                                  │ 
+│       ├── LICENSE.md                                                                                      │ 
+│       ├── Makefile.js                                                                                     │ 
+│       ├── README.md                                                                                       │ 
+│       └── datasets/                                                                                       │ 
+│           ├── dataset.csv                                                                                 │ 
+│           ├── holdout.csv                                                                                 │ 
+│           ├── projects.csv                                                                                │ 
+│           └── tags.csv                                                                                    │ 
+│                                                                                                           │ 
+│   ┌─ src/                                                                                                 │ 
+│   │  ├─ components/                                                                                       │ 
+│   │  │  ├─ Button.tsx                                                                                     │ 
+│   │  │  └─ Input.tsx                                                                                      │ 
+│   │  ├─ utils/                                                                                            │ 
+│   │  │  └─ helpers.ts                                                                                     │ 
+│   │  └─ index.ts                                                                                          │ 
+│   └─ package.json 
+│ 
+│   ├─ Starting server...
+│   │  ├─ ✓ Port 3000 opened
+│   │  ├─ ✓ Database connected
+│   │  └─ ✓ Routes loaded
+│   └─ ✓ Server ready 
+│ 
+│   // Git-style Branch Visualization
+│   * main
+│   ├─* feature/login
+│   │ └─* fix/auth-bug
+│   └─* feature/dashboard  
+│
+│   Project Config
+│   ├─ Development
+│   │  ├─ port: 3000
+│   │  └─ debug: true
+│   ├─ Production
+│   │  ├─ port: 8080
+│   │  └─ debug: false
+│   └─ Testing
+│   └─ coverage: 80%
+│
+│   // Activity Timeline
+│   2024-12-07
+│   ├─ 09:00 │ Started project
+│   ├─ 10:30 │ Fixed bug #123
+│   ├─ 12:00 │ ──── Lunch Break ────
+│   ├─ 14:00 │ Deployed to staging
+│   └─ 16:00 │ Code review completed
+│ 
+│   // Connection Diagrams
+│   Client ──→ API Gateway ──→ Microservice A
+│               └──→ Microservice B
+│               └──→ Database
+├───────────────────────────────────────────────────────────────────────────────────────────────────────────┤
+│                                             BLOCKS                                                        │
+│    ‖ ────────────────────────────────────────────────────────────── double vertical line                  │
+│    ▀ ────────────────────────────────────────────────────────────── upper half block                      │
+│    ▄ ────────────────────────────────────────────────────────────── lower half block                      │
+│    █ ────────────────────────────────────────────────────────────── full block                            │
+│    ░ ────────────────────────────────────────────────────────────── light shade                           │
+│    ▒ ────────────────────────────────────────────────────────────── medium shade                          │
+│    ▓ ────────────────────────────────────────────────────────────── dark shade                            │
+│    ▌ ────────────────────────────────────────────────────────────── left half block                       │
+│    ▐ ────────────────────────────────────────────────────────────── right half block                      │
+│    ■ ────────────────────────────────────────────────────────────── black square                          │
+│                                                                                                           │
+│    █ ────────────────────────────────────────────────────────────── Full block                            │
+│    ▉ ───────────────────────────────────────────────────────────── 7/8 block                             │
+│    ▊ ───────────────────────────────────────────────────────────── 3/4 block                             │
+│    ▋ ───────────────────────────────────────────────────────────── 5/8 block                             │
+│    ▌ ────────────────────────────────────────────────────────────── 1/2 block (left half)                 │
+│    ▍ ───────────────────────────────────────────────────────────── 3/8 block                             │
+│    ▎ ───────────────────────────────────────────────────────────── 1/4 block                             │
+│    ▏ ───────────────────────────────────────────────────────────── 1/8 block                             │
+│      ────────────────────────────────────────────────────────────── Empty                                 │
+│                                                                                                           │
+│    █   ▉   ▊   ▋   ▌   ▍   ▎   ▏ ──────────────────────────── Full to thin blocks (right side)       │
+│    ▁   ▂   ▃   ▄   ▅   ▆   ▇   █ ─────────────────────────────── Vertical progress segments            │
+│    ▏ ───────────────────────────────────────────────────────────── left 1/8 block                        │
+│    ▎ ───────────────────────────────────────────────────────────── left 1/4 block                        │
+│    ▍ ───────────────────────────────────────────────────────────── left 3/8 block                        │
+│    ▌ ────────────────────────────────────────────────────────────── left 1/2 block                        │
+│    ▋ ───────────────────────────────────────────────────────────── left 5/8 block                        │
+│    ▊ ───────────────────────────────────────────────────────────── left 3/4 block                        │
+│    ▉ ───────────────────────────────────────────────────────────── left 7/8 block                        │
+│    ▇ ───────────────────────────────────────────────────────────── lower 7/8 block                       │
+│    ▆ ───────────────────────────────────────────────────────────── lower 3/4 block                       │
+│    ▅ ───────────────────────────────────────────────────────────── lower 5/8 block                       │
+│    ▄ ────────────────────────────────────────────────────────────── lower 1/2 block                       │
+│    ▃ ───────────────────────────────────────────────────────────── lower 3/8 block                       │
+│    ▂ ───────────────────────────────────────────────────────────── lower 1/4 block                       │
+│      ────────────────────────────────────────────────────────────── lower 1/8 block                       │
+│                                                                                                           │
+│    █ ────────────────────────────────────────────────────────────── Full block                            │
+│    ▇ ───────────────────────────────────────────────────────────── 7/8 block (right side missing)        │
+│    ▆ ───────────────────────────────────────────────────────────── 3/4 block                             │
+│    ▅ ───────────────────────────────────────────────────────────── 5/8 block                             │
+│    ▄ ────────────────────────────────────────────────────────────── 1/2 block (bottom half)               │
+│    ▃ ───────────────────────────────────────────────────────────── 3/8 block                             │
+│    ▂ ───────────────────────────────────────────────────────────── 1/4 block                             │
+│    ▁ ───────────────────────────────────────────────────────────── 1/8 block                              │
+│      ────────────────────────────────────────────────────────────── Empty                                 │
+│    ◐                                                                                                      │
+│    ◓                                                                                                      │
+│    ◑                                                                                                      │
+│    ◒                                                                                                      │
+│    ▁   ▂   ▃   ▄   ▅   ▆   ▇   █ ──────────────────────────────── 8-level vertical fill                 │
+├───────────────────────────────────────────────────────────────────────────────────────────────────────────┤
+│                                             ARROWS                                                        │
+│    → ───────────────────────────────────────────────────────────── right arrow                            │
+│    ← ───────────────────────────────────────────────────────────── left arrow                             │
+│    ↑ ───────────────────────────────────────────────────────────── up arrow                               │
+│    ↓ ───────────────────────────────────────────────────────────── down arrow                             │
+│    ⇒ ───────────────────────────────────────────────────────────── right double arrow                    │
+│    ⇐ ───────────────────────────────────────────────────────────── left double arrow                     │
+│    ↔   ↕ ────────────────────────────────────────────────────────── Left-right, up-down                   │
+│    ↖   ↗   ↘   ↙ ───────────────────────────────────────────────── Diagonal arrows                      │
+│    ⇄   ⇅ ───────────────────────────────────────────────────────── Double arrows with bars               │
+│    ⇆   ⇅ ───────────────────────────────────────────────────────── Two-headed arrows                     │
+│    ↻   ↺ ───────────────────────────────────────────────────────── Clockwise/counterclockwise            │
+│    ⟳   ⟲ ──────────────────────────────────────────────────────── More circular arrows                  │
+│    ⤴   ⤵ ───────────────────────────────────────────────────────── Curved arrows                         │
+│    ⇢   ⇠ ───────────────────────────────────────────────────────── Dashed arrows                         │
+│    ➔   ➙   ➜   ➞ ─────────────────────────────────────────────── Various right arrows                  │
+│    ⮕   ⮐   ⮑   ⮒   ⮓ ─────────────────────────────────────────── Heavy arrows                         │
+│    ⇨   ⇦   ⇧   ⇩ ────────────────────────────────────────────────── Dashed arrows                        │
+│    ⤶   ⤷ ─────────────────────────────────────────────────────────── Return arrows                        │
+│    ⬆   ⬇   ⬅   ➡ ────────────────────────────────────────────────── Emoji-style arrows (bold)           │
+│    →
+│    ➔ ➜ ➞ ➡ ⇒ ⟹
+│    ←
+│    ⬅ ⇐ ⟸
+│    ↑
+│    ⬆ ⇑
+│    ↓
+│    ⬇ ⇓
+├───────────────────────────────────────────────────────────────────────────────────────────────────────────┤
+│                                             THINGS                                                        │
+│    [ ] ───────────────────────────────────────────────────────────── checkbox off                         │
+│    [x] ───────────────────────────────────────────────────────────── checkbox on                          │
+│    [✓] ───────────────────────────────────────────────────────────── checkbox on                          │
+│    ( ) ───────────────────────────────────────────────────────────── checkbox off                         │
+│    (●) ───────────────────────────────────────────────────────────── checkbox off                         │
+│    ≈   ≠   ≤   ≥   ±   ∞   √   ∫   ∑   ∏   ∂   ∇ ─────────────────── Math symbols                         │
+│    μ   θ   π   σ   Ω ──────────────────────────────────────────────── Greek letters                       │
+│    ℃   ℉   ° ─────────────────────────────────────────────────────── Temperature                         │
+│    ‰   ‱ ─────────────────────────────────────────────────────────── Per mille/ten thousand              │
+│    ℅   № ───────────────────────────────────────────────────────────── Care of, numero                    │
+│   ⁰ ¹ ² ³ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ──────────────────────────────────────────────── Superscripts                       │
+│   ₀ ₁ ₂ ₃ ₄ ₅ ₆ ₇ ₈ ₉ ──────────────────────────────────────────────── Subscripts                         │
+│   ⁺ ⁻ ⁼ ⁽ ⁾ ⁿ       ────────────────────────────────────────────────── Superscript operators              │
+│   ₊ ₋ ₌ ₍ ₎         ────────────────────────────────────────────────── Subscript operators                │
+│   ½ ⅓ ⅔ ¼ ¾ ⅕ ⅖ ⅗ ⅘ ⅙ ⅚ ⅛ ⅜ ⅝ ⅞                                                                           │
+│    ※ ──────────────────────────────────────────────────────────────── reference mark                     │
+│    ‣ ───────────────────────────────────────────────────────────────── triangular bullet                  │
+│    ⁃ ───────────────────────────────────────────────────────────────── hyphen bullet                      │
+│    ⁌ ───────────────────────────────────────────────────────────────── end of proof                       │
+│    ∴ ───────────────────────────────────────────────────────────────── therefore                          │
+│    ∵ ───────────────────────────────────────────────────────────────── because                            │
+│    ∎ ───────────────────────────────────────────────────────────────── end of proof (solid)              │
+│    ⊕   ⊗   ⊙ ─────────────────────────────────────────────────────── circled operators                  │
+│    ⦿ ───────────────────────────────────────────────────────────────── circled bullet                    │
+│    ⦾ ───────────────────────────────────────────────────────────────── white circled bullet              │
+│    ◎ ───────────────────────────────────────────────────────────────── bullseye                          │
+│    ⊚ ───────────────────────────────────────────────────────────────── circled ring operator             │
+│    ◉ ───────────────────────────────────────────────────────────────── fisheye                           │ 
+│    ⊢   ⊣   ⊤   ⊥ ───────────────────────────────────────────────────── logical symbols                   │
+│    – ────────────────────────────────────────────────────────────────── en dash                           │
+│    — ────────────────────────────────────────────────────────────────── em dash                           │
+│    ‐ ────────────────────────────────────────────────────────────────── hyphen                            │
+│    ‑ ────────────────────────────────────────────────────────────────── non-breaking hyphen               │
+│      ────────────────────────────────────────────────────────────────── em space                          │
+│      ────────────────────────────────────────────────────────────────── en space                          │
+│       " " ───────────────────────────────────────────────────────────── Smart quotes                      │
+│   ‚ „    ────────────────────────────────────────────────────────────── Low quotes                        │
+│   ‹ ›    ────────────────────────────────────────────────────────────── Single angle quotes               │
+│    ▪ ────────────────────────────────────────────────────────────────── white square                      │
+│    □ ────────────────────────────────────────────────────────────────── small black square                │
+│    ▫ ────────────────────────────────────────────────────────────────── small white square                │
+│    ☐ ───────────────────────────────────────────────────────────────── Ballot box                         │
+│    ☑ ───────────────────────────────────────────────────────────────── Ballot box with check              │
+│    ☒ ───────────────────────────────────────────────────────────────── Ballot box with X                  │
+│    ⭘ ───────────────────────────────────────────────────────────────── Hollow circle                      │
+│    ⭕ ───────────────────────────────────────────────────────────────── Heavy circle                      │
+│    ⏺ ────────────────────────────────────────────────────────────────── Record/radio button filled        │
+│    ⏹ ────────────────────────────────────────────────────────────────── Stop/square                       │
+│    ⏸ ────────────────────────────────────────────────────────────────── Pause                             │
+│    ▶ ────────────────────────────────────────────────────────────────── Play                              │
+│    ⏭ ────────────────────────────────────────────────────────────────── Next                              │
+│    ⏮ ────────────────────────────────────────────────────────────────── Previous                          │
+│    ⚑ ────────────────────────────────────────────────────────────────── flag                              │
+│    ⚐ ────────────────────────────────────────────────────────────────── hollow flag                       │
+│    ⛿ ───────────────────────────────────────────────────────────────── power button                       │
+│    ⏻   ⏼   ⭘ ────────────────────────────────────────────────────────── Power symbols                     │
+│    ∅ ────────────────────────────────────────────────────────────────── empty set                         │
+│    ◯ ────────────────────────────────────────────────────────────────── empty circle (radio off)         │
+│    ◉ ────────────────────────────────────────────────────────────────── fish eye (radio on)               │
+│    🔘 ───────────────────────────────────────────────────────────────── radio button                      │
+│    🌳 ───────────────────────────────────────────────────────────────── root                              │
+│    📁 ───────────────────────────────────────────────────────────────── directory                         │
+│    📄 ────────────────────────────────────────────────────────────────── file                             │
+│    实践 ──────────────────────────────────────────────────────────────── placeholder                       │
+│    末                                                                                                      │
+│    ⚡ ───────────────────────────────────────────────────────────────── lightning bolt                    │
+│    ℹ ────────────────────────────────────────────────────────────────── information source                 │
+│    ⚠ ────────────────────────────────────────────────────────────────── warning sign                      │
+│    📋 ───────────────────────────────────────────────────────────────── clipboard (for copy actions)      │
+│    🔍 ───────────────────────────────────────────────────────────────── magnifying glass (for search)     │
+│    ⚙ ────────────────────────────────────────────────────────────────── gear (for settings)               │
+│    ✨ ───────────────────────────────────────────────────────────────── sparkles (for AI or Premium)      │
+│    🔔 ───────────────────────────────────────────────────────────────── bell (for notifications)          │
+│    📁 ───────────────────────────────────────────────────────────────── folder                            │
+│    📂 ───────────────────────────────────────────────────────────────── open folder                       │
+│    ⏳   ⌛ ───────────────────────────────────────────────────────────── Hourglasses                       │
+│    ⚫   ⚪ ──────────────────────────────────────────────────────────── Large black/white circles         │ 
+│    ⬤   ○ ────────────────────────────────────────────────────────────── Large filled/hollow circles       │
+│    ◼   ◻ ───────────────────────────────────────────────────────────── Medium squares                    │
+│    ⬛   ⬜ ─────────────────────────────────────────────────────────── Large squares                     │
+│    🔶   🔷   🔸   🔹 ───────────────────────────────────────────────── Diamond shapes                    │
+│    🟢   🟡   🟠   🔴 ──────────────────────────────────────────────── Colored circles                   │
+│    ✅   ❌   ⭕   ❎ ──────────────────────────────────────────────── Modern check/X                    │
+│    🔒   🔓   🔑 ────────────────────────────────────────────────────── Lock/unlock                       │
+│    📊   📈   📉 ────────────────────────────────────────────────────── Charts                            │
+│     ⌗ ───────────────────────────────────────────────────────────────── hash/tag symbol                  │
+│     № ───────────────────────────────────────────────────────────────── numero (already have)             │
+│     ℻ ───────────────────────────────────────────────────────────────── fax symbol                      │
+│     ⌘ ───────────────────────────────────────────────────────────────── command key (Mac)               │
+│     ⎇ ───────────────────────────────────────────────────────────────── alternative key                  │
+│     ⇧ ───────────────────────────────────────────────────────────────── shift                            │
+│     ⇪ ───────────────────────────────────────────────────────────────── caps lock                        │
+│     ⌥ ───────────────────────────────────────────────────────────────── option key                       │
+├───────────────────────────────────────────────────────────────────────────────────────────────────────────┤
+│                                             SPACE                                                         │
+│   ' ' ───────────────────────────────────────────────────────────── Narrow no-break space (thin space)    │
+│   ' ' ───────────────────────────────────────────────────────────── Thin space                            │
+│   ' ' ───────────────────────────────────────────────────────────── Hair space                            │
+│   '​' ────────────────────────────────────────────────────────────── Zero-width space                      │
+│   '‌' ────────────────────────────────────────────────────────────── Zero-width non-joiner                 │
+│   '‍' ────────────────────────────────────────────────────────────── Zero-width joiner                     │
+│   '︎' ────────────────────────────────────────────────────────────── Variation selector-15 (text style)    │
+│   '️' ────────────────────────────────────────────────────────────── Variation selector-16 (emoji style)   │
+├───────────────────────────────────────────────────────────────────────────────────────────────────────────┤
+│                                            TRIANGLE                                                       │
+│    ▲ ────────────────────────────────────────────────────────────── black up-pointing triangle            │
+│    ▼ ────────────────────────────────────────────────────────────── black down-pointing triangle          │
+│    ◀ ───────────────────────────────────────────────────────────── black left-pointing triangle           │
+│    ▶ ───────────────────────────────────────────────────────────── black right-pointing triangle          │
+│    △ ───────────────────────────────────────────────────────────── white up-pointing triangle             │
+│    ▽ ───────────────────────────────────────────────────────────── white down-pointing triangle           │
+│    ◁ ───────────────────────────────────────────────────────────── white left-pointing triangle           │
+│    ▷ ───────────────────────────────────────────────────────────── white right-pointing triangle          │
+│    ◣ ───────────────────────────────────────────────────────────── lower left triangle                    │      
+│    ◢ ───────────────────────────────────────────────────────────── lower right triangle                   │ 
+│    ◤ ───────────────────────────────────────────────────────────── upper left triangle                    │ 
+│    ◥ ───────────────────────────────────────────────────────────── upper right triangle                   │ 
+│    » ────────────────────────────────────────────────────────────── right-pointing double angle quotation │
+│    « ────────────────────────────────────────────────────────────── left-pointing double angle quotation  │
+│    〉 ───────────────────────────────────────────────────────────── single right-pointing angle bracket   │
+│    〈 ───────────────────────────────────────────────────────────── single left-pointing angle bracket    │
+├───────────────────────────────────────────────────────────────────────────────────────────────────────────┤
+│                                             SPINNERS                                                      │
+│    ◴   ◵   ◶   ◷ ───────────────────────────────────────────────────────────── Pie chart quarters       │
+│    ◐   ◑   ◒   ◓ ───────────────────────────────────────────────────────────── Spinners                 │
+│                                                                                                           │
+│   // Create a smooth 0-100% progress bar (width=10)                                                       │
+│   function createProgressBar(percent, width = 10) {                                                       │
+│     const fullBlocks = Math.floor(percent / 100 * width);                                                 │
+│     const partialIndex = Math.round((percent / 100 * width - fullBlocks) * 8);                            │
+│     const partialChars = [' ', '▏', '▎', '▍', '▌', '▋', '▊', '▉', '█'];                              │
+│                                                                                                           │
+│     return '█'.repeat(fullBlocks) +                                                                       │
+│            partialChars[partialIndex] +                                                                   │
+│            ' '.repeat(width - fullBlocks - 1);                                                            │
+│   }                                                                                                       │
+│                                                                                                           │
+│   // Or using left/right halves:                                                                          │
+│   function createSmoothBar(percent, width = 20) {                                                         │
+│     const barLength = percent / 100 * width * 2; // Double resolution                                     │ 
+│     const full = Math.floor(barLength / 2);                                                               │
+│     const half = barLength % 2;                                                                           │
+│                                                                                                           │
+│     return '█'.repeat(full) + (half ? '▌' : '') + ' '.repeat(width - full - half);                        │
+│   }                                                                                                       │
+├───────────────────────────────────────────────────────────────────────────────────────────────────────────┤
+│                                           PROGRESS                                                        │
+│                                                                                                           │
+│                                                                                                           │
+│                                   ████████████░░░░░░░░ 60%                                                │
+│                                   ━━━━━━━━━━━━━━━━━━━━ 100%                                               │
+│                                                                                                           │
+├───────────────────────────────────────────────────────────────────────────────────────────────────────────┤
+│                                             MENUS                                                         │
+│                ╭────────────────────────────────────────────────────────────────────────────╮             │
+│                │  CATALYST UI                       ·                INSTALL AND CONFIGURE  │             │
+│                ├────────────────────────────────────────────────────────────────────────────┤             │
+│                │  Select a installation option:                                             │             │
+│                │   1) Copy source files                                                     │             │
+│                │   2) Copy for dist                                                         │             │
+│                │   3) Copy free components                                                  │             │
+│                │   4) Update libs                                                           │             │
+│                │   5) Copy config files                                                     │             │
+│                │   6) Build CLI                                                             │             │
+│                ╰────────────────────────────────────────────────────────────────────────────╯             │
+│                                                                                                           │
+│                ╭────────────────────────────────────────────────────────────────────────────╮             │
+│                │  BUILD COMPLETE  —  Duration: 1m 6s                                        │             │
+│                ╰────────────────────────────────────────────────────────────────────────────╯             │
+│                                                                                                           │
+│                                   ┌─────────┬──────────┬─────────┐                                        │
+│                                   │ Name    │ Status   │ Progress│                                        │
+│                                   ├─────────┼──────────┼─────────┤                                        │
+│                                   │ Task 1  │ Done     │ ███████ │                                        │
+│                                   │ Task 2  │ Running  │ ████░░░ │                                        │
+│                                   └─────────┴──────────┴─────────┘                                        │
+│                                                                                                           │
+│                                  ╔════════════════════════════════╗                                       │
+│                                  ║  System Status Dashboard       ║                                       │
+│                                  ╠════════════════════════════════╣                                       │
+│                                  ║  CPU Usage:  ████████░░ 80%    ║                                       │
+│                                  ║  Memory:     ██████░░░░ 60%    ║                                       │
+│                                  ║  Disk:       ████░░░░░░ 40%    ║                                       │
+│                                  ╚════════════════════════════════╝                                       │
+│                                                                                                           │
+│                                    ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓                                       │
+│                                    ┃ function hello() {           ┃                                       │
+│                                    ┃   console.log("Hello World");┃                                       │
+│                                    ┃ }                            ┃                                       │
+│                                    ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛                                       │
+│                                                                                                           │
+│                                           ╭───────────────────╮                                           │
+│                                           │ • File            │                                           │
+│                                           │ • Edit            │                                           │
+│                                           │ • View            │                                           │
+│                                           │ ▶ Tools           │                                           │
+│                                           │   ├─ Options      │                                           │
+│                                           │   ├─ Settings     │                                           │
+│                                           │   └─ Preferences  │                                           │
+│                                           ╰───────────────────╯                                           │
+│                                                                                                           │
+│                                     ┌ Build Status ──────────────┐                                        │
+│                                     │ ● Backend:  Running        │                                        │
+│                                     │ ● Frontend: Running        │                                        │
+│                                     │ ○ Database: Stopped        │                                        │
+│                                     └────────────────────────────┘                                        │
+│                                                                                                           │
+│                                      ╔═══════════════════════════╗                                        │
+│                                      ║ ⚠️  WARNING               ║                                        │
+│                                      ║ Database connection lost  ║                                        │
+│                                      ║ Retrying in 5 seconds...  ║                                        │
+│                                      ╚═══════════════════════════╝                                        │
+│                                                                                                           │
+│                                       ━━━━━━━━━━━━━━━━━━━━━━━━━━━                                         │
+│                                             TESTS PASSED ✓                                                │
+│                                       ━━━━━━━━━━━━━━━━━━━━━━━━━━━                                         │
+│                                                                                                           │
+│ ╭───────────────────────────────────────────────────────────────────────────────────────────────────────╮ │
+│ │                                           CATALYST UI  ★  BUILD                                       │ │
+│ ├───────────────────────────────────────────────────────────────────────────────────────────────────────┤ │
+│ ├───────────────────────────────────────────────────────────────────────────────────────────────────────┤ │
+│ │  STEP 1A: COPYING SOURCE FILES                                                                        │ │
+│ │   ✔ Copied source files except data/, pages/, and blocks/                                             │ │
+│ │   ✔ Cleaned data.tsx                                                                                  │ │
+│ │   ✔ Cleaned 34 data files with relative imports                                                       │ │
+│ ├───────────────────────────────────────────────────────────────────────────────────────────────────────┤ │
+│ │  STEP 1B: PREPPING DIST FILES                                                                         │ │
+│ │   ✔ Copied source files except data/, pages/, and blocks/                                             │ │
+│ │   ✔ Cleaned data.tsx with package-relative imports                                                    │ │
+│ │   ✔ Cleaned 34 data files with package-relative imports for dist                                      │ │
+│ ├───────────────────────────────────────────────────────────────────────────────────────────────────────┤ │
+│ │  STEP 2: EXTRACTING COMPONENTS                                                                        │ │
+│ │   ✔ Found 143 free components out of 1462 total                                                       │ │
+│ │   ⚠ Source not found: faq                                                                             │ │
+│ │       ↳ Path: /components/catalyst-ui/core/data-display/faq.tsx                                       │ │
+│ │   ✗ Failed to copy faq: fullPath is not defined                                                       │ │
+│ │   ⚠ Source not found: panel                                                                           │ │
+│ │       ↳ Path: /components/catalyst-ui/core/layout/panel.tsx                                           │ │
+│ │   ✗ Failed to copy panel: fullPath is not defined                                                     │ │
+│ │   ⚠ Source not found: Fieldset                                                                        │ │
+│ │       ↳ Path: /components/catalyst-ui/components/fieldset.tsx                                         │ │
+│ │   ✗ Failed to copy Fieldset: fullPath is not defined                                                  │ │
+│ │   ⚠ Source not found: Forms                                                                           │ │
+│ │       ↳ Path: /components/catalyst-ui/forms/form.tsx                                                  │ │
+│ │   ✗ Failed to copy Forms: fullPath is not defined                                                     │ │
+│ │   ⚠ Source not found: Iframe                                                                          │ │
+│ │       ↳ Path: /components/catalyst-ui/core/components/iframe.tsx                                       │ │
+│ │   ✗ Failed to copy Iframe: fullPath is not defined                                                    │ │
+│ │   ⚠ Source not found: Dual Sidebar Agnostic                                                           │ │
+│ │       ↳ Path: /components/catalyst-ui/components/overlay/dual-sidebar-agnostic.tsx                    │ │
+│ │   ✗ Failed to copy Dual Sidebar Agnostic: fullPath is not defined                                     │ │
+│ │   ⚠ Source not found: For                                                                             │ │
+│ │       ↳ Path: /components/catalyst-ui/primitives/for.tsx                                              │ │
+│ │   ✗ Failed to copy For: fullPath is not defined                                                       │ │
+│ │   ✔ Copied 115 component files                                                                        │ │
+│ │   ⚠ Skipped 14 files (not found or error)                                                             │ │
+│ ├───────────────────────────────────────────────────────────────────────────────────────────────────────┤ │
+│ │  STEP 3: MAPPING LIBRARIES                                                                            │ │
+│ │   ✔ Free dependencies: 144                                                                            │ │
+│ │   ✔ All dependencies: 199                                                                             │ │
+│ ├───────────────────────────────────────────────────────────────────────────────────────────────────────┤ │
+│ │  STEP 4: SYNCING CONFIGS                                                                              │ │
+│ │   ✔ Copied tailwind.config.ngin.ts to both locations                                                  │ │
+│ │   ✔ Copied postcss.config.js to both locations                                                        │ │
+│ │   ✔ Copied tailwind.css to both locations                                                             │ │
+│ │   ✔ Created standard tailwind.config.js in both locations                                             │ │
+│ ├───────────────────────────────────────────────────────────────────────────────────────────────────────┤ │
+│ │  STEP 5: BUILDING CLI                                                                                 │ │
+│ │   ✔ CLI built successfully                                                                           │ │
+│ ├───────────────────────────────────────────────────────────────────────────────────────────────────────┤ │
+│ │                                      ★  BUILD COMPLETE IN 21.09s  ★                                  │ │
+│ ╰───────────────────────────────────────────────────────────────────────────────────────────────────────╯ │
+╰───────────────────────────────────────────────────────────────────────────────────────────────────────────╯
 
 \`\`\`
 `,
-  fileTree: `\`\`\`sh
-// File Tree Visualizer
-┌─ src/
-│  ├─ components/
-│  │  ├─ Button.tsx
-│  │  └─ Input.tsx
-│  ├─ utils/
-│  │  └─ helpers.ts
-│  └─ index.ts
-└─ package.json
-\`\`\`
-`,
+
   fileTreeWithClickableLinks: `\`\`\`sh
 <pre style="max-width: 800px; white-space: pre-wrap; overflow-wrap: break-word;">
 / DEVSTACK_SYSTEM_ROOT/
@@ -4026,134 +4784,6 @@ function printErrorBox(message: string) {
 
 </pre>
 
-\`\`\`
-`,
-  progress: `\`\`\`sh
-// Progress Bars
-████████████░░░░░░░░ 60%
-━━━━━━━━━━━━━━━━━━━━ 100%
-\`\`\`
-`,
-  asciiTables: `\`\`\`sh
-// Tables
-┌─────────┬──────────┬─────────┐
-│ Name    │ Status   │ Progress│
-├─────────┼──────────┼─────────┤
-│ Task 1  │ Done     │ ███████ │
-│ Task 2  │ Running  │ ████░░░ │
-└─────────┴──────────┴─────────┘
-\`\`\`
-`,
-  spinners: `\`\`\`sh
-// Loading Spinners
-⠋ Loading...
-⠙ Processing...
-⠹ Working...
-\`\`\`
-`,
-  dashboards: `\`\`\`sh
-// Dashboards
-╔════════════════════════════════╗
-║  System Status Dashboard       ║
-╠════════════════════════════════╣
-║  CPU Usage:  ████████░░ 80%    ║
-║  Memory:     ██████░░░░ 60%    ║
-║  Disk:       ████░░░░░░ 40%    ║
-╚════════════════════════════════╝
-\`\`\`
-`,
-  codeBlockPreviews: `\`\`\`sh
-// Code Block Previews
-┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-┃ function hello() {           ┃
-┃   console.log("Hello World");┃
-┃ }                            ┃
-┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
-\`\`\`
-`,
-  menu: `\`\`\`sh
-// Menu Systems
-╭───────────────────╮
-│ • File            │
-│ • Edit            │
-│ • View            │
-│ ▶ Tools           │
-│   ├─ Options      │
-│   ├─ Settings     │
-│   └─ Preferences  │
-╰───────────────────╯
-\`\`\`
-`,
-  logs: `\`\`\`sh
-// Terminal Logs with Hierarchy
-├─ Starting server...
-│  ├─ ✓ Port 3000 opened
-│  ├─ ✓ Database connected
-│  └─ ✓ Routes loaded
-└─ ✓ Server ready
-\`\`\`
-`,
-  branchVis: `\`\`\`sh
-// Git-style Branch Visualization
-* main
-├─* feature/login
-│ └─* fix/auth-bug
-└─* feature/dashboard
-\`\`\`
-`,
-  status: `\`\`\`sh
-// Status Indicators
-┌ Build Status ──────────────┐
-│ ● Backend:  Running        │
-│ ● Frontend: Running        │
-│ ○ Database: Stopped        │
-└────────────────────────────┘
-\`\`\`
-`,
-  notification: `\`\`\`sh
-// Notification Boxes
-╔═══════════════════════════╗
-║ ⚠️  WARNING               ║
-║ Database connection lost  ║
-║ Retrying in 5 seconds...  ║
-╚═══════════════════════════╝
-\`\`\`
-`,
-  separators: `\`\`\`sh
-// Command Output Separators
-━━━━━━━━━━━━━━━━━━━━━━━━━━━
-  TESTS PASSED ✓
-━━━━━━━━━━━━━━━━━━━━━━━━━━━
-\`\`\`
-`,
-  nestedData: `\`\`\`sh
-// Nested Data Structures
-Project Config
-├─ Development
-│  ├─ port: 3000
-│  └─ debug: true
-├─ Production
-│  ├─ port: 8080
-│  └─ debug: false
-└─ Testing
-   └─ coverage: 80%
-\`\`\`
-`,
-  activity: `\`\`\`sh
-// Activity Timeline
-2024-12-07
-├─ 09:00 │ Started project
-├─ 10:30 │ Fixed bug #123
-├─ 12:00 │ ──── Lunch Break ────
-├─ 14:00 │ Deployed to staging
-└─ 16:00 │ Code review completed
-\`\`\`
-`,
-  conDiagrams: `\`\`\`sh
-// Connection Diagrams
-Client ──→ API Gateway ──→ Microservice A
-                      └──→ Microservice B
-                      └──→ Database
 \`\`\`
 `,
   basicSpin: `\`\`\`javascript
@@ -4186,28 +4816,6 @@ const spinner = ora({frames: ['⣷', '⣯', '⣟', '⡿', '⢿', '⣻', '⣽', '
   return false;
 }
 
-`,
-
-  diffSpins: `\`\`\`javascript
-export const spinners = {
-  dots: ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'],
-  line: ['|', '/', '-', '\\'],
-  arrow: ['←', '↖', '↑', '↗', '→', '↘', '↓', '↙'],
-  bounce: ['⠁', '⠂', '⠄', '⠂'],
-  box: ['◰', '◳', '◲', '◱'],
-  circle: ['◐', '◓', '◑', '◒'],
-  square: ['◰', '◳', '◲', '◱'],
-  arrows: ['▹▹▹▹▹', '▸▹▹▹▹', '▹▸▹▹▹', '▹▹▸▹▹', '▹▹▹▸▹', '▹▹▹▹▸'],
-  growing: ['▁', '▃', '▄', '▅', '▆', '▇', '█', '▇', '▆', '▅', '▄', '▃'],
-  moon: ['🌑', '🌒', '🌓', '🌔', '🌕', '🌖', '🌗', '🌘'],
-  earth: ['🌍', '🌎', '🌏'],
-  clock: ['🕐', '🕑', '🕒', '🕓', '🕔', '🕕', '🕖', '🕗', '🕘', '🕙', '🕚', '🕛'],
-  braille: ['⣾', '⣽', '⣻', '⢿', '⡿', '⣟', '⣯', '⣷'],
-  dots2: ['⣷', '⣯', '⣟', '⡿', '⢿', '⣻', '⣽', '⣾'],
-  pulse: ['∙∙∙', '●∙∙', '∙●∙', '∙∙●', '∙∙∙'],
-  weather: ['☀️ ', '☀️ ', '⛅ ', '🌤 ', '⛅ ', '🌥 ', '☁️ ', '🌧 ', '⛈ ', '🌩 ', '🌧 '],
-};        
-\`\`\`
 `,
   spinnerclass: `\`\`\`javascript
 export class Spinner {
@@ -4352,10 +4960,6 @@ Normal markdown text.
 `,
   order66: `\`\`\`javascript
         
-\`\`\`
-`,
-  three: `\`\`\`javascript
-        
 \`\`\`
 `,
 }