@mindvalley/design-system 3.3.3 → 3.4.0

package/docs/CONTRIBUTION.md

@@ -7,114 +7,138 @@ Before you get your hands dirty, let's first understand how the repo works and i
 
 #### 🏭 Token transformation process
 
-Token transformation on a high level involves the four steps illustrated below:
+Token transformation on a high level involves the following steps:
+
+```mermaid
+sequenceDiagram
+    participant Figma
+    participant Supernova
+    participant Tokens as src/tokens/brands
+    participant SD as style-dictionary build
+    participant JS as src/build/js & src/tailwind/plugins/tokens
+    participant Webpack
+    participant Dist as dist
+    participant NPM as Publish (NPM)
+
+    Figma->>Supernova: Designer publishes changes
+    Supernova->>Tokens: Supernova raises PR to update tokens
+    Tokens->>SD: style-dictionary parses & transforms
+    SD->>JS: Outputs JS modules (colors, typography)
+    JS->>Webpack: Bundling for distribution
+    Webpack->>Dist: Outputs bundled files
+    Dist->>NPM: CI publishes package
+```
 
 ![token transformation](https://assets.mindvalley.com/api/v1/assets/7502f91d-8638-4940-a96f-a66386041a75.png)
 
-##### 1. The design tokens
-
-This is the starting point of the design token transformation process. This step is how the design tokens get into the repo. For example, If there are changes in the Figma design system to the value of a color, then this would be where we would need to update the token.  For simplicity, it is just a directory with some design tokens in a JSON file. More details in the [`src/properties`](#srcproperties) directory documentation.
+**1. The design tokens**  
+This is the starting point of the design token transformation process. When there are changes in the Figma design system (such as a color update), an automated workflow powered by Supernova detects these changes and creates a pull request in the repository to update the relevant token files in `src/tokens/brands/{brand}/` (e.g., `src/tokens/brands/mindvalley/colors.json`). This ensures that the tokens in the codebase stay in sync with the design system, reducing manual effort and the risk of inconsistencies.
 
-##### 2. Parsing and transformation
+**2. Parsing and transformation**  
+Using [style-dictionary](https://styledictionary.com/getting-started/), the design tokens are parsed, merged, and transformed into the desired formats. The main outputs are JavaScript modules for colors and typography, but the output is configurable and can be extended to other formats (CSS, SCSS, etc.) in the future.  
+Run:  
 
-Using [style-dictonary](https://amzn.github.io/style-dictionary/#/version_3), the design tokens from (1) above are parsed, merged, and transformed into desired formats. The output is a `.js` file. The output is configurable and can be extented to `.css`, `.scss`, `.less` files etc. in the future. See [all possible output file formats](https://amzn.github.io/style-dictionary/#/formats).
-The output of this step ends up in the [`src/build/`](#srcbuild) directory.
-Parsing and transformation can be triggered by running:
-
-```
+```bash
 npm run build:styledictionary
 ```
 
-##### 3. Bundling
+**3. Bundling**  
+Bundling is done using [webpack](https://webpack.js.org/concepts) to ensure the resultant files work across browser and server environments. The files from the previous step are bundled and output to the `dist/` directory, which is not checked in for versioning.  
+Run:  
 
-Bundling is done using [webpack](https://webpack.js.org/concepts) to ensure the resultant files work across browser and server environments. The files from step 2 are bundled and output to the [/dist](#dist) directory.
-Bundling can be invoked by running:
-
-```
+```bash
 npm run build
 ```
 
-##### 4. Publishing
-
-The last in the process is releasing and publishing the bundled files. This step is automated and runs on CI, ensuring that changes made are tested, versioned, and comprehensively documented.  All this is done with the help of [semantic release](https://semantic-release.gitbook.io/semantic-release/). Read more about the [release process](RELEASING.md#releasing-🚀).
- The end package is published to NPM where it can be installed from.
+**4. Publishing**  
+The last step is releasing and publishing the bundled files. This is automated and runs on CI, ensuring that changes are tested, versioned, and documented. Publishing is handled by [semantic release](https://semantic-release.gitbook.io/semantic-release/).  
+See more in the [release guide](RELEASING.md#releasing-🚀).
 
 #### 🗂 Directory structure
 
-Let's look at some important directories.
+Here is a simplifie directory structure highlighting key areas for contributors:
 
-```shell
+```bash
 ├── LICENSE
 ├── README.md
 ├── __tests__
-│   └── utilities
-│       └── transforms.test.j s
 ├── babel.config.js
 ├── build.js
-├── config.json
-├── dist
-│   ├── index.js
-│   └── index.js.map
-├── docs
+├── dist/
+│   └── ...
+├── docs/
 │   ├── CONTRIBUTION.md
 │   ├── RELEASING.md
 │   └── USAGE.md
 ├── package-lock.json
 ├── package.json
-├── src
-│   ├── build
-│   │   └── js
-│   │       └── colors.js
-│   ├── index.js
-│   ├── properties
-│   │   └── color.json
-│   └── utilities
-│       ├── transformGroups.js
-│       └── transforms.js
-└── webpack.config.js
-
+├── src/
+│   ├── assets/
+│   │   ├── brands/
+│   │   │   ├── mindvalley/
+│   │   │   │   └── icons/
+│   │   │   └── b2b/
+│   │   │       └── icons/
+│   │   ├── icons/
+│   │   └── wordmarks/
+│   ├── build/
+│   │   └── js/
+│   ├── helpers/
+│   ├── tailwind/
+│   │   └── plugins/
+│   │       └── tokens/
+│   ├── tokens/
+│   │   └── brands/
+│   │       ├── mindvalley/
+│   │       └── b2b/
+│   └── utilities/
+│       └── svg-import/
+│           ├── .figma_icons.js
+│           └── .figma_wordmarks.js
+├── webpack.config.js
 ```
 
-###### src/properties/
-
-This is the source of the design tokens. For now, we have the tokens checked in as JSON files.
-The process of updating the payload is manual, implying that when there are changes in the tokens, one must get the updated token from the [figma colors file](https://www.figma.com/file/Gmdp0kAAYsmBgCthFjGkpY/MV-Core?node-id=6437%3A207257) and update the files in this directory.
+#### Test Directory
 
-*Yes, it's a manual step for now, automation will follow later.*
+* All tests are under `__tests__/` (not `test/`).
 
-###### src/build/
+* Subfolders include `utilities/`, `src/tailwind/plugins/`, etc.
 
-This is the output of the design token transformation process. **DO NOT** manually edit the contents of this folder as they are the output of running the [bundling step](#3-bundling).
+#### Configuration Files
 
-###### src/utilities
+* There is **no** root `config.json`.
 
-Holds the custom [transformations](https://amzn.github.io/style-dictionary/#/transforms) and [transformation groups](https://amzn.github.io/style-dictionary/#/transform_groups) which in a nutshell, are how we transform the json files in the `src/properties/` directory into the desired output file format in the `src/build/` directory.
+* Main configuration is in `build.js`, `webpack.config.js`, and scripts in `package.json`.
 
-###### dist
+#### Important npm scripts
 
-It's the output directory of the Webpack build process and is not checked in for versioning.
+* `build`: Runs both the style-dictionary build and webpack bundle.
 
-###### test
-
-For tests, because code that cannot be tested is flawed. 🤷🏽‍♂️
+* `build:styledictionary`: Generates token outputs (see above for output locations).
+* `build:bundle`: Runs webpack for production.
+* `build:figma`: Runs both icon and wordmark export scripts.
+* `build:figma:icons`: Uses `src/utilities/svg-import/.figma_icons.js`.
+* `build:figma:wordmarks`: Uses `src/utilities/svg-import/.figma_wordmarks.js`.
+* `test`: Runs all tests with jest.
+* `commit`: Uses Commitizen CLI for conventional commits.
 
 #### ⌨️ Start development
 
-To get started with development, start by cloning the mv-design-system repo.
+To get started with development, start by cloning the mv-design-system repo:
 
-```
+```bash
 git clone git@github.com:mindvalley/mv-design-system.git
 ```
 
-Change your current directory to the folder you just cloned and install the dependencies.
+Change your current directory to the folder you just cloned and install the dependencies:
 
-```
+```bash
 cd mv-design-system && npm install
 ```
 
 ###### 💡 Note
 
-This repo uses `npm` as the package manager
+This repo uses `npm` as the package manager.
 
 ##### Making commits
 
@@ -135,10 +159,9 @@ This will trigger a command line interface and all you have to do is answer the
 
 If your branch name has a Jira ticket ID already included, then the prompt automatically extracts it.
 
-Though using `npm run commit` is highly recommended for this repo, you can alternatively write your commit without the Commitizen helper by ensuring you
-follow the conventional commits conventions.
+Though using `npm run commit` is highly recommended for this repo, you can alternatively write your commit without the Commitizen helper by ensuring you follow the conventional commits conventions.
 
-```
+```bash
  type(scope): commit-message
 
  Jira-Issue-ID
@@ -149,7 +172,7 @@ The commit type has to be one of:
 * `feat`:     A new feature
 * `fix`:      A bug fix
 * `docs`:     Documentation only changes
-* `style`:    Changes that do not affect the meaning of the code (white-space, - formatting, missing semi-colons, etc)
+* `style`:    Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
 * `refactor`: A code change that neither fixes a bug nor adds a feature
 * `perf`:     A code change that improves performance
 * `test`:     Adding missing tests or correcting existing tests
@@ -194,13 +217,13 @@ Whenever there are changes that affect our design tokens, we need to regenerate
 npm run build:styledictionary
 ```
 
-This is the command that tranforms our design tokens to the different desired formats we have defined.
+This is the command that transforms our design tokens to the different desired formats we have defined.
 
-######
+###### Bundle assets for release
 
-In the release step of the CI pipline, we bundle the assets into a umd module with the help of webpack to ensure that our package runs on both the server(nodejs) and the client side(browser).
+In the release step of the CI pipeline, we bundle the assets into a UMD module with the help of webpack to ensure that our package runs on both the server (Node.js) and the client side (browser).
 
-```
+```bash
 npm run build
 ```
 
@@ -210,13 +233,13 @@ Once your changes are made and merged, they'll need to be published. See how tha
 
 ## How to update icons and wordmarks
 
-Icons and wordmarks are directly fetched from the respective figma files where they are composed and updated by the designer.
+Icons and wordmarks are directly fetched from the respective Figma files where they are composed and updated by the designer.
 
 To update them, follow the steps below:
 
-1. Get your [figma personal token](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens)
+1. Get your [Figma personal token](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens)
 2. Clone the `.env.example` file on your root and rename it to `.env`
-3. Add your figma token in the file `FIGMA_TOKEN=Y0urF1gM@T0k3n` and save the changes
+3. Add your Figma token in the file `FIGMA_TOKEN=Y0urF1gM@T0k3n` and save the changes
 4. Then run `npm run build:figma`
 
 Running `npm run build:figma` triggers the workflows to fetch, generate sprites and generate documentation for sprites and wordmarks. `npm run build:figma` is an aggregate script that:
@@ -225,7 +248,7 @@ Running `npm run build:figma` triggers the workflows to fetch, generate sprites
 2. Pulls and processes wordmarks, using the script: `npm run build:figma:wordmarks`
 3. Clears the duplicate docs in the src/assets folder: `npm run clean:docs`
 
-Step 1 and 2 are run in parallel using the [npm-run-all](https://github.com/mysticatea/npm-run-all/blob/HEAD/docs/npm-run-all.md) package
+Step 1 and 2 are run in parallel using the [npm-run-all](https://github.com/mysticatea/npm-run-all/blob/HEAD/docs/npm-run-all.md) package.
 
 The outputs go to `/src/assets/icons` for icons and `/src/assets/wordmarks` for wordmarks with additional generated markdown preview files added in `/docs/icons` and `/docs/wordmarks` directories respectively.
 
@@ -233,7 +256,7 @@ Here is an image illustrating the process:
 
 ![processing icons and wordmarks](processing-icons-wordmarks.png)
 
-If there is a new added figma page, remember to adjust the scripts with the new pages
+If there is a newly added Figma page, remember to adjust the scripts with the new pages:
 
 * [wordmarks](../src/utilities/svg-import/.figma_wordmarks.js)
 * [Icons](../src/utilities/svg-import/.figma_icons.js)

package/docs/token-validation.md

@@ -0,0 +1,298 @@
+# Design Token Validation with Zod
+
+This document describes the **internal** token validation system implemented using Zod for runtime validation and TypeScript type inference. These utilities are used during the build process and are not exported to package consumers.
+
+## Overview
+
+The Mindvalley Design System uses Supernova to manage design tokens. These tokens are automatically pushed to the repository in JSON format. To ensure type safety and catch issues early, we've implemented a validation system using Zod that:
+
+- Validates token structure at build time
+- Provides TypeScript types derived from the same schemas
+- Offers clear error messages when tokens don't match expected structure
+- Handles the complex, nested structures that Supernova generates
+
+## Architecture
+
+### Core Files
+
+- `src/types/token-schemas.ts` - Zod schemas defining token structure
+- `src/types/token-validation.ts` - Validation utilities and functions
+- `src/types/index.d.ts` - TypeScript type exports
+
+### Token Structure
+
+Supernova generates tokens with varying levels of nesting:
+
+```json
+{
+  "color": {
+    "primary": {
+      "500": {
+        "value": "#ff0000ff",
+        "type": "color"
+      }
+    },
+    "black": {
+      "value": "#000000ff",
+      "type": "color"
+    }
+  }
+}
+```
+
+## For Package Consumers
+
+If you're using the `@mindvalley/design-system` npm package, the validation happens at build time and you receive:
+
+- Type-safe `ColorTokens` interface for the colors object
+- `TypographyToken` and `TypographySet` types from the Tailwind plugin
+- Pre-validated, transformed tokens ready for use
+
+The examples below are for **contributors and maintainers** working on the design system itself.
+
+## Usage Guide (Internal Development)
+
+### 1. Basic Validation
+
+```typescript
+import { validateTokenFile } from './types/token-validation';
+
+const result = validateTokenFile('src/tokens/brands/mindvalley/colors.json');
+if (result.success) {
+  console.log('Tokens are valid!', result.data);
+} else {
+  console.error('Validation failed:', result.errors);
+}
+```
+
+### 2. Type-Safe Token Access
+
+```typescript
+import { ColorToken } from './types/token-schemas';
+import { validateColorToken } from './types/token-validation';
+
+// Runtime validation with automatic type inference
+try {
+  const token: ColorToken = validateColorToken(unknownData);
+  // TypeScript knows token.value is a hex string
+  console.log(token.value);
+} catch (error) {
+  console.error('Invalid color token:', error);
+}
+```
+
+### 3. Batch Validation
+
+```typescript
+import { validateAllTokens, getValidationSummary } from './types/token-validation';
+
+// Validate all tokens in the project
+const summary = getValidationSummary('./src/tokens');
+console.log(`Valid: ${summary.valid}, Invalid: ${summary.invalid}`);
+
+if (summary.invalid > 0) {
+  summary.errors.forEach(error => {
+    console.error(`❌ ${error.file}:`, error.errors);
+  });
+}
+```
+
+### 4. CI/CD Integration
+
+Add to your `package.json`:
+
+```json
+{
+  "scripts": {
+    "validate-tokens": "ts-node src/scripts/validate-tokens.ts",
+    "prebuild": "npm run validate-tokens"
+  }
+}
+```
+
+Create `src/scripts/validate-tokens.ts`:
+
+```typescript
+import { getValidationSummary } from '../types/token-validation';
+
+const summary = getValidationSummary('./src/tokens');
+
+if (summary.invalid > 0) {
+  console.error('Token validation failed!');
+  summary.errors.forEach(error => {
+    console.error(`❌ ${error.file}:`, error.errors.join('\n  '));
+  });
+  process.exit(1);
+}
+
+console.log('✅ All tokens validated successfully!');
+```
+
+### 5. Type Guards
+
+```typescript
+import { isColorToken, isTypographyToken } from './types/token-validation';
+
+function processToken(token: unknown) {
+  if (isColorToken(token)) {
+    // TypeScript knows this is a ColorToken
+    return createColorVariable(token.value);
+  } else if (isTypographyToken(token)) {
+    // TypeScript knows this is a TypographyToken
+    return createTypographyStyles(token.value);
+  }
+}
+```
+
+### 6. Error Handling
+
+```typescript
+import { safeValidate, ColorFileSchema, formatZodError } from './types/token-validation';
+
+function handleSupernovaWebhook(payload: unknown) {
+  const result = safeValidate(ColorFileSchema, payload);
+  
+  if (!result.success) {
+    const errors = formatZodError(result.errors);
+    
+    // Log structured errors
+    console.error('Token validation failed:', {
+      errors,
+      timestamp: new Date().toISOString(),
+      source: 'supernova-webhook'
+    });
+    
+    // Alert team
+    notifySlack({
+      channel: '#design-system',
+      message: `Token validation failed: ${errors.join(', ')}`
+    });
+    
+    return;
+  }
+  
+  // Process valid tokens
+  updateTokens(result.data);
+}
+```
+
+## Testing
+
+### Unit Tests
+
+```typescript
+import { ColorTokenSchema } from './types/token-schemas';
+
+describe('Color Token Validation', () => {
+  it('should accept valid color tokens', () => {
+    const validToken = {
+      value: '#ff0000ff',
+      type: 'color'
+    };
+    
+    expect(() => ColorTokenSchema.parse(validToken)).not.toThrow();
+  });
+  
+  it('should reject invalid hex values', () => {
+    const invalidToken = {
+      value: 'not-a-color',
+      type: 'color'
+    };
+    
+    expect(() => ColorTokenSchema.parse(invalidToken)).toThrow();
+  });
+});
+```
+
+### Integration Tests
+
+```typescript
+import { validateAllTokens } from './types/token-validation';
+
+describe('Token File Validation', () => {
+  it('should validate all production tokens', () => {
+    const results = validateAllTokens('./src/tokens');
+    const failures = results.filter(r => !r.success);
+    
+    expect(failures).toHaveLength(0);
+  });
+});
+```
+
+## Schema Flexibility
+
+The schemas are designed to handle Supernova's complex output:
+
+- **Nested structures**: Tokens can be nested at varying levels
+- **Optional properties**: Some tokens have optional fields like `comment`
+- **Mixed structures**: Different brands may have slightly different structures
+- **Type variations**: Properties like `textCase` can be strings or objects
+
+## Extending the System
+
+### Adding New Token Types
+
+1. Add the schema in `token-schemas.ts`:
+
+   ```typescript
+   export const NewTokenSchema = z.object({
+     value: z.string(),
+     type: z.literal('newtype'),
+     metadata: z.object({
+       // Define metadata structure
+     }).optional()
+   });
+   ```
+
+2. Add to file schema mapping in `token-validation.ts`:
+
+```typescript
+const FILE_SCHEMA_MAP = {
+  // existing mappings...
+  'newtokens.json': NewTokenFileSchema
+};
+```
+
+### Custom Validation Rules
+
+```typescript
+const CustomColorSchema = ColorTokenSchema.refine(
+  (token) => token.value.length === 9, // RGBA with alpha
+  { message: 'Colors must include alpha channel' }
+);
+```
+
+## Troubleshooting
+
+### Common Issues
+
+1. **"Invalid input" errors**: Check if Supernova changed the token structure
+2. **Missing properties**: Some tokens may have optional fields
+3. **Type mismatches**: Use the flexible schemas that accept `z.any()` for complex nested structures
+
+### Debugging
+
+```typescript
+import { validateTokenFile, getErrorReport } from './types/token-validation';
+
+const result = validateTokenFile('path/to/tokens.json');
+if (!result.success) {
+  // Get detailed error report
+  console.log(getErrorReport(result.errors));
+}
+```
+
+## Best Practices
+
+1. **Run validation in CI/CD**: Catch issues before they reach production
+2. **Validate after Supernova updates**: Add webhook handlers that validate incoming tokens
+3. **Use type guards**: Leverage TypeScript's type narrowing with `isColorToken()` etc.
+4. **Keep schemas updated**: When Supernova changes output format, update schemas accordingly
+5. **Test with real data**: Always test schemas against actual token files
+
+## Future Improvements
+
+- Add schema versioning to handle Supernova format changes
+- Create a CLI tool for token validation
+- Add visual regression tests for token changes
+- Implement token transformation pipelines with validation

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mindvalley/design-system",
-  "version": "3.3.3",
+  "version": "3.4.0",
   "description": "Resources, components, design guidelines and tooling for Mindvalley's design system",
   "keywords": [
     "design-system",
@@ -19,26 +19,43 @@
   "license": "MIT",
   "author": "Mindvalley Developers and Designers",
   "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist",
     "docs",
     "CHANGELOG.md"
   ],
   "exports": {
-    ".": "./dist/index.js",
-    "./dist/*": "./dist/*",
-    "./b2b": "./dist/b2b.js"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./b2b": {
+      "types": "./dist/b2b.d.ts",
+      "default": "./dist/b2b.js"
+    },
+    "./helpers/*": {
+      "types": "./dist/helpers/*.d.ts",
+      "default": "./dist/helpers/*.js"
+    },
+    "./tailwind/*": {
+      "types": "./dist/tailwind/*.d.ts",
+      "default": "./dist/tailwind/*.js"
+    },
+    "./dist/*": "./dist/*"
   },
   "peerDependencies": {
     "tailwindcss": "^3.4.17"
   },
   "scripts": {
-    "build": "npm-run-all -n build:styledictionary build:bundle",
+    "validate-tokens": "ts-node src/scripts/validate-tokens.ts",
+    "build": "npm run validate-tokens && npm-run-all -n build:styledictionary build:ts build:bundle && rimraf dist/build",
     "build:bundle": "webpack --mode production",
+    "build:ts": "tsc -p tsconfig.build.json && resolve-tspaths -p tsconfig.build.json",
     "build:figma": "npm-run-all -n -p build:figma:icons build:figma:wordmarks -s clean:docs build",
-    "build:figma:icons": "figma-export use-config ./src/utilities/svg-import/.figma_icons.js",
-    "build:figma:wordmarks": "figma-export use-config ./src/utilities/svg-import/.figma_wordmarks.js",
-    "build:styledictionary": "node ./build.js",
+    "build:figma:icons": "tsx ./node_modules/@figma-export/cli/bin/run use-config ./src/utilities/svg-import/.figma_icons.ts",
+    "build:figma:wordmarks": "tsx ./node_modules/@figma-export/cli/bin/run use-config ./src/utilities/svg-import/.figma_wordmarks.ts",
+    "build:styledictionary": "ts-node ./build.ts",
     "clean:docs": "rimraf 'src/assets/**/docs' --glob",
     "commit": "cz",
     "commitlint": "commitlint --edit",
@@ -46,7 +63,9 @@
     "release": "semantic-release --debug",
     "test": "jest --verbose",
     "test:watch": "jest --watch",
-    "watch": "webpack --mode development --watch"
+    "watch": "webpack --mode development --watch",
+    "type-check": "tsc --noEmit",
+    "build:types": "tsc --emitDeclarationOnly"
   },
   "config": {
     "commitizen": {
@@ -58,12 +77,19 @@
   "devDependencies": {
     "@babel/core": "^7.22.9",
     "@babel/preset-env": "^7.22.9",
+    "@babel/preset-typescript": "^7.27.1",
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
     "@figma-export/cli": "^5.0.1",
     "@figma-export/output-components-as-svg": "^4.7.0",
     "@figma-export/transform-svg-with-svgo": "^4.7.0",
+    "@figma-export/types": "^6.2.2",
     "@semantic-release/changelog": "^6.0.3",
+    "@types/jest": "^26.0.24",
+    "@types/lodash.kebabcase": "^4.1.9",
+    "@types/node": "^24.1.0",
+    "@types/tailwindcss": "^3.0.11",
+    "@types/tinycolor2": "^1.4.6",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",
     "babel-plugin-module-resolver": "^5.0.2",
@@ -76,6 +102,7 @@
     "lodash.kebabcase": "^4.1.1",
     "npm-run-all": "^4.1.5",
     "plugin": "^0.0.15",
+    "resolve-tspaths": "^0.8.23",
     "rimraf": "^6.0.1",
     "semantic-release": "^21.0.7",
     "semantic-release-github-pullrequest": "github:njausteve/semantic-release-github-pullrequest",
@@ -84,8 +111,13 @@
     "svg-sprite": "^2.0.2",
     "tailwindcss": "^3.4.17",
     "tinycolor2": "^1.6.0",
+    "ts-loader": "^9.5.2",
+    "ts-node": "^10.9.2",
+    "tsx": "^4.20.3",
+    "typescript": "^5.8.3",
     "webpack": "^5.88.2",
-    "webpack-cli": "^4.6.0"
+    "webpack-cli": "^4.6.0",
+    "zod": "^4.0.10"
   },
   "publishConfig": {
     "access": "public",