@pegasusheavy/ngx-tailwindcss 0.1.0

package/.prettierignore

@@ -0,0 +1,19 @@
+# Build outputs
+dist/
+out-tsc/
+.angular/
+coverage/
+
+# Dependencies
+node_modules/
+pnpm-lock.yaml
+package-lock.json
+
+# IDE
+.vscode/
+.idea/
+
+# Generated files
+*.d.ts
+*.tsbuildinfo
+

package/CHANGELOG.md

@@ -0,0 +1,163 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.1.0] - 2025-12-19
+
+### ✨ Features
+
+- Introduced a configurable theming system based on CSS custom properties, the `TwThemeService`, and `provideTwTheme()` so apps can swap palettes, override individual components, and keep `dark:` styles optional.
+- Added a default `theme.css` bundle with semantic light/dark values and exposed the CSS variables through `ng-packagr` assets, letting downstream consumers tweak every shade without touching the library source.
+- Delivered `TwDatatablesComponent`, a ready-to-go dashboard table with headers, toolbar slots, filters, pagination, and selection wired to the existing `tw-table` data layer.
+
+### 📝 Content & polish
+
+- Documented how to configure themes and added the DataTables docs page, ensuring the sidebar, nav, and theming routes all reach the new experiences.
+- Rebalanced the docs palette so dark mode text, containers, stack/grid/spacer demos, sticky/scroll-area/columns/bleed examples, and tabs are legible, spacing works, and the navbar no longer looks cramped.
+- Fixed the horizontal spacer sample to honor `size="auto"` by giving it `flex-1` and updated copy snippets throughout the docs to reflect the new UX.
+
+### 🛠 Tooling & quality
+
+- Added comprehensive `.npmignore`, removed single-use scripts, and wired Husky with linting pre-commit, test pre-push, and commitlint hooks.
+- Documented the new changelog entry, ensured dark-mode demos showcase `dark:text-slate-300`, and kept existing Tailwind `dark:` utilities as safe defaults while giving users CSS variable overrides for Tw components.
+
+## [0.1.0-beta.1] - 2025-12-15
+
+### 🎉 Initial Release
+
+First public release of `@pegasus-heavy/ngx-tailwindcss` - A highly customizable Angular component library for Tailwind CSS 4+.
+
+### ✨ Features
+
+#### Core
+- **TwClassService** - Intelligent Tailwind class merging with conflict resolution
+- **Global Configuration** - `provideTwConfig()` for app-wide default styling
+- **Class Override System** - `classOverride` and `classReplace` inputs on all components
+
+#### Form Components
+- **Button** - Multiple variants (primary, secondary, outline, ghost, link, danger), sizes, icons, loading states
+- **Input** - Text, password, email, number inputs with validation, prefixes, suffixes
+- **Checkbox** - Single and group checkboxes with indeterminate state
+- **Radio** - Radio buttons with group support
+- **Switch** - Toggle switches with labels
+- **Select** - Dropdown select with search, multi-select, custom templates
+- **Slider** - Range sliders with single/dual handles, steps, marks
+- **Rating** - Star rating with half-star support
+
+#### Layout Components
+- **Card** - Flexible card layouts with header, body, footer directives
+- **Accordion** - Collapsible panels with single/multiple open modes
+- **Tabs** - Tab navigation with lazy loading support
+- **Divider** - Horizontal/vertical dividers with labels
+
+#### Data Display Components
+- **Badge** - Status indicators with variants and sizes
+- **Avatar** - User avatars with images, initials, status indicators, groups
+- **Chip** - Removable chips/tags
+- **Table** - Data tables with sorting, pagination, row selection
+- **Tree** - Hierarchical tree view with expand/collapse
+- **Timeline** - Vertical timeline for events
+
+#### Navigation Components
+- **Breadcrumb** - Navigation breadcrumbs with custom separators
+- **Pagination** - Page navigation with customizable display
+- **Steps** - Step indicators for multi-step processes
+- **Menu** - Context menus and menu bars
+
+#### Feedback Components
+- **Alert** - Dismissible alerts with variants (info, success, warning, error)
+- **Toast** - Toast notifications with positioning and auto-dismiss
+- **Progress** - Linear and circular progress bars
+- **Spinner** - Loading spinners (border, dots, pulse, bars)
+- **Skeleton** - Loading placeholders (text, cards, tables)
+
+#### Overlay Components
+- **Modal** - Dialog modals with sizes and animations
+- **Dropdown** - Dropdown menus with portal rendering
+- **Sidebar** - Slide-out sidebar panels
+- **Popover** - Floating popovers with positioning
+
+#### Media Components
+- **Image** - Responsive images with lazy loading, preview mode
+
+#### Utility Components
+- **ScrollTop** - Scroll-to-top button
+
+### 🎯 Directives
+
+#### Core Directives
+- **TwRippleDirective** - Material-style ripple effects
+- **TwTooltipDirective** - Tooltip on hover
+- **TwClickOutsideDirective** - Detect clicks outside element
+- **TwFocusTrapDirective** - Trap focus within modals
+
+#### DX Enhancement Directives
+- **TwAutoFocusDirective** - Auto-focus elements on render
+- **TwInViewDirective** - Intersection Observer for visibility
+- **TwLongPressDirective** - Detect long press gestures
+- **TwDebounceClickDirective** - Debounce rapid clicks
+- **TwCopyClipboardDirective** - Copy text to clipboard
+- **TwKeyboardShortcutDirective** - Handle keyboard shortcuts
+- **TwSwipeDirective** - Detect swipe gestures
+- **TwResizeObserverDirective** - Observe element resize
+- **TwLazyImageDirective** - Lazy load images
+- **TwScrollToDirective** - Smooth scroll navigation
+- **TwHoverClassDirective** - Dynamic hover classes
+- **TwTrapScrollDirective** - Prevent scroll propagation
+
+#### ARIA Accessibility Directives
+- **TwSrOnlyDirective** - Screen reader only content
+- **TwAnnounceDirective** - Screen reader announcements
+- **TwAriaExpandedDirective** - Manage expanded state
+- **TwAriaSelectedDirective** - Manage selected state
+- **TwAriaCheckedDirective** - Manage checked state
+- **TwAriaPressedDirective** - Manage pressed state
+- **TwAriaDisabledDirective** - Manage disabled state
+- **TwAriaHiddenDirective** - Hide from assistive tech
+- **TwAriaLiveDirective** - Live region management
+- **TwAriaCurrentDirective** - Current navigation item
+- **TwAriaBusyDirective** - Busy/loading state
+- **TwAriaDescribedbyDirective** - Description relationships
+- **TwAriaLabelledbyDirective** - Label relationships
+- **TwAriaLabelDirective** - Accessible labels
+- **TwAriaValueDirective** - Range widget values
+- **TwRoleDirective** - ARIA roles
+- **TwAriaModalDirective** - Modal dialogs
+- **TwAriaHaspopupDirective** - Popup indicators
+
+### ♿ Accessibility
+- **TwAriaService** - Screen reader announcements (polite/assertive)
+- **AriaUtils** - Helper functions for ARIA IDs and attributes
+- All components built with WCAG 2.1 guidelines
+- Keyboard navigation support
+- Focus management
+
+### 🌐 Internationalization
+- **TwI18nService** - Translation and locale management
+- **provideTwTranslations()** - Custom translation provider
+- **provideTwLocale()** - Locale configuration
+- Default English translations for all components
+- RTL language support (Arabic, Hebrew, Persian, Urdu, etc.)
+- String interpolation for dynamic content
+
+### 📚 Documentation
+- Comprehensive docs website with live examples
+- Interactive component demos
+- Code snippets with copy functionality
+- SEO optimized with Open Graph and Twitter Cards
+- AI-friendly documentation (llms.txt, structured data)
+
+### 🛠️ Developer Experience
+- Angular 19, 20, and 21 support
+- Standalone components (no NgModule required)
+- Full TypeScript support with strict types
+- Tree-shakeable exports
+- Zero bundled CSS - works with your Tailwind config
+- Signals-based reactive state management
+
+[0.1.0]: https://github.com/pegasusheavy/ngx-tailwindcss/releases/tag/v0.1.0
+[0.1.0-beta.1]: https://github.com/pegasusheavy/ngx-tailwindcss/releases/tag/v0.1.0-beta.1
+

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2025 Pegasus Heavy Industries LLC
+
+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.
+

package/README.md

@@ -0,0 +1,342 @@
+# @pegasus-heavy/ngx-tailwindcss
+
+A highly customizable Angular component library designed for **Tailwind CSS 4+**. This library provides beautiful, accessible UI components that leverage Tailwind's utility-first approach while giving you complete control over styling.
+
+## Features
+
+- 🎨 **Fully Customizable** - Override any styling through class props or global configuration
+- 🌊 **Tailwind CSS 4+ Ready** - Built for the latest Tailwind with CSS-first configuration
+- ♿ **Accessible** - WCAG compliant with proper ARIA attributes and keyboard navigation
+- 📦 **Tree-Shakeable** - Import only what you need with secondary entry points
+- 🔧 **No Bundled CSS** - Your Tailwind config, your rules
+- ⚡ **Standalone Components** - No NgModule required, works with Angular 19+
+
+## Installation
+
+```bash
+pnpm add @pegasus-heavy/ngx-tailwindcss
+# or
+npm install @pegasus-heavy/ngx-tailwindcss
+```
+
+### Peer Dependencies
+
+```bash
+pnpm add @angular/cdk
+```
+
+## Tailwind CSS Configuration
+
+This library **does not** import Tailwind CSS directly. You must configure Tailwind in your application.
+
+### 1. Configure Content Paths
+
+Add the library's component templates to your Tailwind content configuration so the PostCSS parser can detect the utility classes used:
+
+**For Tailwind CSS 4+ (CSS-based config):**
+
+```css
+/* app.css or styles.css */
+@import "tailwindcss";
+
+@source "../node_modules/@pegasus-heavy/ngx-tailwindcss/**/*.{js,mjs}";
+```
+
+**For Tailwind CSS 3.x (tailwind.config.js):**
+
+```js
+// tailwind.config.js
+module.exports = {
+  content: [
+    "./src/**/*.{html,ts}",
+    "./node_modules/@pegasus-heavy/ngx-tailwindcss/**/*.{js,mjs}",
+  ],
+  // ... rest of your config
+};
+```
+
+### 2. Import Components
+
+Import components directly in your Angular components:
+
+```typescript
+import { Component } from '@angular/core';
+import {
+  TwButtonComponent,
+  TwCardComponent,
+  TwCardBodyDirective
+} from '@pegasus-heavy/ngx-tailwindcss';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [TwButtonComponent, TwCardComponent, TwCardBodyDirective],
+  template: `
+    <tw-card>
+      <tw-card-body>
+        <tw-button variant="primary">Click me!</tw-button>
+      </tw-card-body>
+    </tw-card>
+  `,
+})
+export class ExampleComponent {}
+```
+
+Or import everything at once:
+
+```typescript
+import { TW_ALL } from '@pegasus-heavy/ngx-tailwindcss';
+
+@Component({
+  imports: [...TW_ALL],
+})
+export class ExampleComponent {}
+```
+
+## Global Configuration
+
+Customize default styles and behavior globally:
+
+```typescript
+// app.config.ts
+import { ApplicationConfig } from '@angular/core';
+import { provideTwConfig } from '@pegasus-heavy/ngx-tailwindcss';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideTwConfig({
+      theme: {
+        primary: 'bg-indigo-600 hover:bg-indigo-700 text-white',
+        secondary: 'bg-purple-600 hover:bg-purple-700 text-white',
+        // ... customize other variants
+      },
+      animationDuration: 300,
+    }),
+  ],
+};
+```
+
+## Components
+
+### Button
+
+```html
+<tw-button>Default</tw-button>
+<tw-button variant="primary">Primary</tw-button>
+<tw-button variant="danger" size="lg">Large Danger</tw-button>
+<tw-button variant="outline" [loading]="isLoading">Submit</tw-button>
+<tw-button variant="ghost" [iconOnly]="true">
+  <svg twButtonIcon>...</svg>
+</tw-button>
+```
+
+**Props:**
+- `variant`: `'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'ghost' | 'outline' | 'link'`
+- `size`: `'xs' | 'sm' | 'md' | 'lg' | 'xl'`
+- `disabled`, `loading`, `fullWidth`, `iconOnly`: `boolean`
+- `classOverride`: Additional classes to merge
+- `classReplace`: Complete class replacement
+
+### Card
+
+```html
+<tw-card variant="elevated">
+  <tw-card-header>
+    <tw-card-title>Card Title</tw-card-title>
+    <tw-card-subtitle>Subtitle</tw-card-subtitle>
+  </tw-card-header>
+  <tw-card-body>
+    Content goes here
+  </tw-card-body>
+  <tw-card-footer>
+    <tw-button variant="primary">Action</tw-button>
+  </tw-card-footer>
+</tw-card>
+```
+
+### Input
+
+```html
+<tw-input
+  [(ngModel)]="email"
+  type="email"
+  label="Email"
+  placeholder="you@example.com"
+  hint="We'll never share your email"
+  [error]="emailError"
+  [clearable]="true">
+</tw-input>
+
+<tw-textarea
+  [(ngModel)]="bio"
+  label="Bio"
+  [rows]="4"
+  [maxlength]="500"
+  [showCount]="true"
+  [autoResize]="true">
+</tw-textarea>
+```
+
+### Badge
+
+```html
+<tw-badge variant="success">Active</tw-badge>
+<tw-badge variant="warning" badgeStyle="soft">Pending</tw-badge>
+<tw-badge variant="danger" badgeStyle="dot">Offline</tw-badge>
+<tw-badge variant="info" [pill]="true" [removable]="true" [remove]="onRemove">
+  Tag
+</tw-badge>
+```
+
+### Alert
+
+```html
+<tw-alert variant="success" alertStyle="soft" [dismissible]="true">
+  <tw-alert-title>Success!</tw-alert-title>
+  <tw-alert-description>Your changes have been saved.</tw-alert-description>
+</tw-alert>
+
+<tw-alert variant="danger" alertStyle="accent">
+  An error occurred while processing your request.
+</tw-alert>
+```
+
+### Modal
+
+```html
+<tw-button (click)="isOpen = true">Open Modal</tw-button>
+
+<tw-modal [(open)]="isOpen" size="md">
+  <tw-modal-header>
+    <tw-modal-title>Confirm Action</tw-modal-title>
+  </tw-modal-header>
+  <tw-modal-body>
+    Are you sure you want to continue?
+  </tw-modal-body>
+  <tw-modal-footer>
+    <tw-button variant="ghost" (click)="isOpen = false">Cancel</tw-button>
+    <tw-button variant="primary" (click)="confirm()">Confirm</tw-button>
+  </tw-modal-footer>
+</tw-modal>
+```
+
+### Dropdown
+
+```html
+<tw-dropdown>
+  <button twDropdownTrigger class="px-4 py-2 bg-white border rounded-lg">
+    Options
+  </button>
+  <tw-dropdown-menu>
+    <tw-dropdown-header>Actions</tw-dropdown-header>
+    <button twDropdownItem (click)="edit()">Edit</button>
+    <button twDropdownItem (click)="duplicate()">Duplicate</button>
+    <tw-dropdown-divider></tw-dropdown-divider>
+    <button twDropdownItem class="text-rose-600">Delete</button>
+  </tw-dropdown-menu>
+</tw-dropdown>
+```
+
+### Tabs
+
+```html
+<tw-tabs [(value)]="activeTab" variant="line">
+  <tw-tab-panel value="overview" label="Overview">
+    Overview content
+  </tw-tab-panel>
+  <tw-tab-panel value="settings" label="Settings">
+    Settings content
+  </tw-tab-panel>
+  <tw-tab-panel value="billing" label="Billing" [disabled]="!isPremium">
+    Billing content
+  </tw-tab-panel>
+</tw-tabs>
+```
+
+## Directives
+
+### Ripple Effect
+
+```html
+<button twRipple class="px-4 py-2 bg-blue-600 text-white rounded">
+  Click me
+</button>
+```
+
+### Tooltip
+
+```html
+<button twTooltip="Save changes" tooltipPosition="top">
+  Save
+</button>
+```
+
+### Click Outside
+
+```html
+<div (twClickOutside)="closeMenu()" [clickOutsideEnabled]="isMenuOpen">
+  Menu content
+</div>
+```
+
+### Focus Trap
+
+```html
+<div twFocusTrap [focusTrapAutoFocus]="true">
+  <input type="text">
+  <button>Submit</button>
+</div>
+```
+
+### Class Merge
+
+```html
+<!-- Intelligently merges Tailwind classes, resolving conflicts -->
+<div [twClass]="'px-4 py-2 bg-blue-500'" [twClassMerge]="'px-8 bg-red-500'">
+  Will have px-8 py-2 bg-red-500
+</div>
+```
+
+## Customization Examples
+
+### Per-Component Override
+
+```html
+<tw-button
+  variant="primary"
+  classOverride="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600">
+  Gradient Button
+</tw-button>
+```
+
+### Complete Class Replacement
+
+```html
+<tw-button classReplace="your-completely-custom-classes">
+  Custom Styled
+</tw-button>
+```
+
+### Using the Class Service
+
+```typescript
+import { TwClassService } from '@pegasus-heavy/ngx-tailwindcss';
+
+@Component({...})
+export class MyComponent {
+  private twClass = inject(TwClassService);
+
+  get buttonClasses() {
+    return this.twClass.merge(
+      'px-4 py-2 rounded',
+      this.isPrimary ? 'bg-blue-600 text-white' : 'bg-gray-100',
+      this.isDisabled && 'opacity-50 cursor-not-allowed'
+    );
+  }
+}
+```
+
+## License
+
+MIT © Pegasus Heavy Industries LLC
+

package/commitlint.config.cjs

@@ -0,0 +1,4 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+};
+

package/package.json

@@ -0,0 +1,144 @@
+{
+  "name": "@pegasusheavy/ngx-tailwindcss",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "A highly customizable Angular component library for Tailwind CSS 4+. Build beautiful, accessible UI components with full theming support, intelligent class merging, and zero bundled CSS. Features 30+ components including buttons, cards, modals, forms, tables, and more.",
+  "license": "MIT",
+  "author": {
+    "name": "Pegasus Heavy Industries LLC",
+    "url": "https://pegasusheavy.github.io/ngx-tailwindcss"
+  },
+  "homepage": "https://pegasusheavy.github.io/ngx-tailwindcss",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pegasusheavy/ngx-tailwindcss.git"
+  },
+  "bugs": {
+    "url": "https://github.com/pegasusheavy/ngx-tailwindcss/issues"
+  },
+  "keywords": [
+    "angular",
+    "tailwindcss",
+    "tailwind",
+    "tailwind-css-4",
+    "components",
+    "ui",
+    "ui-library",
+    "ui-components",
+    "component-library",
+    "angular-components",
+    "angular-library",
+    "angular-ui",
+    "design-system",
+    "typescript",
+    "standalone-components",
+    "signals",
+    "accessible",
+    "accessibility",
+    "a11y",
+    "aria",
+    "wcag",
+    "screen-reader",
+    "i18n",
+    "internationalization",
+    "localization",
+    "l10n",
+    "rtl",
+    "translations",
+    "responsive",
+    "customizable",
+    "theming",
+    "forms",
+    "buttons",
+    "modals",
+    "cards",
+    "tables",
+    "dropdown",
+    "toast",
+    "accordion",
+    "tabs",
+    "pagination",
+    "avatar",
+    "badge",
+    "spinner",
+    "skeleton",
+    "progress",
+    "tree",
+    "timeline",
+    "stepper"
+  ],
+  "peerDependencies": {
+    "@angular/animations": "^19.0.0 || ^20.0.0 || ^21.0.0",
+    "@angular/cdk": "^19.0.0 || ^20.0.0 || ^21.0.0",
+    "@angular/common": "^19.0.0 || ^20.0.0 || ^21.0.0",
+    "@angular/core": "^19.0.0 || ^20.0.0 || ^21.0.0",
+    "@angular/forms": "^19.0.0 || ^20.0.0 || ^21.0.0"
+  },
+  "devDependencies": {
+    "@analogjs/vite-plugin-angular": "^2.1.3",
+    "@angular-devkit/build-angular": "^20.0.0",
+    "@angular/animations": "^20.0.0",
+    "@angular/build": "^20.0.0",
+    "@angular/cdk": "^20.0.0",
+    "@angular/cli": "^20.0.0",
+    "@angular/common": "^20.0.0",
+    "@angular/compiler": "^20.0.0",
+    "@angular/compiler-cli": "^20.0.0",
+    "@angular/core": "^20.0.0",
+    "@angular/forms": "^20.0.0",
+    "@angular/platform-browser": "^20.0.0",
+    "@angular/platform-browser-dynamic": "^20.0.0",
+    "@eslint/js": "^9.0.0",
+    "@pegasusheavy/eslint-typescript-access": "^1.0.0",
+    "@testing-library/angular": "^17.0.0",
+    "@testing-library/dom": "^10.0.0",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/user-event": "^14.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
+    "@typescript-eslint/utils": "^8.0.0",
+    "@vitest/coverage-v8": "^3.0.0",
+    "angular-eslint": "^19.0.0",
+    "concurrently": "^9.0.0",
+    "eslint": "^9.0.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-jsdoc": "^50.0.0",
+    "eslint-plugin-unicorn": "^56.0.0",
+    "jsdom": "^26.0.0",
+    "ng-packagr": "^20.0.0",
+    "prettier": "^3.4.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.6.0",
+    "typescript": "~5.8.0",
+    "typescript-eslint": "^8.0.0",
+    "vitest": "^3.0.0",
+    "zone.js": "~0.15.0",
+    "@commitlint/cli": "^18.1.0",
+    "@commitlint/config-conventional": "^18.0.0",
+    "husky": "^9.0.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/pegasus-heavy-ngx-tailwindcss.mjs"
+    }
+  },
+  "sideEffects": false,
+  "scripts": {
+    "ng": "ng",
+    "build": "ng build ngx-tailwindcss --configuration production",
+    "build:watch": "ng build ngx-tailwindcss --watch",
+    "dev": "concurrently -n lib,docs -c cyan,green \"pnpm run build:watch\" \"pnpm run docs:dev\"",
+    "docs:dev": "cd docs && pnpm run dev",
+    "docs:start": "cd docs && pnpm run start",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:ui": "vitest --ui",
+    "lint": "eslint projects/",
+    "lint:fix": "eslint projects/ --fix",
+    "format": "prettier --write \"projects/**/*.{ts,html,scss,css,json}\"",
+    "format:check": "prettier --check \"projects/**/*.{ts,html,scss,css,json}\"",
+    "commitlint": "commitlint"
+  }
+}