โ ๏ธ CornerKit Load Error
Stage: ${window.cornerKitError.stage}
Message: ${window.cornerKitError.message}
${window.cornerKitError.stack} `);
});
}
```
--------------------------------
### GitHub Actions CI/CD Security Audit Workflow
Source: https://github.com/bejarcode/cornerkit/blob/main/packages/core/SECURITY-AUDIT.md
This YAML configuration defines a GitHub Actions workflow for security auditing. It checks out the code, installs dependencies, and runs npm audit for both production and all dependencies.
```yaml
name: Security Audit
on: [push, pull_request]
jobs:
security:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- run: npm ci
- run: npm audit --production
- run: npm audit # Full audit (including devDependencies)
```
--------------------------------
### Analyze Bundle Size
Source: https://github.com/bejarcode/cornerkit/blob/main/packages/core/README.md
Execute this command to perform a bundle size analysis of the CornerKit core package. It checks against a target size and verifies tree-shaking.
```bash
npm run analyze-bundle
```
--------------------------------
### Write Unit Tests for Radius Validation
Source: https://github.com/bejarcode/cornerkit/blob/main/packages/core/CONTRIBUTING.md
Example of writing unit tests using Vitest to validate radius values. Tests ensure negative values are clamped to 0 and valid values remain unchanged.
```typescript
import { describe, it, expect } from 'vitest';
import { validateRadius } from '../utils/validator';
describe('validateRadius', () => {
it('should clamp negative values to 0', () => {
expect(validateRadius(-5)).toBe(0);
});
it('should return valid radius unchanged', () => {
expect(validateRadius(20)).toBe(20);
});
});
```
--------------------------------
### Migrate from v1.1 Border API to v1.2
Source: https://github.com/bejarcode/cornerkit/blob/main/packages/core/README.md
Shows the legacy v1.1 API for border properties and the recommended v1.2 API. Both are supported for backward compatibility.
```javascript
// Old API (v1.1) - still works
ck.apply('#card', {
borderWidth: 2,
borderColor: '#3b82f6'
});
// New API (v1.2) - recommended
ck.apply('#card', {
border: {
width: 2,
color: '#3b82f6'
}
});
```
--------------------------------
### Unit Test for Smoothing Conversion (TypeScript)
Source: https://github.com/bejarcode/cornerkit/blob/main/CONTRIBUTING.md
Example of a unit test using Vitest. Follows the Arrange, Act, Assert pattern to test the `smoothingToExponent` function, ensuring it correctly converts a smoothing value to its corresponding exponent.
```typescript
import { describe, it, expect } from 'vitest';
import { smoothingToExponent } from './figma-squircle';
describe('smoothingToExponent', () => {
it('should convert smoothing 0.6 to iOS 7 standard', () => {
// Arrange
const smoothing = 0.6;
// Act
const result = smoothingToExponent(smoothing);
// Assert
expect(result).toBeCloseTo(4.25);
});
});
```
--------------------------------
### CornerKit Configuration Options
Source: https://github.com/bejarcode/cornerkit/blob/main/packages/core/CHANGELOG.md
Details the configuration parameters available for customizing the squircle appearance and behavior.
```APIDOC
## CornerKit Configuration
### Parameters
- **radius** (number) - Optional - The radius of the corner in pixels. Defaults to `20`.
- **smoothing** (number) - Optional - A value between 0 and 1 that controls the smoothness of the squircle curve. Defaults to `0.8`.
### Global Defaults
Global default values for `radius` and `smoothing` can be configured during initialization using the `constructor`.
### Per-Element Configuration
Individual elements can have their configurations overridden by passing a `config` object to the `apply` or `applyAll` methods.
```
--------------------------------
### Vue 3 Integration with Squircle Component, Composable, and Directive
Source: https://context7.com/bejarcode/cornerkit/llms.txt
Use the `