85bf1341f3
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>
89 lines
1.8 KiB
Markdown
89 lines
1.8 KiB
Markdown
# Classcat
|
|
|
|
> Build a [`class`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) attribute string quickly.
|
|
|
|
- Framework agnostic, reusable, plain vanilla JavaScript.
|
|
- Up to [2.5x faster](#benchmarks) than alternatives.
|
|
- [217 B](http://bundlephobia.com/result?p=classcat) (minified+gzipped). 👌
|
|
|
|
This module makes it easy to build a space-delimited `class` attribute string from an object or array of CSS class names. Just pair each class with a boolean value to add or remove them conditionally.
|
|
|
|
```js
|
|
import cc from "classcat"
|
|
|
|
export const ToggleButton = ({ isOn, toggle }) => (
|
|
<div className="btn" onClick={() => toggle(!isOn)}>
|
|
<div
|
|
className={cc({
|
|
circle: true,
|
|
off: !isOn,
|
|
on: isOn,
|
|
})}
|
|
/>
|
|
<span className={cc({ textOff: !isOn })}>{isOn ? "ON" : "OFF"}</span>
|
|
</div>
|
|
)
|
|
```
|
|
|
|
[Try with React](https://codepen.io/jorgebucaran/pen/NYgLwG?editors=0010), [lit-html](https://codepen.io/jorgebucaran/pen/LjPJEp?editors=1000), [Mithril](https://codepen.io/jorgebucaran/pen/JjjOjwB?editors=1100), [Superfine](https://codepen.io/jorgebucaran/pen/wrMvjz?editors=1000)
|
|
|
|
## Installation
|
|
|
|
```console
|
|
npm install classcat
|
|
```
|
|
|
|
Or without a build step—import it right in your browser.
|
|
|
|
```html
|
|
<script type="module">
|
|
import cc from "https://unpkg.com/classcat"
|
|
</script>
|
|
```
|
|
|
|
## API
|
|
|
|
### `cc(names)`
|
|
|
|
```ps
|
|
cc(names: string | number | object | array): string
|
|
```
|
|
|
|
```js
|
|
import cc from "classcat"
|
|
|
|
cc("elf") //=> "elf"
|
|
|
|
cc(["elf", "orc", "gnome"]) //=> "elf orc gnome"
|
|
|
|
cc({
|
|
elf: false,
|
|
orc: null,
|
|
gnome: undefined,
|
|
}) //=> ""
|
|
|
|
cc({
|
|
elf: true,
|
|
orc: false,
|
|
gnome: true,
|
|
}) //=> "elf gnome"
|
|
|
|
cc([
|
|
{
|
|
elf: true,
|
|
orc: false,
|
|
},
|
|
"gnome",
|
|
]) //=> "elf gnome"
|
|
```
|
|
|
|
## Benchmarks
|
|
|
|
```console
|
|
npm --prefix bench start
|
|
```
|
|
|
|
## License
|
|
|
|
[MIT](LICENSE.md)
|