@botonic/nx-plugin 2.23.0

package/src/generators/preset/files/.cursor/skills/botonic-custom-message/SKILL.md

@@ -0,0 +1,231 @@
+---
+name: botonic-custom-message
+description: Scaffold and implement a Botonic custom webchat message component using the Nx generator, then guide implementation. Use when the user says "create custom message", "add custom message", "new custom message", "generate custom message", or wants to render a rich or custom UI component in the webchat conversation in a Botonic bot project.
+---
+
+# Botonic Custom Message
+
+Scaffold a custom webchat message component and help implement the React component and its output action.
+
+## Workflow
+
+### Step 1 — Gather inputs
+
+Collect from context or ask:
+
+- **`name`** (required): kebab-case name, e.g. `rating-card`, `product-tile`
+- **`project`** (required): Nx project name of the bot app, e.g. `my-bot`
+- **`directory`** (optional): subdirectory inside `custom-messages/` to group related components, e.g. `cards`
+- **`skipTests`** (optional): `true` to skip spec file generation
+- **`skipAction`** (optional): `true` to skip generating the output action and route
+
+### Step 2 — Run the generator
+
+```bash
+pnpm nx g @botonic/nx-plugin:custom-message --name=<name> --project=<project>
+```
+
+With optional flags:
+
+```bash
+pnpm nx g @botonic/nx-plugin:custom-message rating-card --project my-bot --directory cards
+pnpm nx g @botonic/nx-plugin:custom-message info-banner --project my-bot --skipAction
+```
+
+### Step 3 — Understand what was generated
+
+The generator creates and updates:
+
+- `src/client/custom-messages/<name>.tsx` — new React component
+- `src/client/custom-messages/<name>.spec.tsx` — test file (unless `--skipTests`)
+- `src/client/custom-messages/index.ts` — import + registration in `customMessages` map added
+- `src/server/bot/actions/<name>-output.ts` — output action (unless `--skipAction`)
+- `src/server/bot/actions/index.ts` — export added
+- `src/server/bot/routes.ts` — route entry added
+- `src/shared/constants.ts` — `CUSTOM_MESSAGE_TYPES.<CONSTANT>` entry added
+
+Read both the component and output action files and show the user the starting points.
+
+### Step 4 — Ask what to implement
+
+If not already clear from context, ask: "What data should this message display? What props does the component need?"
+
+### Step 5 — Implement the React component
+
+#### Root wrapper: always `Message` with `variant="bot"`
+
+Import `Message` from `@botonic/webchat-react` and use it as the root. It handles layout, avatar, timestamp, and — crucially — wraps the children in a `MessageBubble` automatically. Always pass `variant="bot"` explicitly since custom messages are almost always sent by the bot.
+
+Never use a plain `<div>` as the root — the message will not render with correct bubble styling, spacing, or theming. Never nest a `MessageBubble` inside `Message` — `Message` already creates one internally; nesting would double-wrap.
+
+```tsx
+import { Message } from '@botonic/webchat-react'
+import React from 'react'
+
+import styles from './rating-card.module.css'
+
+export const RatingCard: React.FC<RatingCardProps> = (props: any) => {
+  return (
+    <Message variant='bot' className={styles.bubble}>
+      <div className={styles.content}>{/* your content here */}</div>
+    </Message>
+  )
+}
+```
+
+#### Buttons inside the custom message
+
+`ButtonComponent` (exported from `@botonic/webchat-react`) can be rendered inside the `Message`. The webchat automatically injects an `onButtonClick` callback into the component props — use it as the `onClick` handler. The button data (`BotonicButtonContent`) should be built server-side (e.g. with `BotServerMessageFactory.createWebviewButton`) and passed as a prop so the server can embed dynamic values like webview URLs.
+
+```tsx
+import { BotonicButtonContent } from '@botonic/shared'
+import { ButtonComponent, Message } from '@botonic/webchat-react'
+
+export interface ProductCardProps {
+  title: string
+  price: string
+  button?: BotonicButtonContent
+  onButtonClick?: (button: BotonicButtonContent) => void // injected automatically
+}
+
+export const ProductCard: React.FC<ProductCardProps> = (props: any) => {
+  const { title, price, button, onButtonClick } = props
+  return (
+    <Message variant='bot'>
+      <div className={styles.content}>
+        <div className={styles.title}>{title}</div>
+        <div className={styles.price}>{price}</div>
+        {button && onButtonClick && <ButtonComponent text={button.title} button={button} onClick={onButtonClick} variant='secondary' />}
+      </div>
+    </Message>
+  )
+}
+```
+
+In the output action, build the button server-side and pass it as a prop:
+
+```typescript
+export async function productCardOutput({ sendMessage, session }: BotContext) {
+  const button = BotServerMessageFactory.createWebviewButton({ title: 'View details', webview: WEBVIEWS.PRODUCT }, session)
+  await sendMessage(
+    BotServerMessageFactory.createCustom({
+      name: CUSTOM_MESSAGE_TYPES.PRODUCT_CARD,
+      props: { title: 'Widget Pro', price: '€9.99', button },
+    })
+  )
+  return { status: 200, response: 'OK' }
+}
+```
+
+#### Multiple bubbles: send multiple messages from the action
+
+`Message` always renders exactly one bubble. If the design requires multiple separate bubbles (e.g. an image bubble followed by a text bubble), send them as separate messages from the output action — do not try to nest multiple `MessageBubble` components inside one `Message`.
+
+```typescript
+// In the output action
+await sendMessage(BotServerMessageFactory.createCustom({ name: CUSTOM_MESSAGE_TYPES.PRODUCT_IMAGE, props: { url } }))
+await sendMessage(BotServerMessageFactory.createCustom({ name: CUSTOM_MESSAGE_TYPES.PRODUCT_DETAIL, props: { title, price } }))
+```
+
+#### Styling: CSS modules only, no inline styles
+
+Create `<name>.module.css` next to the component. Never use inline `style={{}}` props.
+
+```css
+/* rating-card.module.css */
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.label {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+```
+
+#### Overriding bubble colours: use component tokens
+
+The bubble reads from CSS custom properties. Override them scoped to the component by targeting the class passed to `Message`:
+
+```css
+/* rating-card.module.css */
+.bubble {
+  --webchat-message-bubble-bot-bg: #f0f7ff;
+  --webchat-message-bubble-bot-text: #1a3c5e;
+  --webchat-message-bubble-bot-border-color: #b3d1f0;
+}
+```
+
+Pass the class to `Message`:
+
+```tsx
+<Message className={styles.bubble}>
+```
+
+The token overrides cascade into `MessageBubble` automatically. Available tokens:
+
+| Token                                       | Purpose           |
+| ------------------------------------------- | ----------------- |
+| `--webchat-message-bubble-bot-bg`           | Background colour |
+| `--webchat-message-bubble-bot-text`         | Text colour       |
+| `--webchat-message-bubble-bot-border-color` | Border colour     |
+
+Use these same tokens inside the component CSS so colours stay in sync:
+
+```css
+.divider {
+  border-top: 1px solid var(--webchat-message-bubble-bot-border-color);
+}
+```
+
+### Step 6 — Implement the output action
+
+Update `<name>-output.ts` to pass the required props in `data`:
+
+```typescript
+export async function ratingCardOutput({ sendMessage }: BotContext) {
+  await sendMessage(
+    BotServerMessageFactory.createCustom({
+      name: CUSTOM_MESSAGE_TYPES.RATING_CARD,
+      props: {
+        rating: 0,
+        label: 'How was your experience?',
+      },
+    })
+  )
+  return { status: 200, response: 'OK' }
+}
+```
+
+The `data.props` object must match the component's props interface exactly.
+
+### Step 7 — Trigger from a route
+
+The output action is already wired to a route in `routes.ts`. Call it from another action when needed:
+
+```typescript
+import { ratingCardOutput } from './rating-card-output'
+
+export async function EndConversation(ctx: BotContext) {
+  await ratingCardOutput(ctx)
+  return { status: 200, response: 'OK' }
+}
+```
+
+### Removing a custom message
+
+```bash
+pnpm nx g @botonic/nx-plugin:remove-custom-message <name> --project=<project>
+```
+
+## Options reference
+
+| Option       | Default | Notes                                             |
+| ------------ | ------- | ------------------------------------------------- |
+| `name`       | —       | Required. kebab-case recommended                  |
+| `project`    | —       | Required. Nx project name                         |
+| `directory`  | —       | Subdirectory inside `custom-messages/` (optional) |
+| `skipTests`  | `false` | Omit `<name>.spec.tsx`                            |
+| `skipAction` | `false` | Omit output action and route                      |

package/src/generators/preset/files/.cursor/skills/botonic-webview/SKILL.md

@@ -0,0 +1,179 @@
+---
+name: botonic-webview
+description: Scaffold and implement a Botonic webview component using the Nx generator, then guide implementation. Use when the user says "create webview", "add webview", "new webview", "generate webview", or wants to build an in-chat form, panel, or interactive UI component in a Botonic bot project.
+---
+
+# Botonic Webview
+
+Scaffold a client-side webview component and help implement its UI.
+
+## Workflow
+
+### Step 1 — Gather inputs
+
+Collect from context or ask:
+
+- **`name`** (required): kebab-case name, e.g. `booking-form`, `order-detail`
+- **`project`** (required): Nx project name of the bot app, e.g. `my-bot`
+- **`skipTests`** (optional): `true` to skip spec file generation
+
+### Step 2 — Run the generator
+
+```bash
+pnpm nx g @botonic/nx-plugin:webview --name=<name> --project=<project>
+```
+
+### Step 3 — Understand what was generated
+
+The generator creates and updates:
+
+- `src/client/webviews/<name>.tsx` — new webview component
+- `src/client/webviews/<name>.spec.tsx` — test file (unless `--skipTests`)
+- `src/client/webviews/index.tsx` — import + `WebviewDefinition` entry added
+- `src/shared/constants.ts` — `WEBVIEWS.<CONSTANT>` entry added
+
+Read the generated component file and show the user the starting point.
+
+### Step 4 — Ask what to implement
+
+If not already clear from context, ask: "What should this webview display or allow the user to do?"
+
+### Step 5 — Implement the webview
+
+Use `WebviewFrame`, `WebviewHeader`, `WebviewBody` from `@botonic/webviews` as the structural shell.
+Access request data and the close handler via `useWebviewRequest`.
+
+> **CSS reset and design tokens are loaded automatically.** `WebviewApp` imports `@lilara/foundations/reset.css` and `@lilara/foundations/tokens.css` as side effects — no manual CSS import is needed in the app's `index.tsx`.
+
+#### Always use UI components from `@botonic/webchat-react`
+
+Never use raw HTML elements (`<input>`, `<button>`, `<select>`, etc.) in webviews. All interactive and display elements must come from `@botonic/webchat-react`, which re-exports the full design system.
+
+> **react-aria conventions.** These components are built on react-aria — prop names differ from standard HTML. Check the `.d.ts` types before using any component. Key differences: `Button` uses `onPress` not `onClick`; `Checkbox` and `Switch` use `isSelected` not `checked`, and `onChange` receives a `boolean` not an event.
+
+| Component                                 | Use for                             |
+| ----------------------------------------- | ----------------------------------- |
+| `Button`                                  | Any clickable action                |
+| `TextInput`                               | Single-line text fields             |
+| `TextArea`                                | Multi-line text fields              |
+| `Checkbox`                                | Boolean toggles                     |
+| `Switch`                                  | On/off toggles                      |
+| `Select` / `SelectWithSections`           | Single-choice dropdowns             |
+| `Multiselect` / `MultiselectWithSections` | Multi-choice dropdowns              |
+| `Slider`                                  | Numeric range input                 |
+| `Banner`                                  | Inline alerts and feedback messages |
+| `Tooltip`                                 | Contextual hints                    |
+| `Badge` / `Tag`                           | Status indicators                   |
+| `Spinner`                                 | Loading states                      |
+
+**Static content**
+
+```tsx
+import { useWebviewRequest, WebviewBody, WebviewFrame, WebviewHeader } from '@botonic/webviews'
+
+export const OrderDetail = () => {
+  const { payload, closeWebview } = useWebviewRequest<{ orderId: string }>()
+
+  return (
+    <WebviewFrame>
+      <WebviewHeader title='Order Detail' onClose={closeWebview} />
+      <WebviewBody variant='padded'>
+        <p>Order ID: {payload?.orderId}</p>
+      </WebviewBody>
+    </WebviewFrame>
+  )
+}
+```
+
+**Form with submission**
+
+```tsx
+import { Button, TextInput } from '@botonic/webchat-react'
+import { useWebviewRequest, WebviewBody, WebviewFrame, WebviewHeader } from '@botonic/webviews'
+
+export const BookingForm = () => {
+  const { closeWebview } = useWebviewRequest()
+  const [name, setName] = useState('')
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    closeWebview({ name })
+  }
+
+  return (
+    <WebviewFrame>
+      <WebviewHeader title='Booking' />
+      <WebviewBody variant='padded'>
+        <form onSubmit={handleSubmit}>
+          <TextInput value={name} onChange={e => setName(e.target.value)} placeholder='Your name' />
+          <Button type='submit'>Confirm</Button>
+        </form>
+      </WebviewBody>
+    </WebviewFrame>
+  )
+}
+```
+
+**Fetching data on load**
+
+```tsx
+import { Banner, Spinner } from '@botonic/webchat-react'
+import { useWebviewRequest, WebviewBody, WebviewFrame, WebviewHeader } from '@botonic/webviews'
+
+export const OrderDetail = () => {
+  const { payload, closeWebview } = useWebviewRequest<{ orderId: string }>()
+  const [order, setOrder] = useState<Order>()
+  const [error, setError] = useState<string>()
+
+  useEffect(() => {
+    if (!payload?.orderId) return
+    let cancelled = false
+    fetchOrder(payload.orderId)
+      .then(o => {
+        if (!cancelled) setOrder(o)
+      })
+      .catch(err => {
+        if (!cancelled) setError(err?.message ?? 'Failed to load order')
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [payload?.orderId])
+
+  return (
+    <WebviewFrame>
+      <WebviewHeader title='Order Detail' onClose={closeWebview} />
+      <WebviewBody variant='padded'>
+        {error && <Banner variant='error'>{error}</Banner>}
+        {!order && !error && <Spinner />}
+        {order && <p>{order.statusMessage}</p>}
+      </WebviewBody>
+    </WebviewFrame>
+  )
+}
+```
+
+### Step 6 — Open it from a bot action
+
+After the webview is ready, remind the user to open it from an action using `BotServerMessageFactory.createWebviewButton`:
+
+```typescript
+import { WEBVIEWS } from '../../shared/constants'
+
+await sendMessage(
+  BotServerMessageFactory.createButtonMessage({
+    text: 'Need to book a slot?',
+    buttons: [BotServerMessageFactory.createWebviewButton({ title: 'Open form', webview: WEBVIEWS.BOOKING_FORM }, session)],
+  })
+)
+```
+
+Use the `botonic-action` skill if the user also needs to create the triggering action.
+
+## Options reference
+
+| Option      | Default | Notes                            |
+| ----------- | ------- | -------------------------------- |
+| `name`      | —       | Required. kebab-case recommended |
+| `project`   | —       | Required. Nx project name        |
+| `skipTests` | `false` | Omit `<name>.spec.tsx`           |

package/src/generators/preset/files/.env.prod.template

@@ -0,0 +1,2 @@
+VITE_HUBTYPE_API_URL=https://api.hubtype.com
+VITE_HUBTYPE_CLIENT_ID=UztB1hd4R3Jx3Cl6nklQuNDsjHMxPQ2hjrmFrdTG

package/src/generators/preset/files/.env.template

@@ -0,0 +1,2 @@
+# Disable Nx TUI (Terminal User Interface) for cleaner CLI output
+NX_TUI=false

package/src/generators/preset/files/.npmrc.template

@@ -0,0 +1 @@
+# @botonic/* and @lilara/* use the public npm registry by default.

package/src/generators/preset/files/README.md.template

@@ -0,0 +1,174 @@
+# <%= name %>
+
+This workspace was generated using the Botonic Nx Plugin.
+
+## Prerequisites
+
+### 1. Backend Setup
+```bash
+# Clone and setup hubtype-backend
+git clone https://github.com/metis-ai/hubtype-backend
+cd hubtype-backend
+# Follow setup instructions: https://www.notion.so/Laptop-Setup-macOS-0ae7e69f670d40f8b99bf2fb833b59b4
+```
+
+### 2. Tunnel Configuration
+```bash
+# Setup ngrok tunnel for local development
+# Replace {YOUR_TUNNEL_SUBDOMAIN} with your actual subdomain
+# Target URL: https://{YOUR_TUNNEL_SUBDOMAIN}-be-dev.metis.ai/
+```
+
+### 3. AWS SAM CLI Installation
+```bash
+# Install AWS SAM CLI for local lambda execution
+# Follow: https://docs.aws.amazon.com/serverless-application-model/latest/developerguide/install-sam-cli.html
+```
+
+### 4. Environment Configuration
+Create/update `hubtype-backend/local.env` with:
+
+```bash
+HUBTYPE_HOST=https://{YOUR_TUNNEL_SUBDOMAIN}-be-dev.metis.ai
+EXTRA_ALLOWED={YOUR_TUNNEL_SUBDOMAIN}-be-dev.metis.ai
+HUBTYPE_FRONTEND_HOST=http://localhost:4200
+CORS_ALLOWED_ORIGINS=http://localhost:4200,http://localhost:4201,http://localhost:4202,http://localhost:3001
+# Note: ports 4201, 4202, 3001 are used by botonic v2 serve mode
+```
+
+## Getting Started
+
+### Backend Commands
+From within `hubtype-backend` directory:
+
+```bash
+# Local development mode - uses local lambda
+make run-botonic-local
+
+# Remote mode - uses deployed lambda
+make run-botonic-remote
+```
+
+### Tunnel Setup
+Start cloudflare tunnel before running the options below:
+
+```bash
+# Replace {YOUR_TOKEN} with your actual Cloudflare tunnel token
+docker run --rm --network host cloudflare/cloudflared:latest tunnel --no-autoupdate run --token {YOUR_TOKEN} --url http://localhost:8000
+```
+
+### 1. Initialize Bot Monorepo
+```bash
+# Navigate to your desired directory
+cd /path/to/your/workspace
+
+# Generate new bot monorepo (replace {YOUR_BOTS_MONOREPO_NAME})
+npx nx generate @botonic/nx-plugin:preset {YOUR_BOTS_MONOREPO_NAME}
+
+# Alternative: Use Nx UI (Cmd+Shift+P → Nx: Generate (UI))
+```
+
+### 2. Create Bot Application
+```bash
+# From within the generated monorepo
+cd {YOUR_BOTS_MONOREPO_NAME}
+
+# Generate new bot app (replace {BOT_NAME})
+npx nx g @botonic/nx-plugin:bot-app {BOT_NAME}
+
+# Alternative: Use Nx UI (Cmd+Shift+P → Nx: Generate (UI))
+```
+
+### 3. Local Development Setup
+```bash
+# Step 1: Start backend in local mode
+cd hubtype-backend
+make run-botonic-local
+
+# Step 2: Login to local backend (from bot monorepo)
+cd {YOUR_BOTS_MONOREPO_NAME}
+nx run {BOT_NAME}:login-to-hubtype --configuration=local
+
+# Step 3: Deploy local runtime (creates bot in database)
+nx run {BOT_NAME}:deploy-local-runtime --configuration=local
+
+# Step 4: Start bot in local mode
+nx serve {BOT_NAME} --mode=local
+```
+
+### 4. Production Deployment
+```bash
+# Logout from current environment
+nx run {BOT_NAME}:logout-from-hubtype
+
+# Login to target environment (dev, dev2, qa, prod)
+nx run {BOT_NAME}:login-to-hubtype --configuration=dev2
+
+# Deploy to target environment
+nx run {BOT_NAME}:deploy-to-hubtype --configuration=dev2
+```
+
+
+This workspace contains tools and configurations for building Botonic bot applications.
+
+### Available Commands
+
+- `nx g @botonic/nx-plugin:bot-app <name>` - Generate a new bot application
+- `nx build <bot-name>` - Build a bot application
+- `nx serve <bot-name>` - Serve a bot application for development
+- `nx test <bot-name>` - Run tests for a bot application
+
+### AI Commands (Cursor)
+
+- `/update-bot` — Update a Botonic bot to a newer version using Nx migrations. Type `/update-bot` in Cursor chat; it discovers bots, lets you pick one, and runs migrations one version at a time with git branch management.
+
+### Project Structure
+
+```
+<%= name %>/
+├── apps/                    # Bot applications
+├── libs/                   # Shared libraries
+├── tools/                  # Build tools and scripts
+├── nx.json                 # Nx workspace configuration
+├── package.json           # Dependencies and scripts
+└── README.md              # This file
+```
+
+### Creating Your First Bot
+
+To create a new bot application:
+
+```bash
+nx g @botonic/nx-plugin:bot-app my-bot
+```
+
+This will create a new bot application in the `apps/my-bot` directory with:
+- Basic bot structure
+- Routes and actions
+- Configuration files
+- Build and development scripts
+
+### Development
+
+To start developing your bot:
+
+```bash
+# Serve the bot for development
+nx serve my-bot
+
+# Build the bot for production
+nx build my-bot
+
+# Run tests
+nx test my-bot
+```
+
+### Learn More
+
+- [Botonic Documentation](https://botonic.io/docs/)
+- [Nx Documentation](https://nx.dev/)
+- [Hubtype Documentation](https://docs.hubtype.com/)
+
+## Support
+
+For support and questions, please visit our [GitHub repository](https://github.com/hubtype/botonic).

package/src/generators/preset/files/nx.json

@@ -0,0 +1,66 @@
+{
+  "$schema": "./node_modules/nx/schemas/nx-schema.json",
+  "defaultBase": "main",
+  "namedInputs": {
+    "default": ["{projectRoot}/**/*", "sharedGlobals"],
+    "production": [
+      "default",
+      "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
+      "!{projectRoot}/tsconfig.spec.json",
+      "!{projectRoot}/jest.config.[jt]s",
+      "!{projectRoot}/src/test-setup.[jt]s",
+      "!{projectRoot}/test-setup.[jt]s",
+      "!{projectRoot}/.eslintrc.json",
+      "!{projectRoot}/eslint.config.js"
+    ],
+    "sharedGlobals": ["{workspaceRoot}/.github/workflows/ci.yml"]
+  },
+  "generators": {
+    "@nx/react": {
+      "application": {
+        "babel": true,
+        "style": "css",
+        "linter": "eslint",
+        "bundler": "vite",
+        "projectNameAndRootFormat": "as-provided"
+      },
+      "component": {
+        "style": "css"
+      },
+      "library": {
+        "style": "css",
+        "linter": "eslint",
+        "unitTestRunner": "vitest",
+        "projectNameAndRootFormat": "as-provided"
+      }
+    }
+  },
+  "targetDefaults": {
+    "build": {
+      "cache": true,
+      "dependsOn": ["^build"],
+      "inputs": ["production", "^production"]
+    },
+    "test": {
+      "cache": true,
+      "inputs": ["default", "^production", "{workspaceRoot}/jest.preset.js"]
+    },
+    "lint": {
+      "cache": true,
+      "inputs": [
+        "default",
+        "{workspaceRoot}/.eslintrc.json",
+        "{workspaceRoot}/.eslintignore",
+        "{workspaceRoot}/eslint.config.js"
+      ]
+    },
+    "typecheck": {
+      "cache": true,
+      "inputs": ["default", "^production"]
+    }
+  },
+  "plugins": ["@botonic/nx-plugin"],
+  "tui": {
+    "autoExit": 0
+  }
+}

package/src/generators/preset/files/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "<%= name %>",
+  "version": "1.0.0",
+  "description": "A Botonic workspace using NPM workspaces and TypeScript project references",
+  "private": true,
+  "workspaces": [
+    "packages/*",
+    "apps/*"
+  ],
+  "scripts": {
+    "build": "nx run-many --target=build",
+    "test": "nx run-many --target=test",
+    "lint": "nx run-many --target=lint",
+    "typecheck": "nx run-many --target=typecheck"
+  },
+  "devDependencies": {
+    "@nx/js": "21.0.3",
+    "@swc-node/register": "~1.9.1",
+    "@swc/core": "~1.5.7",
+    "@swc/helpers": "~0.5.11",
+    "nx": "21.0.3",
+    "prettier": "^2.6.2",
+    "tslib": "^2.3.0",
+    "typescript": "~5.8.2"
+  }
+}