@speakeasy-api/moonshine 1.33.4 → 2.0.0-alpha.2

package/README.md

@@ -33,7 +33,7 @@ Add this to the top of your project's CSS file where you configure Tailwind:
 
 **Note:** The `@reference` directive is required for Tailwind v4 to recognize Moonshine's custom utilities and make them available in your project.
 
-### 3. Import Moonshine's Compiled CSS
+### 3. Import Moonshine's CSS
 
 In your main app file (or root layout):
 
@@ -41,6 +41,8 @@ In your main app file (or root layout):
 import '@speakeasy-api/moonshine/moonshine.css'
 ```
 
+**Note:** Moonshine distributes as pure TypeScript, and Vite will process the CSS from source automatically.
+
 ### 4. Set up the Provider
 
 Wrap your application in the `MoonshineConfigProvider` component:
@@ -52,7 +54,7 @@ import { MoonshineConfigProvider } from '@speakeasy-api/moonshine'
 </MoonshineConfigProvider>
 ```
 
-### 5. Configure Custom Fonts (Optional)
+### 6. Configure Custom Fonts (Optional)
 
 Moonshine uses custom fonts (Diatype, Tobias). If you have licenses for these fonts, add them to your project:
 
@@ -79,7 +81,7 @@ Moonshine uses custom fonts (Diatype, Tobias). If you have licenses for these fo
 
 If you don't have these fonts, the design system will fall back to system fonts.
 
-### 6. Use Components and Utilities
+### 7. Use Components and Utilities
 
 ```tsx
 import { Grid } from '@speakeasy-api/moonshine'
@@ -112,7 +114,7 @@ The types are automatically generated during the build process and include:
 
 💡 **Tip**: This prevents typos and helps you discover available utilities without leaving your editor!
 
-The package is built with [vite](https://vitejs.dev/), and is distributed in both [ESM](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) and [CommonJS](https://nodejs.org/api/modules.html#modules-commonjs) formats.
+The package is built with [vite](https://vitejs.dev/) and distributed as **pure TypeScript**. Consumers using Vite will transpile the TypeScript on-the-fly, eliminating the need for a separate build step when linking the library locally.
 
 ### Using Tailwind Merge
 
@@ -206,8 +208,7 @@ import type { MoonshineClasses } from '@speakeasy-api/moonshine/types/utilities'
 
 1. Clone the repository
 2. Run `pnpm install` to install the dependencies
-3. Run `pnpm build` to build the package
-4. Run `pnpm storybook` to start the storybook server
+3. Run `pnpm storybook` to start the storybook server
 
 If you'd like to develop Moonshine in tandem with another app, you can follow the steps outlined below in the **Linking the library locally** section.
 
@@ -264,18 +265,33 @@ Run `pnpm test` to run the tests.
 
 ### Linking the library locally
 
-Run `pnpm build:watch` within Moonshine to build the library and watch for changes.
+Since Moonshine distributes as pure TypeScript, linking is much simpler - no build step required!
 
-Then run `pnpm link ../path/to/moonshine` within the app that will use the library. For the registry `webapp` directory (assuming a standard cloning setup where `moonshine` is a sibling of the registry repo), it would be:
+1. **Link the library** from within your consuming app:
 
 ```bash
 pnpm link ../path/to/moonshine
 ```
 
-The lockfile file within your app should referenced the linked copy:
+For example, if `moonshine` is a sibling of your app directory:
+
+```bash
+pnpm link ../moonshine
+```
+
+2. **Start your dev server** - Vite will automatically transpile the TypeScript from the linked library.
+
+The lockfile within your app should reference the linked copy:
 
 ```yaml
 '@speakeasy-api/moonshine':
-  specifier: ^0.43.1
+  specifier: ^2.0.0-alpha.1
   version: link:../../../../moonshine
 ```
+
+**Benefits of pure TypeScript distribution:**
+
+- ✅ No need to run `tsc` in watch mode
+- ✅ No build conflicts between library and consumer
+- ✅ Instant updates when you change source files
+- ✅ Simpler development workflow

package/package.json

@@ -1,21 +1,22 @@
 {
   "name": "@speakeasy-api/moonshine",
-  "version": "1.33.4",
+  "version": "2.0.0-alpha.2",
   "packageManager": "pnpm@9.0.0",
   "description": "Speakeasy's design system Moonshine",
   "sideEffects": false,
-  "main": "dist/moonshine.cjs.js",
-  "module": "dist/moonshine.es.js",
-  "types": "dist/index.d.ts",
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "require": "./dist/moonshine.cjs.js",
-      "import": "./dist/moonshine.es.js"
+      "types": "./src/index.ts",
+      "import": "./src/index.ts",
+      "require": "./src/index.ts"
     },
     "./moonshine.css": {
-      "require": "./dist/style.css",
-      "import": "./dist/style.css"
+      "require": "./src/global.css",
+      "import": "./src/global.css",
+      "default": "./src/global.css"
     },
     "./src/global.css": {
       "require": "./src/global.css",
@@ -26,28 +27,16 @@
     "type": "git",
     "url": "https://github.com/speakeasy-api/moonshine.git"
   },
-  "files": [
-    "dist",
-    "src/global.css",
-    "src/base.css",
-    "src/utilities.css",
-    "types"
-  ],
   "scripts": {
-    "clean": "rimraf dist",
-    "build": "pnpm clean && vite build",
-    "build:watch": "vite build --watch --mode development",
     "type-check": "tsc --noEmit --skipLibCheck",
-    "prepack": "pnpm build",
+    "prepack": "pnpm type-check",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "chromatic": "chromatic",
     "lint": "eslint",
     "lint:fix": "eslint --fix",
     "test": "vitest",
-    "analyze-bundle": "npx vite-bundle-visualizer",
-    "generate:docs": "node scripts/generate-utility-docs.js",
-    "postbuild": "pnpm generate:docs"
+    "generate:docs": "node scripts/generate-utility-docs.js"
   },
   "author": "Speakeasy",
   "license": "ISC",

package/scripts/generate-utility-docs.js

@@ -0,0 +1,324 @@
+#!/usr/bin/env node
+
+const fs = require('fs')
+const path = require('path')
+const postcss = require('postcss')
+
+// Paths
+const UTILITIES_CSS = path.join(__dirname, '../src/utilities.css')
+const BASE_CSS = path.join(__dirname, '../src/base.css')
+const CLAUDE_MD = path.join(__dirname, '../CLAUDE.md')
+const TYPES_DIR = path.join(__dirname, '../types')
+const UTILITIES_TYPES = path.join(TYPES_DIR, 'utilities.d.ts')
+
+// Ensure types directory exists
+if (!fs.existsSync(TYPES_DIR)) {
+  fs.mkdirSync(TYPES_DIR)
+}
+
+// Parse CSS and extract utilities
+async function extractUtilities(cssPath) {
+  if (!fs.existsSync(cssPath)) {
+    console.error(`CSS file not found: ${cssPath}`)
+    return []
+  }
+
+  const css = fs.readFileSync(cssPath, 'utf8')
+
+  let ast
+  try {
+    ast = postcss.parse(css)
+  } catch (error) {
+    console.error(`Error parsing CSS file ${cssPath}:`, error.message)
+    return []
+  }
+
+  const utilities = []
+
+  ast.walkAtRules('utility', (rule) => {
+    const name = rule.params.trim()
+
+    // Extract the CSS properties
+    const properties = []
+    rule.walkDecls((decl) => {
+      // Skip nested rules (like @variant)
+      if (decl.parent === rule) {
+        properties.push(`  ${decl.prop}: ${decl.value};`)
+      }
+    })
+
+    // Check for variant rules (like dark mode)
+    const variants = []
+    rule.walkAtRules('variant', (variantRule) => {
+      const variantProps = []
+      variantRule.walkDecls((decl) => {
+        variantProps.push(`    ${decl.prop}: ${decl.value};`)
+      })
+      variants.push({
+        name: variantRule.params.trim(),
+        properties: variantProps,
+      })
+    })
+
+    utilities.push({
+      name,
+      properties,
+      variants,
+      raw: rule.toString(),
+    })
+  })
+
+  return utilities
+}
+
+// Extract theme colors that are exposed as utilities
+async function extractThemeColors(cssPath) {
+  const css = fs.readFileSync(cssPath, 'utf8')
+  const ast = postcss.parse(css)
+  const colors = new Set()
+
+  ast.walkAtRules('theme', (rule) => {
+    rule.walkDecls((decl) => {
+      if (decl.prop.startsWith('--color-') && !decl.prop.includes('*')) {
+        const colorName = decl.prop.replace('--color-', '')
+        // Only include semantic colors, not raw values
+        if (
+          !colorName.match(
+            /^(brand|neutral|destructive|warning|success|info)-\d+$/
+          )
+        ) {
+          colors.add(colorName)
+        }
+      }
+    })
+  })
+
+  return Array.from(colors)
+}
+
+// Generate TypeScript definitions
+function generateTypeDefinitions(utilities, themeColors) {
+  const utilityTypes = utilities.map((u) => `  | '${u.name}'`).join('\n')
+
+  // Generate color utility types
+  const colorPrefixes = ['bg', 'text', 'border', 'ring', 'divide']
+  const colorUtilities = themeColors
+    .flatMap((color) =>
+      colorPrefixes.map((prefix) => `  | '${prefix}-${color}'`)
+    )
+    .join('\n')
+
+  return `/**
+ * Auto-generated TypeScript definitions for Moonshine utilities
+ * Generated on: ${new Date().toISOString()}
+ *
+ * DO NOT EDIT THIS FILE DIRECTLY
+ * Run 'pnpm generate:docs' to update
+ */
+
+/**
+ * Custom utility classes defined in utilities.css
+ */
+export type MoonshineUtilities =
+${utilityTypes};
+
+/**
+ * Semantic color utilities available from theme
+ * These are auto-generated from theme colors with standard prefixes
+ */
+export type MoonshineColorUtilities =
+${colorUtilities};
+
+/**
+ * All available Moonshine utility classes
+ */
+export type MoonshineClasses = MoonshineUtilities | MoonshineColorUtilities;
+
+/**
+ * Helper type for className props
+ */
+export type MoonshineClassName = MoonshineClasses | MoonshineClasses[] | undefined | null | false;
+`
+}
+
+// Generate documentation section for CLAUDE.md
+function generateDocSection(utilities) {
+  const sections = []
+
+  // Group utilities by type
+  const typography = utilities.filter(
+    (u) => u.name.startsWith('text-') || u.name.startsWith('typography-')
+  )
+  const backgrounds = utilities.filter((u) => u.name.startsWith('bg-'))
+  const borders = utilities.filter((u) => u.name.startsWith('border-'))
+  const other = utilities.filter(
+    (u) =>
+      !u.name.startsWith('text-') &&
+      !u.name.startsWith('typography-') &&
+      !u.name.startsWith('bg-') &&
+      !u.name.startsWith('border-')
+  )
+
+  sections.push('## Available Utility Classes\n')
+  sections.push(
+    'This section is auto-generated from the CSS files. Last updated: ' +
+      new Date().toISOString() +
+      '\n'
+  )
+
+  // Typography
+  if (typography.length > 0) {
+    sections.push('### Typography Utilities\n')
+    typography.forEach((u) => {
+      sections.push(`#### \`${u.name}\`\n`)
+      sections.push('```css')
+      sections.push(`.${u.name} {`)
+      sections.push(u.properties.join('\n'))
+
+      if (u.variants.length > 0) {
+        u.variants.forEach((v) => {
+          sections.push(`\n  /* ${v.name} variant */`)
+          sections.push(v.properties.join('\n'))
+        })
+      }
+
+      sections.push('}')
+      sections.push('```\n')
+    })
+  }
+
+  // Backgrounds
+  if (backgrounds.length > 0) {
+    sections.push('### Background Utilities\n')
+    backgrounds.forEach((u) => {
+      sections.push(`#### \`${u.name}\`\n`)
+      sections.push('```css')
+      sections.push(`.${u.name} {`)
+      sections.push(u.properties.join('\n'))
+
+      if (u.variants.length > 0) {
+        u.variants.forEach((v) => {
+          sections.push(`\n  /* ${v.name} variant */`)
+          sections.push(v.properties.join('\n'))
+        })
+      }
+
+      sections.push('}')
+      sections.push('```\n')
+    })
+  }
+
+  // Borders
+  if (borders.length > 0) {
+    sections.push('### Border Utilities\n')
+    borders.forEach((u) => {
+      sections.push(`#### \`${u.name}\`\n`)
+      sections.push('```css')
+      sections.push(`.${u.name} {`)
+      sections.push(u.properties.join('\n'))
+      sections.push('}')
+      sections.push('```\n')
+    })
+  }
+
+  // Other
+  if (other.length > 0) {
+    sections.push('### Other Utilities\n')
+    other.forEach((u) => {
+      sections.push(`#### \`${u.name}\`\n`)
+      sections.push('```css')
+      sections.push(`.${u.name} {`)
+      sections.push(u.properties.join('\n'))
+      sections.push('}')
+      sections.push('```\n')
+    })
+  }
+
+  return sections.join('\n')
+}
+
+// Update CLAUDE.md with generated content
+function updateClaudeMd(newContent) {
+  const claudeMd = fs.readFileSync(CLAUDE_MD, 'utf8')
+
+  // Find the section to replace
+  const startMarker = '## Available Utility Classes'
+  const endMarker = '## Migration Notes'
+
+  const startIndex = claudeMd.indexOf(startMarker)
+  let endIndex = claudeMd.indexOf(endMarker)
+
+  // If end marker not found, look for the next ## heading
+  if (endIndex === -1) {
+    const afterStart = claudeMd.substring(startIndex + startMarker.length)
+    const nextHeadingMatch = afterStart.match(/\n## /)
+    if (nextHeadingMatch) {
+      endIndex = startIndex + startMarker.length + nextHeadingMatch.index + 1
+    }
+  }
+
+  if (startIndex === -1) {
+    console.error(
+      'Could not find "## Available Utility Classes" section in CLAUDE.md'
+    )
+    console.error(
+      'Please ensure CLAUDE.md contains this section for auto-generation to work'
+    )
+    return
+  }
+
+  if (endIndex === -1 || endIndex <= startIndex) {
+    // No end marker found, append to end of file
+    const updated = claudeMd + '\n\n' + newContent
+    fs.writeFileSync(CLAUDE_MD, updated, 'utf8')
+    console.log('   Appended to end of CLAUDE.md (no end marker found)')
+  } else {
+    const before = claudeMd.substring(0, startIndex)
+    const after = claudeMd.substring(endIndex)
+    const updated = before + newContent + '\n' + after
+    fs.writeFileSync(CLAUDE_MD, updated, 'utf8')
+  }
+}
+
+// Main function
+async function main() {
+  console.log('🎨 Generating Moonshine utility documentation...\n')
+
+  try {
+    // Extract utilities
+    console.log('📖 Reading utilities.css...')
+    const utilities = await extractUtilities(UTILITIES_CSS)
+    console.log(`   Found ${utilities.length} utility classes`)
+
+    // Extract theme colors
+    console.log('🎨 Reading theme colors from utilities.css...')
+    const themeColors = await extractThemeColors(UTILITIES_CSS)
+    console.log(`   Found ${themeColors.length} theme colors`)
+
+    // Generate TypeScript definitions
+    console.log('\n📝 Generating TypeScript definitions...')
+    const typeDefs = generateTypeDefinitions(utilities, themeColors)
+    fs.writeFileSync(UTILITIES_TYPES, typeDefs, 'utf8')
+    console.log(
+      `   Written to ${path.relative(process.cwd(), UTILITIES_TYPES)}`
+    )
+
+    // Generate documentation
+    console.log('\n📚 Generating documentation...')
+    const docSection = generateDocSection(utilities)
+    updateClaudeMd(docSection)
+    console.log(`   Updated ${path.relative(process.cwd(), CLAUDE_MD)}`)
+
+    console.log('\n✅ Documentation generation complete!')
+    console.log('\n💡 Tip: Import the types in your components:')
+    console.log(
+      '   import type { MoonshineClasses } from "@speakeasy-api/moonshine/types/utilities"'
+    )
+  } catch (error) {
+    console.error('\n❌ Error generating documentation:', error)
+    process.exit(1)
+  }
+}
+
+// Run the script
+main()

package/src/assets/icons/external/github.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 128 128" width="16" height="16">
+<g fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M64 5.103c-33.347 0-60.388 27.035-60.388 60.388 0 26.682 17.303 49.317 41.297 57.303 3.017.56 4.125-1.31 4.125-2.905 0-1.44-.056-6.197-.082-11.243-16.8 3.653-20.345-7.125-20.345-7.125-2.747-6.98-6.705-8.836-6.705-8.836-5.48-3.748.413-3.67.413-3.67 6.063.425 9.257 6.223 9.257 6.223 5.386 9.23 14.127 6.562 17.573 5.02.542-3.903 2.107-6.568 3.834-8.076-13.413-1.525-27.514-6.704-27.514-29.843 0-6.593 2.36-11.98 6.223-16.21-.628-1.52-2.695-7.662.584-15.98 0 0 5.07-1.623 16.61 6.19C53.7 35 58.867 34.327 64 34.304c5.13.023 10.3.694 15.127 2.033 11.526-7.813 16.59-6.19 16.59-6.19 3.287 8.317 1.22 14.46.593 15.98 3.872 4.23 6.215 9.617 6.215 16.21 0 23.194-14.127 28.3-27.574 29.796 2.167 1.874 4.097 5.55 4.097 11.183 0 8.08-.07 14.583-.07 16.572 0 1.607 1.088 3.49 4.148 2.897 23.98-7.994 41.263-30.622 41.263-57.294C124.388 32.14 97.35 5.104 64 5.104z"></path><path d="M26.484 91.806c-.133.3-.605.39-1.035.185-.44-.196-.685-.605-.543-.906.13-.31.603-.395 1.04-.188.44.197.69.61.537.91zm2.446 2.729c-.287.267-.85.143-1.232-.28-.396-.42-.47-.983-.177-1.254.298-.266.844-.14 1.24.28.394.426.472.984.17 1.255zM31.312 98.012c-.37.258-.976.017-1.35-.52-.37-.538-.37-1.183.01-1.44.373-.258.97-.025 1.35.507.368.545.368 1.19-.01 1.452zm3.261 3.361c-.33.365-1.036.267-1.552-.23-.527-.487-.674-1.18-.343-1.544.336-.366 1.045-.264 1.564.23.527.486.686 1.18.333 1.543zm4.5 1.951c-.147.473-.825.688-1.51.486-.683-.207-1.13-.76-.99-1.238.14-.477.823-.7 1.512-.485.683.206 1.13.756.988 1.237zm4.943.361c.017.498-.563.91-1.28.92-.723.017-1.308-.387-1.315-.877 0-.503.568-.91 1.29-.924.717-.013 1.306.387 1.306.88zm4.598-.782c.086.485-.413.984-1.126 1.117-.7.13-1.35-.172-1.44-.653-.086-.498.422-.997 1.122-1.126.714-.123 1.354.17 1.444.663zm0 0"></path></g>
+</svg>

package/src/assets/icons/external/maven.svg

@@ -0,0 +1,152 @@
+<svg width="16" height="16" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <linearGradient id="a" x1="-7274.8" y1="2082.507" x2="-7243.872" y2="2046.343"
+      gradientTransform="matrix(-0.023, -0.116, -0.116, 0.023, 79.68, -889.484)"
+      gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#f69923" />
+      <stop offset="0.312" stop-color="#f79a23" />
+      <stop offset="0.838" stop-color="#e97826" />
+    </linearGradient>
+    <linearGradient id="b" x1="-7503.689" y1="2086.595" x2="-7283.036" y2="2086.595"
+      gradientTransform="matrix(-0.023, -0.116, -0.116, 0.023, 79.68, -889.484)"
+      gradientUnits="userSpaceOnUse">
+      <stop offset="0.323" stop-color="#9e2064" />
+      <stop offset="0.63" stop-color="#c92037" />
+      <stop offset="0.751" stop-color="#cd2335" />
+      <stop offset="1" stop-color="#e97826" />
+    </linearGradient>
+    <linearGradient id="c" x1="-7477.053" y1="2064.42" x2="-7345.566" y2="2064.42"
+      gradientTransform="matrix(-0.023, -0.116, -0.116, 0.023, 79.68, -889.484)"
+      gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#282662" />
+      <stop offset="0.095" stop-color="#662e8d" />
+      <stop offset="0.788" stop-color="#9f2064" />
+      <stop offset="0.949" stop-color="#cd2032" />
+    </linearGradient>
+    <linearGradient id="d" x1="-7491.296" y1="2088.633" x2="-7270.643" y2="2088.633" xlink:href="#b" />
+    <linearGradient id="e" x1="-7475.203" y1="2085.61" x2="-7359.244" y2="2085.61" xlink:href="#c" />
+    <linearGradient id="f" x1="-7491.296" y1="2065.799" x2="-7270.643" y2="2065.799" xlink:href="#b" />
+    <linearGradient id="g" x1="-7504.984" y1="2066.905" x2="-7284.331" y2="2066.905" xlink:href="#b" />
+    <linearGradient id="h" x1="-7491.296" y1="2058.959" x2="-7270.643" y2="2058.959" xlink:href="#b" />
+    <linearGradient id="i" x1="-7491.296" y1="2059.762" x2="-7270.643" y2="2059.762" xlink:href="#b" />
+    <linearGradient id="j" x1="-8307.632" y1="2040.008" x2="-8276.704" y2="2003.844"
+      gradientTransform="matrix(0.074, -0.112, -0.112, -0.074, 864.083, -775.51)" xlink:href="#a" />
+    <linearGradient id="k" x1="-8536.521" y1="2044.096" x2="-8315.868" y2="2044.096"
+      gradientTransform="matrix(0.074, -0.112, -0.112, -0.074, 864.083, -775.51)" xlink:href="#b" />
+    <linearGradient id="l" x1="-8509.885" y1="2021.921" x2="-8378.397" y2="2021.921"
+      gradientTransform="matrix(0.074, -0.112, -0.112, -0.074, 864.083, -775.51)" xlink:href="#c" />
+    <linearGradient id="m" x1="-8524.128" y1="2046.134" x2="-8303.475" y2="2046.134"
+      gradientTransform="matrix(0.074, -0.112, -0.112, -0.074, 864.083, -775.51)" xlink:href="#b" />
+    <linearGradient id="n" x1="-8508.035" y1="2043.111" x2="-8392.076" y2="2043.111"
+      gradientTransform="matrix(0.074, -0.112, -0.112, -0.074, 864.083, -775.51)" xlink:href="#c" />
+    <linearGradient id="o" x1="-8524.128" y1="2023.3" x2="-8303.475" y2="2023.3"
+      gradientTransform="matrix(0.074, -0.112, -0.112, -0.074, 864.083, -775.51)" xlink:href="#b" />
+    <linearGradient id="p" x1="-8537.816" y1="2024.407" x2="-8317.163" y2="2024.407"
+      gradientTransform="matrix(0.074, -0.112, -0.112, -0.074, 864.083, -775.51)" xlink:href="#b" />
+    <linearGradient id="q" x1="-8524.128" y1="2016.46" x2="-8303.475" y2="2016.46"
+      gradientTransform="matrix(0.074, -0.112, -0.112, -0.074, 864.083, -775.51)" xlink:href="#b" />
+    <linearGradient id="r" x1="-8524.128" y1="2017.263" x2="-8303.475" y2="2017.263"
+      gradientTransform="matrix(0.074, -0.112, -0.112, -0.074, 864.083, -775.51)" xlink:href="#b" />
+  </defs>
+  <title>file_type_maven</title>
+  <path
+    d="M5.976,2.533a9.539,9.539,0,0,0-.4,2.655l1.427.691a17.928,17.928,0,0,1,.1-2.541c.005-.058.011-.092.011-.092,0,.031-.009.061-.011.092A15.939,15.939,0,0,0,7.1,5.845a27.79,27.79,0,0,0,2.114-2A3.041,3.041,0,0,0,7.621,2.144S6.357,1.634,5.976,2.533Z"
+    style="fill:url(#a)" />
+  <path d="M9.688,9.722A.018.018,0,0,0,9.7,9.709l-.08.071c0,.007-.009.013-.01.019Z"
+    style="fill:none" />
+  <path d="M10.562,12.19c-.038.046-.083.091-.128.136C10.478,12.282,10.523,12.236,10.562,12.19Z"
+    style="fill:none" />
+  <path
+    d="M9.741,19.776c0-.021-.014-.044-.018-.065-.122-.445-.24-.876-.355-1.3-.125-.474-.244-.939-.359-1.391-.118-.473-.231-.937-.336-1.384-.112-.472-.215-.925-.311-1.366-.077-.359-.152-.707-.221-1.047-.024-.115-.045-.225-.066-.336-.042-.222-.086-.436-.126-.647s-.073-.386-.109-.575c-.011-.064-.022-.128-.034-.186L7.8,11.444l-.069.062-.142-.07c0,.015.005.032.01.047.047.285.1.573.152.863.03.164.063.332.093.5.088.465.181.926.282,1.393s.2.94.308,1.4.214.914.324,1.368.222.9.338,1.346c.119.466.24.925.365,1.374.026.1.055.206.085.3.1.366.2.721.3,1.073l.229.115.076-.068a.069.069,0,0,0-.009-.029C9.993,20.668,9.865,20.215,9.741,19.776Z"
+    style="fill:none" />
+  <path
+    d="M10.924,13.495c-.067.073-.136.142-.206.211h0c.036-.033.073-.072.107-.108A1.212,1.212,0,0,0,10.924,13.495Z"
+    style="fill:#be202e" />
+  <path
+    d="M10.924,13.495c-.067.073-.136.142-.206.211h0c.036-.033.073-.072.107-.108A1.212,1.212,0,0,0,10.924,13.495Z"
+    style="fill:#be202e;opacity:0.3499999940395355;isolation:isolate" />
+  <path
+    d="M10.4,12.356h0c.012-.009.021-.021.032-.03.045-.045.09-.09.128-.136-.05.055-.107.108-.161.166Z"
+    style="fill:#be202e" />
+  <path
+    d="M10.4,12.356h0c.012-.009.021-.021.032-.03.045-.045.09-.09.128-.136-.05.055-.107.108-.161.166Z"
+    style="fill:#be202e;opacity:0.3499999940395355;isolation:isolate" />
+  <path
+    d="M7.38,10.092q-.1-.712-.18-1.4c-.055-.477-.1-.945-.131-1.408,0-.028-.005-.056,0-.081C7.032,6.751,7.01,6.31,7,5.878L5.575,5.191c0,.086-.01.175-.013.269-.014.341-.025.7-.028,1.085,0,.43,0,.878.008,1.347.01.432.028.882.051,1.34.023.392.049.788.081,1.192,0,.017,0,.028,0,.046l1.906.965C7.517,10.984,7.447,10.536,7.38,10.092Z"
+    style="fill:url(#b)" />
+  <path
+    d="M10.2,21.362c.1.356.212.723.328,1.095,0,0,0,.011,0,.015.016.054.029.105.049.157.076.251.149.474.307.984a1.927,1.927,0,0,1,1.094.262,1.563,1.563,0,0,0-1.041-.566,3.349,3.349,0,0,0,1.827-2.977c-.012-.106-.026-.216-.047-.326a1.347,1.347,0,0,1-.766,1.152l0,0,0,0a3.766,3.766,0,0,0,.61-2.373c-.015-.193-.04-.4-.075-.619a3.056,3.056,0,0,1-1.772,2.462l-.578.532C10.157,21.227,10.175,21.293,10.2,21.362Z"
+    style="fill:url(#c)" />
+  <path
+    d="M9.453,19.735c-.121-.452-.242-.911-.365-1.374-.116-.444-.227-.892-.338-1.346s-.218-.911-.324-1.368-.21-.934-.308-1.4-.19-.931-.282-1.393c-.033-.168-.063-.332-.093-.5-.053-.286-.1-.574-.152-.863,0-.015-.005-.032-.01-.047l-1.895-.967a.679.679,0,0,1,.007.091c.038.429.075.865.126,1.3s.106.89.172,1.341c.056.38.116.757.179,1.138.013.075.028.154.041.228.087.471.181.926.282,1.351.113.482.235.934.357,1.356.082.276.163.542.246.794.072.212.15.425.225.635.181.493.382.971.6,1.438l1.915.97c-.1-.352-.2-.71-.3-1.073C9.508,19.941,9.482,19.84,9.453,19.735Z"
+    style="fill:url(#d)" />
+  <path
+    d="M7.947,20.208a14.86,14.86,0,0,0,.881,1.627c.011.016.022.038.033.054a3.864,3.864,0,0,0-1.46-.113,5.37,5.37,0,0,1,2.353,1.371,2.468,2.468,0,0,1-1.112.558,2.46,2.46,0,0,0,1.22-.108,3,3,0,0,0-.742,1.447,3.084,3.084,0,0,1,1.205-1.276c.575,1.906,1.267,3.972,2.034,6.14a.577.577,0,0,0,.09-.541c-.141-.389-1.054-2.968-2.095-6.468-.03-.1-.056-.2-.089-.3-.009-.029-.016-.054-.025-.084q-.16-.55-.326-1.132c-.024-.09-.05-.174-.074-.265l0,0-1.915-.97A.357.357,0,0,0,7.947,20.208Z"
+    style="fill:url(#e)" />
+  <path
+    d="M7.806,11.476c.011.064.023.121.034.186.037.19.07.382.109.575.04.211.084.426.126.647.021.111.042.222.066.336.069.34.144.688.221,1.047.1.441.2.894.311,1.366.1.446.218.911.336,1.384.115.451.231.913.359,1.391.112.423.233.858.355,1.3,0,.021.014.044.018.065.123.439.252.892.386,1.353a.069.069,0,0,0,.009.029l.578-.532c-.015,0-.026.013-.045.021a5.547,5.547,0,0,0,1.408-3.114,7.47,7.47,0,0,0-.018-1.737,11.925,11.925,0,0,0-.278-1.486c-.114-.458-.254-.944-.425-1.456a2.891,2.891,0,0,1-.441.637l-.1.11c-.033.037-.07.069-.107.108h0a3.377,3.377,0,0,0,.416-2.507,3.176,3.176,0,0,1-.572.991c-.038.046-.083.091-.128.136-.012.009-.021.021-.036.033h0a3.52,3.52,0,0,0,.371-.814,1.509,1.509,0,0,0,.043-.17c.02-.087.034-.175.047-.263.005-.058.014-.112.019-.171a2.461,2.461,0,0,0,0-.413c0-.046,0-.087-.011-.13-.011-.064-.019-.124-.031-.182-.046-.267-.1-.5-.149-.7-.026-.1-.05-.192-.076-.275-.012-.033-.018-.065-.03-.1-.031-.091-.056-.175-.084-.245a2.452,2.452,0,0,0-.105-.242h0a.532.532,0,0,1-.042.115,3.749,3.749,0,0,1-.65.934l.533-.487L9.687,9.7a.018.018,0,0,0-.009.013A1.082,1.082,0,0,0,9.6,9.8c0-.007.009-.013.01-.019L7.79,11.446C7.805,11.459,7.807,11.469,7.806,11.476Z"
+    style="fill:url(#f)" />
+  <path
+    d="M7.1,5.845c.022.4.057.848.1,1.344a.485.485,0,0,0,.009.078c.041.433.094.9.162,1.409.058.439.122.9.2,1.4.065.433.145.886.227,1.367l1.82-1.667a2.987,2.987,0,0,0,.457-1.647c0-.143-.011-.293-.022-.447A14.324,14.324,0,0,0,9.895,6.25a12.46,12.46,0,0,0-.271-1.287,6.825,6.825,0,0,0-.209-.653c-.065-.163-.133-.312-.2-.454A28.8,28.8,0,0,1,7.1,5.845Z"
+    style="fill:url(#g)" />
+  <path d="M10.827,13.6c-.033.037-.07.069-.107.108h0A1.391,1.391,0,0,1,10.827,13.6Z"
+    style="fill:#be202e" />
+  <path d="M10.827,13.6c-.033.037-.07.069-.107.108h0A1.391,1.391,0,0,1,10.827,13.6Z"
+    style="fill:#be202e;opacity:0.3499999940395355;isolation:isolate" />
+  <path d="M10.827,13.6c-.033.037-.07.069-.107.108h0A1.391,1.391,0,0,1,10.827,13.6Z"
+    style="fill:url(#h)" />
+  <path d="M10.4,12.359c.012-.009.021-.021.036-.033-.012.009-.021.021-.036.033Z"
+    style="fill:#be202e" />
+  <path d="M10.4,12.359c.012-.009.021-.021.036-.033-.012.009-.021.021-.036.033Z"
+    style="fill:#be202e;opacity:0.3499999940395355;isolation:isolate" />
+  <path d="M10.4,12.359c.012-.009.021-.021.036-.033-.012.009-.021.021-.036.033Z"
+    style="fill:url(#i)" />
+  <path
+    d="M24.627,2.891A10.789,10.789,0,0,0,22.2,4.713l.6,1.69a20.278,20.278,0,0,1,2.1-1.965c.051-.042.082-.066.082-.066-.026.024-.056.042-.082.066a18.028,18.028,0,0,0-2,2.013,31.432,31.432,0,0,0,3.288.072,3.44,3.44,0,0,0,.071-2.639S25.647,2.47,24.627,2.891Z"
+    style="fill:url(#j)" />
+  <path d="M21.9,11.627a.02.02,0,0,0,.017,0l-.121-.007c-.006,0-.017,0-.023.008Z" style="fill:none" />
+  <path d="M20.645,14.308c-.068.007-.14.007-.212.008C20.506,14.315,20.578,14.315,20.645,14.308Z"
+    style="fill:none" />
+  <path
+    d="M13.958,19.763c.014-.02.023-.046.037-.067.255-.456.5-.9.75-1.331.276-.481.55-.95.816-1.4.28-.474.559-.938.829-1.381.285-.468.561-.915.835-1.346.223-.35.439-.689.654-1.018.072-.111.143-.217.214-.323.142-.212.278-.419.413-.621.127-.186.248-.368.369-.55.042-.06.084-.121.12-.176l.021-.03-.1,0-.058-.169c-.008.015-.021.03-.029.046-.189.266-.378.538-.563.815-.106.156-.213.318-.325.479-.3.444-.591.889-.879,1.346s-.584.918-.867,1.375-.554.905-.826,1.359-.537.9-.8,1.352c-.274.47-.542.935-.8,1.4-.059.1-.119.21-.173.313-.21.374-.413.738-.611,1.1l.093.274.116.006a.078.078,0,0,0,.016-.031C13.452,20.681,13.709,20.214,13.958,19.763Z"
+    style="fill:none" />
+  <path
+    d="M19.9,15.646c-.112.006-.223.006-.334.006h0c.055,0,.116,0,.172,0A1.371,1.371,0,0,0,19.9,15.646Z"
+    style="fill:#be202e" />
+  <path
+    d="M19.9,15.646c-.112.006-.223.006-.334.006h0c.055,0,.116,0,.172,0A1.371,1.371,0,0,0,19.9,15.646Z"
+    style="fill:#be202e;opacity:0.3499999940395355;isolation:isolate" />
+  <path d="M20.384,14.314h0c.016,0,.033,0,.05,0,.072,0,.144,0,.212-.008-.084,0-.172,0-.261.006Z"
+    style="fill:#be202e" />
+  <path d="M20.384,14.314h0c.016,0,.033,0,.05,0,.072,0,.144,0,.212-.008-.084,0-.172,0-.261.006Z"
+    style="fill:#be202e;opacity:0.3499999940395355;isolation:isolate" />
+  <path
+    d="M19.751,10.091q.486-.652.968-1.272c.334-.428.672-.838,1.013-1.237.02-.025.041-.049.06-.069.334-.389.666-.761,1-1.117l-.6-1.685c-.071.067-.147.134-.224.205-.283.263-.579.547-.884.851-.344.343-.7.707-1.064,1.091-.335.356-.678.732-1.023,1.119-.293.334-.587.673-.882,1.024l-.034.039.767,2.291C19.153,10.918,19.452,10.5,19.751,10.091Z"
+    style="fill:url(#k)" />
+  <path
+    d="M13.063,21.4c-.2.37-.4.75-.605,1.142,0,.005-.007.01-.008.015-.03.057-.06.108-.085.165-.138.262-.256.5-.534,1.036a2.18,2.18,0,0,1,.673,1.08,1.768,1.768,0,0,0-.388-1.282c1.558.3,2.973.1,3.836-.945.075-.094.15-.194.221-.3a1.524,1.524,0,0,1-1.532.318h0A4.26,4.26,0,0,0,17.017,21.2c.141-.168.284-.352.431-.558a3.456,3.456,0,0,1-3.383.574l-.888-.031C13.139,21.261,13.1,21.328,13.063,21.4Z"
+    style="fill:url(#l)" />
+  <path
+    d="M13.758,19.5c.262-.461.529-.926.8-1.4.26-.45.525-.9.8-1.352s.549-.906.826-1.359.573-.919.867-1.375.587-.9.879-1.346c.107-.162.213-.318.325-.479.184-.272.374-.544.563-.815.008-.015.021-.03.029-.046l-.757-2.284a.768.768,0,0,1-.067.079c-.31.376-.626.756-.934,1.149s-.622.8-.927,1.217c-.257.35-.508.7-.76,1.058-.049.07-.1.146-.148.217-.3.449-.591.889-.847,1.312-.292.478-.554.939-.789,1.375-.153.288-.3.566-.433.835-.111.228-.217.461-.323.69-.246.54-.464,1.085-.661,1.633l.771,2.3c.2-.365.406-.728.611-1.1C13.638,19.71,13.7,19.608,13.758,19.5Z"
+    style="fill:url(#m)" />
+  <path
+    d="M12.17,18.686a16.808,16.808,0,0,0-.583,2.01c0,.022-.013.048-.016.07a4.37,4.37,0,0,0-1.086-1.251,6.074,6.074,0,0,1,.805,2.973,2.792,2.792,0,0,1-1.339-.435,2.782,2.782,0,0,0,1.068.883,3.4,3.4,0,0,0-1.747.575,3.488,3.488,0,0,1,1.984-.069C10.2,25.432,9.12,27.645,8.015,30a.652.652,0,0,0,.5-.364c.2-.426,1.51-3.226,3.453-6.872.054-.1.113-.205.168-.314.016-.031.03-.057.046-.087q.308-.57.637-1.17c.052-.092.1-.18.151-.272v-.005l-.771-2.3A.4.4,0,0,0,12.17,18.686Z"
+    style="fill:url(#n)" />
+  <path
+    d="M18.994,11.544c-.042.06-.078.116-.12.176-.121.182-.247.363-.369.55s-.271.409-.413.621c-.071.106-.142.212-.214.323-.215.329-.431.669-.654,1.018-.274.431-.55.878-.835,1.346-.27.443-.549.906-.829,1.381-.266.454-.539.919-.816,1.4-.246.43-.494.875-.75,1.331-.014.02-.023.046-.037.067-.249.451-.506.918-.765,1.4a.078.078,0,0,0-.016.031l.888.031c-.015-.008-.032-.01-.053-.019a6.274,6.274,0,0,0,3.607-1.389A8.449,8.449,0,0,0,18.986,18.4a13.487,13.487,0,0,0,.956-1.417c.272-.459.546-.962.815-1.51a3.269,3.269,0,0,1-.861.162l-.168.009c-.056,0-.111,0-.172,0h0a3.82,3.82,0,0,0,2.326-1.688,3.592,3.592,0,0,1-1.248.344c-.068.007-.14.007-.212.008-.016,0-.033,0-.055,0h0a3.981,3.981,0,0,0,.945-.36,1.707,1.707,0,0,0,.17-.1c.086-.054.166-.114.247-.174.051-.042.1-.08.151-.122a2.784,2.784,0,0,0,.326-.335c.034-.039.066-.073.094-.114.042-.06.083-.115.119-.171.175-.251.32-.48.439-.684.059-.1.112-.194.158-.282.016-.036.037-.067.054-.1.048-.1.094-.186.127-.264a2.773,2.773,0,0,0,.107-.278h0a.6.6,0,0,1-.125.059,4.24,4.24,0,0,1-1.265.236l.816.031-.816-.031a.02.02,0,0,0-.017,0,1.224,1.224,0,0,0-.128,0c.006,0,.017,0,.023-.008l-2.79-.1C19.007,11.529,19,11.539,18.994,11.544Z"
+    style="fill:url(#o)" />
+  <path
+    d="M22.9,6.452c-.3.339-.628.728-.986,1.164a.548.548,0,0,0-.055.07c-.311.381-.638.8-.989,1.263-.3.4-.62.824-.954,1.29-.292.4-.587.829-.9,1.281l2.79.1a3.379,3.379,0,0,0,1.677-.962c.111-.117.224-.244.338-.377A16.2,16.2,0,0,0,24.828,9a14.093,14.093,0,0,0,.8-1.251,7.72,7.72,0,0,0,.351-.691c.077-.183.141-.356.2-.525A32.58,32.58,0,0,1,22.9,6.452Z"
+    style="fill:url(#p)" />
+  <path d="M19.738,15.655c-.056,0-.111,0-.172,0h0A1.573,1.573,0,0,1,19.738,15.655Z"
+    style="fill:#be202e" />
+  <path d="M19.738,15.655c-.056,0-.111,0-.172,0h0A1.573,1.573,0,0,1,19.738,15.655Z"
+    style="fill:#be202e;opacity:0.3499999940395355;isolation:isolate" />
+  <path d="M19.738,15.655c-.056,0-.111,0-.172,0h0A1.573,1.573,0,0,1,19.738,15.655Z"
+    style="fill:url(#q)" />
+  <path d="M20.378,14.313c.016,0,.033,0,.055,0-.016,0-.033,0-.055,0Z" style="fill:#be202e" />
+  <path d="M20.378,14.313c.016,0,.033,0,.055,0-.016,0-.033,0-.055,0Z"
+    style="fill:#be202e;opacity:0.3499999940395355;isolation:isolate" />
+  <path d="M20.378,14.313c.016,0,.033,0,.055,0-.016,0-.033,0-.055,0Z" style="fill:url(#r)" />
+</svg>

package/src/assets/icons/external/npm.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 128 110" width="16" height="16">
+  <path fill="currentColor"
+    d="M2 38.5h124v43.71H64v7.29H36.44v-7.29H2zm6.89 36.43h13.78V53.07h6.89v21.86h6.89V45.79H8.89zm34.44-29.14v36.42h13.78v-7.28h13.78V45.79zm13.78 7.29H64v14.56h-6.89zm20.67-7.29v29.14h13.78V53.07h6.89v21.86h6.89V53.07h6.89v21.86h6.89V45.79z"></path>
+</svg>

package/src/assets/icons/external/nuget.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 128 128" width="16" height="16">
+  <path
+    d="M9.313 2.508c-3.356.43-6.32 2.418-7.958 5.344C.457 9.457.043 11.07.04 12.969c0 1.789.297 3.117 1.063 4.687 1.421 2.938 4.117 5.008 7.468 5.73.86.184 2.95.2 3.848.032 3.844-.723 6.926-3.375 8.168-7.02.422-1.222.508-1.824.508-3.398 0-1.531-.043-1.883-.418-3.094-1.063-3.492-3.887-6.21-7.406-7.125-1.176-.304-2.825-.418-3.957-.273zM56.5 25.531C42.586 26.72 30.95 36.625 27.602 50.125c-.422 1.688-.579 2.617-.864 5.031-.101.864-.152 38.29-.05 39.969.148 2.613.523 4.844 1.218 7.25 3.106 10.77 11.625 19.27 22.367 22.313 1.829.511 3.766.882 5.82 1.105 1.009.105 2.071.113 20.72.113 20.835 0 20.07.012 22.25-.289a32.469 32.469 0 0014.96-6.148c1.747-1.305 3.922-3.332 5.239-4.875 1.261-1.489 2.699-3.524 3.644-5.188 1.914-3.355 3.324-7.457 3.867-11.25.332-2.273.309-.824.332-21.781.02-13.656.008-19.71-.043-20.438-.468-7.023-3.007-13.374-7.55-18.874-.762-.926-3.082-3.243-4.012-4.012-4.656-3.856-9.867-6.25-15.688-7.2-2.48-.406-.769-.374-22.562-.39-15.938-.004-19.969.008-20.75.07zm-2.875 14.895c4.8.855 8.73 4.21 10.281 8.773.977 2.883.95 5.926-.07 8.77-.68 1.894-2 3.894-3.43 5.187-2.554 2.332-5.601 3.532-8.968 3.532-3.633 0-6.833-1.32-9.383-3.868-2.149-2.152-3.438-4.78-3.805-7.789-.102-.812-.086-2.5.031-3.343.824-6.008 5.57-10.633 11.657-11.376.792-.093 2.867-.03 3.687.114zM96.188 73.03c4.695.602 8.8 2.582 12.18 5.875 2.53 2.469 4.257 5.227 5.35 8.563.708 2.133.97 3.738 1.012 6.125.043 2.43-.16 4.125-.77 6.27-1.315 4.679-4.397 8.937-8.46 11.69-5.25 3.563-11.648 4.571-17.836 2.813-2.344-.66-5.14-2.097-7.102-3.64-5.164-4.079-8.132-10.172-8.124-16.715.007-7.282 3.773-14.051 10-17.942 2.8-1.757 5.968-2.808 9.437-3.132.855-.083 3.395-.024 4.313.093zm0 0"
+    fill="currentColor"></path>
+</svg>