Add comprehensive frontend UI and distributed infrastructure

Frontend Enhancements:
- Complete React TypeScript frontend with modern UI components
- Distributed workflows management interface with real-time updates
- Socket.IO integration for live agent status monitoring
- Agent management dashboard with cluster visualization
- Project management interface with metrics and task tracking
- Responsive design with proper error handling and loading states

Backend Infrastructure:
- Distributed coordinator for multi-agent workflow orchestration
- Cluster management API with comprehensive agent operations
- Enhanced database models for agents and projects
- Project service for filesystem-based project discovery
- Performance monitoring and metrics collection
- Comprehensive API documentation and error handling

Documentation:
- Complete distributed development guide (README_DISTRIBUTED.md)
- Comprehensive development report with architecture insights
- System configuration templates and deployment guides

The platform now provides a complete web interface for managing the distributed AI cluster
with real-time monitoring, workflow orchestration, and agent coordination capabilities.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
anthonyrawlins
2025-07-10 08:41:59 +10:00
parent fc0eec91ef
commit 85bf1341f3
28348 changed files with 2646896 additions and 69 deletions

21
frontend/node_modules/tailwind-merge/LICENSE.md generated vendored Normal file
View File

@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2021 Dany Castillo
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

38
frontend/node_modules/tailwind-merge/README.md generated vendored Normal file
View File

@@ -0,0 +1,38 @@
<!-- This file is autogenerated. If you want to change this content, please do the changes in `./docs/README.md` instead. -->
<div align="center">
<br />
<a href="https://github.com/dcastil/tailwind-merge">
<img src="https://github.com/dcastil/tailwind-merge/raw/v2.6.0/assets/logo.svg" alt="tailwind-merge" height="150px" />
</a>
</div>
# tailwind-merge
Utility function to efficiently merge [Tailwind CSS](https://tailwindcss.com) classes in JS without style conflicts.
```ts
import { twMerge } from 'tailwind-merge'
twMerge('px-2 py-1 bg-red hover:bg-dark-red', 'p-3 bg-[#B91C1C]')
// → 'hover:bg-dark-red p-3 bg-[#B91C1C]'
```
- Supports Tailwind v3.0 up to v3.4 (if you use Tailwind v2, use [tailwind-merge v0.9.0](https://github.com/dcastil/tailwind-merge/tree/v0.9.0))
- Works in all modern browsers and maintained Node versions
- Fully typed
- [Check bundle size on Bundlephobia](https://bundlephobia.com/package/tailwind-merge)
## Get started
- [What is it for](https://github.com/dcastil/tailwind-merge/tree/v2.6.0/docs/what-is-it-for.md)
- [When and how to use it](https://github.com/dcastil/tailwind-merge/tree/v2.6.0/docs/when-and-how-to-use-it.md)
- [Features](https://github.com/dcastil/tailwind-merge/tree/v2.6.0/docs/features.md)
- [Limitations](https://github.com/dcastil/tailwind-merge/tree/v2.6.0/docs/limitations.md)
- [Configuration](https://github.com/dcastil/tailwind-merge/tree/v2.6.0/docs/configuration.md)
- [Recipes](https://github.com/dcastil/tailwind-merge/tree/v2.6.0/docs/recipes.md)
- [API reference](https://github.com/dcastil/tailwind-merge/tree/v2.6.0/docs/api-reference.md)
- [Writing plugins](https://github.com/dcastil/tailwind-merge/tree/v2.6.0/docs/writing-plugins.md)
- [Versioning](https://github.com/dcastil/tailwind-merge/tree/v2.6.0/docs/versioning.md)
- [Contributing](https://github.com/dcastil/tailwind-merge/tree/v2.6.0/docs/contributing.md)
- [Similar packages](https://github.com/dcastil/tailwind-merge/tree/v2.6.0/docs/similar-packages.md)

2571
frontend/node_modules/tailwind-merge/dist/bundle-cjs.js generated vendored Normal file

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

2559
frontend/node_modules/tailwind-merge/dist/bundle-mjs.mjs generated vendored Normal file

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

2234
frontend/node_modules/tailwind-merge/dist/types.d.ts generated vendored Normal file

File diff suppressed because it is too large Load Diff

91
frontend/node_modules/tailwind-merge/package.json generated vendored Normal file
View File

@@ -0,0 +1,91 @@
{
"name": "tailwind-merge",
"version": "2.6.0",
"description": "Merge Tailwind CSS classes without style conflicts",
"keywords": [
"tailwindcss",
"tailwind",
"css",
"classes",
"className",
"classList",
"merge",
"conflict",
"override"
],
"homepage": "https://github.com/dcastil/tailwind-merge",
"bugs": {
"url": "https://github.com/dcastil/tailwind-merge/issues"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/dcastil"
},
"license": "MIT",
"author": "Dany Castillo",
"files": [
"dist",
"src"
],
"source": "src/index.ts",
"exports": {
".": {
"types": "./dist/types.d.ts",
"require": "./dist/bundle-cjs.js",
"import": "./dist/bundle-mjs.mjs",
"default": "./dist/bundle-mjs.mjs"
},
"./es5": {
"types": "./dist/types.d.ts",
"require": "./dist/es5/bundle-cjs.js",
"import": "./dist/es5/bundle-mjs.mjs",
"default": "./dist/es5/bundle-mjs.mjs"
}
},
"main": "./dist/bundle-cjs.js",
"types": "./dist/types.d.ts",
"repository": {
"type": "git",
"url": "https://github.com/dcastil/tailwind-merge.git"
},
"sideEffects": false,
"scripts": {
"build": "rollup --config scripts/rollup.config.mjs",
"bench": "vitest bench --config scripts/vitest.config.mts",
"test": "vitest --config scripts/vitest.config.mts --coverage",
"test:watch": "vitest --config scripts/vitest.config.mts",
"test:exports": "node scripts/test-built-package-exports.cjs && node scripts/test-built-package-exports.mjs",
"lint": "eslint --max-warnings 0 '**'",
"preversion": "if [ -n \"$DANYS_MACHINE\" ]; then git checkout main && git pull; fi",
"version": "zx scripts/update-readme.mjs",
"postversion": "if [ -n \"$DANYS_MACHINE\" ]; then git push --follow-tags && open https://github.com/dcastil/tailwind-merge/releases; fi"
},
"dependencies": {},
"devDependencies": {
"@babel/core": "^7.26.0",
"@babel/preset-env": "^7.26.0",
"@codspeed/vitest-plugin": "^4.0.0",
"@rollup/plugin-babel": "^6.0.4",
"@rollup/plugin-node-resolve": "^16.0.0",
"@rollup/plugin-typescript": "^12.1.1",
"@vitest/coverage-v8": "^2.1.8",
"@vitest/eslint-plugin": "^1.1.14",
"babel-plugin-annotate-pure-calls": "^0.4.0",
"babel-plugin-polyfill-regenerator": "^0.6.3",
"eslint": "^9.16.0",
"eslint-plugin-import": "^2.31.0",
"globby": "^11.1.0",
"prettier": "^3.4.2",
"rollup": "^4.28.1",
"rollup-plugin-delete": "^2.1.0",
"rollup-plugin-dts": "^6.1.1",
"tslib": "^2.8.1",
"typescript": "^5.7.2",
"typescript-eslint": "^8.17.0",
"vitest": "^2.1.8",
"zx": "^8.2.4"
},
"publishConfig": {
"provenance": true
}
}

17
frontend/node_modules/tailwind-merge/src/index.ts generated vendored Normal file
View File

@@ -0,0 +1,17 @@
export { createTailwindMerge } from './lib/create-tailwind-merge'
export { getDefaultConfig } from './lib/default-config'
export { extendTailwindMerge } from './lib/extend-tailwind-merge'
export { fromTheme } from './lib/from-theme'
export { mergeConfigs } from './lib/merge-configs'
export { twJoin, type ClassNameValue } from './lib/tw-join'
export { twMerge } from './lib/tw-merge'
export {
type ClassValidator,
type Config,
type ConfigExtension,
type DefaultClassGroupIds,
type DefaultThemeGroupIds,
type ExperimentalParseClassNameParam,
type ExperimentalParsedClassName,
} from './lib/types'
export * as validators from './lib/validators'

View File

@@ -0,0 +1,214 @@
import {
AnyClassGroupIds,
AnyConfig,
AnyThemeGroupIds,
ClassGroup,
ClassValidator,
Config,
ThemeGetter,
ThemeObject,
} from './types'
export interface ClassPartObject {
nextPart: Map<string, ClassPartObject>
validators: ClassValidatorObject[]
classGroupId?: AnyClassGroupIds
}
interface ClassValidatorObject {
classGroupId: AnyClassGroupIds
validator: ClassValidator
}
const CLASS_PART_SEPARATOR = '-'
export const createClassGroupUtils = (config: AnyConfig) => {
const classMap = createClassMap(config)
const { conflictingClassGroups, conflictingClassGroupModifiers } = config
const getClassGroupId = (className: string) => {
const classParts = className.split(CLASS_PART_SEPARATOR)
// Classes like `-inset-1` produce an empty string as first classPart. We assume that classes for negative values are used correctly and remove it from classParts.
if (classParts[0] === '' && classParts.length !== 1) {
classParts.shift()
}
return getGroupRecursive(classParts, classMap) || getGroupIdForArbitraryProperty(className)
}
const getConflictingClassGroupIds = (
classGroupId: AnyClassGroupIds,
hasPostfixModifier: boolean,
) => {
const conflicts = conflictingClassGroups[classGroupId] || []
if (hasPostfixModifier && conflictingClassGroupModifiers[classGroupId]) {
return [...conflicts, ...conflictingClassGroupModifiers[classGroupId]!]
}
return conflicts
}
return {
getClassGroupId,
getConflictingClassGroupIds,
}
}
const getGroupRecursive = (
classParts: string[],
classPartObject: ClassPartObject,
): AnyClassGroupIds | undefined => {
if (classParts.length === 0) {
return classPartObject.classGroupId
}
const currentClassPart = classParts[0]!
const nextClassPartObject = classPartObject.nextPart.get(currentClassPart)
const classGroupFromNextClassPart = nextClassPartObject
? getGroupRecursive(classParts.slice(1), nextClassPartObject)
: undefined
if (classGroupFromNextClassPart) {
return classGroupFromNextClassPart
}
if (classPartObject.validators.length === 0) {
return undefined
}
const classRest = classParts.join(CLASS_PART_SEPARATOR)
return classPartObject.validators.find(({ validator }) => validator(classRest))?.classGroupId
}
const arbitraryPropertyRegex = /^\[(.+)\]$/
const getGroupIdForArbitraryProperty = (className: string) => {
if (arbitraryPropertyRegex.test(className)) {
const arbitraryPropertyClassName = arbitraryPropertyRegex.exec(className)![1]
const property = arbitraryPropertyClassName?.substring(
0,
arbitraryPropertyClassName.indexOf(':'),
)
if (property) {
// I use two dots here because one dot is used as prefix for class groups in plugins
return 'arbitrary..' + property
}
}
}
/**
* Exported for testing only
*/
export const createClassMap = (config: Config<AnyClassGroupIds, AnyThemeGroupIds>) => {
const { theme, prefix } = config
const classMap: ClassPartObject = {
nextPart: new Map<string, ClassPartObject>(),
validators: [],
}
const prefixedClassGroupEntries = getPrefixedClassGroupEntries(
Object.entries(config.classGroups),
prefix,
)
prefixedClassGroupEntries.forEach(([classGroupId, classGroup]) => {
processClassesRecursively(classGroup, classMap, classGroupId, theme)
})
return classMap
}
const processClassesRecursively = (
classGroup: ClassGroup<AnyThemeGroupIds>,
classPartObject: ClassPartObject,
classGroupId: AnyClassGroupIds,
theme: ThemeObject<AnyThemeGroupIds>,
) => {
classGroup.forEach((classDefinition) => {
if (typeof classDefinition === 'string') {
const classPartObjectToEdit =
classDefinition === '' ? classPartObject : getPart(classPartObject, classDefinition)
classPartObjectToEdit.classGroupId = classGroupId
return
}
if (typeof classDefinition === 'function') {
if (isThemeGetter(classDefinition)) {
processClassesRecursively(
classDefinition(theme),
classPartObject,
classGroupId,
theme,
)
return
}
classPartObject.validators.push({
validator: classDefinition,
classGroupId,
})
return
}
Object.entries(classDefinition).forEach(([key, classGroup]) => {
processClassesRecursively(
classGroup,
getPart(classPartObject, key),
classGroupId,
theme,
)
})
})
}
const getPart = (classPartObject: ClassPartObject, path: string) => {
let currentClassPartObject = classPartObject
path.split(CLASS_PART_SEPARATOR).forEach((pathPart) => {
if (!currentClassPartObject.nextPart.has(pathPart)) {
currentClassPartObject.nextPart.set(pathPart, {
nextPart: new Map(),
validators: [],
})
}
currentClassPartObject = currentClassPartObject.nextPart.get(pathPart)!
})
return currentClassPartObject
}
const isThemeGetter = (func: ClassValidator | ThemeGetter): func is ThemeGetter =>
(func as ThemeGetter).isThemeGetter
const getPrefixedClassGroupEntries = (
classGroupEntries: Array<[classGroupId: string, classGroup: ClassGroup<AnyThemeGroupIds>]>,
prefix: string | undefined,
): Array<[classGroupId: string, classGroup: ClassGroup<AnyThemeGroupIds>]> => {
if (!prefix) {
return classGroupEntries
}
return classGroupEntries.map(([classGroupId, classGroup]) => {
const prefixedClassGroup = classGroup.map((classDefinition) => {
if (typeof classDefinition === 'string') {
return prefix + classDefinition
}
if (typeof classDefinition === 'object') {
return Object.fromEntries(
Object.entries(classDefinition).map(([key, value]) => [prefix + key, value]),
)
}
return classDefinition
})
return [classGroupId, prefixedClassGroup]
})
}

View File

@@ -0,0 +1,12 @@
import { createClassGroupUtils } from './class-group-utils'
import { createLruCache } from './lru-cache'
import { createParseClassName } from './parse-class-name'
import { AnyConfig } from './types'
export type ConfigUtils = ReturnType<typeof createConfigUtils>
export const createConfigUtils = (config: AnyConfig) => ({
cache: createLruCache<string, string>(config.cacheSize),
parseClassName: createParseClassName(config),
...createClassGroupUtils(config),
})

View File

@@ -0,0 +1,50 @@
import { createConfigUtils } from './config-utils'
import { mergeClassList } from './merge-classlist'
import { ClassNameValue, twJoin } from './tw-join'
import { AnyConfig } from './types'
type CreateConfigFirst = () => AnyConfig
type CreateConfigSubsequent = (config: AnyConfig) => AnyConfig
type TailwindMerge = (...classLists: ClassNameValue[]) => string
type ConfigUtils = ReturnType<typeof createConfigUtils>
export function createTailwindMerge(
createConfigFirst: CreateConfigFirst,
...createConfigRest: CreateConfigSubsequent[]
): TailwindMerge {
let configUtils: ConfigUtils
let cacheGet: ConfigUtils['cache']['get']
let cacheSet: ConfigUtils['cache']['set']
let functionToCall = initTailwindMerge
function initTailwindMerge(classList: string) {
const config = createConfigRest.reduce(
(previousConfig, createConfigCurrent) => createConfigCurrent(previousConfig),
createConfigFirst() as AnyConfig,
)
configUtils = createConfigUtils(config)
cacheGet = configUtils.cache.get
cacheSet = configUtils.cache.set
functionToCall = tailwindMerge
return tailwindMerge(classList)
}
function tailwindMerge(classList: string) {
const cachedResult = cacheGet(classList)
if (cachedResult) {
return cachedResult
}
const result = mergeClassList(classList, configUtils)
cacheSet(classList, result)
return result
}
return function callTailwindMerge() {
return functionToCall(twJoin.apply(null, arguments as any))
}
}

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,25 @@
import { createTailwindMerge } from './create-tailwind-merge'
import { getDefaultConfig } from './default-config'
import { mergeConfigs } from './merge-configs'
import { AnyConfig, ConfigExtension, DefaultClassGroupIds, DefaultThemeGroupIds } from './types'
type CreateConfigSubsequent = (config: AnyConfig) => AnyConfig
export const extendTailwindMerge = <
AdditionalClassGroupIds extends string = never,
AdditionalThemeGroupIds extends string = never,
>(
configExtension:
| ConfigExtension<
DefaultClassGroupIds | AdditionalClassGroupIds,
DefaultThemeGroupIds | AdditionalThemeGroupIds
>
| CreateConfigSubsequent,
...createConfig: CreateConfigSubsequent[]
) =>
typeof configExtension === 'function'
? createTailwindMerge(getDefaultConfig, configExtension, ...createConfig)
: createTailwindMerge(
() => mergeConfigs(getDefaultConfig(), configExtension),
...createConfig,
)

View File

@@ -0,0 +1,13 @@
import { DefaultThemeGroupIds, NoInfer, ThemeGetter, ThemeObject } from './types'
export const fromTheme = <
AdditionalThemeGroupIds extends string = never,
DefaultThemeGroupIdsInner extends string = DefaultThemeGroupIds,
>(key: NoInfer<DefaultThemeGroupIdsInner | AdditionalThemeGroupIds>): ThemeGetter => {
const themeGetter = (theme: ThemeObject<DefaultThemeGroupIdsInner | AdditionalThemeGroupIds>) =>
theme[key] || []
themeGetter.isThemeGetter = true as const
return themeGetter
}

View File

@@ -0,0 +1,52 @@
// Export is needed because TypeScript complains about an error otherwise:
// Error: …/tailwind-merge/src/config-utils.ts(8,17): semantic error TS4058: Return type of exported function has or is using name 'LruCache' from external module "…/tailwind-merge/src/lru-cache" but cannot be named.
export interface LruCache<Key, Value> {
get(key: Key): Value | undefined
set(key: Key, value: Value): void
}
// LRU cache inspired from hashlru (https://github.com/dominictarr/hashlru/blob/v1.0.4/index.js) but object replaced with Map to improve performance
export const createLruCache = <Key, Value>(maxCacheSize: number): LruCache<Key, Value> => {
if (maxCacheSize < 1) {
return {
get: () => undefined,
set: () => {},
}
}
let cacheSize = 0
let cache = new Map<Key, Value>()
let previousCache = new Map<Key, Value>()
const update = (key: Key, value: Value) => {
cache.set(key, value)
cacheSize++
if (cacheSize > maxCacheSize) {
cacheSize = 0
previousCache = cache
cache = new Map()
}
}
return {
get(key) {
let value = cache.get(key)
if (value !== undefined) {
return value
}
if ((value = previousCache.get(key)) !== undefined) {
update(key, value)
return value
}
},
set(key, value) {
if (cache.has(key)) {
cache.set(key, value)
} else {
update(key, value)
}
},
}
}

View File

@@ -0,0 +1,78 @@
import { ConfigUtils } from './config-utils'
import { IMPORTANT_MODIFIER, sortModifiers } from './parse-class-name'
const SPLIT_CLASSES_REGEX = /\s+/
export const mergeClassList = (classList: string, configUtils: ConfigUtils) => {
const { parseClassName, getClassGroupId, getConflictingClassGroupIds } = configUtils
/**
* Set of classGroupIds in following format:
* `{importantModifier}{variantModifiers}{classGroupId}`
* @example 'float'
* @example 'hover:focus:bg-color'
* @example 'md:!pr'
*/
const classGroupsInConflict: string[] = []
const classNames = classList.trim().split(SPLIT_CLASSES_REGEX)
let result = ''
for (let index = classNames.length - 1; index >= 0; index -= 1) {
const originalClassName = classNames[index]!
const { modifiers, hasImportantModifier, baseClassName, maybePostfixModifierPosition } =
parseClassName(originalClassName)
let hasPostfixModifier = Boolean(maybePostfixModifierPosition)
let classGroupId = getClassGroupId(
hasPostfixModifier
? baseClassName.substring(0, maybePostfixModifierPosition)
: baseClassName,
)
if (!classGroupId) {
if (!hasPostfixModifier) {
// Not a Tailwind class
result = originalClassName + (result.length > 0 ? ' ' + result : result)
continue
}
classGroupId = getClassGroupId(baseClassName)
if (!classGroupId) {
// Not a Tailwind class
result = originalClassName + (result.length > 0 ? ' ' + result : result)
continue
}
hasPostfixModifier = false
}
const variantModifier = sortModifiers(modifiers).join(':')
const modifierId = hasImportantModifier
? variantModifier + IMPORTANT_MODIFIER
: variantModifier
const classId = modifierId + classGroupId
if (classGroupsInConflict.includes(classId)) {
// Tailwind class omitted due to conflict
continue
}
classGroupsInConflict.push(classId)
const conflictGroups = getConflictingClassGroupIds(classGroupId, hasPostfixModifier)
for (let i = 0; i < conflictGroups.length; ++i) {
const group = conflictGroups[i]!
classGroupsInConflict.push(modifierId + group)
}
// Tailwind class not in conflict
result = originalClassName + (result.length > 0 ? ' ' + result : result)
}
return result
}

View File

@@ -0,0 +1,74 @@
import { AnyConfig, ConfigExtension } from './types'
/**
* @param baseConfig Config where other config will be merged into. This object will be mutated.
* @param configExtension Partial config to merge into the `baseConfig`.
*/
export const mergeConfigs = <ClassGroupIds extends string, ThemeGroupIds extends string = never>(
baseConfig: AnyConfig,
{
cacheSize,
prefix,
separator,
experimentalParseClassName,
extend = {},
override = {},
}: ConfigExtension<ClassGroupIds, ThemeGroupIds>,
) => {
overrideProperty(baseConfig, 'cacheSize', cacheSize)
overrideProperty(baseConfig, 'prefix', prefix)
overrideProperty(baseConfig, 'separator', separator)
overrideProperty(baseConfig, 'experimentalParseClassName', experimentalParseClassName)
for (const configKey in override) {
overrideConfigProperties(
baseConfig[configKey as keyof typeof override],
override[configKey as keyof typeof override],
)
}
for (const key in extend) {
mergeConfigProperties(
baseConfig[key as keyof typeof extend],
extend[key as keyof typeof extend],
)
}
return baseConfig
}
const overrideProperty = <T extends object, K extends keyof T>(
baseObject: T,
overrideKey: K,
overrideValue: T[K] | undefined,
) => {
if (overrideValue !== undefined) {
baseObject[overrideKey] = overrideValue
}
}
const overrideConfigProperties = (
baseObject: Partial<Record<string, readonly unknown[]>>,
overrideObject: Partial<Record<string, readonly unknown[]>> | undefined,
) => {
if (overrideObject) {
for (const key in overrideObject) {
overrideProperty(baseObject, key, overrideObject[key])
}
}
}
const mergeConfigProperties = (
baseObject: Partial<Record<string, readonly unknown[]>>,
mergeObject: Partial<Record<string, readonly unknown[]>> | undefined,
) => {
if (mergeObject) {
for (const key in mergeObject) {
const mergeValue = mergeObject[key]
if (mergeValue !== undefined) {
baseObject[key] = (baseObject[key] || []).concat(mergeValue)
}
}
}
}

View File

@@ -0,0 +1,101 @@
import { AnyConfig } from './types'
export const IMPORTANT_MODIFIER = '!'
export const createParseClassName = (config: AnyConfig) => {
const { separator, experimentalParseClassName } = config
const isSeparatorSingleCharacter = separator.length === 1
const firstSeparatorCharacter = separator[0]
const separatorLength = separator.length
// parseClassName inspired by https://github.com/tailwindlabs/tailwindcss/blob/v3.2.2/src/util/splitAtTopLevelOnly.js
const parseClassName = (className: string) => {
const modifiers = []
let bracketDepth = 0
let modifierStart = 0
let postfixModifierPosition: number | undefined
for (let index = 0; index < className.length; index++) {
let currentCharacter = className[index]
if (bracketDepth === 0) {
if (
currentCharacter === firstSeparatorCharacter &&
(isSeparatorSingleCharacter ||
className.slice(index, index + separatorLength) === separator)
) {
modifiers.push(className.slice(modifierStart, index))
modifierStart = index + separatorLength
continue
}
if (currentCharacter === '/') {
postfixModifierPosition = index
continue
}
}
if (currentCharacter === '[') {
bracketDepth++
} else if (currentCharacter === ']') {
bracketDepth--
}
}
const baseClassNameWithImportantModifier =
modifiers.length === 0 ? className : className.substring(modifierStart)
const hasImportantModifier =
baseClassNameWithImportantModifier.startsWith(IMPORTANT_MODIFIER)
const baseClassName = hasImportantModifier
? baseClassNameWithImportantModifier.substring(1)
: baseClassNameWithImportantModifier
const maybePostfixModifierPosition =
postfixModifierPosition && postfixModifierPosition > modifierStart
? postfixModifierPosition - modifierStart
: undefined
return {
modifiers,
hasImportantModifier,
baseClassName,
maybePostfixModifierPosition,
}
}
if (experimentalParseClassName) {
return (className: string) => experimentalParseClassName({ className, parseClassName })
}
return parseClassName
}
/**
* Sorts modifiers according to following schema:
* - Predefined modifiers are sorted alphabetically
* - When an arbitrary variant appears, it must be preserved which modifiers are before and after it
*/
export const sortModifiers = (modifiers: string[]) => {
if (modifiers.length <= 1) {
return modifiers
}
const sortedModifiers: string[] = []
let unsortedModifiers: string[] = []
modifiers.forEach((modifier) => {
const isArbitraryVariant = modifier[0] === '['
if (isArbitraryVariant) {
sortedModifiers.push(...unsortedModifiers.sort(), modifier)
unsortedModifiers = []
} else {
unsortedModifiers.push(modifier)
}
})
sortedModifiers.push(...unsortedModifiers.sort())
return sortedModifiers
}

View File

@@ -0,0 +1,50 @@
/**
* The code in this file is copied from https://github.com/lukeed/clsx and modified to suit the needs of tailwind-merge better.
*
* Specifically:
* - Runtime code from https://github.com/lukeed/clsx/blob/v1.2.1/src/index.js
* - TypeScript types from https://github.com/lukeed/clsx/blob/v1.2.1/clsx.d.ts
*
* Original code has MIT license: Copyright (c) Luke Edwards <luke.edwards05@gmail.com> (lukeed.com)
*/
export type ClassNameValue = ClassNameArray | string | null | undefined | 0 | 0n | false
type ClassNameArray = ClassNameValue[]
export function twJoin(...classLists: ClassNameValue[]): string
export function twJoin() {
let index = 0
let argument: ClassNameValue
let resolvedValue: string
let string = ''
while (index < arguments.length) {
if ((argument = arguments[index++])) {
if ((resolvedValue = toValue(argument))) {
string && (string += ' ')
string += resolvedValue
}
}
}
return string
}
const toValue = (mix: ClassNameArray | string) => {
if (typeof mix === 'string') {
return mix
}
let resolvedValue: string
let string = ''
for (let k = 0; k < mix.length; k++) {
if (mix[k]) {
if ((resolvedValue = toValue(mix[k] as ClassNameArray | string))) {
string && (string += ' ')
string += resolvedValue
}
}
}
return string
}

View File

@@ -0,0 +1,4 @@
import { createTailwindMerge } from './create-tailwind-merge'
import { getDefaultConfig } from './default-config'
export const twMerge = createTailwindMerge(getDefaultConfig)

488
frontend/node_modules/tailwind-merge/src/lib/types.ts generated vendored Normal file
View File

@@ -0,0 +1,488 @@
/**
* Type the tailwind-merge configuration adheres to.
*/
export interface Config<ClassGroupIds extends string, ThemeGroupIds extends string>
extends ConfigStaticPart,
ConfigGroupsPart<ClassGroupIds, ThemeGroupIds> {}
/**
* The static part of the tailwind-merge configuration. When merging multiple configurations, the properties of this interface are always overridden.
*/
interface ConfigStaticPart {
/**
* Integer indicating size of LRU cache used for memoizing results.
* - Cache might be up to twice as big as `cacheSize`
* - No cache is used for values <= 0
*/
cacheSize: number
/**
* Prefix added to Tailwind-generated classes
* @see https://tailwindcss.com/docs/configuration#prefix
*/
prefix?: string
/**
* Custom separator for modifiers in Tailwind classes
* @see https://tailwindcss.com/docs/configuration#separator
*/
separator: string
/**
* Allows to customize parsing of individual classes passed to `twMerge`.
* All classes passed to `twMerge` outside of cache hits are passed to this function before it is determined whether the class is a valid Tailwind CSS class.
*
* This is an experimental feature and may introduce breaking changes in any minor version update.
*/
experimentalParseClassName?(param: ExperimentalParseClassNameParam): ExperimentalParsedClassName
}
/**
* Type of param passed to the `experimentalParseClassName` function.
*
* This is an experimental feature and may introduce breaking changes in any minor version update.
*/
export interface ExperimentalParseClassNameParam {
className: string
parseClassName(className: string): ExperimentalParsedClassName
}
/**
* Type of the result returned by the `experimentalParseClassName` function.
*
* This is an experimental feature and may introduce breaking changes in any minor version update.
*/
export interface ExperimentalParsedClassName {
/**
* Modifiers of the class in the order they appear in the class.
*
* @example ['hover', 'dark'] // for `hover:dark:bg-gray-100`
*/
modifiers: string[]
/**
* Whether the class has an `!important` modifier.
*
* @example true // for `hover:dark:!bg-gray-100`
*/
hasImportantModifier: boolean
/**
* Base class without preceding modifiers.
*
* @example 'bg-gray-100' // for `hover:dark:bg-gray-100`
*/
baseClassName: string
/**
* Index position of a possible postfix modifier in the class.
* If the class has no postfix modifier, this is `undefined`.
*
* This property is prefixed with "maybe" because tailwind-merge does not know whether something is a postfix modifier or part of the base class since it's possible to configure Tailwind CSS classes which include a `/` in the base class name.
*
* If a `maybePostfixModifierPosition` is present, tailwind-merge first tries to match the `baseClassName` without the possible postfix modifier to a class group. If tht fails, it tries again with the possible postfix modifier.
*
* @example 11 // for `bg-gray-100/50`
*/
maybePostfixModifierPosition: number | undefined
}
/**
* The dynamic part of the tailwind-merge configuration. When merging multiple configurations, the user can choose to either override or extend the properties of this interface.
*/
interface ConfigGroupsPart<ClassGroupIds extends string, ThemeGroupIds extends string> {
/**
* Theme scales used in classGroups.
* The keys are the same as in the Tailwind config but the values are sometimes defined more broadly.
*/
theme: NoInfer<ThemeObject<ThemeGroupIds>>
/**
* Object with groups of classes.
* @example
* {
* // Creates group of classes `group`, `of` and `classes`
* 'group-id': ['group', 'of', 'classes'],
* // Creates group of classes `look-at-me-other` and `look-at-me-group`.
* 'other-group': [{ 'look-at-me': ['other', 'group']}]
* }
*/
classGroups: NoInfer<Record<ClassGroupIds, ClassGroup<ThemeGroupIds>>>
/**
* Conflicting classes across groups.
* The key is ID of class group which creates conflict, values are IDs of class groups which receive a conflict.
* A class group ID is the key of a class group in classGroups object.
* @example { gap: ['gap-x', 'gap-y'] }
*/
conflictingClassGroups: NoInfer<Partial<Record<ClassGroupIds, readonly ClassGroupIds[]>>>
/**
* Postfix modifiers conflicting with other class groups.
* A class group ID is the key of a class group in classGroups object.
* @example { 'font-size': ['leading'] }
*/
conflictingClassGroupModifiers: NoInfer<
Partial<Record<ClassGroupIds, readonly ClassGroupIds[]>>
>
}
/**
* Type of the configuration object that can be passed to `extendTailwindMerge`.
*/
export interface ConfigExtension<ClassGroupIds extends string, ThemeGroupIds extends string>
extends Partial<ConfigStaticPart> {
override?: PartialPartial<ConfigGroupsPart<ClassGroupIds, ThemeGroupIds>>
extend?: PartialPartial<ConfigGroupsPart<ClassGroupIds, ThemeGroupIds>>
}
type PartialPartial<T> = {
[P in keyof T]?: Partial<T[P]>
}
export type ThemeObject<ThemeGroupIds extends string> = Record<
ThemeGroupIds,
ClassGroup<ThemeGroupIds>
>
export type ClassGroup<ThemeGroupIds extends string> = readonly ClassDefinition<ThemeGroupIds>[]
type ClassDefinition<ThemeGroupIds extends string> =
| string
| ClassValidator
| ThemeGetter
| ClassObject<ThemeGroupIds>
export type ClassValidator = (classPart: string) => boolean
export interface ThemeGetter {
(theme: ThemeObject<AnyThemeGroupIds>): ClassGroup<AnyClassGroupIds>
isThemeGetter: true
}
type ClassObject<ThemeGroupIds extends string> = Record<
string,
readonly ClassDefinition<ThemeGroupIds>[]
>
/**
* Hack from https://stackoverflow.com/questions/56687668/a-way-to-disable-type-argument-inference-in-generics/56688073#56688073
*
* Could be replaced with NoInfer utility type from TypeScript (https://www.typescriptlang.org/docs/handbook/utility-types.html#noinfertype), but that is only supported in TypeScript 5.4 or higher, so I should wait some time before using it.
*/
export type NoInfer<T> = [T][T extends any ? 0 : never]
/**
* Theme group IDs included in the default configuration of tailwind-merge.
*
* If you want to use a scale that is not supported in the `ThemeObject` type,
* consider using `classGroups` instead of `theme`.
*
* @see https://github.com/dcastil/tailwind-merge/blob/main/docs/configuration.md#theme
* (the list of supported keys may vary between `tailwind-merge` versions)
*/
export type DefaultThemeGroupIds =
| 'blur'
| 'borderColor'
| 'borderRadius'
| 'borderSpacing'
| 'borderWidth'
| 'brightness'
| 'colors'
| 'contrast'
| 'gap'
| 'gradientColorStopPositions'
| 'gradientColorStops'
| 'grayscale'
| 'hueRotate'
| 'inset'
| 'invert'
| 'margin'
| 'opacity'
| 'padding'
| 'saturate'
| 'scale'
| 'sepia'
| 'skew'
| 'space'
| 'spacing'
| 'translate'
/**
* Class group IDs included in the default configuration of tailwind-merge.
*/
export type DefaultClassGroupIds =
| 'accent'
| 'align-content'
| 'align-items'
| 'align-self'
| 'animate'
| 'appearance'
| 'aspect'
| 'auto-cols'
| 'auto-rows'
| 'backdrop-blur'
| 'backdrop-brightness'
| 'backdrop-contrast'
| 'backdrop-filter'
| 'backdrop-grayscale'
| 'backdrop-hue-rotate'
| 'backdrop-invert'
| 'backdrop-opacity'
| 'backdrop-saturate'
| 'backdrop-sepia'
| 'basis'
| 'bg-attachment'
| 'bg-blend'
| 'bg-clip'
| 'bg-color'
| 'bg-image'
| 'bg-opacity'
| 'bg-origin'
| 'bg-position'
| 'bg-repeat'
| 'bg-size'
| 'blur'
| 'border-collapse'
| 'border-color-b'
| 'border-color-e'
| 'border-color-l'
| 'border-color-r'
| 'border-color-s'
| 'border-color-t'
| 'border-color-x'
| 'border-color-y'
| 'border-color'
| 'border-opacity'
| 'border-spacing-x'
| 'border-spacing-y'
| 'border-spacing'
| 'border-style'
| 'border-w-b'
| 'border-w-e'
| 'border-w-l'
| 'border-w-r'
| 'border-w-s'
| 'border-w-t'
| 'border-w-x'
| 'border-w-y'
| 'border-w'
| 'bottom'
| 'box-decoration'
| 'box'
| 'break-after'
| 'break-before'
| 'break-inside'
| 'break'
| 'brightness'
| 'caption'
| 'caret-color'
| 'clear'
| 'col-end'
| 'col-start-end'
| 'col-start'
| 'columns'
| 'container'
| 'content'
| 'contrast'
| 'cursor'
| 'delay'
| 'display'
| 'divide-color'
| 'divide-opacity'
| 'divide-style'
| 'divide-x-reverse'
| 'divide-x'
| 'divide-y-reverse'
| 'divide-y'
| 'drop-shadow'
| 'duration'
| 'ease'
| 'end'
| 'fill'
| 'filter'
| 'flex-direction'
| 'flex-wrap'
| 'flex'
| 'float'
| 'font-family'
| 'font-size'
| 'font-smoothing'
| 'font-style'
| 'font-weight'
| 'forced-color-adjust'
| 'fvn-figure'
| 'fvn-fraction'
| 'fvn-normal'
| 'fvn-ordinal'
| 'fvn-slashed-zero'
| 'fvn-spacing'
| 'gap-x'
| 'gap-y'
| 'gap'
| 'gradient-from-pos'
| 'gradient-from'
| 'gradient-to-pos'
| 'gradient-to'
| 'gradient-via-pos'
| 'gradient-via'
| 'grayscale'
| 'grid-cols'
| 'grid-flow'
| 'grid-rows'
| 'grow'
| 'h'
| 'hue-rotate'
| 'hyphens'
| 'indent'
| 'inset-x'
| 'inset-y'
| 'inset'
| 'invert'
| 'isolation'
| 'justify-content'
| 'justify-items'
| 'justify-self'
| 'leading'
| 'left'
| 'line-clamp'
| 'list-image'
| 'list-style-position'
| 'list-style-type'
| 'm'
| 'max-h'
| 'max-w'
| 'mb'
| 'me'
| 'min-h'
| 'min-w'
| 'mix-blend'
| 'ml'
| 'mr'
| 'ms'
| 'mt'
| 'mx'
| 'my'
| 'object-fit'
| 'object-position'
| 'opacity'
| 'order'
| 'outline-color'
| 'outline-offset'
| 'outline-style'
| 'outline-w'
| 'overflow-x'
| 'overflow-y'
| 'overflow'
| 'overscroll-x'
| 'overscroll-y'
| 'overscroll'
| 'p'
| 'pb'
| 'pe'
| 'pl'
| 'place-content'
| 'place-items'
| 'place-self'
| 'placeholder-color'
| 'placeholder-opacity'
| 'pointer-events'
| 'position'
| 'pr'
| 'ps'
| 'pt'
| 'px'
| 'py'
| 'resize'
| 'right'
| 'ring-color'
| 'ring-offset-color'
| 'ring-offset-w'
| 'ring-opacity'
| 'ring-w-inset'
| 'ring-w'
| 'rotate'
| 'rounded-b'
| 'rounded-bl'
| 'rounded-br'
| 'rounded-e'
| 'rounded-ee'
| 'rounded-es'
| 'rounded-l'
| 'rounded-r'
| 'rounded-s'
| 'rounded-se'
| 'rounded-ss'
| 'rounded-t'
| 'rounded-tl'
| 'rounded-tr'
| 'rounded'
| 'row-end'
| 'row-start-end'
| 'row-start'
| 'saturate'
| 'scale-x'
| 'scale-y'
| 'scale'
| 'scroll-behavior'
| 'scroll-m'
| 'scroll-mb'
| 'scroll-me'
| 'scroll-ml'
| 'scroll-mr'
| 'scroll-ms'
| 'scroll-mt'
| 'scroll-mx'
| 'scroll-my'
| 'scroll-p'
| 'scroll-pb'
| 'scroll-pe'
| 'scroll-pl'
| 'scroll-pr'
| 'scroll-ps'
| 'scroll-pt'
| 'scroll-px'
| 'scroll-py'
| 'select'
| 'sepia'
| 'shadow-color'
| 'shadow'
| 'shrink'
| 'size'
| 'skew-x'
| 'skew-y'
| 'snap-align'
| 'snap-stop'
| 'snap-strictness'
| 'snap-type'
| 'space-x-reverse'
| 'space-x'
| 'space-y-reverse'
| 'space-y'
| 'sr'
| 'start'
| 'stroke-w'
| 'stroke'
| 'table-layout'
| 'text-alignment'
| 'text-color'
| 'text-decoration-color'
| 'text-decoration-style'
| 'text-decoration-thickness'
| 'text-decoration'
| 'text-opacity'
| 'text-overflow'
| 'text-transform'
| 'text-wrap'
| 'top'
| 'touch-pz'
| 'touch-x'
| 'touch-y'
| 'touch'
| 'tracking'
| 'transform-origin'
| 'transform'
| 'transition'
| 'translate-x'
| 'translate-y'
| 'underline-offset'
| 'vertical-align'
| 'visibility'
| 'w'
| 'whitespace'
| 'will-change'
| 'z'
export type AnyClassGroupIds = string
export type AnyThemeGroupIds = string
/**
* type of the tailwind-merge configuration that allows for any possible configuration.
*/
export type AnyConfig = Config<AnyClassGroupIds, AnyThemeGroupIds>

View File

@@ -0,0 +1,74 @@
const arbitraryValueRegex = /^\[(?:([a-z-]+):)?(.+)\]$/i
const fractionRegex = /^\d+\/\d+$/
const stringLengths = new Set(['px', 'full', 'screen'])
const tshirtUnitRegex = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/
const lengthUnitRegex =
/\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/
const colorFunctionRegex = /^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/
// Shadow always begins with x and y offset separated by underscore optionally prepended by inset
const shadowRegex = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/
const imageRegex =
/^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/
export const isLength = (value: string) =>
isNumber(value) || stringLengths.has(value) || fractionRegex.test(value)
export const isArbitraryLength = (value: string) =>
getIsArbitraryValue(value, 'length', isLengthOnly)
export const isNumber = (value: string) => Boolean(value) && !Number.isNaN(Number(value))
export const isArbitraryNumber = (value: string) => getIsArbitraryValue(value, 'number', isNumber)
export const isInteger = (value: string) => Boolean(value) && Number.isInteger(Number(value))
export const isPercent = (value: string) => value.endsWith('%') && isNumber(value.slice(0, -1))
export const isArbitraryValue = (value: string) => arbitraryValueRegex.test(value)
export const isTshirtSize = (value: string) => tshirtUnitRegex.test(value)
const sizeLabels = new Set(['length', 'size', 'percentage'])
export const isArbitrarySize = (value: string) => getIsArbitraryValue(value, sizeLabels, isNever)
export const isArbitraryPosition = (value: string) =>
getIsArbitraryValue(value, 'position', isNever)
const imageLabels = new Set(['image', 'url'])
export const isArbitraryImage = (value: string) => getIsArbitraryValue(value, imageLabels, isImage)
export const isArbitraryShadow = (value: string) => getIsArbitraryValue(value, '', isShadow)
export const isAny = () => true
const getIsArbitraryValue = (
value: string,
label: string | Set<string>,
testValue: (value: string) => boolean,
) => {
const result = arbitraryValueRegex.exec(value)
if (result) {
if (result[1]) {
return typeof label === 'string' ? result[1] === label : label.has(result[1])
}
return testValue(result[2]!)
}
return false
}
const isLengthOnly = (value: string) =>
// `colorFunctionRegex` check is necessary because color functions can have percentages in them which which would be incorrectly classified as lengths.
// For example, `hsl(0 0% 0%)` would be classified as a length without this check.
// I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough.
lengthUnitRegex.test(value) && !colorFunctionRegex.test(value)
const isNever = () => false
const isShadow = (value: string) => shadowRegex.test(value)
const isImage = (value: string) => imageRegex.test(value)