commit f3e6b95be90b4316216d1231ecbdbc193aab790b
Author: sunzhongyi <sunzhongyi@simboss.com>
Date:   Tue May 19 21:09:56 2026 +0800

    -

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..d7ebfb4
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,45 @@
+# Dependencies
+node_modules
+.pnp
+.pnp.js
+
+# Build outputs
+dist
+.next
+out
+build
+*.tsbuildinfo
+
+# Environment
+.env
+.env*.local
+
+# IDE
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Testing
+coverage
+.nyc_output
+
+# Turbo
+.turbo
+
+# Misc
+.cache
+.temp
diff --git a/.playwright-mcp/page-2026-05-19T12-57-35-241Z.yml b/.playwright-mcp/page-2026-05-19T12-57-35-241Z.yml
new file mode 100644
index 0000000..9793a92
--- /dev/null
+++ b/.playwright-mcp/page-2026-05-19T12-57-35-241Z.yml
@@ -0,0 +1,102 @@
+- generic [ref=e2]:
+  - navigation [ref=e3]:
+    - generic [ref=e4]:
+      - link "NewspaperUI" [ref=e5] [cursor=pointer]:
+        - /url: /
+      - paragraph [ref=e6]: 报纸布局组件库
+    - generic [ref=e7]:
+      - link "概览" [ref=e9] [cursor=pointer]:
+        - /url: /
+      - link "栅格系统" [ref=e11] [cursor=pointer]:
+        - /url: /grid-system
+      - generic [ref=e12]:
+        - link "核心组件" [ref=e13] [cursor=pointer]:
+          - /url: /components
+        - generic [ref=e14]:
+          - link "Article" [ref=e15] [cursor=pointer]:
+            - /url: /components/article
+          - link "Layer" [ref=e16] [cursor=pointer]:
+            - /url: /components/layer
+          - link "媒体组件" [ref=e17] [cursor=pointer]:
+            - /url: /components/media
+      - link "文本组件" [ref=e19] [cursor=pointer]:
+        - /url: /text
+      - link "主题系统" [ref=e21] [cursor=pointer]:
+        - /url: /theme
+      - generic [ref=e22]:
+        - link "示例" [ref=e23] [cursor=pointer]:
+          - /url: /examples
+        - generic [ref=e24]:
+          - link "跨栏布局" [ref=e25] [cursor=pointer]:
+            - /url: /examples/spanning
+          - link "响应式布局" [ref=e26] [cursor=pointer]:
+            - /url: /examples/responsive
+  - main [ref=e27]:
+    - generic [ref=e29]:
+      - heading "NewspaperUI" [level=1] [ref=e30]
+      - paragraph [ref=e31]: 生产级报纸布局组件库，参考 InDesign 设计理念，支持 24 列栅格、跨栏、视觉权重和主题系统。
+      - heading "设计理念" [level=2] [ref=e32]
+      - paragraph [ref=e33]: NewspaperUI 借鉴专业排版软件 InDesign 的设计思想，为 Web 应用提供报纸风格的布局能力。 组件设计遵循少而精、职责明确、无冗余、无歧义的原则。
+      - heading "核心特性" [level=2] [ref=e34]
+      - list [ref=e35]:
+        - listitem [ref=e36]:
+          - strong [ref=e37]: 24 列栅格系统
+          - text: "- 灵活的栅格布局，支持精确的列控制"
+        - listitem [ref=e38]:
+          - strong [ref=e39]: 跨栏布局
+          - text: "- 内容可以跨越多列，实现复杂的报纸排版"
+        - listitem [ref=e40]:
+          - strong [ref=e41]: 视觉权重系统
+          - text: "- High/Medium/Low 三级权重，自动映射字体大小和样式"
+        - listitem [ref=e42]:
+          - strong [ref=e43]: 主题系统
+          - text: "- 基于 CSS Variables，支持主题切换和自定义"
+        - listitem [ref=e44]:
+          - strong [ref=e45]: 响应式设计
+          - text: "- 小屏自动调整为 12-16 列，保持良好的阅读体验"
+        - listitem [ref=e46]:
+          - strong [ref=e47]: 浮动 Layer
+          - text: "- 支持绝对定位的浮动元素，如广告、拉引等"
+      - heading "快速开始" [level=2] [ref=e48]
+      - heading "安装" [level=3] [ref=e49]
+      - code [ref=e51]: pnpm add @newspaperui/components @newspaperui/theme
+      - heading "基础使用" [level=3] [ref=e52]
+      - generic [ref=e53]:
+        - generic [ref=e54]:
+          - heading "简单的报纸布局" [level=3] [ref=e55]
+          - paragraph [ref=e56]: 使用 Layout 和 Section 创建基础的栅格布局
+        - generic [ref=e58]:
+          - article [ref=e60]:
+            - heading "主要新闻标题" [level=1] [ref=e61]
+            - paragraph [ref=e62]: 这是一篇重要的新闻内容，使用 High 权重的标题和正文文本。
+          - generic [ref=e63]:
+            - article [ref=e64]:
+              - heading "次要新闻" [level=1] [ref=e65]
+              - paragraph [ref=e66]: 这是另一篇新闻，使用 Medium 权重。
+            - article [ref=e67]:
+              - heading "更多新闻" [level=1] [ref=e68]
+              - paragraph [ref=e69]: 更多内容在这里展示。
+        - button "查看代码" [ref=e71] [cursor=pointer]
+      - heading "下一步" [level=2] [ref=e72]
+      - paragraph [ref=e73]: 探索文档了解更多功能：
+      - list [ref=e74]:
+        - listitem [ref=e75]:
+          - link "栅格系统" [ref=e76] [cursor=pointer]:
+            - /url: /grid-system
+          - text: "- 了解 24 列栅格的工作原理"
+        - listitem [ref=e77]:
+          - link "核心组件" [ref=e78] [cursor=pointer]:
+            - /url: /components/article
+          - text: "- 学习 Article、Layer 等核心组件"
+        - listitem [ref=e79]:
+          - link "文本组件" [ref=e80] [cursor=pointer]:
+            - /url: /text
+          - text: "- 掌握视觉权重系统"
+        - listitem [ref=e81]:
+          - link "主题系统" [ref=e82] [cursor=pointer]:
+            - /url: /theme
+          - text: "- 自定义主题和样式"
+        - listitem [ref=e83]:
+          - link "示例" [ref=e84] [cursor=pointer]:
+            - /url: /examples/spanning
+          - text: "- 查看完整的布局示例"
\ No newline at end of file
diff --git a/.playwright-mcp/page-2026-05-19T13-08-10-670Z.yml b/.playwright-mcp/page-2026-05-19T13-08-10-670Z.yml
new file mode 100644
index 0000000..e570a82
--- /dev/null
+++ b/.playwright-mcp/page-2026-05-19T13-08-10-670Z.yml
@@ -0,0 +1,13 @@
+- generic [active]:
+  - generic [ref=e5] [cursor=pointer]:
+    - button "Open Next.js Dev Tools" [ref=e6]:
+      - img [ref=e7]
+    - generic [ref=e10]:
+      - button "Open issues overlay" [ref=e11]:
+        - generic [ref=e12]:
+          - generic [ref=e13]: "0"
+          - generic [ref=e14]: "1"
+        - generic [ref=e15]: Issue
+      - button "Collapse issues badge" [ref=e16]:
+        - img [ref=e17]
+  - alert [ref=e19]
\ No newline at end of file
diff --git a/.playwright-mcp/page-2026-05-19T13-08-18-501Z.yml b/.playwright-mcp/page-2026-05-19T13-08-18-501Z.yml
new file mode 100644
index 0000000..f499c80
--- /dev/null
+++ b/.playwright-mcp/page-2026-05-19T13-08-18-501Z.yml
@@ -0,0 +1,102 @@
+- generic [ref=e2]:
+  - navigation [ref=e3]:
+    - generic [ref=e4]:
+      - link "NewspaperUI" [ref=e5] [cursor=pointer]:
+        - /url: /
+      - paragraph [ref=e6]: 报纸布局组件库
+    - generic [ref=e7]:
+      - link "概览" [ref=e9] [cursor=pointer]:
+        - /url: /
+      - link "栅格系统" [ref=e11] [cursor=pointer]:
+        - /url: /grid-system
+      - generic [ref=e12]:
+        - link "核心组件" [ref=e13] [cursor=pointer]:
+          - /url: /components
+        - generic [ref=e14]:
+          - link "Article" [ref=e15] [cursor=pointer]:
+            - /url: /components/article
+          - link "Layer" [ref=e16] [cursor=pointer]:
+            - /url: /components/layer
+          - link "媒体组件" [ref=e17] [cursor=pointer]:
+            - /url: /components/media
+      - link "文本组件" [ref=e19] [cursor=pointer]:
+        - /url: /text
+      - link "主题系统" [ref=e21] [cursor=pointer]:
+        - /url: /theme
+      - generic [ref=e22]:
+        - link "示例" [ref=e23] [cursor=pointer]:
+          - /url: /examples
+        - generic [ref=e24]:
+          - link "跨栏布局" [ref=e25] [cursor=pointer]:
+            - /url: /examples/spanning
+          - link "响应式布局" [ref=e26] [cursor=pointer]:
+            - /url: /examples/responsive
+  - main [ref=e27]:
+    - generic [ref=e29]:
+      - heading "NewspaperUI" [level=1] [ref=e30]
+      - paragraph [ref=e31]: 生产级报纸布局组件库，参考 InDesign 设计理念，支持 24 列栅格、跨栏、视觉权重和主题系统。
+      - heading "设计理念" [level=2] [ref=e32]
+      - paragraph [ref=e33]: NewspaperUI 借鉴专业排版软件 InDesign 的设计思想，为 Web 应用提供报纸风格的布局能力。 组件设计遵循少而精、职责明确、无冗余、无歧义的原则。
+      - heading "核心特性" [level=2] [ref=e34]
+      - list [ref=e35]:
+        - listitem [ref=e36]:
+          - strong [ref=e37]: 24 列栅格系统
+          - text: "- 灵活的栅格布局，支持精确的列控制"
+        - listitem [ref=e38]:
+          - strong [ref=e39]: 跨栏布局
+          - text: "- 内容可以跨越多列，实现复杂的报纸排版"
+        - listitem [ref=e40]:
+          - strong [ref=e41]: 视觉权重系统
+          - text: "- High/Medium/Low 三级权重，自动映射字体大小和样式"
+        - listitem [ref=e42]:
+          - strong [ref=e43]: 主题系统
+          - text: "- 基于 CSS Variables，支持主题切换和自定义"
+        - listitem [ref=e44]:
+          - strong [ref=e45]: 响应式设计
+          - text: "- 小屏自动调整为 12-16 列，保持良好的阅读体验"
+        - listitem [ref=e46]:
+          - strong [ref=e47]: 浮动 Layer
+          - text: "- 支持绝对定位的浮动元素，如广告、拉引等"
+      - heading "快速开始" [level=2] [ref=e48]
+      - heading "安装" [level=3] [ref=e49]
+      - code [ref=e51]: pnpm add @newspaperui/components @newspaperui/theme
+      - heading "基础使用" [level=3] [ref=e52]
+      - generic [ref=e53]:
+        - generic [ref=e54]:
+          - heading "简单的报纸布局" [level=3] [ref=e55]
+          - paragraph [ref=e56]: 使用 Layout 和 Section 创建基础的栅格布局
+        - generic [ref=e58]:
+          - article [ref=e60]:
+            - heading "主要新闻标题" [level=1] [ref=e61]
+            - paragraph [ref=e62]: 这是一篇重要的新闻内容，使用 High 权重的标题和正文文本。
+          - generic [ref=e63]:
+            - article [ref=e64]:
+              - heading "次要新闻" [level=2] [ref=e65]
+              - paragraph [ref=e66]: 这是另一篇新闻，使用 Medium 权重。
+            - article [ref=e67]:
+              - heading "更多新闻" [level=2] [ref=e68]
+              - paragraph [ref=e69]: 更多内容在这里展示。
+        - button "查看代码" [ref=e71]
+      - heading "下一步" [level=2] [ref=e72]
+      - paragraph [ref=e73]: 探索文档了解更多功能：
+      - list [ref=e74]:
+        - listitem [ref=e75]:
+          - link "栅格系统" [ref=e76] [cursor=pointer]:
+            - /url: /grid-system
+          - text: "- 了解 24 列栅格的工作原理"
+        - listitem [ref=e77]:
+          - link "核心组件" [ref=e78] [cursor=pointer]:
+            - /url: /components/article
+          - text: "- 学习 Article、Layer 等核心组件"
+        - listitem [ref=e79]:
+          - link "文本组件" [ref=e80] [cursor=pointer]:
+            - /url: /text
+          - text: "- 掌握视觉权重系统"
+        - listitem [ref=e81]:
+          - link "主题系统" [ref=e82] [cursor=pointer]:
+            - /url: /theme
+          - text: "- 自定义主题和样式"
+        - listitem [ref=e83]:
+          - link "示例" [ref=e84] [cursor=pointer]:
+            - /url: /examples/spanning
+          - text: "- 查看完整的布局示例"
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..cde373a
--- /dev/null
+++ b/README.md
@@ -0,0 +1,82 @@
+# NewspaperUI
+
+A newspaper-style UI component library built with React, TypeScript, and Tailwind CSS.
+
+## Project Structure
+
+```
+newspaperui/
+├── packages/
+│   ├── components/     # React components
+│   ├── theme/          # CSS variables and Tailwind tokens
+│   ├── utils/          # Utility functions
+│   └── docs/           # Documentation site (Next.js)
+├── turbo.json          # Turborepo configuration
+├── pnpm-workspace.yaml # pnpm workspace configuration
+└── package.json        # Root package.json
+```
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js >= 18.0.0
+- pnpm >= 9.0.0
+
+### Installation
+
+```bash
+pnpm install
+```
+
+### Development
+
+```bash
+# Run all packages in dev mode
+pnpm dev
+
+# Build all packages
+pnpm build
+
+# Run linting
+pnpm lint
+
+# Run tests
+pnpm test
+```
+
+## Packages
+
+### @newspaperui/components
+
+React components for building newspaper-style interfaces.
+
+**Dependencies**: `@newspaperui/theme`, `@newspaperui/utils`
+
+### @newspaperui/theme
+
+CSS variables and Tailwind tokens for consistent theming.
+
+### @newspaperui/utils
+
+Utility functions used across the component library.
+
+### @newspaperui/docs
+
+Documentation site built with Next.js 14+ App Router.
+
+**Dependencies**: `@newspaperui/components`
+
+## Tech Stack
+
+- **React** 18+
+- **TypeScript** 5+
+- **Tailwind CSS** 3+
+- **Next.js** 14+ (docs only)
+- **Vite** 5+ (build tool for components/theme/utils)
+- **Turborepo** (monorepo orchestration)
+- **pnpm** (package manager)
+
+## License
+
+MIT
diff --git a/design.md b/design.md
new file mode 100644
index 0000000..8e6b983
--- /dev/null
+++ b/design.md
@@ -0,0 +1,143 @@
+
+# AI Agent Prompt: 生产级报纸组件库开发
+
+## 任务目标
+开发一个浏览器端生产级报纸布局组件库，参考 InDesign，组件少而精、职责明确、无冗余、无歧义，支持全局 24 列栅格、跨栏、视觉权重和主题系统，提供文档网站（内嵌 demo，无需 storybook）。
+
+---
+
+## 1. 项目 setup 与架构
+
+- **Monorepo 管理**（pnpm workspace / Turborepo）
+  - Packages:
+    1. `components` → Layout / Section / Article / Layer / Text / Media
+    2. `theme` → 全局主题变量、字体、颜色、间距、视觉权重映射
+    3. `docs` → 文档网站（shadcn stack + demo）
+    4. `utils` → 栅格计算、跨栏逻辑、响应式辅助函数
+
+- **目录结构示例**:
+```
+
+/packages
+/components
+/Layout
+/Section
+/Article
+/Layer
+/Text
+/Media
+/theme
+/docs
+/utils
+
+```
+
+- **技术栈**:
+  - React 18+, TypeScript
+  - TailwindCSS + shadcn 文档 stack
+  - Vitest + React Testing Library
+  - 构建工具：Vite + Rollup
+
+---
+
+## 2. 全局栅格系统
+
+- `<Layout>` 顶层容器：
+  - maxWidth, padding, gutter, theme
+  - 栅格总列数 24
+  - snap-to-grid 支持
+- Section 内对象 span ≤ Section.columns
+- 响应式调整：小屏 12–16 列
+
+---
+
+## 3. 核心布局组件
+
+1. `<Section>`：
+   - columns, breakable, padding/margin, priority
+   - 内部对象 span ≤ Section.columns
+
+2. `<Article>`：
+   - span, priority/weight, breakable
+   - 内含 Headline / Subhead / BodyText / Image / PullQuote
+
+3. `<Layer>`：
+   - position, top/left/right/bottom, zIndex
+   - 用于浮动广告、拉引、浮动图片
+
+---
+
+## 4. 内容组件
+
+- 文本类：Headline / Subhead / BodyText / Quote / Byline / Caption
+- 媒体类：Image / Figure / Video / PullQuote
+- 属性：span（跨栏）、weight（High/Medium/Low）、margin/padding
+- 所有 span 基于 Section.columns
+
+---
+
+## 5. 视觉权重映射表（24 列）
+
+| 组件 | 权重 | font-size | font-weight | line-height | color | span | margin/padding |
+|---|---|---|---|---|---|---|---|
+| Headline | High | 36–48px | 700 | 1.1 | #111 | 6–8 | 0 0 1rem 0 |
+| Headline | Medium | 28–34px | 600 | 1.2 | #111 | 4–6 | 0 0 0.75rem 0 |
+| Headline | Low | 22–26px | 500 | 1.3 | #222 | 2–4 | 0 0 0.5rem 0 |
+| Subhead | High | 20–24px | 600 | 1.25 | #222 | 2–3 | 0 0 0.5rem 0 |
+| Subhead | Medium | 16–18px | 500 | 1.3 | #333 | 1–2 | 0 0 0.25rem 0 |
+| BodyText | High | 16px | 400 | 1.5 | #333 | 1 | 0 0 1rem 0 |
+| BodyText | Medium | 14–15px | 400 | 1.5 | #444 | 1 | 0 0 0.75rem 0 |
+| BodyText | Low | 12–14px | 400 | 1.4 | #555 | 1 | 0 0 0.5rem 0 |
+| Quote | High | 20–24px | 500 | 1.4 | #222 | 2 | 0 0 0.75rem 0 |
+| Quote | Medium | 16–18px | 400 | 1.4 | #333 | 1 | 0 0 0.5rem 0 |
+| Image Caption | Standard | 12–14px | 400 | 1.3 | #555 | 1 | 0.25rem 0 |
+| PullQuote | High | 24–28px | 600 | 1.2 | #111 | 2–3 | 0 0 0.5rem 0 |
+| PullQuote | Medium | 18–20px | 500 | 1.25 | #222 | 1–2 | 0 0 0.25rem 0 |
+| Byline | Standard | 12–14px | 400 | 1.3 | #555 | 1 | 0 0 0.25rem 0 |
+
+---
+
+## 6. 主题系统
+
+- 全局新闻字体预设
+- 颜色变量（黑/灰/强调色）
+- 间距变量（gutter, margin, padding）
+- 权重映射 Token
+- Tailwind + CSS Variables 支持主题切换
+
+---
+
+## 7. 布局规则
+
+- Section 内对象 span ≤ Section.columns
+- 高权重对象可跨多栏
+- Layer 可浮动/绝对定位
+- breakable 控制分页断开
+- 响应式：小屏 12–16 列
+
+---
+
+## 8. 文档网站
+
+- 技术栈：shadcn stack + Next.js + Tailwind + MDX
+- Demo 内嵌组件，展示属性、span、视觉权重、跨栏效果
+- 文档章节：
+  1. 概览与目标
+  2. 栅格系统与 Layout/Section 说明
+  3. 核心组件（Article/Image/Layer）属性说明
+  4. 文本组件属性与权重映射
+  5. 主题与变量使用指南
+  6. 跨栏和浮动 Layer 示例
+  7. 响应式布局展示
+
+---
+
+## 9. 实施顺序
+
+1. 初始化 monorepo + Layout / Section 基础组件
+2. 配置主题系统、视觉权重映射 CSS / Tailwind Token
+3. 开发 Article / Image / Layer / PullQuote / 文本组件
+4. 实现 Section 网格跨栏逻辑
+5. 测试生产级报纸布局：跨栏、浮动 Layer、breakable、响应式
+6. 构建文档网站，内嵌 demo 展示组件属性与效果
+7. 确认生产级排版效果符合视觉权重、跨栏、主题、响应式要求
diff --git a/docs-homepage-full.png b/docs-homepage-full.png
new file mode 100644
index 0000000..a1af868
Binary files /dev/null and b/docs-homepage-full.png differ
diff --git a/docs-homepage.png b/docs-homepage.png
new file mode 100644
index 0000000..bd16fd9
Binary files /dev/null and b/docs-homepage.png differ
diff --git a/docs-screenshot.png b/docs-screenshot.png
new file mode 100644
index 0000000..91fc0ad
Binary files /dev/null and b/docs-screenshot.png differ
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..526714a
--- /dev/null
+++ b/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "newspaperui",
+  "version": "0.0.0",
+  "private": true,
+  "description": "A newspaper-style UI component library",
+  "scripts": {
+    "build": "turbo run build",
+    "dev": "turbo run dev",
+    "lint": "turbo run lint",
+    "test": "turbo run test",
+    "clean": "turbo run clean && rm -rf node_modules"
+  },
+  "devDependencies": {
+    "turbo": "^2.3.3",
+    "typescript": "^5.7.2"
+  },
+  "packageManager": "pnpm@9.15.4",
+  "engines": {
+    "node": ">=18.0.0",
+    "pnpm": ">=9.0.0"
+  }
+}
diff --git a/packages/components/package.json b/packages/components/package.json
new file mode 100644
index 0000000..a9b4529
--- /dev/null
+++ b/packages/components/package.json
@@ -0,0 +1,49 @@
+{
+  "name": "@newspaperui/components",
+  "version": "0.0.0",
+  "description": "React components for newspaperui",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "dependencies": {
+    "@newspaperui/theme": "workspace:*",
+    "@newspaperui/utils": "workspace:*"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "jsdom": "^25.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^5.7.2",
+    "vite": "^5.4.11",
+    "vite-plugin-dts": "^4.3.0",
+    "vitest": "^2.1.8"
+  }
+}
diff --git a/packages/components/src/Article/Article.tsx b/packages/components/src/Article/Article.tsx
new file mode 100644
index 0000000..a04db8e
--- /dev/null
+++ b/packages/components/src/Article/Article.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { useSection } from '../Section/Section';
+export interface ArticleProps {
+  span: number;
+  priority?: 'High' | 'Medium' | 'Low';
+  breakable?: boolean;
+  children: React.ReactNode;
+}
+
+export const Article: React.FC<ArticleProps> = ({
+  span,
+  priority = 'Medium',
+  breakable = true,
+  children,
+}) => {
+  const section = useSection();
+
+  const effectiveSpan = Math.min(Math.max(1, span), section.columns);
+  if (span !== effectiveSpan) {
+    console.warn(`[Article] span=${span} exceeds section.columns=${section.columns}, clamped to ${effectiveSpan}`);
+  }
+
+  return (
+    <article
+      className={`newspaper-article priority-${priority.toLowerCase()}`}
+      style={{
+        gridColumn: `span ${effectiveSpan}`,
+        breakInside: breakable ? 'auto' : 'avoid',
+      }}
+      data-span={span}
+    >
+      {children}
+    </article>
+  );
+};
diff --git a/packages/components/src/Layer/Layer.tsx b/packages/components/src/Layer/Layer.tsx
new file mode 100644
index 0000000..38b6621
--- /dev/null
+++ b/packages/components/src/Layer/Layer.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+export interface LayerProps {
+  position: 'absolute' | 'fixed' | 'sticky';
+  top?: string;
+  left?: string;
+  right?: string;
+  bottom?: string;
+  zIndex?: number;
+  children: React.ReactNode;
+}
+
+export const Layer: React.FC<LayerProps> = ({
+  position,
+  top,
+  left,
+  right,
+  bottom,
+  zIndex = 10,
+  children,
+}) => {
+  return (
+    <div
+      className="newspaper-layer"
+      style={{
+        position,
+        top,
+        left,
+        right,
+        bottom,
+        zIndex,
+      }}
+    >
+      {children}
+    </div>
+  );
+};
diff --git a/packages/components/src/Layout/Layout.tsx b/packages/components/src/Layout/Layout.tsx
new file mode 100644
index 0000000..b04f5fc
--- /dev/null
+++ b/packages/components/src/Layout/Layout.tsx
@@ -0,0 +1,47 @@
+import React, { createContext, useContext } from 'react';
+
+export interface LayoutProps {
+  maxWidth?: string;
+  padding?: string;
+  gutter?: number;
+  theme?: 'light' | 'dark';
+  columns?: number;
+  children: React.ReactNode;
+}
+
+interface LayoutContextValue {
+  columns: number;
+  gutter: number;
+}
+
+const LayoutContext = createContext<LayoutContextValue>({
+  columns: 24,
+  gutter: 16,
+});
+
+export const useLayout = () => useContext(LayoutContext);
+
+export const Layout: React.FC<LayoutProps> = ({
+  maxWidth = '1440px',
+  padding = '1rem',
+  gutter = 16,
+  theme = 'light',
+  columns = 24,
+  children,
+}) => {
+  return (
+    <LayoutContext.Provider value={{ columns, gutter }}>
+      <div
+        className={`newspaper-layout ${theme === 'dark' ? 'dark' : ''}`}
+        style={{
+          maxWidth,
+          padding,
+          margin: '0 auto',
+          '--gutter': `${gutter}px`,
+        } as React.CSSProperties}
+      >
+        {children}
+      </div>
+    </LayoutContext.Provider>
+  );
+};
diff --git a/packages/components/src/Media/Figure.tsx b/packages/components/src/Media/Figure.tsx
new file mode 100644
index 0000000..515945d
--- /dev/null
+++ b/packages/components/src/Media/Figure.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { calculateSpanWidth } from '@newspaperui/utils';
+import { useSection } from '../Section/Section';
+import { Caption } from '../Text/Caption';
+
+export interface FigureProps {
+  src: string;
+  alt: string;
+  caption?: string;
+  span?: number;
+  children?: React.ReactNode;
+}
+
+export const Figure: React.FC<FigureProps> = ({
+  src,
+  alt,
+  caption,
+  span = 1,
+  children,
+}) => {
+  const section = useSection();
+  const width = calculateSpanWidth(span, section.columns);
+
+  return (
+    <figure
+      className="newspaper-figure"
+      style={{ width, margin: 0 }}
+      data-span={span}
+    >
+      <img
+        src={src}
+        alt={alt}
+        style={{
+          width: '100%',
+          height: 'auto',
+          display: 'block',
+        }}
+      />
+      {caption && <Caption>{caption}</Caption>}
+      {children}
+    </figure>
+  );
+};
diff --git a/packages/components/src/Media/Image.tsx b/packages/components/src/Media/Image.tsx
new file mode 100644
index 0000000..789ec34
--- /dev/null
+++ b/packages/components/src/Media/Image.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { calculateSpanWidth } from '@newspaperui/utils';
+import { useSection } from '../Section/Section';
+import { Caption } from '../Text/Caption';
+
+export interface ImageProps {
+  src: string;
+  alt: string;
+  span?: number;
+  caption?: string;
+  priority?: 'High' | 'Medium' | 'Low';
+}
+
+export const Image: React.FC<ImageProps> = ({
+  src,
+  alt,
+  span = 1,
+  caption,
+  priority = 'Medium',
+}) => {
+  const section = useSection();
+  const width = calculateSpanWidth(span, section.columns);
+
+  return (
+    <div
+      className={`newspaper-image priority-${priority.toLowerCase()}`}
+      style={{ width }}
+      data-span={span}
+    >
+      <img
+        src={src}
+        alt={alt}
+        style={{
+          width: '100%',
+          height: 'auto',
+          display: 'block',
+        }}
+      />
+      {caption && <Caption>{caption}</Caption>}
+    </div>
+  );
+};
diff --git a/packages/components/src/Media/PullQuote.tsx b/packages/components/src/Media/PullQuote.tsx
new file mode 100644
index 0000000..f96ba58
--- /dev/null
+++ b/packages/components/src/Media/PullQuote.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { visualWeights, resolveFontSize } from '@newspaperui/theme';
+import { calculateSpanWidth } from '@newspaperui/utils';
+import { useSection } from '../Section/Section';
+
+export interface PullQuoteProps {
+  weight?: 'High' | 'Medium';
+  span?: number;
+  author?: string;
+  children: React.ReactNode;
+}
+
+export const PullQuote: React.FC<PullQuoteProps> = ({
+  weight = 'High',
+  span,
+  author,
+  children,
+}) => {
+  const section = useSection();
+  const config = visualWeights.PullQuote[weight];
+
+  if (!config) {
+    throw new Error(`Invalid weight: ${weight} for PullQuote`);
+  }
+
+  const finalSpan = span || (Array.isArray(config.span) ? config.span[0] : config.span);
+  const width = calculateSpanWidth(finalSpan, section.columns);
+
+  return (
+    <aside
+      className="newspaper-pull-quote"
+      style={{
+        fontSize: resolveFontSize(config.fontSize),
+        fontWeight: config.fontWeight,
+        lineHeight: config.lineHeight,
+        color: config.color,
+        margin: config.margin,
+        width,
+        padding: 'var(--nui-padding-lg, 1rem)',
+        borderLeft: '4px solid var(--nui-color-accent-primary, currentColor)',
+      }}
+      data-weight={weight}
+      data-span={finalSpan}
+    >
+      <blockquote style={{ margin: 0 }}>
+        {children}
+      </blockquote>
+      {author && (
+        <cite
+          style={{
+            display: 'block',
+            marginTop: '0.5rem',
+            fontSize: '0.875em',
+            fontStyle: 'normal',
+          }}
+        >
+          — {author}
+        </cite>
+      )}
+    </aside>
+  );
+};
diff --git a/packages/components/src/Media/Video.tsx b/packages/components/src/Media/Video.tsx
new file mode 100644
index 0000000..ec003cb
--- /dev/null
+++ b/packages/components/src/Media/Video.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { calculateSpanWidth } from '@newspaperui/utils';
+import { useSection } from '../Section/Section';
+import { Caption } from '../Text/Caption';
+
+export interface VideoProps {
+  src: string;
+  poster?: string;
+  span?: number;
+  caption?: string;
+}
+
+export const Video: React.FC<VideoProps> = ({
+  src,
+  poster,
+  span = 1,
+  caption,
+}) => {
+  const section = useSection();
+  const width = calculateSpanWidth(span, section.columns);
+
+  return (
+    <div
+      className="newspaper-video"
+      style={{ width }}
+      data-span={span}
+    >
+      <video
+        src={src}
+        poster={poster}
+        controls
+        style={{
+          width: '100%',
+          height: 'auto',
+          display: 'block',
+        }}
+      />
+      {caption && <Caption>{caption}</Caption>}
+    </div>
+  );
+};
diff --git a/packages/components/src/Section/Section.tsx b/packages/components/src/Section/Section.tsx
new file mode 100644
index 0000000..db195b4
--- /dev/null
+++ b/packages/components/src/Section/Section.tsx
@@ -0,0 +1,54 @@
+import React, { createContext, useContext } from 'react';
+import { useLayout } from '../Layout/Layout';
+
+export interface SectionProps {
+  columns: number;
+  breakable?: boolean;
+  padding?: string;
+  margin?: string;
+  priority?: 'High' | 'Medium' | 'Low';
+  children: React.ReactNode;
+}
+
+interface SectionContextValue {
+  columns: number;
+}
+
+const SectionContext = createContext<SectionContextValue>({ columns: 24 });
+
+export const useSection = () => useContext(SectionContext);
+
+export const Section: React.FC<SectionProps> = ({
+  columns,
+  breakable = true,
+  padding,
+  margin,
+  priority = 'Medium',
+  children,
+}) => {
+  const layout = useLayout();
+
+  const effectiveColumns = Math.min(Math.max(1, columns), layout.columns);
+  if (columns !== effectiveColumns) {
+    console.warn(`[Section] columns=${columns} exceeds layout.columns=${layout.columns}, clamped to ${effectiveColumns}`);
+  }
+
+  return (
+    <SectionContext.Provider value={{ columns: effectiveColumns }}>
+      <section
+        className={`newspaper-section priority-${priority.toLowerCase()}`}
+        style={{
+          display: 'grid',
+          gridTemplateColumns: `repeat(${effectiveColumns}, 1fr)`,
+          gap: 'var(--nui-gutter, 1rem)',
+          padding,
+          margin,
+          breakInside: breakable ? 'auto' : 'avoid',
+        }}
+        data-columns={columns}
+      >
+        {children}
+      </section>
+    </SectionContext.Provider>
+  );
+};
diff --git a/packages/components/src/Text/BodyText.tsx b/packages/components/src/Text/BodyText.tsx
new file mode 100644
index 0000000..05406d0
--- /dev/null
+++ b/packages/components/src/Text/BodyText.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { visualWeights, resolveFontSize } from '@newspaperui/theme';
+import { calculateSpanWidth } from '@newspaperui/utils';
+import { useSection } from '../Section/Section';
+
+export interface BodyTextProps {
+  weight?: 'High' | 'Medium' | 'Low';
+  span?: number;
+  children: React.ReactNode;
+}
+
+export const BodyText: React.FC<BodyTextProps> = ({
+  weight = 'Medium',
+  span,
+  children,
+}) => {
+  const section = useSection();
+  const config = visualWeights.BodyText[weight];
+
+  if (!config) {
+    throw new Error(`Invalid weight: ${weight} for BodyText`);
+  }
+
+  const finalSpan = span || (Array.isArray(config.span) ? config.span[0] : config.span);
+  const width = calculateSpanWidth(finalSpan, section.columns);
+
+  return (
+    <p
+      className="newspaper-body-text"
+      style={{
+        fontSize: resolveFontSize(config.fontSize),
+        fontWeight: config.fontWeight,
+        lineHeight: config.lineHeight,
+        color: config.color,
+        margin: config.margin,
+        width,
+      }}
+      data-weight={weight}
+      data-span={finalSpan}
+    >
+      {children}
+    </p>
+  );
+};
diff --git a/packages/components/src/Text/Byline.tsx b/packages/components/src/Text/Byline.tsx
new file mode 100644
index 0000000..0369691
--- /dev/null
+++ b/packages/components/src/Text/Byline.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { visualWeights, resolveFontSize } from '@newspaperui/theme';
+
+export interface BylineProps {
+  children: React.ReactNode;
+}
+
+export const Byline: React.FC<BylineProps> = ({ children }) => {
+  const config = visualWeights.Byline.Standard;
+
+  if (!config) {
+    throw new Error('Byline configuration not found');
+  }
+
+  return (
+    <div
+      className="newspaper-byline"
+      style={{
+        fontSize: resolveFontSize(config.fontSize),
+        fontWeight: config.fontWeight,
+        lineHeight: config.lineHeight,
+        color: config.color,
+        margin: config.margin,
+      }}
+    >
+      {children}
+    </div>
+  );
+};
diff --git a/packages/components/src/Text/Caption.tsx b/packages/components/src/Text/Caption.tsx
new file mode 100644
index 0000000..57236fd
--- /dev/null
+++ b/packages/components/src/Text/Caption.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { visualWeights, resolveFontSize } from '@newspaperui/theme';
+
+export interface CaptionProps {
+  children: React.ReactNode;
+}
+
+export const Caption: React.FC<CaptionProps> = ({ children }) => {
+  const config = visualWeights.Caption.Standard;
+
+  if (!config) {
+    throw new Error('Caption configuration not found');
+  }
+
+  return (
+    <figcaption
+      className="newspaper-caption"
+      style={{
+        fontSize: resolveFontSize(config.fontSize),
+        fontWeight: config.fontWeight,
+        lineHeight: config.lineHeight,
+        color: config.color,
+        margin: config.margin,
+      }}
+    >
+      {children}
+    </figcaption>
+  );
+};
diff --git a/packages/components/src/Text/Headline.tsx b/packages/components/src/Text/Headline.tsx
new file mode 100644
index 0000000..e196ae7
--- /dev/null
+++ b/packages/components/src/Text/Headline.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { visualWeights, resolveFontSize } from '@newspaperui/theme';
+import { calculateSpanWidth } from '@newspaperui/utils';
+import { useSection } from '../Section/Section';
+
+const weightToTag: Record<'High' | 'Medium' | 'Low', 'h1' | 'h2' | 'h3'> = {
+  High: 'h1',
+  Medium: 'h2',
+  Low: 'h3',
+};
+
+export interface HeadlineProps {
+  weight?: 'High' | 'Medium' | 'Low';
+  span?: number;
+  as?: 'h1' | 'h2' | 'h3' | 'h4';
+  children: React.ReactNode;
+}
+
+export const Headline: React.FC<HeadlineProps> = ({
+  weight = 'High',
+  span,
+  as,
+  children,
+}) => {
+  const section = useSection();
+  const config = visualWeights.Headline[weight];
+
+  if (!config) {
+    throw new Error(`Invalid weight: ${weight} for Headline`);
+  }
+
+  const finalSpan = span || (Array.isArray(config.span) ? config.span[0] : config.span);
+  const width = calculateSpanWidth(finalSpan, section.columns);
+  const Tag = as ?? weightToTag[weight];
+
+  return (
+    <Tag
+      className="newspaper-headline"
+      style={{
+        fontSize: resolveFontSize(config.fontSize),
+        fontWeight: config.fontWeight,
+        lineHeight: config.lineHeight,
+        color: config.color,
+        margin: config.margin,
+        width,
+      }}
+      data-weight={weight}
+      data-span={finalSpan}
+    >
+      {children}
+    </Tag>
+  );
+};
diff --git a/packages/components/src/Text/Quote.tsx b/packages/components/src/Text/Quote.tsx
new file mode 100644
index 0000000..9eae513
--- /dev/null
+++ b/packages/components/src/Text/Quote.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { visualWeights, resolveFontSize } from '@newspaperui/theme';
+import { calculateSpanWidth } from '@newspaperui/utils';
+import { useSection } from '../Section/Section';
+
+export interface QuoteProps {
+  weight?: 'High' | 'Medium';
+  span?: number;
+  children: React.ReactNode;
+}
+
+export const Quote: React.FC<QuoteProps> = ({
+  weight = 'Medium',
+  span,
+  children,
+}) => {
+  const section = useSection();
+  const config = visualWeights.Quote[weight];
+
+  if (!config) {
+    throw new Error(`Invalid weight: ${weight} for Quote`);
+  }
+
+  const finalSpan = span || (Array.isArray(config.span) ? config.span[0] : config.span);
+  const width = calculateSpanWidth(finalSpan, section.columns);
+
+  return (
+    <blockquote
+      className="newspaper-quote"
+      style={{
+        fontSize: resolveFontSize(config.fontSize),
+        fontWeight: config.fontWeight,
+        lineHeight: config.lineHeight,
+        color: config.color,
+        margin: config.margin,
+        width,
+      }}
+      data-weight={weight}
+      data-span={finalSpan}
+    >
+      {children}
+    </blockquote>
+  );
+};
diff --git a/packages/components/src/Text/Subhead.tsx b/packages/components/src/Text/Subhead.tsx
new file mode 100644
index 0000000..ee05ade
--- /dev/null
+++ b/packages/components/src/Text/Subhead.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { visualWeights, resolveFontSize } from '@newspaperui/theme';
+import { calculateSpanWidth } from '@newspaperui/utils';
+import { useSection } from '../Section/Section';
+
+export interface SubheadProps {
+  weight?: 'High' | 'Medium';
+  span?: number;
+  children: React.ReactNode;
+}
+
+export const Subhead: React.FC<SubheadProps> = ({
+  weight = 'Medium',
+  span,
+  children,
+}) => {
+  const section = useSection();
+  const config = visualWeights.Subhead[weight];
+
+  if (!config) {
+    throw new Error(`Invalid weight: ${weight} for Subhead`);
+  }
+
+  const finalSpan = span || (Array.isArray(config.span) ? config.span[0] : config.span);
+  const width = calculateSpanWidth(finalSpan, section.columns);
+
+  return (
+    <h2
+      className="newspaper-subhead"
+      style={{
+        fontSize: resolveFontSize(config.fontSize),
+        fontWeight: config.fontWeight,
+        lineHeight: config.lineHeight,
+        color: config.color,
+        margin: config.margin,
+        width,
+      }}
+      data-weight={weight}
+      data-span={finalSpan}
+    >
+      {children}
+    </h2>
+  );
+};
diff --git a/packages/components/src/__tests__/Article.test.tsx b/packages/components/src/__tests__/Article.test.tsx
new file mode 100644
index 0000000..5e54963
--- /dev/null
+++ b/packages/components/src/__tests__/Article.test.tsx
@@ -0,0 +1,51 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render } from '@testing-library/react';
+import { Layout } from '../Layout/Layout';
+import { Section } from '../Section/Section';
+import { Article } from '../Article/Article';
+
+describe('Article Component', () => {
+  it('renders children correctly', () => {
+    const { container } = render(
+      <Layout>
+        <Section columns={12}>
+          <Article span={6}>
+            <div>Article Content</div>
+          </Article>
+        </Section>
+      </Layout>
+    );
+    expect(container.textContent).toContain('Article Content');
+  });
+
+  it('clamps span exceeding section columns and warns', () => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    render(
+      <Layout>
+        <Section columns={12}>
+          <Article span={15}>
+            <div>Clamped</div>
+          </Article>
+        </Section>
+      </Layout>
+    );
+    expect(warnSpy).toHaveBeenCalledWith(
+      '[Article] span=15 exceeds section.columns=12, clamped to 12'
+    );
+    warnSpy.mockRestore();
+  });
+
+  it('applies correct grid-column span based on span', () => {
+    const { container } = render(
+      <Layout>
+        <Section columns={12}>
+          <Article span={6}>
+            <div>Half Width</div>
+          </Article>
+        </Section>
+      </Layout>
+    );
+    const article = container.querySelector('.newspaper-article');
+    expect(article).toHaveStyle({ gridColumn: 'span 6' });
+  });
+});
diff --git a/packages/components/src/__tests__/Layout.test.tsx b/packages/components/src/__tests__/Layout.test.tsx
new file mode 100644
index 0000000..c7c4b0f
--- /dev/null
+++ b/packages/components/src/__tests__/Layout.test.tsx
@@ -0,0 +1,36 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Layout } from '../Layout/Layout';
+import { Section } from '../Section/Section';
+
+describe('Layout Component', () => {
+  it('renders children correctly', () => {
+    render(
+      <Layout>
+        <div>Test Content</div>
+      </Layout>
+    );
+    expect(screen.getByText('Test Content')).toBeInTheDocument();
+  });
+
+  it('applies custom maxWidth and padding', () => {
+    const { container } = render(
+      <Layout maxWidth="1200px" padding="2rem">
+        <div>Content</div>
+      </Layout>
+    );
+    const layout = container.querySelector('.newspaper-layout');
+    expect(layout).toHaveStyle({ maxWidth: '1200px', padding: '2rem' });
+  });
+
+  it('provides default columns value of 24', () => {
+    render(
+      <Layout>
+        <Section columns={12}>
+          <div>Test</div>
+        </Section>
+      </Layout>
+    );
+    expect(screen.getByText('Test')).toBeInTheDocument();
+  });
+});
diff --git a/packages/components/src/__tests__/Section.test.tsx b/packages/components/src/__tests__/Section.test.tsx
new file mode 100644
index 0000000..982a348
--- /dev/null
+++ b/packages/components/src/__tests__/Section.test.tsx
@@ -0,0 +1,46 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render } from '@testing-library/react';
+import { Layout } from '../Layout/Layout';
+import { Section } from '../Section/Section';
+
+describe('Section Component', () => {
+  it('renders children correctly', () => {
+    const { container } = render(
+      <Layout>
+        <Section columns={12}>
+          <div>Section Content</div>
+        </Section>
+      </Layout>
+    );
+    expect(container.textContent).toContain('Section Content');
+  });
+
+  it('clamps columns exceeding layout columns and warns', () => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const { container } = render(
+      <Layout columns={24}>
+        <Section columns={30}>
+          <div>Clamped</div>
+        </Section>
+      </Layout>
+    );
+    expect(warnSpy).toHaveBeenCalledWith(
+      '[Section] columns=30 exceeds layout.columns=24, clamped to 24'
+    );
+    const section = container.querySelector('.newspaper-section');
+    expect(section).toHaveStyle({ gridTemplateColumns: 'repeat(24, 1fr)' });
+    warnSpy.mockRestore();
+  });
+
+  it('applies custom padding and margin', () => {
+    const { container } = render(
+      <Layout>
+        <Section columns={12} padding="1rem" margin="2rem">
+          <div>Content</div>
+        </Section>
+      </Layout>
+    );
+    const section = container.querySelector('.newspaper-section');
+    expect(section).toHaveStyle({ padding: '1rem', margin: '2rem' });
+  });
+});
diff --git a/packages/components/src/__tests__/setup.ts b/packages/components/src/__tests__/setup.ts
new file mode 100644
index 0000000..7b0828b
--- /dev/null
+++ b/packages/components/src/__tests__/setup.ts
@@ -0,0 +1 @@
+import '@testing-library/jest-dom';
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
new file mode 100644
index 0000000..4b6b2a1
--- /dev/null
+++ b/packages/components/src/index.ts
@@ -0,0 +1,51 @@
+/**
+ * @newspaperui/components
+ * React components for newspaperui
+ */
+
+// Layout components
+export { Layout, useLayout } from './Layout/Layout';
+export type { LayoutProps } from './Layout/Layout';
+
+export { Section, useSection } from './Section/Section';
+export type { SectionProps } from './Section/Section';
+
+export { Article } from './Article/Article';
+export type { ArticleProps } from './Article/Article';
+
+export { Layer } from './Layer/Layer';
+export type { LayerProps } from './Layer/Layer';
+
+// Text components
+export { Headline } from './Text/Headline';
+export type { HeadlineProps } from './Text/Headline';
+
+export { Subhead } from './Text/Subhead';
+export type { SubheadProps } from './Text/Subhead';
+
+export { BodyText } from './Text/BodyText';
+export type { BodyTextProps } from './Text/BodyText';
+
+export { Quote } from './Text/Quote';
+export type { QuoteProps } from './Text/Quote';
+
+export { Byline } from './Text/Byline';
+export type { BylineProps } from './Text/Byline';
+
+export { Caption } from './Text/Caption';
+export type { CaptionProps } from './Text/Caption';
+
+// Media components
+export { Image } from './Media/Image';
+export type { ImageProps } from './Media/Image';
+
+export { Figure } from './Media/Figure';
+export type { FigureProps } from './Media/Figure';
+
+export { Video } from './Media/Video';
+export type { VideoProps } from './Media/Video';
+
+export { PullQuote } from './Media/PullQuote';
+export type { PullQuoteProps } from './Media/PullQuote';
+
+export const version = '0.0.0';
diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
new file mode 100644
index 0000000..49e05ce
--- /dev/null
+++ b/packages/components/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src"]
+}
diff --git a/packages/components/vite.config.ts b/packages/components/vite.config.ts
new file mode 100644
index 0000000..0d94991
--- /dev/null
+++ b/packages/components/vite.config.ts
@@ -0,0 +1,35 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { resolve } from 'path';
+import dts from 'vite-plugin-dts';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    dts({
+      insertTypesEntry: true,
+    }),
+  ],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'NewspaperUIComponents',
+      formats: ['es', 'cjs'],
+      fileName: (format) => `index.${format === 'es' ? 'js' : 'cjs'}`,
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom', 'react/jsx-runtime'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+        },
+      },
+    },
+  },
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+    },
+  },
+});
diff --git a/packages/components/vitest.config.ts b/packages/components/vitest.config.ts
new file mode 100644
index 0000000..3b92266
--- /dev/null
+++ b/packages/components/vitest.config.ts
@@ -0,0 +1,11 @@
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./src/__tests__/setup.ts'],
+  },
+});
diff --git a/packages/docs/app/components/article/page.tsx b/packages/docs/app/components/article/page.tsx
new file mode 100644
index 0000000..edafd8b
--- /dev/null
+++ b/packages/docs/app/components/article/page.tsx
@@ -0,0 +1,192 @@
+'use client';
+
+import { Demo } from '@/components/Demo';
+import { PropsTable } from '@/components/PropsTable';
+import { Layout, Section, Article, Headline, BodyText, Subhead } from '@newspaperui/components';
+
+export default function ArticlePage() {
+  return (
+    <div className="prose prose-lg max-w-none">
+      <h1>Article 组件</h1>
+      <p className="text-xl text-gray-600">
+        Article 是内容容器组件，用于组织文章内容，支持跨栏布局和优先级控制。
+      </p>
+
+      <h2>组件说明</h2>
+      <p>
+        <code>Article</code> 组件是报纸布局中的基本内容单元，可以包含标题、正文、图片等多种内容。
+        通过 span 属性控制文章占据的列数，实现灵活的跨栏布局。
+      </p>
+
+      <h2>API 文档</h2>
+      <PropsTable
+        data={[
+          {
+            name: 'span',
+            type: 'number',
+            required: true,
+            description: '文章占据的列数，必须 ≤ 所在 Section 的 columns',
+          },
+          {
+            name: 'priority',
+            type: 'number',
+            default: '0',
+            description: '优先级，数值越大优先级越高，影响排序',
+          },
+          {
+            name: 'weight',
+            type: '"High" | "Medium" | "Low"',
+            default: '"Medium"',
+            description: '视觉权重，影响内部文本组件的默认样式',
+          },
+          {
+            name: 'breakable',
+            type: 'boolean',
+            default: 'true',
+            description: '是否允许在此处分页断开',
+          },
+          {
+            name: 'className',
+            type: 'string',
+            description: '自定义 CSS 类名',
+          },
+          {
+            name: 'children',
+            type: 'React.ReactNode',
+            required: true,
+            description: '文章内容',
+          },
+        ]}
+      />
+
+      <h2>基础用法</h2>
+      <Demo
+        title="单列文章"
+        description="创建一个占据 8 列的文章"
+        code={`<Layout columns={24}>
+  <Section columns={24}>
+    <Article span={8}>
+      <Headline weight="High">文章标题</Headline>
+      <Subhead>副标题说明</Subhead>
+      <BodyText>
+        这是文章的正文内容。Article 组件提供了内容容器，
+        可以包含多种文本和媒体组件。
+      </BodyText>
+    </Article>
+  </Section>
+</Layout>`}
+      >
+        <Layout columns={24}>
+          <Section columns={24}>
+            <Article span={8}>
+              <Headline weight="High">文章标题</Headline>
+              <Subhead>副标题说明</Subhead>
+              <BodyText>
+                这是文章的正文内容。Article 组件提供了内容容器，
+                可以包含多种文本和媒体组件。
+              </BodyText>
+            </Article>
+          </Section>
+        </Layout>
+      </Demo>
+
+      <h2>跨栏布局</h2>
+      <p>
+        通过调整 span 属性，可以实现不同宽度的文章布局。较大的 span 值适合重要内容，
+        较小的 span 值适合次要内容或侧边栏。
+      </p>
+
+      <Demo
+        title="多列文章并排"
+        description="在 24 列布局中创建三个 8 列的文章"
+        code={`<Layout columns={24}>
+  <Section columns={24}>
+    <Article span={8}>
+      <Headline weight="High">主要文章</Headline>
+      <BodyText>占据 8 列的主要内容</BodyText>
+    </Article>
+    <Article span={8}>
+      <Headline weight="Medium">次要文章</Headline>
+      <BodyText>占据 8 列的次要内容</BodyText>
+    </Article>
+    <Article span={8}>
+      <Headline weight="Medium">更多内容</Headline>
+      <BodyText>占据 8 列的更多内容</BodyText>
+    </Article>
+  </Section>
+</Layout>`}
+      >
+        <Layout columns={24}>
+          <Section columns={24}>
+            <Article span={8}>
+              <Headline weight="High">主要文章</Headline>
+              <BodyText>占据 8 列的主要内容，使用 High 权重突出显示。</BodyText>
+            </Article>
+            <Article span={8}>
+              <Headline weight="Medium">次要文章</Headline>
+              <BodyText>占据 8 列的次要内容，使用 Medium 权重。</BodyText>
+            </Article>
+            <Article span={8}>
+              <Headline weight="Medium">更多内容</Headline>
+              <BodyText>占据 8 列的更多内容，与其他文章并排显示。</BodyText>
+            </Article>
+          </Section>
+        </Layout>
+      </Demo>
+
+      <h2>不同宽度组合</h2>
+      <Demo
+        title="混合宽度布局"
+        description="组合不同宽度的文章实现复杂布局"
+        code={`<Layout columns={24}>
+  <Section columns={24}>
+    <Article span={16}>
+      <Headline weight="High">宽文章 (16 列)</Headline>
+      <BodyText>
+        这是一篇占据 16 列的宽文章，适合放置重要内容或长篇文章。
+      </BodyText>
+    </Article>
+    <Article span={8}>
+      <Headline weight="Low">窄文章 (8 列)</Headline>
+      <BodyText>这是占据 8 列的窄文章，适合侧边栏或简短内容。</BodyText>
+    </Article>
+  </Section>
+</Layout>`}
+      >
+        <Layout columns={24}>
+          <Section columns={24}>
+            <Article span={16}>
+              <Headline weight="High">宽文章 (16 列)</Headline>
+              <BodyText>
+                这是一篇占据 16 列的宽文章，适合放置重要内容或长篇文章。
+                更宽的列宽提供了更好的阅读体验。
+              </BodyText>
+            </Article>
+            <Article span={8}>
+              <Headline weight="Low">窄文章 (8 列)</Headline>
+              <BodyText>这是占据 8 列的窄文章，适合侧边栏或简短内容。</BodyText>
+            </Article>
+          </Section>
+        </Layout>
+      </Demo>
+
+      <h2>使用建议</h2>
+      <ul>
+        <li>主要文章建议使用 12-16 列，提供良好的阅读宽度</li>
+        <li>次要文章或侧边栏使用 6-8 列</li>
+        <li>确保同一 Section 内所有 Article 的 span 总和 ≤ Section.columns</li>
+        <li>使用 priority 属性控制文章的显示顺序</li>
+        <li>通过 weight 属性影响内部文本组件的默认样式</li>
+        <li>重要内容使用更大的 span 值以获得更多视觉权重</li>
+      </ul>
+
+      <h2>注意事项</h2>
+      <ul>
+        <li>Article 的 span 值必须小于或等于所在 Section 的 columns 值</li>
+        <li>如果 Section 内多个 Article 的 span 总和超过 Section.columns，会自动换行</li>
+        <li>在响应式布局中，Article 会根据屏幕尺寸自动调整宽���</li>
+        <li>breakable 属性在打印或分页场景中很有用</li>
+      </ul>
+    </div>
+  );
+}
diff --git a/packages/docs/app/components/layer/page.tsx b/packages/docs/app/components/layer/page.tsx
new file mode 100644
index 0000000..43829bb
--- /dev/null
+++ b/packages/docs/app/components/layer/page.tsx
@@ -0,0 +1,199 @@
+'use client';
+
+import { Demo } from '@/components/Demo';
+import { PropsTable } from '@/components/PropsTable';
+import { Layout, Section, Article, Layer, Headline, BodyText } from '@newspaperui/components';
+
+export default function LayerPage() {
+  return (
+    <div className="prose prose-lg max-w-none">
+      <h1>Layer 组件</h1>
+      <p className="text-xl text-gray-600">
+        Layer 是浮动层组件，支持绝对定位，用于实现浮动广告、拉引、浮动图片等效果。
+      </p>
+
+      <h2>组件说明</h2>
+      <p>
+        <code>Layer</code> 组件脱离正常的栅格流，使用绝对定位。
+        它可以浮动在其他内容之上，常用于实现报纸中的浮动元素，如拉引、浮动广告、浮动图片等。
+      </p>
+
+      <h2>API 文档</h2>
+      <PropsTable
+        data={[
+          {
+            name: 'position',
+            type: '"absolute" | "fixed" | "sticky"',
+            default: '"absolute"',
+            description: 'CSS position 属性',
+          },
+          {
+            name: 'top',
+            type: 'string | number',
+            description: '距离顶部的距离',
+          },
+          {
+            name: 'right',
+            type: 'string | number',
+            description: '距离右侧的距离',
+          },
+          {
+            name: 'bottom',
+            type: 'string | number',
+            description: '距离底部的距离',
+          },
+          {
+            name: 'left',
+            type: 'string | number',
+            description: '距离左侧的距离',
+          },
+          {
+            name: 'zIndex',
+            type: 'number',
+            default: '10',
+            description: 'z-index 层级',
+          },
+          {
+            name: 'className',
+            type: 'string',
+            description: '自定义 CSS 类名',
+          },
+          {
+            name: 'children',
+            type: 'React.ReactNode',
+            required: true,
+            description: '浮动层内容',
+          },
+        ]}
+      />
+
+      <h2>基础用法</h2>
+      <Demo
+        title="浮动拉引"
+        description="在文章旁边添加浮动的拉引文字"
+        code={`<Layout columns={24}>
+  <Section columns={24}>
+    <div style={{ position: 'relative', minHeight: '300px' }}>
+      <Article span={16}>
+        <Headline weight="High">主要文章</Headline>
+        <BodyText>
+          这是一篇主要文章的内容。旁边有一个浮动的拉引，
+          用于突出显示文章中的重要引用或观点。
+        </BodyText>
+      </Article>
+
+      <Layer position="absolute" top="20px" right="20px" zIndex={10}>
+        <div className="bg-yellow-50 border-l-4 border-yellow-400 p-4 max-w-xs">
+          <p className="text-lg font-semibold text-gray-800">
+            "这是一段重要的引用文字"
+          </p>
+        </div>
+      </Layer>
+    </div>
+  </Section>
+</Layout>`}
+      >
+        <Layout columns={24}>
+          <Section columns={24}>
+            <div style={{ position: 'relative', minHeight: '300px' }}>
+              <Article span={16}>
+                <Headline weight="High">主要文章</Headline>
+                <BodyText>
+                  这是一篇主要文章的内容。旁边有一个浮动的拉引，
+                  用于突出显示文章中的重要引用或观点。Layer 组件使用绝对定位，
+                  可以精确控制元素的位置。
+                </BodyText>
+              </Article>
+
+              <Layer position="absolute" top="20px" right="20px" zIndex={10}>
+                <div className="bg-yellow-50 border-l-4 border-yellow-400 p-4 max-w-xs">
+                  <p className="text-lg font-semibold text-gray-800">
+                    "这是一段重要的引用文字"
+                  </p>
+                </div>
+              </Layer>
+            </div>
+          </Section>
+        </Layout>
+      </Demo>
+
+      <h2>浮动广告</h2>
+      <Demo
+        title="侧边浮动广告"
+        description="在页面侧边添加固定位置的广告"
+        code={`<Layout columns={24}>
+  <Section columns={24}>
+    <div style={{ position: 'relative', minHeight: '400px' }}>
+      <Article span={18}>
+        <Headline weight="High">文章内容</Headline>
+        <BodyText>
+          这是文章的主要内容区域。右侧有一个浮动的广告位，
+          使用 Layer 组件实现。
+        </BodyText>
+      </Article>
+
+      <Layer position="absolute" top="0" right="0" zIndex={5}>
+        <div className="bg-blue-100 border border-blue-300 p-6 w-48">
+          <p className="text-center font-bold text-blue-900">广告位</p>
+          <p className="text-sm text-blue-700 mt-2">300x250</p>
+        </div>
+      </Layer>
+    </div>
+  </Section>
+</Layout>`}
+      >
+        <Layout columns={24}>
+          <Section columns={24}>
+            <div style={{ position: 'relative', minHeight: '400px' }}>
+              <Article span={18}>
+                <Headline weight="High">文章内容</Headline>
+                <BodyText>
+                  这是文章的主要内容区域。右侧有一个浮动的广告位，
+                  使用 Layer 组件实现。广告不会影响正常的文章布局流。
+                </BodyText>
+                <BodyText>
+                  Layer 组件非常适合实现这类需要脱离文档流的元素。
+                </BodyText>
+              </Article>
+
+              <Layer position="absolute" top="0" right="0" zIndex={5}>
+                <div className="bg-blue-100 border border-blue-300 p-6 w-48 text-center">
+                  <p className="font-bold text-blue-900">广告位</p>
+                  <p className="text-sm text-blue-700 mt-2">300x250</p>
+                </div>
+              </Layer>
+            </div>
+          </Section>
+        </Layout>
+      </Demo>
+
+      <h2>使用建议</h2>
+      <ul>
+        <li>Layer 的父容器需要设置 <code>position: relative</code></li>
+        <li>使用 zIndex 控制多个 Layer 的层叠顺序</li>
+        <li>浮动元素不应遮挡重要内容</li>
+        <li>考虑移动端的显示效果，必要时隐藏或调整 Layer</li>
+        <li>使用 <code>position="fixed"</code> 可以实现固定在视口的效果</li>
+        <li>使用 <code>position="sticky"</code> 可以实现粘性定位效果</li>
+      </ul>
+
+      <h2>注意事项</h2>
+      <ul>
+        <li>Layer 脱离了栅格系统，不受 Section 和 Article 的列数限制</li>
+        <li>需要手动控制 Layer 的宽度和位置</li>
+        <li>在响应式设计中，可能需要根据屏幕尺寸调整 Layer 的位置</li>
+        <li>过多的 Layer 可能影响页面性能和可访问性</li>
+        <li>确保 Layer 内容在所有屏幕尺寸下都能正常显示</li>
+      </ul>
+
+      <h2>典型应用场景</h2>
+      <ul>
+        <li>浮动拉引 - 突出显示文章中的重要引用</li>
+        <li>浮动广告 - 侧边或角落的广告位</li>
+        <li>浮动图片 - 文章中的浮动配图</li>
+        <li>固定导航 - 使用 fixed 定位的导航栏</li>
+        <li>粘性标题 - 使用 sticky 定位的章节标题</li>
+      </ul>
+    </div>
+  );
+}
diff --git a/packages/docs/app/components/media/page.tsx b/packages/docs/app/components/media/page.tsx
new file mode 100644
index 0000000..549aa8c
--- /dev/null
+++ b/packages/docs/app/components/media/page.tsx
@@ -0,0 +1,271 @@
+'use client';
+
+import { Demo } from '@/components/Demo';
+import { PropsTable } from '@/components/PropsTable';
+import { Layout, Section, Article, Headline, BodyText } from '@newspaperui/components';
+import { Image, Figure } from '@newspaperui/components';
+
+export default function MediaPage() {
+  return (
+    <div className="prose prose-lg max-w-none">
+      <h1>媒体组件</h1>
+      <p className="text-xl text-gray-600">
+        NewspaperUI 提供了 Image、Figure 和 Video 组件用于展示媒体内容。
+      </p>
+
+      <h2>Image 组件</h2>
+      <p>
+        <code>Image</code> 组件用于显示图片，支持响应式和跨栏布局。
+      </p>
+
+      <PropsTable
+        data={[
+          {
+            name: 'src',
+            type: 'string',
+            required: true,
+            description: '图片 URL',
+          },
+          {
+            name: 'alt',
+            type: 'string',
+            required: true,
+            description: '图片替代文本（无障碍）',
+          },
+          {
+            name: 'span',
+            type: 'number',
+            description: '图片占据的列数',
+          },
+          {
+            name: 'aspectRatio',
+            type: 'string',
+            default: '"16/9"',
+            description: '图片宽高比',
+          },
+          {
+            name: 'objectFit',
+            type: '"cover" | "contain" | "fill"',
+            default: '"cover"',
+            description: '图片填充方式',
+          },
+          {
+            name: 'className',
+            type: 'string',
+            description: '自定义 CSS 类名',
+          },
+        ]}
+      />
+
+      <Demo
+        title="基础图片"
+        description="在文章中插入图片"
+        code={`<Article span={12}>
+  <Headline weight="High">带图片的文章</Headline>
+  <Image
+    src="https://via.placeholder.com/800x600"
+    alt="示例图片"
+    span={12}
+  />
+  <BodyText>图片下方的文字说明</BodyText>
+</Article>`}
+      >
+        <Layout columns={24}>
+          <Section columns={24}>
+            <Article span={12}>
+              <Headline weight="High">带图片的文章</Headline>
+              <Image
+                src="https://via.placeholder.com/800x600"
+                alt="示例图片"
+                span={12}
+              />
+              <BodyText>图片下方的文字说明</BodyText>
+            </Article>
+          </Section>
+        </Layout>
+      </Demo>
+
+      <h2>Figure 组件</h2>
+      <p>
+        <code>Figure</code> 组件是带标题的图片容器，包含图片和图注。
+      </p>
+
+      <PropsTable
+        data={[
+          {
+            name: 'src',
+            type: 'string',
+            required: true,
+            description: '图片 URL',
+          },
+          {
+            name: 'alt',
+            type: 'string',
+            required: true,
+            description: '图片替代文本',
+          },
+          {
+            name: 'caption',
+            type: 'string',
+            required: true,
+            description: '图注文字',
+          },
+          {
+            name: 'span',
+            type: 'number',
+            description: 'Figure 占据的列数',
+          },
+          {
+            name: 'aspectRatio',
+            type: 'string',
+            default: '"16/9"',
+            description: '图片宽高比',
+          },
+          {
+            name: 'className',
+            type: 'string',
+            description: '自定义 CSS 类名',
+          },
+        ]}
+      />
+
+      <Demo
+        title="带图注的图片"
+        description="使用 Figure 组件添加图注"
+        code={`<Article span={12}>
+  <Headline weight="High">新闻标题</Headline>
+  <Figure
+    src="https://via.placeholder.com/800x600"
+    alt="新闻配图"
+    caption="这是图片的说明文字，描述图片内容"
+    span={12}
+  />
+  <BodyText>新闻正文内容...</BodyText>
+</Article>`}
+      >
+        <Layout columns={24}>
+          <Section columns={24}>
+            <Article span={12}>
+              <Headline weight="High">新闻标题</Headline>
+              <Figure
+                src="https://via.placeholder.com/800x600"
+                alt="新闻配图"
+                caption="这是图片的说明文字，描述图片内容"
+                span={12}
+              />
+              <BodyText>新闻正文内容...</BodyText>
+            </Article>
+          </Section>
+        </Layout>
+      </Demo>
+
+      <h2>Video 组件</h2>
+      <p>
+        <code>Video</code> 组件用于嵌入视频内容。
+      </p>
+
+      <PropsTable
+        data={[
+          {
+            name: 'src',
+            type: 'string',
+            required: true,
+            description: '视频 URL',
+          },
+          {
+            name: 'poster',
+            type: 'string',
+            description: '视频封面图片 URL',
+          },
+          {
+            name: 'span',
+            type: 'number',
+            description: '视频占据的列数',
+          },
+          {
+            name: 'controls',
+            type: 'boolean',
+            default: 'true',
+            description: '是否显示控制条',
+          },
+          {
+            name: 'autoPlay',
+            type: 'boolean',
+            default: 'false',
+            description: '是否自动播放',
+          },
+          {
+            name: 'loop',
+            type: 'boolean',
+            default: 'false',
+            description: '是否循环播放',
+          },
+          {
+            name: 'muted',
+            type: 'boolean',
+            default: 'false',
+            description: '是否静音',
+          },
+          {
+            name: 'className',
+            type: 'string',
+            description: '自定义 CSS 类名',
+          },
+        ]}
+      />
+
+      <Demo
+        title="嵌入视频"
+        description="在文章中嵌入视频内容"
+        code={`<Article span={16}>
+  <Headline weight="High">视频新闻</Headline>
+  <Video
+    src="https://example.com/video.mp4"
+    poster="https://via.placeholder.com/800x450"
+    span={16}
+    controls
+  />
+  <BodyText>视频相关的文字说明...</BodyText>
+</Article>`}
+      >
+        <Layout columns={24}>
+          <Section columns={24}>
+            <Article span={16}>
+              <Headline weight="High">视频新闻</Headline>
+              <div className="bg-gray-200 aspect-video flex items-center justify-center">
+                <p className="text-gray-600">视频播放器占位</p>
+              </div>
+              <BodyText>视频相关的文字说明...</BodyText>
+            </Article>
+          </Section>
+        </Layout>
+      </Demo>
+
+      <h2>使用建议</h2>
+      <ul>
+        <li>使用 Image 组件展示简单图片</li>
+        <li>使用 Figure 组件为图片添加说明文字</li>
+        <li>使用 Video 组件嵌入视频内容</li>
+        <li>通过 span 属性控制媒体元素的宽度</li>
+        <li>设置合适的 aspectRatio 保持图片比例</li>
+        <li>始终提供 alt 文本以提高无障碍性</li>
+        <li>考虑图片和视频的加载性能</li>
+      </ul>
+
+      <h2>响应式媒体</h2>
+      <p>
+        媒体组件会根据容器宽度自动调整大小。在小屏设备上，
+        媒体元素会自动适应屏幕宽度，保持良好的显示效果。
+      </p>
+
+      <h2>性能优化</h2>
+      <ul>
+        <li>使用适当的图片格式（WebP、AVIF）</li>
+        <li>提供多种尺寸的图片用于响应式加载</li>
+        <li>使用懒加载（lazy loading）优化页面性能</li>
+        <li>压缩图片和视频文件大小</li>
+        <li>考虑使用 CDN 加速媒体资源加载</li>
+      </ul>
+    </div>
+  );
+}
diff --git a/packages/docs/app/examples/responsive/page.tsx b/packages/docs/app/examples/responsive/page.tsx
new file mode 100644
index 0000000..8d56a08
--- /dev/null
+++ b/packages/docs/app/examples/responsive/page.tsx
@@ -0,0 +1,251 @@
+'use client';
+
+import { Demo } from '@/components/Demo';
+import { Layout, Section, Article } from '@newspaperui/components';
+import { Headline, BodyText } from '@newspaperui/components';
+
+export default function ResponsivePage() {
+  return (
+    <div className="prose prose-lg max-w-none">
+      <h1>响应式布局示例</h1>
+      <p className="text-xl text-gray-600">
+        展示 NewspaperUI 如何在不同屏幕尺寸下自动调整布局。
+      </p>
+
+      <h2>响应式原理</h2>
+      <p>
+        NewspaperUI 的响应式系统基于栅格列数的动态调整。在不同的屏幕尺寸下，
+        栅格系统会自动调整列数，确保内容在各种设备上都能良好显示。
+      </p>
+
+      <div className="bg-blue-50 border-l-4 border-blue-400 p-4 my-6">
+        <h3 className="text-lg font-semibold text-blue-900 mt-0">响应式断点</h3>
+        <ul className="mb-0 text-blue-800">
+          <li><strong>大屏（≥1024px）</strong>: 24 列</li>
+          <li><strong>中屏（768px-1023px）</strong>: 16 列</li>
+          <li><strong>小屏（&lt;768px）</strong>: 12 列</li>
+        </ul>
+      </div>
+
+      <h2>自适应布局示例</h2>
+      <p>
+        以下示例展示了布局如何在不同屏幕尺寸下自动调整。
+        尝试调整浏览器窗口大小查看效果。
+      </p>
+
+      <Demo
+        title="响应式三栏布局"
+        description="大屏显示三栏，中屏显示两栏，小屏显示单栏"
+        code={`<Layout columns={24}>
+  <Section columns={24}>
+    {/* 大屏: 8+8+8, 中屏: 12+12, 小屏: 24 */}
+    <Article span={8} className="lg:span-8 md:span-12 sm:span-24">
+      <Headline weight="Medium">第一栏</Headline>
+      <BodyText>内容自动适应屏幕宽度</BodyText>
+    </Article>
+    <Article span={8} className="lg:span-8 md:span-12 sm:span-24">
+      <Headline weight="Medium">第二栏</Headline>
+      <BodyText>响应式布局</BodyText>
+    </Article>
+    <Article span={8} className="lg:span-8 md:span-12 sm:span-24">
+      <Headline weight="Medium">第三栏</Headline>
+      <BodyText>自动换行</BodyText>
+    </Article>
+  </Section>
+</Layout>`}
+      >
+        <Layout columns={24}>
+          <Section columns={24}>
+            <Article span={8}>
+              <Headline weight="Medium">科技新闻</Headline>
+              <BodyText>
+                在大屏上，这三栏并排显示。在中屏上，变为两栏布局。
+                在小屏上，每栏占据全宽，垂直堆叠。
+              </BodyText>
+            </Article>
+            <Article span={8}>
+              <Headline weight="Medium">财经要闻</Headline>
+              <BodyText>
+                响应式布局确保内容在所有设备上都能良好显示，
+                提供最佳的阅读体验。
+              </BodyText>
+            </Article>
+            <Article span={8}>
+              <Headline weight="Medium">文化艺术</Headline>
+              <BodyText>
+                NewspaperUI 的响应式系统会自动处理列宽调整，
+                无需手动编写复杂的媒体查询。
+              </BodyText>
+            </Article>
+          </Section>
+        </Layout>
+      </Demo>
+
+      <h2>主次内容响应式</h2>
+      <p>
+        在响应式布局中，主要内容和次要内容的比例也会自动调整。
+      </p>
+
+      <Demo
+        title="主次内容自适应"
+        description="大屏 16+8，中屏 12+12，小屏全宽堆叠"
+        code={`<Layout columns={24}>
+  <Section columns={24}>
+    <Article span={16}>
+      <Headline weight="High">主要内容</Headline>
+      <BodyText weight="High">
+        主要内容在大屏占据 16 列，在中屏占据 12 列，
+        在小屏占据全宽。
+      </BodyText>
+    </Article>
+    <Article span={8}>
+      <Headline weight="Low">侧边栏</Headline>
+      <BodyText weight="Low">
+        侧边栏在大屏占据 8 列，在中屏占据 12 列，
+        在小屏移到主内容下方。
+      </BodyText>
+    </Article>
+  </Section>
+</Layout>`}
+      >
+        <Layout columns={24}>
+          <Section columns={24}>
+            <Article span={16}>
+              <Headline weight="High">深度报道</Headline>
+              <BodyText weight="High">
+                这是主要内容区域，在大屏幕上占据较大的空间。
+                当屏幕变小时，布局会自动调整以保持良好的可读性。
+              </BodyText>
+              <BodyText>
+                响应式设计确保用户在任何设备上都能获得最佳的阅读体验。
+              </BodyText>
+            </Article>
+            <Article span={8}>
+              <Headline weight="Low">相关链接</Headline>
+              <BodyText weight="Low">
+                • 相关文章 1<br />
+                • 相关文章 2<br />
+                • 相关文章 3<br />
+                • 更多内容...
+              </BodyText>
+            </Article>
+          </Section>
+        </Layout>
+      </Demo>
+
+      <h2>移动优先设计</h2>
+      <p>
+        NewspaperUI 采用移动优先的设计理念，确保内容在小屏设备上也能完美呈现。
+      </p>
+
+      <Demo
+        title="移动优先布局"
+        description="小屏优化的单栏布局"
+      >
+        <Layout columns={24}>
+          <Section columns={24}>
+            <Article span={24}>
+              <Headline weight="High">移动端标题</Headline>
+              <BodyText>
+                在移动设备上，内容占据全宽，提供最佳的阅读体验。
+                字体大小和行高也会根据屏幕尺寸自动调整。
+              </BodyText>
+            </Article>
+          </Section>
+        </Layout>
+      </Demo>
+
+      <h2>响应式图片</h2>
+      <p>
+        图片和媒体元素也会根据容器宽度自动调整大小。
+      </p>
+
+      <Demo
+        title="响应式媒体"
+        description="图片自动适应容器宽度"
+      >
+        <Layout columns={24}>
+          <Section columns={24}>
+            <Article span={16}>
+              <Headline weight="High">带图片的文章</Headline>
+              <div className="bg-gray-200 aspect-video flex items-center justify-center my-4">
+                <span className="text-gray-600">响应式图片占位</span>
+              </div>
+              <BodyText>
+                图片会根据容器宽度自动缩放，保持宽高比不变。
+              </BodyText>
+            </Article>
+          </Section>
+        </Layout>
+      </Demo>
+
+      <h2>响应式最佳实践</h2>
+      <ul>
+        <li>使用相对单位（rem、em）而不是绝对单位（px）</li>
+        <li>在小屏设备上简化布局，避免过多的列</li>
+        <li>确保文字大小在移动设备上足够大（至少 16px）</li>
+        <li>触摸目标（按钮、链接）至少 44x44px</li>
+        <li>测试不同设备和屏幕尺寸的显示效果</li>
+        <li>考虑横屏和竖屏两种方向</li>
+        <li>优化图片和媒体资源的加载性能</li>
+      </ul>
+
+      <h2>测试响应式布局</h2>
+      <p>
+        建议在以下设备和尺寸上测试响应式布局：
+      </p>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 my-6">
+        <div className="border border-gray-200 rounded-lg p-4">
+          <h3 className="text-lg font-semibold mb-2">移动设备</h3>
+          <ul className="text-sm space-y-1 mb-0">
+            <li>iPhone SE (375px)</li>
+            <li>iPhone 12/13 (390px)</li>
+            <li>iPhone 14 Pro Max (430px)</li>
+            <li>Android 小屏 (360px)</li>
+          </ul>
+        </div>
+
+        <div className="border border-gray-200 rounded-lg p-4">
+          <h3 className="text-lg font-semibold mb-2">平板设备</h3>
+          <ul className="text-sm space-y-1 mb-0">
+            <li>iPad Mini (768px)</li>
+            <li>iPad (810px)</li>
+            <li>iPad Pro (1024px)</li>
+            <li>Android 平板 (800px)</li>
+          </ul>
+        </div>
+
+        <div className="border border-gray-200 rounded-lg p-4">
+          <h3 className="text-lg font-semibold mb-2">桌面设备</h3>
+          <ul className="text-sm space-y-1 mb-0">
+            <li>笔记本 (1366px)</li>
+            <li>桌面 (1920px)</li>
+            <li>大屏 (2560px)</li>
+            <li>超宽屏 (3440px)</li>
+          </ul>
+        </div>
+      </div>
+
+      <h2>调试工具</h2>
+      <p>
+        使用浏览器开发者工具的响应式设计模式测试不同屏幕尺寸：
+      </p>
+      <ul>
+        <li><strong>Chrome DevTools</strong>: Cmd/Ctrl + Shift + M</li>
+        <li><strong>Firefox</strong>: Cmd/Ctrl + Shift + M</li>
+        <li><strong>Safari</strong>: Develop → Enter Responsive Design Mode</li>
+      </ul>
+
+      <h2>性能优化</h2>
+      <ul>
+        <li>使用懒加载（lazy loading）延迟加载图片</li>
+        <li>提供不同尺寸的图片用于不同设备</li>
+        <li>使用现代图片格式（WebP、AVIF）</li>
+        <li>压缩和优化资源文件</li>
+        <li>使用 CDN 加速资源加载</li>
+        <li>减少不必要的 JavaScript 和 CSS</li>
+      </ul>
+    </div>
+  );
+}
diff --git a/packages/docs/app/examples/spanning/page.tsx b/packages/docs/app/examples/spanning/page.tsx
new file mode 100644
index 0000000..c88181c
--- /dev/null
+++ b/packages/docs/app/examples/spanning/page.tsx
@@ -0,0 +1,267 @@
+'use client';
+
+import { Demo } from '@/components/Demo';
+import { Layout, Section, Article, Layer } from '@newspaperui/components';
+import { Headline, Subhead, BodyText, Quote } from '@newspaperui/components';
+
+export default function SpanningPage() {
+  return (
+    <div className="prose prose-lg max-w-none">
+      <h1>跨栏布局示例</h1>
+      <p className="text-xl text-gray-600">
+        展示如何使用 NewspaperUI 实现复杂的跨栏报纸布局。
+      </p>
+
+      <h2>经典报纸头版布局</h2>
+      <p>
+        这是一个典型的报纸头版布局，包含主要新闻、次要新闻和浮动拉引。
+      </p>
+
+      <Demo
+        title="报纸头版"
+        description="主新闻占据 16 列，侧边栏占据 8 列，带浮动拉引"
+        code={`<Layout columns={24}>
+  <Section columns={24}>
+    <div style={{ position: 'relative', minHeight: '600px' }}>
+      {/* 主新闻 - 16 列 */}
+      <Article span={16}>
+        <Headline weight="High">重大新闻标题占据主要版面</Headline>
+        <Subhead weight="High">
+          副标题提供更多背景信息和上下文
+        </Subhead>
+        <BodyText weight="High">
+          这是主要新闻的正文内容。在报纸布局中，最重要的新闻通常占据最大的版面，
+          使用最大的字号和最粗的字重。这样的布局能够立即吸引读者的注意力。
+        </BodyText>
+        <BodyText>
+          新闻的后续段落继续详细描述事件的发展。通过合理的跨栏布局，
+          我们可以在有限的版面中呈现丰富的内容。
+        </BodyText>
+      </Article>
+
+      {/* 侧边栏 - 8 列 */}
+      <Article span={8}>
+        <Headline weight="Medium">次要新闻</Headline>
+        <BodyText weight="Medium">
+          侧边栏的新闻使用较小的字号，适合放置次要但仍然重要的内容。
+        </BodyText>
+      </Article>
+
+      {/* 浮动拉引 */}
+      <Layer position="absolute" top="100px" right="20px" zIndex={10}>
+        <div className="bg-yellow-50 border-l-4 border-yellow-400 p-4 max-w-xs">
+          <Quote weight="High">
+            "这是一段重要的引用，用于突出文章中的关键观点"
+          </Quote>
+        </div>
+      </Layer>
+    </div>
+  </Section>
+</Layout>`}
+      >
+        <Layout columns={24}>
+          <Section columns={24}>
+            <div style={{ position: 'relative', minHeight: '600px' }}>
+              <Article span={16}>
+                <Headline weight="High">重大新闻标题占据主要版面</Headline>
+                <Subhead weight="High">
+                  副标题提供更多背景信息和上下文
+                </Subhead>
+                <BodyText weight="High">
+                  这是主要新闻的正文内容。在报纸布局中，最重要的新闻通常占据最大的版面，
+                  使用最大的字号和最粗的字重。这样的布局能够立即吸引读者的注意力。
+                </BodyText>
+                <BodyText>
+                  新闻的后续段落继续详细描述事件的发展。通过合理的跨栏布局，
+                  我们可以在有限的版面中呈现丰富的内容。
+                </BodyText>
+              </Article>
+
+              <Article span={8}>
+                <Headline weight="Medium">次要新闻</Headline>
+                <BodyText weight="Medium">
+                  侧边栏的新闻使用较小的字号，适合放置次要但仍然重要的内容。
+                </BodyText>
+              </Article>
+
+              <Layer position="absolute" top="100px" right="20px" zIndex={10}>
+                <div className="bg-yellow-50 border-l-4 border-yellow-400 p-4 max-w-xs">
+                  <Quote weight="High">
+                    "这是一段重要的引用，用于突出文章中的关键观点"
+                  </Quote>
+                </div>
+              </Layer>
+            </div>
+          </Section>
+        </Layout>
+      </Demo>
+
+      <h2>三栏等宽布局</h2>
+      <p>
+        将 24 列平均分为三个 8 列的区域，适合展示多个同等重要的内容。
+      </p>
+
+      <Demo
+        title="三栏布局"
+        description="三个 8 列的文章并排显示"
+        code={`<Layout columns={24}>
+  <Section columns={24}>
+    <Article span={8}>
+      <Headline weight="Medium">第一栏标题</Headline>
+      <BodyText>第一栏的内容...</BodyText>
+    </Article>
+    <Article span={8}>
+      <Headline weight="Medium">第二栏标题</Headline>
+      <BodyText>第二栏的内容...</BodyText>
+    </Article>
+    <Article span={8}>
+      <Headline weight="Medium">第三栏标题</Headline>
+      <BodyText>第三栏的内容...</BodyText>
+    </Article>
+  </Section>
+</Layout>`}
+      >
+        <Layout columns={24}>
+          <Section columns={24}>
+            <Article span={8}>
+              <Headline weight="Medium">科技新闻</Headline>
+              <BodyText>
+                最新的科技动态和创新成果，展示技术发展的最新趋势。
+              </BodyText>
+            </Article>
+            <Article span={8}>
+              <Headline weight="Medium">财经要闻</Headline>
+              <BodyText>
+                市场动态和经济分析，帮助读者了解财经领域的重要信息。
+              </BodyText>
+            </Article>
+            <Article span={8}>
+              <Headline weight="Medium">文化艺术</Headline>
+              <BodyText>
+                文化活动和艺术展览，丰富读者的精神文化生活。
+              </BodyText>
+            </Article>
+          </Section>
+        </Layout>
+      </Demo>
+
+      <h2>不对称布局</h2>
+      <p>
+        使用不同的列宽组合创建视觉层次，突出重要内容。
+      </p>
+
+      <Demo
+        title="12 + 12 列布局"
+        description="两个等宽的 12 列区域"
+        code={`<Layout columns={24}>
+  <Section columns={24}>
+    <Article span={12}>
+      <Headline weight="High">左侧主要内容</Headline>
+      <BodyText weight="High">
+        占据 12 列的主要内容区域...
+      </BodyText>
+    </Article>
+    <Article span={12}>
+      <Headline weight="High">右侧主要内容</Headline>
+      <BodyText weight="High">
+        同样占据 12 列的内容区域...
+      </BodyText>
+    </Article>
+  </Section>
+</Layout>`}
+      >
+        <Layout columns={24}>
+          <Section columns={24}>
+            <Article span={12}>
+              <Headline weight="High">深度报道：城市发展</Headline>
+              <BodyText weight="High">
+                这是一篇深度报道，详细分析城市发展的现状和未来趋势。
+                12 列的宽度提供了良好的阅读体验。
+              </BodyText>
+            </Article>
+            <Article span={12}>
+              <Headline weight="High">专题调查：环境保护</Headline>
+              <BodyText weight="High">
+                环境保护专题调查报告，展示环保工作的成果和挑战。
+                与左��内容形成对比和呼应。
+              </BodyText>
+            </Article>
+          </Section>
+        </Layout>
+      </Demo>
+
+      <h2>复杂混合布局</h2>
+      <p>
+        组合多种列宽，创建丰富的视觉层次和内容结构。
+      </p>
+
+      <Demo
+        title="混合列宽布局"
+        description="6 + 12 + 6 列的组合布局"
+        code={`<Layout columns={24}>
+  <Section columns={24}>
+    <Article span={6}>
+      <Headline weight="Low">侧边栏</Headline>
+      <BodyText weight="Low">简短内容</BodyText>
+    </Article>
+    <Article span={12}>
+      <Headline weight="High">主要内容</Headline>
+      <BodyText>详细的主要内容...</BodyText>
+    </Article>
+    <Article span={6}>
+      <Headline weight="Low">另一侧边栏</Headline>
+      <BodyText weight="Low">补充信息</BodyText>
+    </Article>
+  </Section>
+</Layout>`}
+      >
+        <Layout columns={24}>
+          <Section columns={24}>
+            <Article span={6}>
+              <Headline weight="Low">快讯</Headline>
+              <BodyText weight="Low">
+                • 新闻 1<br />
+                • 新闻 2<br />
+                • 新闻 3
+              </BodyText>
+            </Article>
+            <Article span={12}>
+              <Headline weight="High">今日焦点</Headline>
+              <BodyText>
+                主要新闻内容占据中间的 12 列，提供充足的空间展示详细信息。
+                两侧的 6 列侧边栏提供补充内容和快讯。
+              </BodyText>
+            </Article>
+            <Article span={6}>
+              <Headline weight="Low">相关链接</Headline>
+              <BodyText weight="Low">
+                • 链接 1<br />
+                • 链接 2<br />
+                • 链接 3
+              </BodyText>
+            </Article>
+          </Section>
+        </Layout>
+      </Demo>
+
+      <h2>布局技巧</h2>
+      <ul>
+        <li>使用较大的 span 值（12-16 列）突出重要内容</li>
+        <li>侧边栏使用较小的 span 值（4-8 列）</li>
+        <li>保持布局的平衡感，避免过于拥挤或空旷</li>
+        <li>使用浮动 Layer 添加视觉亮点</li>
+        <li>通过视觉权重系统创建清晰的信息层次</li>
+        <li>考虑内容的重要性和阅读顺序</li>
+      </ul>
+
+      <h2>注意事项</h2>
+      <ul>
+        <li>确保所有 Article 的 span 总和不超过 Section 的 columns</li>
+        <li>在小屏设备上测试布局的响应式效果</li>
+        <li>避免过多的跨栏，保持布局的可读性</li>
+        <li>使用一致的列宽比例，如 8:16、6:12:6 等</li>
+        <li>浮动元素不要遮挡重要内容</li>
+      </ul>
+    </div>
+  );
+}
diff --git a/packages/docs/app/globals.css b/packages/docs/app/globals.css
new file mode 100644
index 0000000..5d918ba
--- /dev/null
+++ b/packages/docs/app/globals.css
@@ -0,0 +1,35 @@
+@import '@newspaperui/theme/variables.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    @apply bg-white text-gray-900;
+  }
+
+  h1 {
+    @apply text-4xl font-bold mb-4;
+  }
+
+  h2 {
+    @apply text-3xl font-semibold mt-8 mb-4;
+  }
+
+  h3 {
+    @apply text-2xl font-semibold mt-6 mb-3;
+  }
+
+  p {
+    @apply mb-4 leading-relaxed;
+  }
+
+  code {
+    @apply text-sm bg-gray-100 px-1.5 py-0.5 rounded;
+  }
+
+  pre code {
+    @apply bg-transparent p-0;
+  }
+}
diff --git a/packages/docs/app/grid-system/page.tsx b/packages/docs/app/grid-system/page.tsx
new file mode 100644
index 0000000..155e875
--- /dev/null
+++ b/packages/docs/app/grid-system/page.tsx
@@ -0,0 +1,209 @@
+'use client';
+
+import { Demo } from '@/components/Demo';
+import { PropsTable } from '@/components/PropsTable';
+import { Layout, Section, Article, Headline, BodyText } from '@newspaperui/components';
+
+export default function GridSystemPage() {
+  return (
+    <div className="prose prose-lg max-w-none">
+      <h1>栅格系统</h1>
+      <p className="text-xl text-gray-600">
+        NewspaperUI 采用 24 列栅格系统，提供灵活而精确的布局控制能力。
+      </p>
+
+      <h2>设计原理</h2>
+      <p>
+        24 列栅格系统借鉴了专业排版软件的设计思想，相比传统的 12 列��格��24 列提供了更细粒度的布局控制。
+        这使得我们可以实现更复杂的报纸风格布局，如 1/3、2/3、1/4、3/4 等多种列宽组合。
+      </p>
+
+      <h2>Layout 组件</h2>
+      <p>
+        <code>Layout</code> 是顶层容器组件，定义了整个页面的栅格系统。
+      </p>
+
+      <PropsTable
+        data={[
+          {
+            name: 'columns',
+            type: 'number',
+            default: '24',
+            description: '栅格总列数，默认 24 列',
+          },
+          {
+            name: 'maxWidth',
+            type: 'string',
+            default: '"1440px"',
+            description: '容器最大宽度',
+          },
+          {
+            name: 'gutter',
+            type: 'number',
+            default: '16',
+            description: '列间距（单位 px）',
+          },
+          {
+            name: 'padding',
+            type: 'string',
+            default: '"1rem"',
+            description: '容器内边距',
+          },
+          {
+            name: 'className',
+            type: 'string',
+            description: '自定义 CSS 类名',
+          },
+        ]}
+      />
+
+      <Demo
+        title="基础 Layout"
+        description="创建一个 24 列的栅格容器"
+        code={`<Layout columns={24}>
+  {/* 内容 */}
+</Layout>`}
+      >
+        <Layout columns={24}>
+          <div className="bg-blue-50 border-2 border-blue-200 p-4 text-center">
+            24 列栅格容器
+          </div>
+        </Layout>
+      </Demo>
+
+      <h2>Section 组件</h2>
+      <p>
+        <code>Section</code> 组件用于将 Layout 划分为多个区域，每个 Section 可以占据不同的列数。
+        Section 内的所有对象的 span 总和不能超过 Section 的 columns 值。
+      </p>
+
+      <PropsTable
+        data={[
+          {
+            name: 'columns',
+            type: 'number',
+            required: true,
+            description: 'Section 占据的列数，必须 ≤ Layout.columns',
+          },
+          {
+            name: 'breakable',
+            type: 'boolean',
+            default: 'true',
+            description: '是否允许在此处分页断开',
+          },
+          {
+            name: 'priority',
+            type: "'High' | 'Medium' | 'Low'",
+            default: "'Medium'",
+            description: '优先级，用于排序',
+          },
+          {
+            name: 'className',
+            type: 'string',
+            description: '自定义 CSS 类名',
+          },
+        ]}
+      />
+
+      <Demo
+        title="多 Section 布局"
+        description="将 24 列划分为 8 列和 16 列两个区域"
+        code={`<Layout columns={24}>
+  <Section columns={8}>
+    <Article span={8}>
+      <Headline weight="High">8 列区域</Headline>
+      <BodyText>这个区域占据 8 列</BodyText>
+    </Article>
+  </Section>
+
+  <Section columns={16}>
+    <Article span={8}>
+      <Headline weight="Medium">16 列区域 - 左</Headline>
+      <BodyText>这个区域占据 16 列，分为两个 8 列文章</BodyText>
+    </Article>
+    <Article span={8}>
+      <Headline weight="Medium">16 列区域 - 右</Headline>
+      <BodyText>第二个 8 列文章</BodyText>
+    </Article>
+  </Section>
+</Layout>`}
+      >
+        <Layout columns={24}>
+          <Section columns={8}>
+            <Article span={8}>
+              <Headline weight="High">8 列区域</Headline>
+              <BodyText>这个区域占据 8 列，适合放置主要内容或大图。</BodyText>
+            </Article>
+          </Section>
+
+          <Section columns={16}>
+            <Article span={8}>
+              <Headline weight="Medium">16 列区域 - 左</Headline>
+              <BodyText>这个区域占据 16 列，分为两个 8 列文章。</BodyText>
+            </Article>
+            <Article span={8}>
+              <Headline weight="Medium">16 列区域 - 右</Headline>
+              <BodyText>第二个 8 列文章，与左侧并排显示。</BodyText>
+            </Article>
+          </Section>
+        </Layout>
+      </Demo>
+
+      <h2>响应式栅格</h2>
+      <p>
+        在小屏设备上，栅格系统会自动调整为 12-16 列，确保内容在移动设备上也能良好显示。
+        你可以通过 CSS 媒体查询或响应式工具类来进一步控制不同屏幕尺寸下的布局。
+      </p>
+
+      <Demo
+        title="响应式栅格示例"
+        description="在不同屏幕尺寸下自动调整列数"
+      >
+        <Layout columns={24}>
+          <Section columns={6}>
+            <Article span={6}>
+              <Headline weight="Low">6 列</Headline>
+              <BodyText>小屏下可能变为全宽</BodyText>
+            </Article>
+          </Section>
+          <Section columns={6}>
+            <Article span={6}>
+              <Headline weight="Low">6 列</Headline>
+              <BodyText>自动适应屏幕</BodyText>
+            </Article>
+          </Section>
+          <Section columns={6}>
+            <Article span={6}>
+              <Headline weight="Low">6 列</Headline>
+              <BodyText>保持良好阅读体验</BodyText>
+            </Article>
+          </Section>
+          <Section columns={6}>
+            <Article span={6}>
+              <Headline weight="Low">6 列</Headline>
+              <BodyText>响应式布局</BodyText>
+            </Article>
+          </Section>
+        </Layout>
+      </Demo>
+
+      <h2>布局规则</h2>
+      <ul>
+        <li>Layout 的 columns 属性定义了整个页面的栅格总列数（默认 24）</li>
+        <li>Section 的 columns 属性必须 ≤ Layout 的 columns</li>
+        <li>Section 内所有对象的 span 总和必须 ≤ Section 的 columns</li>
+        <li>对象可以通过 span 属性跨越多列</li>
+        <li>小屏设备会自动调整为 12-16 列</li>
+      </ul>
+
+      <h2>最佳实践</h2>
+      <ul>
+        <li>使用 24 列栅格可以实现 1/2、1/3、1/4、1/6、1/8 等多种比例</li>
+        <li>主要内容区域建议使用 8-16 列</li>
+        <li>侧边栏或次要内容使用 4-8 列</li>
+        <li>重要内容可以跨越更多列以获得更大的视觉权重</li>
+        <li>保持 Section 之间的列数比例协调，如 8:16、6:18、12:12 等</li>
+      </ul>
+    </div>
+  );
+}
diff --git a/packages/docs/app/layout.tsx b/packages/docs/app/layout.tsx
new file mode 100644
index 0000000..8af8cb7
--- /dev/null
+++ b/packages/docs/app/layout.tsx
@@ -0,0 +1,29 @@
+import type { Metadata } from 'next';
+import { Sidebar } from '@/components/Sidebar';
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: 'NewspaperUI - Documentation',
+  description: 'A newspaper-style UI component library',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="zh-CN">
+      <body className="antialiased">
+        <div className="flex min-h-screen">
+          <Sidebar />
+          <main className="flex-1 overflow-x-hidden">
+            <div className="max-w-5xl mx-auto px-8 py-12">
+              {children}
+            </div>
+          </main>
+        </div>
+      </body>
+    </html>
+  );
+}
diff --git a/packages/docs/app/page.tsx b/packages/docs/app/page.tsx
new file mode 100644
index 0000000..327a98a
--- /dev/null
+++ b/packages/docs/app/page.tsx
@@ -0,0 +1,102 @@
+'use client';
+
+import { Demo } from '@/components/Demo';
+import { Layout, Section, Article } from '@newspaperui/components';
+import { Headline, BodyText } from '@newspaperui/components';
+
+export default function HomePage() {
+  return (
+    <div className="prose prose-lg max-w-none">
+      <h1>NewspaperUI</h1>
+      <p className="text-xl text-gray-600">
+        生产级报纸布局组件库，参考 InDesign 设计理念，支持 24 列栅格、跨栏、视觉权重和主题系统。
+      </p>
+
+      <h2>设计理念</h2>
+      <p>
+        NewspaperUI 借鉴专业排版软件 InDesign 的设计思想，为 Web 应用提供报纸风格的布局能力。
+        组件设计遵循少而精、职责明确、无冗余、无歧义的原则。
+      </p>
+
+      <h2>核心特性</h2>
+      <ul>
+        <li><strong>24 列栅格系统</strong> - 灵活的栅格布局，支持精确的列控制</li>
+        <li><strong>跨栏布局</strong> - 内容可以跨越多列，实现复杂的报纸排版</li>
+        <li><strong>视觉权重系统</strong> - High/Medium/Low 三级权重，自动映射字体大小和样式</li>
+        <li><strong>主题系统</strong> - 基于 CSS Variables，支持主题切换和自定义</li>
+        <li><strong>响应式设计</strong> - 小屏自动调整为 12-16 列，保持良好的阅读体验</li>
+        <li><strong>浮动 Layer</strong> - 支持绝对定位的浮动元素，如广告、拉引等</li>
+      </ul>
+
+      <h2>快速开始</h2>
+
+      <h3>安装</h3>
+      <pre className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto">
+        <code>pnpm add @newspaperui/components @newspaperui/theme</code>
+      </pre>
+
+      <h3>基础使用</h3>
+      <Demo
+        title="简单的报纸布局"
+        description="使用 Layout 和 Section 创建基础的栅格布局"
+        code={`import { Layout, Section, Article, Headline, BodyText } from '@newspaperui/components';
+
+function MyPage() {
+  return (
+    <Layout columns={24}>
+      <Section columns={8}>
+        <Article span={8}>
+          <Headline weight="High">主要新闻标题</Headline>
+          <BodyText>这是一篇重要的新闻内容...</BodyText>
+        </Article>
+      </Section>
+
+      <Section columns={16}>
+        <Article span={8}>
+          <Headline weight="Medium">次要新闻</Headline>
+          <BodyText>这是另一篇新闻...</BodyText>
+        </Article>
+        <Article span={8}>
+          <Headline weight="Medium">更多新闻</Headline>
+          <BodyText>更多内容...</BodyText>
+        </Article>
+      </Section>
+    </Layout>
+  );
+}`}
+      >
+        <Layout columns={24}>
+          <Section columns={8}>
+            <Article span={8}>
+              <Headline weight="High">主要新闻标题</Headline>
+              <BodyText>这是一篇重要的新闻内容，使用 High 权重的标题和正文文本。</BodyText>
+            </Article>
+          </Section>
+
+          <Section columns={16}>
+            <Article span={8}>
+              <Headline weight="Medium">次要新闻</Headline>
+              <BodyText>这是另一篇新闻，使用 Medium 权重。</BodyText>
+            </Article>
+            <Article span={8}>
+              <Headline weight="Medium">更多新闻</Headline>
+              <BodyText>更多内容在这里展示。</BodyText>
+            </Article>
+          </Section>
+        </Layout>
+      </Demo>
+
+      <h2>下一步</h2>
+      <p>
+        探索文档了解更多功能：
+      </p>
+      <ul>
+        <li><a href="/grid-system">栅格系统</a> - 了解 24 列栅格的工作原理</li>
+        <li><a href="/components/article">核心组件</a> - 学习 Article、Layer 等核心组件</li>
+        <li><a href="/text">文本组件</a> - 掌握视觉权重系统</li>
+        <li><a href="/theme">主题系统</a> - 自定义主题和样式</li>
+        <li><a href="/examples/spanning">示例</a> - 查看完整的布局示例</li>
+      </ul>
+    </div>
+  );
+}
diff --git a/packages/docs/app/text/page.tsx b/packages/docs/app/text/page.tsx
new file mode 100644
index 0000000..85434dc
--- /dev/null
+++ b/packages/docs/app/text/page.tsx
@@ -0,0 +1,334 @@
+'use client';
+
+import { Demo } from '@/components/Demo';
+import { PropsTable } from '@/components/PropsTable';
+import { Headline, Subhead, BodyText, Quote, Byline, Caption } from '@newspaperui/components';
+
+export default function TextPage() {
+  return (
+    <div className="prose prose-lg max-w-none">
+      <h1>文本组件</h1>
+      <p className="text-xl text-gray-600">
+        NewspaperUI 提供了完整的文本组件体系，支持视觉权重系统，自动映射字体大小和样式。
+      </p>
+
+      <h2>视觉权重系统</h2>
+      <p>
+        视觉权重（Visual Weight）是 NewspaperUI 的核心特性之一。
+        通过 High、Medium、Low 三级权重，组件会自动应用对应的字体大小、粗细、行高和颜色。
+      </p>
+
+      <h2>Headline 组件</h2>
+      <p>
+        <code>Headline</code> 是标题组件，支持三级视觉权重。
+      </p>
+
+      <PropsTable
+        data={[
+          {
+            name: 'weight',
+            type: '"High" | "Medium" | "Low"',
+            default: '"Medium"',
+            description: '视觉权重级别',
+          },
+          {
+            name: 'as',
+            type: '"h1" | "h2" | "h3" | "h4" | "h5" | "h6"',
+            default: '"h2"',
+            description: 'HTML 标签类型',
+          },
+          {
+            name: 'className',
+            type: 'string',
+            description: '自定义 CSS 类名',
+          },
+          {
+            name: 'children',
+            type: 'React.ReactNode',
+            required: true,
+            description: '标题内容',
+          },
+        ]}
+      />
+
+      <Demo
+        title="标题视觉权重"
+        description="展示不同权重的标题效果"
+        code={`<Headline weight="High">High 权重标题</Headline>
+<Headline weight="Medium">Medium 权重标题</Headline>
+<Headline weight="Low">Low 权重标题</Headline>`}
+      >
+        <div className="space-y-4">
+          <Headline weight="High">High 权重标题 (36-48px, 700)</Headline>
+          <Headline weight="Medium">Medium 权重标题 (28-34px, 600)</Headline>
+          <Headline weight="Low">Low 权重标题 (22-26px, 500)</Headline>
+        </div>
+      </Demo>
+
+      <h2>Subhead 组件</h2>
+      <p>
+        <code>Subhead</code> 是副标题组件，用于补充说明主标题。
+      </p>
+
+      <PropsTable
+        data={[
+          {
+            name: 'weight',
+            type: '"High" | "Medium"',
+            default: '"Medium"',
+            description: '视觉权重级别',
+          },
+          {
+            name: 'className',
+            type: 'string',
+            description: '自定义 CSS 类名',
+          },
+          {
+            name: 'children',
+            type: 'React.ReactNode',
+            required: true,
+            description: '副标题内容',
+          },
+        ]}
+      />
+
+      <Demo
+        title="副标题示例"
+        description="标题和副标题的组合使用"
+        code={`<Headline weight="High">主标题</Headline>
+<Subhead weight="High">副标题说明文字</Subhead>
+<BodyText>正文内容...</BodyText>`}
+      >
+        <div className="space-y-2">
+          <Headline weight="High">重大新闻事件</Headline>
+          <Subhead weight="High">详细的副标题说明，提供更多上下文信息</Subhead>
+          <BodyText>正文内容从这里开始，详细描述新闻事件的来龙去脉...</BodyText>
+        </div>
+      </Demo>
+
+      <h2>BodyText 组件</h2>
+      <p>
+        <code>BodyText</code> 是正文文本组件，用于文章主体内容。
+      </p>
+
+      <PropsTable
+        data={[
+          {
+            name: 'weight',
+            type: '"High" | "Medium" | "Low"',
+            default: '"Medium"',
+            description: '视觉权重级别',
+          },
+          {
+            name: 'className',
+            type: 'string',
+            description: '自定义 CSS 类名',
+          },
+          {
+            name: 'children',
+            type: 'React.ReactNode',
+            required: true,
+            description: '正文内容',
+          },
+        ]}
+      />
+
+      <Demo
+        title="正文文本权重"
+        description="不同权重的正文文本"
+        code={`<BodyText weight="High">High 权重正文 (16px)</BodyText>
+<BodyText weight="Medium">Medium 权重正文 (14-15px)</BodyText>
+<BodyText weight="Low">Low 权重正文 (12-14px)</BodyText>`}
+      >
+        <div className="space-y-3">
+          <BodyText weight="High">
+            High 权重正文文本，字号 16px，适合重要段落或引言。
+          </BodyText>
+          <BodyText weight="Medium">
+            Medium 权重正文文本，字号 14-15px，适合常规正文内容。
+          </BodyText>
+          <BodyText weight="Low">
+            Low 权重正文文本，字号 12-14px，适合次要说明或注释。
+          </BodyText>
+        </div>
+      </Demo>
+
+      <h2>Quote 组件</h2>
+      <p>
+        <code>Quote</code> 是引用组件，用于突出显示引用内容。
+      </p>
+
+      <PropsTable
+        data={[
+          {
+            name: 'weight',
+            type: '"High" | "Medium"',
+            default: '"Medium"',
+            description: '视觉权重级别',
+          },
+          {
+            name: 'className',
+            type: 'string',
+            description: '自定义 CSS 类名',
+          },
+          {
+            name: 'children',
+            type: 'React.ReactNode',
+            required: true,
+            description: '引用内容',
+          },
+        ]}
+      />
+
+      <Demo
+        title="引用文本"
+        description="在文章中插入引用"
+        code={`<Quote weight="High">
+  这是一段重要的引用文字，来自某位专家的观点。
+</Quote>`}
+      >
+        <Quote weight="High">
+          这是一段重要的引用文字，来自某位专家的观点。引用组件会自动添加引号样式。
+        </Quote>
+      </Demo>
+
+      <h2>Byline 和 Caption 组件</h2>
+      <p>
+        <code>Byline</code> 用于作者署名，<code>Caption</code> 用于图片说明。
+      </p>
+
+      <PropsTable
+        data={[
+          {
+            name: 'className',
+            type: 'string',
+            description: '自定义 CSS 类名',
+          },
+          {
+            name: 'children',
+            type: 'React.ReactNode',
+            required: true,
+            description: '文本内容',
+          },
+        ]}
+      />
+
+      <Demo
+        title="署名和图注"
+        description="使用 Byline 和 Caption"
+        code={`<Headline weight="High">文章标题</Headline>
+<Byline>作者：张三 | 2024年1月1日</Byline>
+<BodyText>文章内容...</BodyText>
+<Caption>图1：示例图片的说明文字</Caption>`}
+      >
+        <div className="space-y-2">
+          <Headline weight="High">重要新闻标题</Headline>
+          <Byline>记者：张三 | 2024年1月1日 | 北京报道</Byline>
+          <BodyText>文章正文内容从这里开始...</BodyText>
+          <div className="bg-gray-200 h-32 flex items-center justify-center">
+            <span className="text-gray-500">图片占位</span>
+          </div>
+          <Caption>图1：新闻现场照片，展示事件发生时的情况</Caption>
+        </div>
+      </Demo>
+
+      <h2>视觉权重映射表</h2>
+      <p>
+        以下是完整的视觉权重映射规则（基于 24 列栅格）：
+      </p>
+
+      <div className="my-6 overflow-x-auto">
+        <table className="w-full border-collapse text-sm">
+          <thead>
+            <tr className="border-b-2 border-gray-300">
+              <th className="text-left py-2 px-3">组件</th>
+              <th className="text-left py-2 px-3">权重</th>
+              <th className="text-left py-2 px-3">字号</th>
+              <th className="text-left py-2 px-3">字重</th>
+              <th className="text-left py-2 px-3">行高</th>
+              <th className="text-left py-2 px-3">颜色</th>
+            </tr>
+          </thead>
+          <tbody className="text-sm">
+            <tr className="border-b border-gray-200">
+              <td className="py-2 px-3">Headline</td>
+              <td className="py-2 px-3">High</td>
+              <td className="py-2 px-3">36-48px</td>
+              <td className="py-2 px-3">700</td>
+              <td className="py-2 px-3">1.1</td>
+              <td className="py-2 px-3">#111</td>
+            </tr>
+            <tr className="border-b border-gray-200">
+              <td className="py-2 px-3">Headline</td>
+              <td className="py-2 px-3">Medium</td>
+              <td className="py-2 px-3">28-34px</td>
+              <td className="py-2 px-3">600</td>
+              <td className="py-2 px-3">1.2</td>
+              <td className="py-2 px-3">#111</td>
+            </tr>
+            <tr className="border-b border-gray-200">
+              <td className="py-2 px-3">Headline</td>
+              <td className="py-2 px-3">Low</td>
+              <td className="py-2 px-3">22-26px</td>
+              <td className="py-2 px-3">500</td>
+              <td className="py-2 px-3">1.3</td>
+              <td className="py-2 px-3">#222</td>
+            </tr>
+            <tr className="border-b border-gray-200">
+              <td className="py-2 px-3">Subhead</td>
+              <td className="py-2 px-3">High</td>
+              <td className="py-2 px-3">20-24px</td>
+              <td className="py-2 px-3">600</td>
+              <td className="py-2 px-3">1.25</td>
+              <td className="py-2 px-3">#222</td>
+            </tr>
+            <tr className="border-b border-gray-200">
+              <td className="py-2 px-3">Subhead</td>
+              <td className="py-2 px-3">Medium</td>
+              <td className="py-2 px-3">16-18px</td>
+              <td className="py-2 px-3">500</td>
+              <td className="py-2 px-3">1.3</td>
+              <td className="py-2 px-3">#333</td>
+            </tr>
+            <tr className="border-b border-gray-200">
+              <td className="py-2 px-3">BodyText</td>
+              <td className="py-2 px-3">High</td>
+              <td className="py-2 px-3">16px</td>
+              <td className="py-2 px-3">400</td>
+              <td className="py-2 px-3">1.5</td>
+              <td className="py-2 px-3">#333</td>
+            </tr>
+            <tr className="border-b border-gray-200">
+              <td className="py-2 px-3">BodyText</td>
+              <td className="py-2 px-3">Medium</td>
+              <td className="py-2 px-3">14-15px</td>
+              <td className="py-2 px-3">400</td>
+              <td className="py-2 px-3">1.5</td>
+              <td className="py-2 px-3">#444</td>
+            </tr>
+            <tr className="border-b border-gray-200">
+              <td className="py-2 px-3">BodyText</td>
+              <td className="py-2 px-3">Low</td>
+              <td className="py-2 px-3">12-14px</td>
+              <td className="py-2 px-3">400</td>
+              <td className="py-2 px-3">1.4</td>
+              <td className="py-2 px-3">#555</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <h2>使用建议</h2>
+      <ul>
+        <li>主标题使用 Headline High 权重</li>
+        <li>次要标题使用 Headline Medium 或 Low 权重</li>
+        <li>正文使用 BodyText Medium 权重</li>
+        <li>重要段落或引言使用 BodyText High 权重</li>
+        <li>注释或说明使用 BodyText Low 权重</li>
+        <li>引用使用 Quote 组件突出显示</li>
+        <li>作者信息使用 Byline 组件</li>
+        <li>图片说明使用 Caption 组件</li>
+      </ul>
+    </div>
+  );
+}
diff --git a/packages/docs/app/theme/page.tsx b/packages/docs/app/theme/page.tsx
new file mode 100644
index 0000000..d40e99c
--- /dev/null
+++ b/packages/docs/app/theme/page.tsx
@@ -0,0 +1,310 @@
+import { CodeBlock } from '@/components/CodeBlock';
+
+export default function ThemePage() {
+  return (
+    <div className="prose prose-lg max-w-none">
+      <h1>主题系统</h1>
+      <p className="text-xl text-gray-600">
+        NewspaperUI 基于 CSS Variables 构建主题系统，支持主题切换和自定义。
+      </p>
+
+      <h2>CSS Variables</h2>
+      <p>
+        主题系统使用 CSS 自定义属性（CSS Variables）定义颜色、字体、间距等设计令牌。
+        这使得主题切换和自定义变得简单而灵活。
+      </p>
+
+      <h3>核心变量</h3>
+      <CodeBlock
+        title="CSS Variables"
+        language="css"
+        code={`:root {
+  /* 颜色系统 */
+  --color-text-primary: #111;
+  --color-text-secondary: #222;
+  --color-text-tertiary: #333;
+  --color-text-muted: #555;
+  --color-background: #ffffff;
+  --color-border: #e5e7eb;
+
+  /* 字体系统 */
+  --font-family-serif: Georgia, 'Times New Roman', serif;
+  --font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-family-mono: 'Courier New', monospace;
+
+  /* 间距系统 */
+  --spacing-gutter: 1rem;
+  --spacing-section: 2rem;
+  --spacing-article: 1.5rem;
+
+  /* 栅格系统 */
+  --grid-columns: 24;
+  --grid-max-width: 1280px;
+}`}
+      />
+
+      <h2>Tailwind 集成</h2>
+      <p>
+        NewspaperUI 的主题系统与 Tailwind CSS 深度集成，可以直接在 Tailwind 配置中使用主题变量。
+      </p>
+
+      <CodeBlock
+        title="tailwind.config.js"
+        language="javascript"
+        code={`import { newspaperTheme } from '@newspaperui/theme';
+
+export default {
+  content: ['./src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {
+      colors: {
+        newspaper: {
+          text: {
+            primary: 'var(--color-text-primary)',
+            secondary: 'var(--color-text-secondary)',
+            tertiary: 'var(--color-text-tertiary)',
+            muted: 'var(--color-text-muted)',
+          },
+        },
+      },
+      fontFamily: {
+        serif: 'var(--font-family-serif)',
+        sans: 'var(--font-family-sans)',
+        mono: 'var(--font-family-mono)',
+      },
+    },
+  },
+  plugins: [newspaperTheme],
+};`}
+      />
+
+      <h2>使用主题变量</h2>
+      <p>
+        在组件中可以直接使用 CSS Variables 或 Tailwind 工具类。
+      </p>
+
+      <CodeBlock
+        title="使用示例"
+        language="tsx"
+        code={`// 使用 CSS Variables
+<div style={{ color: 'var(--color-text-primary)' }}>
+  主要文本
+</div>
+
+// 使用 Tailwind 工具类
+<div className="text-newspaper-text-primary">
+  主要文本
+</div>`}
+      />
+
+      <h2>自定义主题</h2>
+      <p>
+        你可以通过覆盖 CSS Variables 来自定义主题。
+      </p>
+
+      <CodeBlock
+        title="自定义主题"
+        language="css"
+        code={`:root {
+  /* 覆盖默认颜色 */
+  --color-text-primary: #000000;
+  --color-text-secondary: #1a1a1a;
+  --color-background: #f9f9f9;
+
+  /* 自定义字体 */
+  --font-family-serif: 'Merriweather', Georgia, serif;
+
+  /* 调整间距 */
+  --spacing-gutter: 1.5rem;
+  --grid-max-width: 1440px;
+}`}
+      />
+
+      <h2>深色模式</h2>
+      <p>
+        通过定义深色模式的 CSS Variables，可以轻松实现主题切换。
+      </p>
+
+      <CodeBlock
+        title="深色模式"
+        language="css"
+        code={`@media (prefers-color-scheme: dark) {
+  :root {
+    --color-text-primary: #f5f5f5;
+    --color-text-secondary: #e0e0e0;
+    --color-text-tertiary: #cccccc;
+    --color-text-muted: #999999;
+    --color-background: #1a1a1a;
+    --color-border: #333333;
+  }
+}
+
+/* 或使用类名切换 */
+.dark {
+  --color-text-primary: #f5f5f5;
+  --color-text-secondary: #e0e0e0;
+  --color-background: #1a1a1a;
+}`}
+      />
+
+      <h2>视觉权重配置</h2>
+      <p>
+        视觉权重系统的配置也可以通过主题系统进行自定义。
+      </p>
+
+      <CodeBlock
+        title="自定义视觉权重"
+        language="typescript"
+        code={`import { visualWeights } from '@newspaperui/theme';
+
+// 查看默认配置
+console.log(visualWeights.Headline.High);
+// {
+//   fontSize: '36px',
+//   fontWeight: 700,
+//   lineHeight: 1.1,
+//   color: '#111',
+//   span: [6, 8],
+//   margin: '0 0 1rem 0',
+// }
+
+// 自定义权重配置
+const customWeights = {
+  ...visualWeights,
+  Headline: {
+    ...visualWeights.Headline,
+    High: {
+      ...visualWeights.Headline.High,
+      fontSize: '48px', // 更大的标题
+      fontWeight: 800,
+    },
+  },
+};`}
+      />
+
+      <h2>响应式主题</h2>
+      <p>
+        可以根据屏幕尺寸调整主题变量，实现响应式设计。
+      </p>
+
+      <CodeBlock
+        title="响应式变量"
+        language="css"
+        code={`:root {
+  --grid-columns: 24;
+  --spacing-gutter: 1rem;
+}
+
+@media (max-width: 768px) {
+  :root {
+    --grid-columns: 12;
+    --spacing-gutter: 0.75rem;
+  }
+}
+
+@media (max-width: 480px) {
+  :root {
+    --grid-columns: 6;
+    --spacing-gutter: 0.5rem;
+  }
+}`}
+      />
+
+      <h2>主题最佳实践</h2>
+      <ul>
+        <li>使用语义化的变量名，如 <code>--color-text-primary</code> 而不是 <code>--color-black</code></li>
+        <li>保持颜色对比度符合 WCAG 无障碍标准</li>
+        <li>使用相对单位（rem、em）而不是绝对单位（px）以支持用户字体大小偏好</li>
+        <li>在深色模式下确保所有颜色都有对应的深色版本</li>
+        <li>测试主题在不同设备和浏览器上的表现</li>
+        <li>提供主题切换的用户界面</li>
+      </ul>
+
+      <h2>导入主题</h2>
+      <p>
+        在你的应用中导入 NewspaperUI 主题：
+      </p>
+
+      <CodeBlock
+        title="导入主题"
+        language="typescript"
+        code={`// 在你的主 CSS 文件中
+import '@newspaperui/theme/variables.css';
+
+// 或在 Next.js 的 _app.tsx 中
+import '@newspaperui/theme/variables.css';
+import '@newspaperui/theme/tailwind.css';`}
+      />
+
+      <h2>主题工具</h2>
+      <p>
+        NewspaperUI 提供了一些工具函数来帮助你使用主题系统：
+      </p>
+
+      <CodeBlock
+        title="主题工具"
+        language="typescript"
+        code={`import { getVisualWeight, applyTheme } from '@newspaperui/theme';
+
+// 获取特定组件的视觉权重配置
+const headlineHighConfig = getVisualWeight('Headline', 'High');
+
+// 应用主题到元素
+applyTheme(element, {
+  '--color-text-primary': '#000',
+  '--font-family-serif': 'Georgia',
+});`}
+      />
+
+      <h2>主题示例</h2>
+      <p>
+        以下是一些预设主题示例：
+      </p>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 my-8">
+        <div className="border border-gray-200 rounded-lg p-6">
+          <h3 className="text-lg font-semibold mb-3">经典报纸</h3>
+          <div className="space-y-2 text-sm">
+            <div className="flex justify-between">
+              <span>主色调</span>
+              <span className="font-mono">#111111</span>
+            </div>
+            <div className="flex justify-between">
+              <span>背景色</span>
+              <span className="font-mono">#ffffff</span>
+            </div>
+            <div className="flex justify-between">
+              <span>字体</span>
+              <span className="font-mono">Georgia</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="border border-gray-200 rounded-lg p-6 bg-gray-900 text-white">
+          <h3 className="text-lg font-semibold mb-3">深色模式</h3>
+          <div className="space-y-2 text-sm">
+            <div className="flex justify-between">
+              <span>主色调</span>
+              <span className="font-mono">#f5f5f5</span>
+            </div>
+            <div className="flex justify-between">
+              <span>背景色</span>
+              <span className="font-mono">#1a1a1a</span>
+            </div>
+            <div className="flex justify-between">
+              <span>字体</span>
+              <span className="font-mono">Georgia</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <h2>更多资源</h2>
+      <ul>
+        <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties">MDN: CSS Custom Properties</a></li>
+        <li><a href="https://tailwindcss.com/docs/customizing-colors">Tailwind CSS: Customizing Colors</a></li>
+        <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html">WCAG: Contrast Guidelines</a></li>
+      </ul>
+    </div>
+  );
+}
diff --git a/packages/docs/components/CodeBlock.tsx b/packages/docs/components/CodeBlock.tsx
new file mode 100644
index 0000000..e3c6f71
--- /dev/null
+++ b/packages/docs/components/CodeBlock.tsx
@@ -0,0 +1,43 @@
+'use client';
+
+import { useState } from 'react';
+
+interface CodeBlockProps {
+  code: string;
+  language?: string;
+  title?: string;
+}
+
+export function CodeBlock({ code, language = 'tsx', title }: CodeBlockProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className="my-4 rounded-lg overflow-hidden border border-gray-200">
+      {title && (
+        <div className="bg-gray-50 px-4 py-2 border-b border-gray-200 flex justify-between items-center">
+          <span className="text-sm font-medium text-gray-700">{title}</span>
+          <span className="text-xs text-gray-500">{language}</span>
+        </div>
+      )}
+
+      <div className="relative">
+        <button
+          onClick={handleCopy}
+          className="absolute top-2 right-2 px-3 py-1 text-xs bg-gray-700 hover:bg-gray-600 text-white rounded"
+        >
+          {copied ? '已复制' : '复制'}
+        </button>
+
+        <pre className="p-4 bg-gray-900 text-gray-100 overflow-x-auto">
+          <code>{code}</code>
+        </pre>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/docs/components/Demo.tsx b/packages/docs/components/Demo.tsx
new file mode 100644
index 0000000..a8460ac
--- /dev/null
+++ b/packages/docs/components/Demo.tsx
@@ -0,0 +1,50 @@
+'use client';
+
+import { useState } from 'react';
+
+interface DemoProps {
+  title: string;
+  description?: string;
+  code?: string;
+  children: React.ReactNode;
+}
+
+export function Demo({ title, description, code, children }: DemoProps) {
+  const [showCode, setShowCode] = useState(false);
+
+  return (
+    <div className="my-8 border border-gray-200 rounded-lg overflow-hidden">
+      <div className="bg-gray-50 px-4 py-3 border-b border-gray-200">
+        <h3 className="text-lg font-semibold text-gray-900">{title}</h3>
+        {description && (
+          <p className="mt-1 text-sm text-gray-600">{description}</p>
+        )}
+      </div>
+
+      <div className="p-6 bg-white">
+        {children}
+      </div>
+
+      {code && (
+        <>
+          <div className="border-t border-gray-200 px-4 py-2 bg-gray-50">
+            <button
+              onClick={() => setShowCode(!showCode)}
+              className="text-sm font-medium text-gray-700 hover:text-gray-900"
+            >
+              {showCode ? '隐藏代码' : '查看代码'}
+            </button>
+          </div>
+
+          {showCode && (
+            <div className="border-t border-gray-200">
+              <pre className="p-4 bg-gray-900 text-gray-100 overflow-x-auto text-sm">
+                <code>{code}</code>
+              </pre>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/packages/docs/components/PropsTable.tsx b/packages/docs/components/PropsTable.tsx
new file mode 100644
index 0000000..95bcd1b
--- /dev/null
+++ b/packages/docs/components/PropsTable.tsx
@@ -0,0 +1,51 @@
+interface PropDefinition {
+  name: string;
+  type: string;
+  default?: string;
+  description: string;
+  required?: boolean;
+}
+
+interface PropsTableProps {
+  data: PropDefinition[];
+}
+
+export function PropsTable({ data }: PropsTableProps) {
+  return (
+    <div className="my-6 overflow-x-auto">
+      <table className="w-full border-collapse">
+        <thead>
+          <tr className="border-b-2 border-gray-300">
+            <th className="text-left py-3 px-4 font-semibold text-gray-900">属性</th>
+            <th className="text-left py-3 px-4 font-semibold text-gray-900">类型</th>
+            <th className="text-left py-3 px-4 font-semibold text-gray-900">默认值</th>
+            <th className="text-left py-3 px-4 font-semibold text-gray-900">说明</th>
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((prop) => (
+            <tr key={prop.name} className="border-b border-gray-200">
+              <td className="py-3 px-4">
+                <code className="text-sm bg-gray-100 px-2 py-1 rounded">
+                  {prop.name}
+                  {prop.required && <span className="text-red-500 ml-1">*</span>}
+                </code>
+              </td>
+              <td className="py-3 px-4">
+                <code className="text-sm text-blue-600">{prop.type}</code>
+              </td>
+              <td className="py-3 px-4">
+                {prop.default ? (
+                  <code className="text-sm bg-gray-100 px-2 py-1 rounded">{prop.default}</code>
+                ) : (
+                  <span className="text-gray-400">-</span>
+                )}
+              </td>
+              <td className="py-3 px-4 text-sm text-gray-700">{prop.description}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
diff --git a/packages/docs/components/Sidebar.tsx b/packages/docs/components/Sidebar.tsx
new file mode 100644
index 0000000..c9bf057
--- /dev/null
+++ b/packages/docs/components/Sidebar.tsx
@@ -0,0 +1,96 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+interface NavItem {
+  title: string;
+  href: string;
+  items?: NavItem[];
+}
+
+const navigation: NavItem[] = [
+  {
+    title: '概览',
+    href: '/',
+  },
+  {
+    title: '栅格系统',
+    href: '/grid-system',
+  },
+  {
+    title: '核心组件',
+    href: '/components',
+    items: [
+      { title: 'Article', href: '/components/article' },
+      { title: 'Layer', href: '/components/layer' },
+      { title: '媒体组件', href: '/components/media' },
+    ],
+  },
+  {
+    title: '文本组件',
+    href: '/text',
+  },
+  {
+    title: '主题系统',
+    href: '/theme',
+  },
+  {
+    title: '示例',
+    href: '/examples',
+    items: [
+      { title: '跨栏布局', href: '/examples/spanning' },
+      { title: '响应式布局', href: '/examples/responsive' },
+    ],
+  },
+];
+
+export function Sidebar() {
+  const pathname = usePathname();
+
+  return (
+    <nav className="w-64 border-r border-gray-200 bg-white h-screen sticky top-0 overflow-y-auto">
+      <div className="p-6">
+        <Link href="/" className="text-xl font-bold text-gray-900">
+          NewspaperUI
+        </Link>
+        <p className="mt-1 text-sm text-gray-600">报纸布局组件库</p>
+      </div>
+
+      <div className="px-4 pb-6">
+        {navigation.map((item) => (
+          <div key={item.href} className="mb-4">
+            <Link
+              href={item.href}
+              className={`block px-3 py-2 rounded-md text-sm font-medium ${
+                pathname === item.href
+                  ? 'bg-gray-100 text-gray-900'
+                  : 'text-gray-700 hover:bg-gray-50'
+              }`}
+            >
+              {item.title}
+            </Link>
+
+            {item.items && (
+              <div className="ml-4 mt-2 space-y-1">
+                {item.items.map((subItem) => (
+                  <Link
+                    key={subItem.href}
+                    href={subItem.href}
+                    className={`block px-3 py-2 rounded-md text-sm ${
+                      pathname === subItem.href
+                        ? 'bg-gray-100 text-gray-900'
+                        : 'text-gray-600 hover:bg-gray-50'
+                    }`}
+                  >
+                    {subItem.title}
+                  </Link>
+                ))}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </nav>
+  );
+}
diff --git a/packages/docs/mdx-components.tsx b/packages/docs/mdx-components.tsx
new file mode 100644
index 0000000..380b037
--- /dev/null
+++ b/packages/docs/mdx-components.tsx
@@ -0,0 +1,7 @@
+import type { MDXComponents } from 'mdx/types';
+
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+  return {
+    ...components,
+  };
+}
diff --git a/packages/docs/next-env.d.ts b/packages/docs/next-env.d.ts
new file mode 100644
index 0000000..830fb59
--- /dev/null
+++ b/packages/docs/next-env.d.ts
@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/packages/docs/next.config.mjs b/packages/docs/next.config.mjs
new file mode 100644
index 0000000..2afe34c
--- /dev/null
+++ b/packages/docs/next.config.mjs
@@ -0,0 +1,25 @@
+import createMDX from '@next/mdx';
+import rehypePrettyCode from 'rehype-pretty-code';
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
+  transpilePackages: ['@newspaperui/components', '@newspaperui/theme', '@newspaperui/utils'],
+};
+
+const withMDX = createMDX({
+  extension: /\.mdx?$/,
+  options: {
+    rehypePlugins: [
+      [
+        rehypePrettyCode,
+        {
+          theme: 'github-dark',
+          keepBackground: false,
+        },
+      ],
+    ],
+  },
+});
+
+export default withMDX(nextConfig);
diff --git a/packages/docs/package.json b/packages/docs/package.json
new file mode 100644
index 0000000..c4cfff1
--- /dev/null
+++ b/packages/docs/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "@newspaperui/docs",
+  "version": "0.0.0",
+  "description": "Documentation site for newspaperui",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "clean": "rm -rf .next"
+  },
+  "dependencies": {
+    "@mdx-js/loader": "^3.1.1",
+    "@mdx-js/react": "^3.1.1",
+    "@newspaperui/components": "workspace:*",
+    "@newspaperui/theme": "workspace:*",
+    "@newspaperui/utils": "workspace:*",
+    "@next/mdx": "^16.2.6",
+    "@types/mdx": "^2.0.13",
+    "next": "^15.1.6",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rehype-pretty-code": "^0.14.3",
+    "shiki": "^4.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.5",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.7.2"
+  }
+}
diff --git a/packages/docs/postcss.config.js b/packages/docs/postcss.config.js
new file mode 100644
index 0000000..12a703d
--- /dev/null
+++ b/packages/docs/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/packages/docs/tailwind.config.ts b/packages/docs/tailwind.config.ts
new file mode 100644
index 0000000..e702b6f
--- /dev/null
+++ b/packages/docs/tailwind.config.ts
@@ -0,0 +1,15 @@
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+
+export default config;
diff --git a/packages/docs/tsconfig.json b/packages/docs/tsconfig.json
new file mode 100644
index 0000000..7074696
--- /dev/null
+++ b/packages/docs/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "noEmit": true,
+    "incremental": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "paths": {
+      "@/*": ["./*"]
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/theme/package.json b/packages/theme/package.json
new file mode 100644
index 0000000..96b2192
--- /dev/null
+++ b/packages/theme/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "@newspaperui/theme",
+  "version": "0.0.0",
+  "description": "Theme tokens and CSS variables for newspaperui",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./variables.css": "./src/variables.css",
+    "./tailwind.config": "./src/tailwind.config.js"
+  },
+  "files": [
+    "dist",
+    "src/variables.css",
+    "src/tailwind.config.js"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "lint": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.2",
+    "vite": "^5.4.11",
+    "vite-plugin-dts": "^4.3.0"
+  }
+}
diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts
new file mode 100644
index 0000000..df98c5b
--- /dev/null
+++ b/packages/theme/src/index.ts
@@ -0,0 +1,21 @@
+/**
+ * @newspaperui/theme
+ * Theme tokens and CSS variables for newspaperui
+ */
+
+// Import CSS variables
+import './variables.css';
+
+// Export visual weight types and configuration
+export type {
+  VisualWeight,
+  ComponentType,
+  VisualWeightConfig,
+} from './visual-weights';
+
+export { visualWeights, resolveFontSize } from './visual-weights';
+
+// Export Tailwind config for consumers
+export { default as tailwindConfig } from './tailwind.config.js';
+
+export const version = '0.0.0';
diff --git a/packages/theme/src/tailwind.config.js b/packages/theme/src/tailwind.config.js
new file mode 100644
index 0000000..8ae255a
--- /dev/null
+++ b/packages/theme/src/tailwind.config.js
@@ -0,0 +1,103 @@
+/**
+ * Tailwind CSS Configuration for NewspaperUI
+ * Extends Tailwind with newspaper-specific utilities and 24-column grid
+ */
+
+const config = {
+  theme: {
+    extend: {
+      colors: {
+        nui: {
+          text: {
+            primary: 'var(--nui-color-text-primary)',
+            secondary: 'var(--nui-color-text-secondary)',
+            tertiary: 'var(--nui-color-text-tertiary)',
+            quaternary: 'var(--nui-color-text-quaternary)',
+            muted: 'var(--nui-color-text-muted)',
+          },
+          gray: {
+            50: 'var(--nui-color-gray-50)',
+            100: 'var(--nui-color-gray-100)',
+            200: 'var(--nui-color-gray-200)',
+            300: 'var(--nui-color-gray-300)',
+            400: 'var(--nui-color-gray-400)',
+            500: 'var(--nui-color-gray-500)',
+            600: 'var(--nui-color-gray-600)',
+            700: 'var(--nui-color-gray-700)',
+            800: 'var(--nui-color-gray-800)',
+            900: 'var(--nui-color-gray-900)',
+          },
+          accent: {
+            primary: 'var(--nui-color-accent-primary)',
+            secondary: 'var(--nui-color-accent-secondary)',
+            tertiary: 'var(--nui-color-accent-tertiary)',
+          },
+        },
+      },
+      spacing: {
+        'nui-gutter': 'var(--nui-gutter)',
+        'nui-gutter-sm': 'var(--nui-gutter-sm)',
+        'nui-gutter-lg': 'var(--nui-gutter-lg)',
+      },
+      fontFamily: {
+        'nui-serif': 'var(--nui-font-serif)',
+        'nui-serif-display': 'var(--nui-font-serif-display)',
+        'nui-sans': 'var(--nui-font-sans)',
+        'nui-sans-condensed': 'var(--nui-font-sans-condensed)',
+        'nui-mono': 'var(--nui-font-mono)',
+      },
+      fontSize: {
+        'nui-xs': 'var(--nui-font-size-xs)',
+        'nui-sm': 'var(--nui-font-size-sm)',
+        'nui-base': 'var(--nui-font-size-base)',
+        'nui-lg': 'var(--nui-font-size-lg)',
+        'nui-xl': 'var(--nui-font-size-xl)',
+        'nui-2xl': 'var(--nui-font-size-2xl)',
+        'nui-3xl': 'var(--nui-font-size-3xl)',
+        'nui-4xl': 'var(--nui-font-size-4xl)',
+        'nui-5xl': 'var(--nui-font-size-5xl)',
+        'nui-6xl': 'var(--nui-font-size-6xl)',
+      },
+      fontWeight: {
+        'nui-normal': 'var(--nui-font-weight-normal)',
+        'nui-medium': 'var(--nui-font-weight-medium)',
+        'nui-semibold': 'var(--nui-font-weight-semibold)',
+        'nui-bold': 'var(--nui-font-weight-bold)',
+      },
+      lineHeight: {
+        'nui-tight': 'var(--nui-line-height-tight)',
+        'nui-snug': 'var(--nui-line-height-snug)',
+        'nui-normal': 'var(--nui-line-height-normal)',
+        'nui-relaxed': 'var(--nui-line-height-relaxed)',
+        'nui-loose': 'var(--nui-line-height-loose)',
+        'nui-body': 'var(--nui-line-height-body)',
+      },
+      maxWidth: {
+        'nui-grid': 'var(--nui-grid-max-width)',
+      },
+      // 24-column grid utilities
+      gridTemplateColumns: {
+        'nui-24': 'repeat(24, minmax(0, 1fr))',
+        'nui-16': 'repeat(16, minmax(0, 1fr))',
+        'nui-12': 'repeat(12, minmax(0, 1fr))',
+      },
+      gridColumn: {
+        'span-13': 'span 13 / span 13',
+        'span-14': 'span 14 / span 14',
+        'span-15': 'span 15 / span 15',
+        'span-16': 'span 16 / span 16',
+        'span-17': 'span 17 / span 17',
+        'span-18': 'span 18 / span 18',
+        'span-19': 'span 19 / span 19',
+        'span-20': 'span 20 / span 20',
+        'span-21': 'span 21 / span 21',
+        'span-22': 'span 22 / span 22',
+        'span-23': 'span 23 / span 23',
+        'span-24': 'span 24 / span 24',
+      },
+    },
+  },
+  plugins: [],
+};
+
+export default config;
diff --git a/packages/theme/src/variables.css b/packages/theme/src/variables.css
new file mode 100644
index 0000000..4e7b33c
--- /dev/null
+++ b/packages/theme/src/variables.css
@@ -0,0 +1,127 @@
+/**
+ * NewspaperUI Theme Variables
+ * Global CSS variables for newspaper layout system
+ */
+
+:root {
+  /* ========== Color System ========== */
+  /* Primary text colors */
+  --nui-color-text-primary: #111111;
+  --nui-color-text-secondary: #222222;
+  --nui-color-text-tertiary: #333333;
+  --nui-color-text-quaternary: #444444;
+  --nui-color-text-muted: #555555;
+
+  /* Gray scale */
+  --nui-color-gray-50: #fafafa;
+  --nui-color-gray-100: #f5f5f5;
+  --nui-color-gray-200: #e5e5e5;
+  --nui-color-gray-300: #d4d4d4;
+  --nui-color-gray-400: #a3a3a3;
+  --nui-color-gray-500: #737373;
+  --nui-color-gray-600: #525252;
+  --nui-color-gray-700: #404040;
+  --nui-color-gray-800: #262626;
+  --nui-color-gray-900: #171717;
+
+  /* Accent colors */
+  --nui-color-accent-primary: #0066cc;
+  --nui-color-accent-secondary: #cc0000;
+  --nui-color-accent-tertiary: #006600;
+
+  /* ========== Spacing System ========== */
+  /* Gutter (column gap) */
+  --nui-gutter: 1rem;
+  --nui-gutter-sm: 0.75rem;
+  --nui-gutter-lg: 1.5rem;
+
+  /* Margin */
+  --nui-margin-xs: 0.25rem;
+  --nui-margin-sm: 0.5rem;
+  --nui-margin-md: 0.75rem;
+  --nui-margin-lg: 1rem;
+  --nui-margin-xl: 1.5rem;
+
+  /* Padding */
+  --nui-padding-xs: 0.25rem;
+  --nui-padding-sm: 0.5rem;
+  --nui-padding-md: 0.75rem;
+  --nui-padding-lg: 1rem;
+  --nui-padding-xl: 1.5rem;
+
+  /* ========== Font System ========== */
+  /* Serif fonts for headlines and body text */
+  --nui-font-serif: 'Georgia', 'Times New Roman', serif;
+  --nui-font-serif-display: 'Playfair Display', 'Georgia', serif;
+
+  /* Sans-serif fonts for UI elements */
+  --nui-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+  --nui-font-sans-condensed: 'Arial Narrow', 'Helvetica Condensed', sans-serif;
+
+  /* Monospace for code */
+  --nui-font-mono: 'Courier New', Courier, monospace;
+
+  /* ========== Grid System ========== */
+  /* 24-column grid */
+  --nui-grid-columns: 24;
+  --nui-grid-max-width: 1440px;
+  --nui-grid-container-padding: 2rem;
+
+  /* Responsive breakpoints */
+  --nui-breakpoint-sm: 768px;
+  --nui-breakpoint-md: 1024px;
+  --nui-breakpoint-lg: 1440px;
+
+  /* ========== Typography Scale ========== */
+  /* Font sizes */
+  --nui-font-size-xs: 0.75rem;    /* 12px */
+  --nui-font-size-sm: 0.875rem;   /* 14px */
+  --nui-font-size-base: 1rem;     /* 16px */
+  --nui-font-size-lg: 1.125rem;   /* 18px */
+  --nui-font-size-xl: 1.25rem;    /* 20px */
+  --nui-font-size-2xl: 1.5rem;    /* 24px */
+  --nui-font-size-3xl: 1.75rem;   /* 28px */
+  --nui-font-size-4xl: 2rem;      /* 32px */
+  --nui-font-size-5xl: 2.25rem;   /* 36px */
+  --nui-font-size-6xl: 3rem;      /* 48px */
+
+  /* Font weights */
+  --nui-font-weight-normal: 400;
+  --nui-font-weight-medium: 500;
+  --nui-font-weight-semibold: 600;
+  --nui-font-weight-bold: 700;
+
+  /* Line heights */
+  --nui-line-height-tight: 1.1;
+  --nui-line-height-snug: 1.2;
+  --nui-line-height-normal: 1.25;
+  --nui-line-height-relaxed: 1.3;
+  --nui-line-height-loose: 1.4;
+  --nui-line-height-body: 1.5;
+}
+
+[data-theme="dark"] {
+  /* Primary text colors */
+  --nui-color-text-primary: #eeeeee;
+  --nui-color-text-secondary: #dddddd;
+  --nui-color-text-tertiary: #cccccc;
+  --nui-color-text-quaternary: #bbbbbb;
+  --nui-color-text-muted: #aaaaaa;
+
+  /* Gray scale */
+  --nui-color-gray-50: #171717;
+  --nui-color-gray-100: #262626;
+  --nui-color-gray-200: #404040;
+  --nui-color-gray-300: #525252;
+  --nui-color-gray-400: #737373;
+  --nui-color-gray-500: #a3a3a3;
+  --nui-color-gray-600: #d4d4d4;
+  --nui-color-gray-700: #e5e5e5;
+  --nui-color-gray-800: #f5f5f5;
+  --nui-color-gray-900: #fafafa;
+
+  /* Accent colors */
+  --nui-color-accent-primary: #4da6ff;
+  --nui-color-accent-secondary: #ff6666;
+  --nui-color-accent-tertiary: #66cc66;
+}
diff --git a/packages/theme/src/visual-weights.ts b/packages/theme/src/visual-weights.ts
new file mode 100644
index 0000000..bb0651b
--- /dev/null
+++ b/packages/theme/src/visual-weights.ts
@@ -0,0 +1,164 @@
+/**
+ * Resolves a fontSize value to a single CSS string.
+ * For range tuples [min, max], returns the lower bound (min).
+ */
+export function resolveFontSize(fontSize: string | [string, string]): string {
+  return Array.isArray(fontSize) ? fontSize[0] : fontSize;
+}
+
+
+export type VisualWeight = 'High' | 'Medium' | 'Low' | 'Standard';
+
+export type ComponentType =
+  | 'Headline'
+  | 'Subhead'
+  | 'BodyText'
+  | 'Quote'
+  | 'PullQuote'
+  | 'Byline'
+  | 'Caption';
+
+export interface VisualWeightConfig {
+  fontSize: string | [string, string];
+  fontWeight: number;
+  lineHeight: number;
+  color: string;
+  span: number | [number, number];
+  margin: string;
+}
+
+/**
+ * Visual weight configuration mapping
+ * Maps component types and their visual weights to specific styling configurations
+ */
+export const visualWeights: Record<
+  ComponentType,
+  Partial<Record<VisualWeight, VisualWeightConfig>>
+> = {
+  Headline: {
+    High: {
+      fontSize: ['36px', '48px'],
+      fontWeight: 700,
+      lineHeight: 1.1,
+      color: '#111',
+      span: [6, 8],
+      margin: '0 0 1rem 0',
+    },
+    Medium: {
+      fontSize: ['28px', '34px'],
+      fontWeight: 600,
+      lineHeight: 1.2,
+      color: '#111',
+      span: [4, 6],
+      margin: '0 0 0.75rem 0',
+    },
+    Low: {
+      fontSize: ['22px', '26px'],
+      fontWeight: 500,
+      lineHeight: 1.3,
+      color: '#222',
+      span: [2, 4],
+      margin: '0 0 0.5rem 0',
+    },
+  },
+  Subhead: {
+    High: {
+      fontSize: ['20px', '24px'],
+      fontWeight: 600,
+      lineHeight: 1.25,
+      color: '#222',
+      span: [2, 3],
+      margin: '0 0 0.5rem 0',
+    },
+    Medium: {
+      fontSize: ['16px', '18px'],
+      fontWeight: 500,
+      lineHeight: 1.3,
+      color: '#333',
+      span: [1, 2],
+      margin: '0 0 0.25rem 0',
+    },
+  },
+  BodyText: {
+    High: {
+      fontSize: '16px',
+      fontWeight: 400,
+      lineHeight: 1.5,
+      color: '#333',
+      span: 1,
+      margin: '0 0 1rem 0',
+    },
+    Medium: {
+      fontSize: ['14px', '15px'],
+      fontWeight: 400,
+      lineHeight: 1.5,
+      color: '#444',
+      span: 1,
+      margin: '0 0 0.75rem 0',
+    },
+    Low: {
+      fontSize: ['12px', '14px'],
+      fontWeight: 400,
+      lineHeight: 1.4,
+      color: '#555',
+      span: 1,
+      margin: '0 0 0.5rem 0',
+    },
+  },
+  Quote: {
+    High: {
+      fontSize: ['20px', '24px'],
+      fontWeight: 500,
+      lineHeight: 1.4,
+      color: '#222',
+      span: 2,
+      margin: '0 0 0.75rem 0',
+    },
+    Medium: {
+      fontSize: ['16px', '18px'],
+      fontWeight: 400,
+      lineHeight: 1.4,
+      color: '#333',
+      span: 1,
+      margin: '0 0 0.5rem 0',
+    },
+  },
+  PullQuote: {
+    High: {
+      fontSize: ['24px', '28px'],
+      fontWeight: 600,
+      lineHeight: 1.2,
+      color: '#111',
+      span: [2, 3],
+      margin: '0 0 0.5rem 0',
+    },
+    Medium: {
+      fontSize: ['18px', '20px'],
+      fontWeight: 500,
+      lineHeight: 1.25,
+      color: '#222',
+      span: [1, 2],
+      margin: '0 0 0.25rem 0',
+    },
+  },
+  Byline: {
+    Standard: {
+      fontSize: ['12px', '14px'],
+      fontWeight: 400,
+      lineHeight: 1.3,
+      color: '#555',
+      span: 1,
+      margin: '0 0 0.25rem 0',
+    },
+  },
+  Caption: {
+    Standard: {
+      fontSize: ['12px', '14px'],
+      fontWeight: 400,
+      lineHeight: 1.3,
+      color: '#555',
+      span: 1,
+      margin: '0.25rem 0',
+    },
+  },
+};
diff --git a/packages/theme/tsconfig.json b/packages/theme/tsconfig.json
new file mode 100644
index 0000000..49e05ce
--- /dev/null
+++ b/packages/theme/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src"]
+}
diff --git a/packages/theme/vite.config.ts b/packages/theme/vite.config.ts
new file mode 100644
index 0000000..e4ddd05
--- /dev/null
+++ b/packages/theme/vite.config.ts
@@ -0,0 +1,22 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+import dts from 'vite-plugin-dts';
+
+export default defineConfig({
+  plugins: [
+    dts({
+      insertTypesEntry: true,
+    }),
+  ],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'NewspaperUITheme',
+      formats: ['es', 'cjs'],
+      fileName: (format) => `index.${format === 'es' ? 'js' : 'cjs'}`,
+    },
+    rollupOptions: {
+      external: [],
+    },
+  },
+});
diff --git a/packages/utils/package.json b/packages/utils/package.json
new file mode 100644
index 0000000..c862075
--- /dev/null
+++ b/packages/utils/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "@newspaperui/utils",
+  "version": "0.0.0",
+  "description": "Utility functions for newspaperui",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "lint": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "clean": "rm -rf dist"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.2",
+    "vite": "^5.4.11",
+    "vite-plugin-dts": "^4.3.0",
+    "vitest": "^2.1.8"
+  }
+}
diff --git a/packages/utils/src/__tests__/grid.test.ts b/packages/utils/src/__tests__/grid.test.ts
new file mode 100644
index 0000000..e98446a
--- /dev/null
+++ b/packages/utils/src/__tests__/grid.test.ts
@@ -0,0 +1,60 @@
+import { describe, it, expect } from 'vitest';
+import { calculateSpanWidth, validateSpan, calculateGutter } from '../grid';
+
+describe('grid utilities', () => {
+  describe('calculateSpanWidth', () => {
+    it('should calculate correct width percentage for 24-column grid', () => {
+      expect(calculateSpanWidth(6, 24)).toBe('25.000%');
+      expect(calculateSpanWidth(12, 24)).toBe('50.000%');
+      expect(calculateSpanWidth(24, 24)).toBe('100.000%');
+      expect(calculateSpanWidth(1, 24)).toBe('4.167%');
+    });
+
+    it('should calculate correct width percentage for 12-column grid', () => {
+      expect(calculateSpanWidth(6, 12)).toBe('50.000%');
+      expect(calculateSpanWidth(3, 12)).toBe('25.000%');
+      expect(calculateSpanWidth(12, 12)).toBe('100.000%');
+    });
+
+    it('should use 24 columns as default', () => {
+      expect(calculateSpanWidth(6)).toBe('25.000%');
+      expect(calculateSpanWidth(12)).toBe('50.000%');
+    });
+
+    it('should throw error for invalid span', () => {
+      expect(() => calculateSpanWidth(0, 24)).toThrow();
+      expect(() => calculateSpanWidth(25, 24)).toThrow();
+      expect(() => calculateSpanWidth(-1, 24)).toThrow();
+    });
+  });
+
+  describe('validateSpan', () => {
+    it('should return true for valid spans', () => {
+      expect(validateSpan(1, 24)).toBe(true);
+      expect(validateSpan(12, 24)).toBe(true);
+      expect(validateSpan(24, 24)).toBe(true);
+    });
+
+    it('should return false for invalid spans', () => {
+      expect(validateSpan(0, 24)).toBe(false);
+      expect(validateSpan(25, 24)).toBe(false);
+      expect(validateSpan(-1, 24)).toBe(false);
+      expect(validateSpan(1.5, 24)).toBe(false);
+    });
+  });
+
+  describe('calculateGutter', () => {
+    it('should calculate gutter width correctly', () => {
+      const gutter = calculateGutter(1440, 24, 0.05);
+      expect(gutter).toBeGreaterThan(0);
+      expect(gutter).toBeLessThan(100);
+    });
+
+    it('should throw error for invalid inputs', () => {
+      expect(() => calculateGutter(0, 24, 0.05)).toThrow();
+      expect(() => calculateGutter(1440, 0, 0.05)).toThrow();
+      expect(() => calculateGutter(1440, 24, -0.1)).toThrow();
+      expect(() => calculateGutter(1440, 24, 1.5)).toThrow();
+    });
+  });
+});
diff --git a/packages/utils/src/__tests__/integration.test.ts b/packages/utils/src/__tests__/integration.test.ts
new file mode 100644
index 0000000..3181aa6
--- /dev/null
+++ b/packages/utils/src/__tests__/integration.test.ts
@@ -0,0 +1,62 @@
+import { describe, it, expect } from 'vitest';
+import {
+  calculateSpanWidth,
+  calculateLayout,
+  getResponsiveColumns,
+  adjustSpanForScreen,
+} from '../index';
+
+describe('integration tests', () => {
+  it('should work together for responsive layout calculation', () => {
+    // Scenario: Layout 3 items on different screen sizes
+    const items = [
+      { id: 'headline', span: 12 },
+      { id: 'image', span: 8 },
+      { id: 'text', span: 4 },
+    ];
+
+    // Large screen (24 columns)
+    const largeScreenColumns = getResponsiveColumns(1440);
+    expect(largeScreenColumns).toBe(24);
+    const largeLayout = calculateLayout(items, largeScreenColumns);
+    expect(largeLayout).toHaveLength(3);
+    // All items fit in one row: 12 + 8 + 4 = 24
+    expect(largeLayout[0].row).toBe(0);
+    expect(largeLayout[1].row).toBe(0);
+    expect(largeLayout[2].row).toBe(0);
+
+    // Medium screen (16 columns) - adjust spans
+    const mediumScreenColumns = getResponsiveColumns(900);
+    expect(mediumScreenColumns).toBe(16);
+    const adjustedItems = items.map((item) => ({
+      ...item,
+      span: adjustSpanForScreen(item.span, 900),
+    }));
+    const mediumLayout = calculateLayout(adjustedItems, mediumScreenColumns);
+    expect(mediumLayout).toHaveLength(3);
+
+    // Small screen (12 columns) - adjust spans
+    const smallScreenColumns = getResponsiveColumns(600);
+    expect(smallScreenColumns).toBe(12);
+    const smallAdjustedItems = items.map((item) => ({
+      ...item,
+      span: adjustSpanForScreen(item.span, 600),
+    }));
+    const smallLayout = calculateLayout(smallAdjustedItems, smallScreenColumns);
+    expect(smallLayout).toHaveLength(3);
+  });
+
+  it('should calculate correct widths for newspaper layout', () => {
+    // 6-column headline in 24-column grid
+    const headlineWidth = calculateSpanWidth(6, 24);
+    expect(headlineWidth).toBe('25.000%');
+
+    // 8-column image in 24-column grid
+    const imageWidth = calculateSpanWidth(8, 24);
+    expect(imageWidth).toBe('33.333%');
+
+    // Full-width article
+    const fullWidth = calculateSpanWidth(24, 24);
+    expect(fullWidth).toBe('100.000%');
+  });
+});
diff --git a/packages/utils/src/__tests__/responsive.test.ts b/packages/utils/src/__tests__/responsive.test.ts
new file mode 100644
index 0000000..28cc01c
--- /dev/null
+++ b/packages/utils/src/__tests__/responsive.test.ts
@@ -0,0 +1,90 @@
+import { describe, it, expect } from 'vitest';
+import {
+  getResponsiveColumns,
+  adjustSpanForScreen,
+  isBreakpoint,
+  getCurrentBreakpoint,
+  BREAKPOINTS,
+} from '../responsive';
+
+describe('responsive utilities', () => {
+  describe('getResponsiveColumns', () => {
+    it('should return 12 columns for small screens', () => {
+      expect(getResponsiveColumns(320)).toBe(12);
+      expect(getResponsiveColumns(767)).toBe(12);
+    });
+
+    it('should return 16 columns for medium screens', () => {
+      expect(getResponsiveColumns(768)).toBe(16);
+      expect(getResponsiveColumns(1023)).toBe(16);
+    });
+
+    it('should return 24 columns for large screens', () => {
+      expect(getResponsiveColumns(1024)).toBe(24);
+      expect(getResponsiveColumns(1440)).toBe(24);
+      expect(getResponsiveColumns(1920)).toBe(24);
+    });
+  });
+
+  describe('adjustSpanForScreen', () => {
+    it('should not adjust span for large screens (24 columns)', () => {
+      expect(adjustSpanForScreen(12, 1440)).toBe(12);
+      expect(adjustSpanForScreen(6, 1920)).toBe(6);
+      expect(adjustSpanForScreen(24, 1024)).toBe(24);
+    });
+
+    it('should proportionally adjust span for medium screens (16 columns)', () => {
+      expect(adjustSpanForScreen(12, 800)).toBe(8); // 12/24 * 16 = 8
+      expect(adjustSpanForScreen(6, 900)).toBe(4); // 6/24 * 16 = 4
+      expect(adjustSpanForScreen(24, 1000)).toBe(16); // 24/24 * 16 = 16
+    });
+
+    it('should proportionally adjust span for small screens (12 columns)', () => {
+      expect(adjustSpanForScreen(12, 600)).toBe(6); // 12/24 * 12 = 6
+      expect(adjustSpanForScreen(6, 400)).toBe(3); // 6/24 * 12 = 3
+      expect(adjustSpanForScreen(24, 700)).toBe(12); // 24/24 * 12 = 12
+    });
+
+    it('should ensure minimum span of 1', () => {
+      expect(adjustSpanForScreen(1, 600)).toBe(1);
+      expect(adjustSpanForScreen(2, 600)).toBeGreaterThanOrEqual(1);
+    });
+
+    it('should not exceed target columns', () => {
+      expect(adjustSpanForScreen(24, 600)).toBeLessThanOrEqual(12);
+      expect(adjustSpanForScreen(24, 800)).toBeLessThanOrEqual(16);
+    });
+  });
+
+  describe('isBreakpoint', () => {
+    it('should correctly identify breakpoints', () => {
+      expect(isBreakpoint(768, 'sm')).toBe(true);
+      expect(isBreakpoint(767, 'sm')).toBe(false);
+      expect(isBreakpoint(1024, 'md')).toBe(true);
+      expect(isBreakpoint(1023, 'md')).toBe(false);
+      expect(isBreakpoint(1440, 'lg')).toBe(true);
+      expect(isBreakpoint(1439, 'lg')).toBe(false);
+    });
+  });
+
+  describe('getCurrentBreakpoint', () => {
+    it('should return correct breakpoint names', () => {
+      expect(getCurrentBreakpoint(320)).toBe('xs');
+      expect(getCurrentBreakpoint(767)).toBe('xs');
+      expect(getCurrentBreakpoint(768)).toBe('sm');
+      expect(getCurrentBreakpoint(1023)).toBe('sm');
+      expect(getCurrentBreakpoint(1024)).toBe('md');
+      expect(getCurrentBreakpoint(1439)).toBe('md');
+      expect(getCurrentBreakpoint(1440)).toBe('lg');
+      expect(getCurrentBreakpoint(1920)).toBe('lg');
+    });
+  });
+
+  describe('BREAKPOINTS', () => {
+    it('should have correct breakpoint values', () => {
+      expect(BREAKPOINTS.sm).toBe(768);
+      expect(BREAKPOINTS.md).toBe(1024);
+      expect(BREAKPOINTS.lg).toBe(1440);
+    });
+  });
+});
diff --git a/packages/utils/src/__tests__/span.test.ts b/packages/utils/src/__tests__/span.test.ts
new file mode 100644
index 0000000..db7cb56
--- /dev/null
+++ b/packages/utils/src/__tests__/span.test.ts
@@ -0,0 +1,74 @@
+import { describe, it, expect } from 'vitest';
+import { isSpanValid, calculateLayout, type LayoutItem } from '../span';
+
+describe('span utilities', () => {
+  describe('isSpanValid', () => {
+    it('should return true for valid spans', () => {
+      expect(isSpanValid(1, 24)).toBe(true);
+      expect(isSpanValid(12, 24)).toBe(true);
+      expect(isSpanValid(24, 24)).toBe(true);
+      expect(isSpanValid(6, 12)).toBe(true);
+    });
+
+    it('should return false for invalid spans', () => {
+      expect(isSpanValid(0, 24)).toBe(false);
+      expect(isSpanValid(25, 24)).toBe(false);
+      expect(isSpanValid(-1, 24)).toBe(false);
+      expect(isSpanValid(1.5, 24)).toBe(false);
+      expect(isSpanValid(13, 12)).toBe(false);
+    });
+  });
+
+  describe('calculateLayout', () => {
+    it('should layout items in a single row when they fit', () => {
+      const items: LayoutItem[] = [
+        { id: 'a', span: 6 },
+        { id: 'b', span: 6 },
+        { id: 'c', span: 6 },
+      ];
+      const layout = calculateLayout(items, 24);
+
+      expect(layout).toHaveLength(3);
+      expect(layout[0]).toEqual({ item: items[0], row: 0, col: 0 });
+      expect(layout[1]).toEqual({ item: items[1], row: 0, col: 6 });
+      expect(layout[2]).toEqual({ item: items[2], row: 0, col: 12 });
+    });
+
+    it('should wrap to next row when items do not fit', () => {
+      const items: LayoutItem[] = [
+        { id: 'a', span: 16 },
+        { id: 'b', span: 12 },
+      ];
+      const layout = calculateLayout(items, 24);
+
+      expect(layout).toHaveLength(2);
+      expect(layout[0]).toEqual({ item: items[0], row: 0, col: 0 });
+      expect(layout[1]).toEqual({ item: items[1], row: 1, col: 0 });
+    });
+
+    it('should handle exact row fills', () => {
+      const items: LayoutItem[] = [
+        { id: 'a', span: 12 },
+        { id: 'b', span: 12 },
+        { id: 'c', span: 24 },
+      ];
+      const layout = calculateLayout(items, 24);
+
+      expect(layout).toHaveLength(3);
+      expect(layout[0]).toEqual({ item: items[0], row: 0, col: 0 });
+      expect(layout[1]).toEqual({ item: items[1], row: 0, col: 12 });
+      expect(layout[2]).toEqual({ item: items[2], row: 1, col: 0 });
+    });
+
+    it('should throw error for invalid section columns', () => {
+      const items: LayoutItem[] = [{ id: 'a', span: 6 }];
+      expect(() => calculateLayout(items, 0)).toThrow();
+      expect(() => calculateLayout(items, -1)).toThrow();
+    });
+
+    it('should throw error for invalid item span', () => {
+      const items: LayoutItem[] = [{ id: 'a', span: 25 }];
+      expect(() => calculateLayout(items, 24)).toThrow();
+    });
+  });
+});
diff --git a/packages/utils/src/grid.ts b/packages/utils/src/grid.ts
new file mode 100644
index 0000000..0809c5b
--- /dev/null
+++ b/packages/utils/src/grid.ts
@@ -0,0 +1,61 @@
+/**
+ * Grid calculation utilities for 24-column newspaper layout system
+ */
+
+/**
+ * Calculate element width percentage in a grid system
+ * @param span - Number of columns the element spans
+ * @param totalColumns - Total number of columns in the grid (default: 24)
+ * @returns Width as a percentage string (e.g., "33.333%")
+ */
+export function calculateSpanWidth(
+  span: number,
+  totalColumns: number = 24
+): string {
+  if (!validateSpan(span, totalColumns)) {
+    throw new Error(
+      `Invalid span: ${span}. Must be between 1 and ${totalColumns}`
+    );
+  }
+  const percentage = (span / totalColumns) * 100;
+  return `${percentage.toFixed(3)}%`;
+}
+
+/**
+ * Validate if a span value is within valid range
+ * @param span - Number of columns to validate
+ * @param maxColumns - Maximum number of columns allowed
+ * @returns True if span is valid, false otherwise
+ */
+export function validateSpan(span: number, maxColumns: number): boolean {
+  return Number.isInteger(span) && span >= 1 && span <= maxColumns;
+}
+
+/**
+ * Calculate gutter width based on container width and column count
+ * @param containerWidth - Total width of the container in pixels
+ * @param columns - Number of columns in the grid
+ * @param gutterRatio - Ratio of gutter to column width (default: 0.05)
+ * @returns Gutter width in pixels
+ */
+export function calculateGutter(
+  containerWidth: number,
+  columns: number,
+  gutterRatio: number = 0.05
+): number {
+  if (containerWidth <= 0 || columns <= 0) {
+    throw new Error('Container width and columns must be positive numbers');
+  }
+  if (gutterRatio < 0 || gutterRatio > 1) {
+    throw new Error('Gutter ratio must be between 0 and 1');
+  }
+
+  // Calculate column width considering gutters
+  // Formula: containerWidth = (columns * columnWidth) + ((columns - 1) * gutter)
+  // Where gutter = columnWidth * gutterRatio
+  const totalGutterRatio = (columns - 1) * gutterRatio;
+  const columnWidth = containerWidth / (columns + totalGutterRatio);
+  const gutterWidth = columnWidth * gutterRatio;
+
+  return Math.round(gutterWidth * 100) / 100;
+}
diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
new file mode 100644
index 0000000..28ae179
--- /dev/null
+++ b/packages/utils/src/index.ts
@@ -0,0 +1,30 @@
+/**
+ * @newspaperui/utils
+ * Utility functions for newspaperui component library
+ */
+
+// Grid utilities
+export {
+  calculateSpanWidth,
+  validateSpan,
+  calculateGutter,
+} from './grid';
+
+// Span and layout utilities
+export {
+  isSpanValid,
+  calculateLayout,
+  type LayoutItem,
+  type PositionedLayoutItem,
+} from './span';
+
+// Responsive utilities
+export {
+  getResponsiveColumns,
+  adjustSpanForScreen,
+  isBreakpoint,
+  getCurrentBreakpoint,
+  BREAKPOINTS,
+} from './responsive';
+
+export const version = '0.0.0';
diff --git a/packages/utils/src/responsive.ts b/packages/utils/src/responsive.ts
new file mode 100644
index 0000000..7b2e28f
--- /dev/null
+++ b/packages/utils/src/responsive.ts
@@ -0,0 +1,85 @@
+/**
+ * Responsive utilities for newspaper layout system
+ */
+
+/**
+ * Breakpoint thresholds for responsive design
+ */
+export const BREAKPOINTS = {
+  sm: 768,
+  md: 1024,
+  lg: 1440,
+} as const;
+
+/**
+ * Get recommended grid column count based on screen width
+ * @param screenWidth - Current screen width in pixels
+ * @returns Recommended number of columns (12, 16, or 24)
+ */
+export function getResponsiveColumns(screenWidth: number): number {
+  if (screenWidth < BREAKPOINTS.sm) {
+    return 12; // Small screens: 12 columns
+  } else if (screenWidth < BREAKPOINTS.md) {
+    return 16; // Medium screens: 16 columns
+  } else {
+    return 24; // Large screens: 24 columns
+  }
+}
+
+/**
+ * Adjust span value for different screen sizes
+ * Proportionally scales span based on available columns
+ * @param span - Original span value (based on 24 columns)
+ * @param screenWidth - Current screen width in pixels
+ * @returns Adjusted span value for current screen size
+ */
+export function adjustSpanForScreen(
+  span: number,
+  screenWidth: number
+): number {
+  const targetColumns = getResponsiveColumns(screenWidth);
+  const baseColumns = 24;
+
+  // If already at 24 columns, no adjustment needed
+  if (targetColumns === baseColumns) {
+    return span;
+  }
+
+  // Calculate proportional span
+  const adjustedSpan = Math.round((span / baseColumns) * targetColumns);
+
+  // Ensure at least 1 column and not exceeding target columns
+  return Math.max(1, Math.min(adjustedSpan, targetColumns));
+}
+
+/**
+ * Check if current screen width matches a breakpoint
+ * @param screenWidth - Current screen width in pixels
+ * @param breakpoint - Breakpoint name to check
+ * @returns True if screen width is at or above the breakpoint
+ */
+export function isBreakpoint(
+  screenWidth: number,
+  breakpoint: keyof typeof BREAKPOINTS
+): boolean {
+  return screenWidth >= BREAKPOINTS[breakpoint];
+}
+
+/**
+ * Get current breakpoint name based on screen width
+ * @param screenWidth - Current screen width in pixels
+ * @returns Current breakpoint name ('sm', 'md', 'lg', or 'xs' for below sm)
+ */
+export function getCurrentBreakpoint(
+  screenWidth: number
+): 'xs' | 'sm' | 'md' | 'lg' {
+  if (screenWidth >= BREAKPOINTS.lg) {
+    return 'lg';
+  } else if (screenWidth >= BREAKPOINTS.md) {
+    return 'md';
+  } else if (screenWidth >= BREAKPOINTS.sm) {
+    return 'sm';
+  } else {
+    return 'xs';
+  }
+}
diff --git a/packages/utils/src/span.ts b/packages/utils/src/span.ts
new file mode 100644
index 0000000..79f3f62
--- /dev/null
+++ b/packages/utils/src/span.ts
@@ -0,0 +1,92 @@
+/**
+ * Span and layout utilities for newspaper column system
+ */
+
+/**
+ * Check if an object's span is valid within a section's column count
+ * @param objectSpan - Number of columns the object spans
+ * @param sectionColumns - Total number of columns in the section
+ * @returns True if the span is valid, false otherwise
+ */
+export function isSpanValid(
+  objectSpan: number,
+  sectionColumns: number
+): boolean {
+  return (
+    Number.isInteger(objectSpan) &&
+    Number.isInteger(sectionColumns) &&
+    objectSpan >= 1 &&
+    objectSpan <= sectionColumns
+  );
+}
+
+/**
+ * Layout item interface for grid positioning
+ */
+export interface LayoutItem {
+  span: number;
+  id: string;
+}
+
+/**
+ * Positioned layout item with row and column information
+ */
+export interface PositionedLayoutItem {
+  item: LayoutItem;
+  row: number;
+  col: number;
+}
+
+/**
+ * Calculate simple flow layout for items in a section
+ * Items are placed left-to-right, wrapping to new rows when needed
+ * @param items - Array of items to layout
+ * @param sectionColumns - Total number of columns in the section
+ * @returns Array of positioned items with row and column information
+ */
+export function calculateLayout(
+  items: LayoutItem[],
+  sectionColumns: number
+): PositionedLayoutItem[] {
+  if (sectionColumns <= 0) {
+    throw new Error('Section columns must be a positive number');
+  }
+
+  const positioned: PositionedLayoutItem[] = [];
+  let currentRow = 0;
+  let currentCol = 0;
+
+  for (const item of items) {
+    // Validate item span
+    if (!isSpanValid(item.span, sectionColumns)) {
+      throw new Error(
+        `Invalid span ${item.span} for item ${item.id}. Must be between 1 and ${sectionColumns}`
+      );
+    }
+
+    // Check if item fits in current row
+    if (currentCol + item.span > sectionColumns) {
+      // Move to next row
+      currentRow++;
+      currentCol = 0;
+    }
+
+    // Position the item
+    positioned.push({
+      item,
+      row: currentRow,
+      col: currentCol,
+    });
+
+    // Update current column position
+    currentCol += item.span;
+
+    // If we've filled the row exactly, move to next row
+    if (currentCol === sectionColumns) {
+      currentRow++;
+      currentCol = 0;
+    }
+  }
+
+  return positioned;
+}
diff --git a/packages/utils/tsconfig.json b/packages/utils/tsconfig.json
new file mode 100644
index 0000000..49e05ce
--- /dev/null
+++ b/packages/utils/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src"]
+}
diff --git a/packages/utils/vite.config.ts b/packages/utils/vite.config.ts
new file mode 100644
index 0000000..85b8051
--- /dev/null
+++ b/packages/utils/vite.config.ts
@@ -0,0 +1,22 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+import dts from 'vite-plugin-dts';
+
+export default defineConfig({
+  plugins: [
+    dts({
+      insertTypesEntry: true,
+    }),
+  ],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'NewspaperUIUtils',
+      formats: ['es', 'cjs'],
+      fileName: (format) => `index.${format === 'es' ? 'js' : 'cjs'}`,
+    },
+    rollupOptions: {
+      external: [],
+    },
+  },
+});
diff --git a/packages/utils/vitest.config.ts b/packages/utils/vitest.config.ts
new file mode 100644
index 0000000..eacb728
--- /dev/null
+++ b/packages/utils/vitest.config.ts
@@ -0,0 +1,13 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'node',
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+      exclude: ['node_modules/', 'dist/', '**/*.test.ts'],
+    },
+  },
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
new file mode 100644
index 0000000..845e0f0
--- /dev/null
+++ b/pnpm-lock.yaml
@@ -0,0 +1,4980 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    devDependencies:
+      turbo:
+        specifier: ^2.3.3
+        version: 2.9.14
+      typescript:
+        specifier: ^5.7.2
+        version: 5.9.3
+
+  packages/components:
+    dependencies:
+      '@newspaperui/theme':
+        specifier: workspace:*
+        version: link:../theme
+      '@newspaperui/utils':
+        specifier: workspace:*
+        version: link:../utils
+    devDependencies:
+      '@testing-library/jest-dom':
+        specifier: ^6.6.3
+        version: 6.9.1
+      '@testing-library/react':
+        specifier: ^16.1.0
+        version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@types/react':
+        specifier: ^18.3.18
+        version: 18.3.28
+      '@types/react-dom':
+        specifier: ^18.3.5
+        version: 18.3.7(@types/react@18.3.28)
+      '@vitejs/plugin-react':
+        specifier: ^4.3.4
+        version: 4.7.0(vite@5.4.21(@types/node@22.19.19))
+      jsdom:
+        specifier: ^25.0.1
+        version: 25.0.1
+      react:
+        specifier: ^18.3.1
+        version: 18.3.1
+      react-dom:
+        specifier: ^18.3.1
+        version: 18.3.1(react@18.3.1)
+      typescript:
+        specifier: ^5.7.2
+        version: 5.9.3
+      vite:
+        specifier: ^5.4.11
+        version: 5.4.21(@types/node@22.19.19)
+      vite-plugin-dts:
+        specifier: ^4.3.0
+        version: 4.5.4(@types/node@22.19.19)(rollup@4.60.4)(typescript@5.9.3)(vite@5.4.21(@types/node@22.19.19))
+      vitest:
+        specifier: ^2.1.8
+        version: 2.1.9(@types/node@22.19.19)(jsdom@25.0.1)
+
+  packages/docs:
+    dependencies:
+      '@mdx-js/loader':
+        specifier: ^3.1.1
+        version: 3.1.1
+      '@mdx-js/react':
+        specifier: ^3.1.1
+        version: 3.1.1(@types/react@18.3.28)(react@18.3.1)
+      '@newspaperui/components':
+        specifier: workspace:*
+        version: link:../components
+      '@newspaperui/theme':
+        specifier: workspace:*
+        version: link:../theme
+      '@newspaperui/utils':
+        specifier: workspace:*
+        version: link:../utils
+      '@next/mdx':
+        specifier: ^16.2.6
+        version: 16.2.6(@mdx-js/loader@3.1.1)(@mdx-js/react@3.1.1(@types/react@18.3.28)(react@18.3.1))
+      '@types/mdx':
+        specifier: ^2.0.13
+        version: 2.0.13
+      next:
+        specifier: ^15.1.6
+        version: 15.5.18(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react:
+        specifier: ^18.3.1
+        version: 18.3.1
+      react-dom:
+        specifier: ^18.3.1
+        version: 18.3.1(react@18.3.1)
+      rehype-pretty-code:
+        specifier: ^0.14.3
+        version: 0.14.3(shiki@4.1.0)
+      shiki:
+        specifier: ^4.1.0
+        version: 4.1.0
+    devDependencies:
+      '@types/node':
+        specifier: ^22.10.5
+        version: 22.19.19
+      '@types/react':
+        specifier: ^18.3.18
+        version: 18.3.28
+      '@types/react-dom':
+        specifier: ^18.3.5
+        version: 18.3.7(@types/react@18.3.28)
+      autoprefixer:
+        specifier: ^10.4.20
+        version: 10.5.0(postcss@8.5.15)
+      postcss:
+        specifier: ^8.4.49
+        version: 8.5.15
+      tailwindcss:
+        specifier: ^3.4.17
+        version: 3.4.19
+      typescript:
+        specifier: ^5.7.2
+        version: 5.9.3
+
+  packages/theme:
+    devDependencies:
+      typescript:
+        specifier: ^5.7.2
+        version: 5.9.3
+      vite:
+        specifier: ^5.4.11
+        version: 5.4.21(@types/node@22.19.19)
+      vite-plugin-dts:
+        specifier: ^4.3.0
+        version: 4.5.4(@types/node@22.19.19)(rollup@4.60.4)(typescript@5.9.3)(vite@5.4.21(@types/node@22.19.19))
+
+  packages/utils:
+    devDependencies:
+      typescript:
+        specifier: ^5.7.2
+        version: 5.9.3
+      vite:
+        specifier: ^5.4.11
+        version: 5.4.21(@types/node@22.19.19)
+      vite-plugin-dts:
+        specifier: ^4.3.0
+        version: 4.5.4(@types/node@22.19.19)(rollup@4.60.4)(typescript@5.9.3)(vite@5.4.21(@types/node@22.19.19))
+      vitest:
+        specifier: ^2.1.8
+        version: 2.1.9(@types/node@22.19.19)(jsdom@25.0.1)
+
+packages:
+
+  '@adobe/css-tools@4.4.4':
+    resolution: {integrity: sha512-Elp+iwUx5rN5+Y8xLt5/GRoG20WGoDCQ/1Fb+1LiGtvwbDavuSk0jhD/eZdckHAuzcDzccnkv+rEjyWfRx18gg==}
+
+  '@alloc/quick-lru@5.2.0':
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
+    engines: {node: '>=10'}
+
+  '@asamuzakjp/css-color@3.2.0':
+    resolution: {integrity: sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==}
+
+  '@babel/code-frame@7.29.0':
+    resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/compat-data@7.29.3':
+    resolution: {integrity: sha512-LIVqM46zQWZhj17qA8wb4nW/ixr2y1Nw+r1etiAWgRM6U1IqP+LNhL1yg440jYZR72jCWcWbLWzIosH+uP1fqg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/core@7.29.0':
+    resolution: {integrity: sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/generator@7.29.1':
+    resolution: {integrity: sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-compilation-targets@7.28.6':
+    resolution: {integrity: sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-globals@7.28.0':
+    resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-imports@7.28.6':
+    resolution: {integrity: sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-transforms@7.28.6':
+    resolution: {integrity: sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-plugin-utils@7.28.6':
+    resolution: {integrity: sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-string-parser@7.27.1':
+    resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@7.28.5':
+    resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-option@7.27.1':
+    resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helpers@7.29.2':
+    resolution: {integrity: sha512-HoGuUs4sCZNezVEKdVcwqmZN8GoHirLUcLaYVNBK2J0DadGtdcqgr3BCbvH8+XUo4NGjNl3VOtSjEKNzqfFgKw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/parser@7.29.3':
+    resolution: {integrity: sha512-b3ctpQwp+PROvU/cttc4OYl4MzfJUWy6FZg+PMXfzmt/+39iHVF0sDfqay8TQM3JA2EUOyKcFZt75jWriQijsA==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/plugin-transform-react-jsx-self@7.27.1':
+    resolution: {integrity: sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-react-jsx-source@7.27.1':
+    resolution: {integrity: sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/runtime@7.29.2':
+    resolution: {integrity: sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/template@7.28.6':
+    resolution: {integrity: sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/traverse@7.29.0':
+    resolution: {integrity: sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/types@7.29.0':
+    resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
+    engines: {node: '>=6.9.0'}
+
+  '@csstools/color-helpers@5.1.0':
+    resolution: {integrity: sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==}
+    engines: {node: '>=18'}
+
+  '@csstools/css-calc@2.1.4':
+    resolution: {integrity: sha512-3N8oaj+0juUw/1H3YwmDDJXCgTB1gKU6Hc/bB502u9zR0q2vd786XJH9QfrKIEgFlZmhZiq6epXl4rHqhzsIgQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^3.0.5
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/css-color-parser@3.1.0':
+    resolution: {integrity: sha512-nbtKwh3a6xNVIp/VRuXV64yTKnb1IjTAEEh3irzS+HkKjAOYLTGNb9pmVNntZ8iVBHcWDA2Dof0QtPgFI1BaTA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^3.0.5
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/css-parser-algorithms@3.0.5':
+    resolution: {integrity: sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/css-tokenizer@3.0.4':
+    resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==}
+    engines: {node: '>=18'}
+
+  '@emnapi/runtime@1.10.0':
+    resolution: {integrity: sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==}
+
+  '@esbuild/aix-ppc64@0.21.5':
+    resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/android-arm64@0.21.5':
+    resolution: {integrity: sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm@0.21.5':
+    resolution: {integrity: sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-x64@0.21.5':
+    resolution: {integrity: sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/darwin-arm64@0.21.5':
+    resolution: {integrity: sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.21.5':
+    resolution: {integrity: sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/freebsd-arm64@0.21.5':
+    resolution: {integrity: sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.21.5':
+    resolution: {integrity: sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/linux-arm64@0.21.5':
+    resolution: {integrity: sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.21.5':
+    resolution: {integrity: sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.21.5':
+    resolution: {integrity: sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.21.5':
+    resolution: {integrity: sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==}
+    engines: {node: '>=12'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.21.5':
+    resolution: {integrity: sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.21.5':
+    resolution: {integrity: sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.21.5':
+    resolution: {integrity: sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.21.5':
+    resolution: {integrity: sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.21.5':
+    resolution: {integrity: sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/netbsd-x64@0.21.5':
+    resolution: {integrity: sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/openbsd-x64@0.21.5':
+    resolution: {integrity: sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/sunos-x64@0.21.5':
+    resolution: {integrity: sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/win32-arm64@0.21.5':
+    resolution: {integrity: sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.21.5':
+    resolution: {integrity: sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.21.5':
+    resolution: {integrity: sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+
+  '@img/colour@1.1.0':
+    resolution: {integrity: sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==}
+    engines: {node: '>=18'}
+
+  '@img/sharp-darwin-arm64@0.34.5':
+    resolution: {integrity: sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@img/sharp-darwin-x64@0.34.5':
+    resolution: {integrity: sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@img/sharp-libvips-darwin-arm64@1.2.4':
+    resolution: {integrity: sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@img/sharp-libvips-darwin-x64@1.2.4':
+    resolution: {integrity: sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@img/sharp-libvips-linux-arm64@1.2.4':
+    resolution: {integrity: sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-arm@1.2.4':
+    resolution: {integrity: sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==}
+    cpu: [arm]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-ppc64@1.2.4':
+    resolution: {integrity: sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-riscv64@1.2.4':
+    resolution: {integrity: sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-s390x@1.2.4':
+    resolution: {integrity: sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-x64@1.2.4':
+    resolution: {integrity: sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.2.4':
+    resolution: {integrity: sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-libvips-linuxmusl-x64@1.2.4':
+    resolution: {integrity: sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-linux-arm64@0.34.5':
+    resolution: {integrity: sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-linux-arm@0.34.5':
+    resolution: {integrity: sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@img/sharp-linux-ppc64@0.34.5':
+    resolution: {integrity: sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@img/sharp-linux-riscv64@0.34.5':
+    resolution: {integrity: sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@img/sharp-linux-s390x@0.34.5':
+    resolution: {integrity: sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [s390x]
+    os: [linux]
+
+  '@img/sharp-linux-x64@0.34.5':
+    resolution: {integrity: sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-linuxmusl-arm64@0.34.5':
+    resolution: {integrity: sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-linuxmusl-x64@0.34.5':
+    resolution: {integrity: sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-wasm32@0.34.5':
+    resolution: {integrity: sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [wasm32]
+
+  '@img/sharp-win32-arm64@0.34.5':
+    resolution: {integrity: sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@img/sharp-win32-ia32@0.34.5':
+    resolution: {integrity: sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@img/sharp-win32-x64@0.34.5':
+    resolution: {integrity: sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@jridgewell/gen-mapping@0.3.13':
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+
+  '@mdx-js/loader@3.1.1':
+    resolution: {integrity: sha512-0TTacJyZ9mDmY+VefuthVshaNIyCGZHJG2fMnGaDttCt8HmjUF7SizlHJpaCDoGnN635nK1wpzfpx/Xx5S4WnQ==}
+    peerDependencies:
+      webpack: '>=5'
+    peerDependenciesMeta:
+      webpack:
+        optional: true
+
+  '@mdx-js/mdx@3.1.1':
+    resolution: {integrity: sha512-f6ZO2ifpwAQIpzGWaBQT2TXxPv6z3RBzQKpVftEWN78Vl/YweF1uwussDx8ECAXVtr3Rs89fKyG9YlzUs9DyGQ==}
+
+  '@mdx-js/react@3.1.1':
+    resolution: {integrity: sha512-f++rKLQgUVYDAtECQ6fn/is15GkEH9+nZPM3MS0RcxVqoTfawHvDlSCH7JbMhAM6uJ32v3eXLvLmLvjGu7PTQw==}
+    peerDependencies:
+      '@types/react': '>=16'
+      react: '>=16'
+
+  '@microsoft/api-extractor-model@7.33.8':
+    resolution: {integrity: sha512-aIcoQggPyer3B6Ze3usz0YWC/oBwUHfRH5ETUsr+oT2BRA6SfTJl7IKPcPZkX4UR+PohowzW4uMxsvjrn8vm+w==}
+
+  '@microsoft/api-extractor@7.58.7':
+    resolution: {integrity: sha512-yK6OycD46gIzLRpj6ueVUWPk1ACSpkN1LBo05gY1qPTylbWyUCanXfH7+VgkI5LJrJoRSQR5F04XuCffCXLOBw==}
+    hasBin: true
+
+  '@microsoft/tsdoc-config@0.18.1':
+    resolution: {integrity: sha512-9brPoVdfN9k9g0dcWkFeA7IH9bbcttzDJlXvkf8b2OBzd5MueR1V2wkKBL0abn0otvmkHJC6aapBOTJDDeMCZg==}
+
+  '@microsoft/tsdoc@0.16.0':
+    resolution: {integrity: sha512-xgAyonlVVS+q7Vc7qLW0UrJU7rSFcETRWsqdXZtjzRU8dF+6CkozTK4V4y1LwOX7j8r/vHphjDeMeGI4tNGeGA==}
+
+  '@next/env@15.5.18':
+    resolution: {integrity: sha512-hAV85Ckd9QR6RvH04MEKwsfLTksvFpO47j9xwtoIuvuPnlwecpSi+uZTtm8HirVbtlI2Fnz//xpcSTjFdyJk+g==}
+
+  '@next/mdx@16.2.6':
+    resolution: {integrity: sha512-0hdoSkzRbyud1dNRRDiyqD9FrxR2wwdiW+ffhYx+n+fXrFOJ7Nwpi8o7nUz2LiiM44BB9M0eIO1Evy3BBrS50A==}
+    peerDependencies:
+      '@mdx-js/loader': '>=0.15.0'
+      '@mdx-js/react': '>=0.15.0'
+    peerDependenciesMeta:
+      '@mdx-js/loader':
+        optional: true
+      '@mdx-js/react':
+        optional: true
+
+  '@next/swc-darwin-arm64@15.5.18':
+    resolution: {integrity: sha512-w0WvQf1n+txiwns/9pwIQteCJpZTbxzO2SE0FLcwuD4v0WEh1JPOjdyxWL21XwJsdpx8cFRjyzxzCS/siP7HcQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@next/swc-darwin-x64@15.5.18':
+    resolution: {integrity: sha512-znn71QmDuxm+BOaglihMZfvyySMnNljkVIY5Z2TCssBmm+WqL6c19VhtH5ktFkHa8EZ2bnTUpcNcmNSQsg67og==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@next/swc-linux-arm64-gnu@15.5.18':
+    resolution: {integrity: sha512-yPPe5MNL+igZUa+OsqQJisqSfh6oarIuA1Q0BDxljGJhRQyZeP+WRHh7rs/jZUGMh5aY0YdIjXZG0VohkKkUdw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@next/swc-linux-arm64-musl@15.5.18':
+    resolution: {integrity: sha512-glaCczEWIrHsokFZ3pP08U4BpKxwIdnT+txdOM32OBgpL9Yw4aqx8NejmgtZQZOdstQ5f0L3CasIZudzCuD+nw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@next/swc-linux-x64-gnu@15.5.18':
+    resolution: {integrity: sha512-oUfg2EgJmU3R0OCOWiokGFUTvZiPfXtriXiuF3YNxRoROCdgvTedHIzYoeKH34gsZxS/V7mHbfq2hpAHwhH1/A==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@next/swc-linux-x64-musl@15.5.18':
+    resolution: {integrity: sha512-JLxSP3KTd9iu/bvUMQxH7RJo9xKSHf55/6RPE4a6FTSZygGn7uvZbCej0AHXydwkggQGSD9UddSjwv6Xz5ESfA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@next/swc-win32-arm64-msvc@15.5.18':
+    resolution: {integrity: sha512-ir1v7enP52K2HNz3tQQvwF+x7VNxBk1ciiZ18WBPvxf4C59IqdfmHPJYK3vH7rSxpuCVw/8C712wTXNAtEp+NA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@next/swc-win32-x64-msvc@15.5.18':
+    resolution: {integrity: sha512-LIu5me6QTANCd25E7I5uIEfvgQ06RK7tvHAbYo3zCb3VpxQEPvMcSpd87NwUABDT6MbGPdEGR5VRiK4PPTJhQg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@nodelib/fs.scandir@2.1.5':
+    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.stat@2.0.5':
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.walk@1.2.8':
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
+    engines: {node: '>= 8'}
+
+  '@rolldown/pluginutils@1.0.0-beta.27':
+    resolution: {integrity: sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==}
+
+  '@rollup/pluginutils@5.3.0':
+    resolution: {integrity: sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
+  '@rollup/rollup-android-arm-eabi@4.60.4':
+    resolution: {integrity: sha512-F5QXMSiFebS9hKZj02XhWLLnRpJ3B3AROP0tWbFBSj+6kCbg5m9j5JoHKd4mmSVy5mS/IMQloYgYxCuJC0fxEQ==}
+    cpu: [arm]
+    os: [android]
+
+  '@rollup/rollup-android-arm64@4.60.4':
+    resolution: {integrity: sha512-GxxTKApUpzRhof7poWvCJHRF51C67u1R7D6DiluBE8wKU1u5GWE8t+v81JvJYtbawoBFX1hLv5Ei4eVjkWokaw==}
+    cpu: [arm64]
+    os: [android]
+
+  '@rollup/rollup-darwin-arm64@4.60.4':
+    resolution: {integrity: sha512-tua0TaJxMOB1R0V0RS1jFZ/RpURFDJIOR2A6jWwQeawuFyS4gBW+rntLRaQd0EQ4bd6Vp44Z2rXW+YYDBsj6IA==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rollup/rollup-darwin-x64@4.60.4':
+    resolution: {integrity: sha512-CSKq7MsP+5PFIcydhAiR1K0UhEI1A2jWXVKHPCBZ151yOutENwvnPocgVHkivu2kviURtCEB6zUQw0vs8RrhMg==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rollup/rollup-freebsd-arm64@4.60.4':
+    resolution: {integrity: sha512-+O8OkVdyvXMtJEciu2wS/pzm1IxntEEQx3z5TAVy4l32G0etZn+RsA48ARRrFm6Ri8fvqPQfgrvNxSjKAbnd3g==}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@rollup/rollup-freebsd-x64@4.60.4':
+    resolution: {integrity: sha512-Iw3oMskH3AfNuhU0MSN7vNbdi4me/NiYo2azqPz/Le16zHSa+3RRmliCMWWQmh4lcndccU40xcJuTYJZxNo/lw==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.60.4':
+    resolution: {integrity: sha512-EIPRXTVQpHyF8WOo219AD2yEltPehLTcTMz2fn6JsatLYSzQf00hj3rulF+yauOlF9/FtM2WpkT/hJh/KJFGhA==}
+    cpu: [arm]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm-musleabihf@4.60.4':
+    resolution: {integrity: sha512-J3Yh9PzzF1Ovah2At+lHiGQdsYgArxBbXv/zHfSyaiFQEqvNv7DcW98pCrmdjCZBrqBiKrKKe2V+aaSGWuBe/w==}
+    cpu: [arm]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm64-gnu@4.60.4':
+    resolution: {integrity: sha512-BFDEZMYfUvLn37ONE1yMBojPxnMlTFsdyNoqncT0qFq1mAfllL+ATMMJd8TeuVMiX84s1KbcxcZbXInmcO2mRg==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm64-musl@4.60.4':
+    resolution: {integrity: sha512-pc9EYOSlOgdQ2uPl1o9PF6/kLSgaUosia7gOuS8mB69IxJvlclko1MECXysjs5ryez1/5zjYqx3+xYU0TU6R1A==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@rollup/rollup-linux-loong64-gnu@4.60.4':
+    resolution: {integrity: sha512-NxnomyxYerDh5n4iLrNa+sH+Z+U4BMEE46V2PgQ/hoB909i8gV1M5wPojWg9fk1jWpO3IQnOs20K4wyZuFLEFQ==}
+    cpu: [loong64]
+    os: [linux]
+
+  '@rollup/rollup-linux-loong64-musl@4.60.4':
+    resolution: {integrity: sha512-nbJnQ8a3z1mtmrwImCYhc6BGpThAyYVRQxw9uKSKG4wR6aAYno9sVjJ0zaZcW9BPJX1GbrDPf+SvdWjgTuDmnw==}
+    cpu: [loong64]
+    os: [linux]
+
+  '@rollup/rollup-linux-ppc64-gnu@4.60.4':
+    resolution: {integrity: sha512-2EU6acNrQLd8tYvo/LXW535wupT3m6fo7HKo6lr7ktQoItxTyOL1ZCR/GfGCuXl2vR+zmfI6eRXkSemafv+iVg==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@rollup/rollup-linux-ppc64-musl@4.60.4':
+    resolution: {integrity: sha512-WeBtoMuaMxiiIrO2IYP3xs6GMWkJP2C0EoT8beTLkUPmzV1i/UcOSVw1d5r9KBODtHKilG5yFxsGRnBbK3wJ4A==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@rollup/rollup-linux-riscv64-gnu@4.60.4':
+    resolution: {integrity: sha512-FJHFfqpKUI3A10WrWKiFbBZ7yVbGT4q4B5o1qKFFojqpaYoh9LrQgqWCmmcxQzVSXYtyB5bzkXrYzlHTs21MYA==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@rollup/rollup-linux-riscv64-musl@4.60.4':
+    resolution: {integrity: sha512-mcEl6CUT5IAUmQf1m9FYSmVqCJlpQ8r8eyftFUHG8i9OhY7BkBXSUdnLH5DOf0wCOjcP9v/QO93zpmF1SptCCw==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@rollup/rollup-linux-s390x-gnu@4.60.4':
+    resolution: {integrity: sha512-ynt3JxVd2w2buzoKDWIyiV1pJW93xlQic1THVLXilz429oijRpSHivZAgp65KBu+cMcgf1eVVjdnTLvPxgCuoQ==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@rollup/rollup-linux-x64-gnu@4.60.4':
+    resolution: {integrity: sha512-Boiz5+MsaROEWDf+GGEwF8VMHGhlUoQMtIPjOgA5fv4osupqTVnJteQNKJwUcnUog2G55jYXH7KZFFiJe0TEzQ==}
+    cpu: [x64]
+    os: [linux]
+
+  '@rollup/rollup-linux-x64-musl@4.60.4':
+    resolution: {integrity: sha512-+qfSY27qIrFfI/Hom04KYFw3GKZSGU4lXus51wsb5EuySfFlWRwjkKWoE9emgRw/ukoT4Udsj4W/+xxG8VbPKg==}
+    cpu: [x64]
+    os: [linux]
+
+  '@rollup/rollup-openbsd-x64@4.60.4':
+    resolution: {integrity: sha512-VpTfOPHgVXEBeeR8hZ2O0F3aSso+JDWqTWmTmzcQKted54IAdUVbxE+j/MVxUsKa8L20HJhv3vUezVPoquqWjA==}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@rollup/rollup-openharmony-arm64@4.60.4':
+    resolution: {integrity: sha512-IPOsh5aRYuLv/nkU51X10Bf75Bsf6+gZdx1X+QP5QM6lIJFHHqbHLG0uJn/hWthzo13UAc2umiUorqZy3axoZg==}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rollup/rollup-win32-arm64-msvc@4.60.4':
+    resolution: {integrity: sha512-4QzE9E81OohJ/HKzHhsqU+zcYYojVOXlFMs1DdyMT6qXl/niOH7AVElmmEdUNHHS/oRkc++d5k6Vy85zFs0DEw==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rollup/rollup-win32-ia32-msvc@4.60.4':
+    resolution: {integrity: sha512-zTPgT1YuHHcd+Tmx7h8aml0FWFVelV5N54oHow9SLj+GfoDy/huQ+UV396N/C7KpMDMiPspRktzM1/0r1usYEA==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-gnu@4.60.4':
+    resolution: {integrity: sha512-DRS4G7mi9lJxqEDezIkKCaUIKCrLUUDCUaCsTPCi/rtqaC6D/jjwslMQyiDU50Ka0JKpeXeRBFBAXwArY52vBw==}
+    cpu: [x64]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-msvc@4.60.4':
+    resolution: {integrity: sha512-QVTUovf40zgTqlFVrKA1uXMVvU2QWEFWfAH8Wdc48IxLvrJMQVMBRjuQyUpzZCDkakImib9eVazbWlC6ksWtJw==}
+    cpu: [x64]
+    os: [win32]
+
+  '@rushstack/node-core-library@5.23.1':
+    resolution: {integrity: sha512-wlKmIKIYCKuCASbITvOxLZXepPbwXvrv7S6ig6XNWFchSyhL/E2txmVXspHY49Wu2dzf7nI27a2k/yV5BA3EiA==}
+    peerDependencies:
+      '@types/node': '*'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@rushstack/problem-matcher@0.2.1':
+    resolution: {integrity: sha512-gulfhBs6n+I5b7DvjKRfhMGyUejtSgOHTclF/eONr8hcgF1APEDjhxIsfdUYYMzC3rvLwGluqLjbwCFZ8nxrog==}
+    peerDependencies:
+      '@types/node': '*'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@rushstack/rig-package@0.7.3':
+    resolution: {integrity: sha512-aAA518n6wxxjCfnTAOjQnm7ngNE0FVHxHAw2pxKlIhxrMn0XQjGcXKF0oKWpjBgJOmsaJpVob/v+zr3zxgPWuA==}
+
+  '@rushstack/terminal@0.24.0':
+    resolution: {integrity: sha512-8ZQS4MMaGsv27EXCBiH7WMPkRZrffeDoIevs6z9TM5dzqiY6+Hn4evfK/G+gvgBTjfvfkHIZPQQmalmI2sM4TQ==}
+    peerDependencies:
+      '@types/node': '*'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@rushstack/ts-command-line@5.3.9':
+    resolution: {integrity: sha512-GIHqU+sRGQ3LGWAZu1O+9Yh++qwtyNIIGuNbcWHJjBTm2qRez0cwINUHZ+pQLR8UuzZDcMajrDaNbUYoaL/XtQ==}
+
+  '@shikijs/core@4.1.0':
+    resolution: {integrity: sha512-jLJtSJeuFffqX6/inRE1zqU5aFv2hrszvYgq3OjbAgFRZiWv7abKMDdQzYxuSDfmUPQozZvI/kuy6VMTvnvqTQ==}
+    engines: {node: '>=20'}
+
+  '@shikijs/engine-javascript@4.1.0':
+    resolution: {integrity: sha512-YquhawCUgaBfhsS72e2Y/dI59gCBNPHu3fEO/tvLaXrTssxZrY5ddjtNLTwndrMgPo8b3IscE+xoICDzpTmlFQ==}
+    engines: {node: '>=20'}
+
+  '@shikijs/engine-oniguruma@4.1.0':
+    resolution: {integrity: sha512-axLpjVs45YBvvINa+dJF+NPW+KtFkNXsFr4SDw2BMj9GdeMnGxVB9PQb2xXlJYovslt/nz6giedAyOANkfc7hg==}
+    engines: {node: '>=20'}
+
+  '@shikijs/langs@4.1.0':
+    resolution: {integrity: sha512-nwOMruEkbgdZfQ/b8CgpNBVOpvG1k0N5tbmgiFeqsan401+x3ILqlzZJowSla4Agmq4hG2Uf2wh5jLTEhR8VSg==}
+    engines: {node: '>=20'}
+
+  '@shikijs/primitive@4.1.0':
+    resolution: {integrity: sha512-zx2/2Uwj2q9X3KSyYREEhXO23xBw5WUhP4orK2lE4r+t9JGITmEe0JH+wPmJhqHpOT2bRRs6lAL945+LDvOAGw==}
+    engines: {node: '>=20'}
+
+  '@shikijs/themes@4.1.0':
+    resolution: {integrity: sha512-emCcTnUM7yO2wltYbaxm+yLvcCI4+h8XBKc4KmJ7EZUXoSGjcCHifkI//R4OFit9ewpg7H2/9tjOuXrT2v/Knw==}
+    engines: {node: '>=20'}
+
+  '@shikijs/types@4.1.0':
+    resolution: {integrity: sha512-3EQWX54fMpniOrDblzAhiwiJwpiTMW6+B9DWyUd9ska483tbayFYuw47UxwuPknI31bKnySfVQ/QW+jFL4rFdA==}
+    engines: {node: '>=20'}
+
+  '@shikijs/vscode-textmate@10.0.2':
+    resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
+
+  '@swc/helpers@0.5.15':
+    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
+
+  '@testing-library/dom@10.4.1':
+    resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==}
+    engines: {node: '>=18'}
+
+  '@testing-library/jest-dom@6.9.1':
+    resolution: {integrity: sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==}
+    engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
+
+  '@testing-library/react@16.3.2':
+    resolution: {integrity: sha512-XU5/SytQM+ykqMnAnvB2umaJNIOsLF3PVv//1Ew4CTcpz0/BRyy/af40qqrt7SjKpDdT1saBMc42CUok5gaw+g==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@testing-library/dom': ^10.0.0
+      '@types/react': ^18.0.0 || ^19.0.0
+      '@types/react-dom': ^18.0.0 || ^19.0.0
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@turbo/darwin-64@2.9.14':
+    resolution: {integrity: sha512-t7QiPflaEyBE4oayeZtSmu4mEfjgIrcNlNNl1z1dmIVPqEdtA7+CfTf8d7KXsOGPh6aNgWjKxyvQg9uGfDQF+A==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@turbo/darwin-arm64@2.9.14':
+    resolution: {integrity: sha512-d23147mC9BsCPA9mJ0h/ubcpbRgcJBXbcG3+Vq7YLhjz3IXuvQsJ1UXH8f4MD76ZjJ4m/E4aRdJV+MW88CDfbw==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@turbo/linux-64@2.9.14':
+    resolution: {integrity: sha512-P3ZKB5tuUDdDQWuAsACGUR1qv9W7BNWxdxqVJ0kZNuNNPRaVYTPPikLcp79+GiEcW3npsR+KyP38lnQiBc5aSA==}
+    cpu: [x64]
+    os: [linux]
+
+  '@turbo/linux-arm64@2.9.14':
+    resolution: {integrity: sha512-ZRTlzcUMrrPv9ZuDzRF9n60Ym13bKeG9jDB8WjxyLhWNzV+AJQN+zdpIk3NJYf2zQsGUm1mNar2P0elRzLw25g==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@turbo/windows-64@2.9.14':
+    resolution: {integrity: sha512-exanwN6sIduZwykYeiTQj8kCmOhazP5WOz3bvXMcYtjhL6Z3iRWLewKrXCBq0bqwSP3iBMb/AerRCnHI4lx46A==}
+    cpu: [x64]
+    os: [win32]
+
+  '@turbo/windows-arm64@2.9.14':
+    resolution: {integrity: sha512-fVdCsnmYoKICsycbWuuGp6Jvi51/3G/UluFWuAUCvR8PIW5IJkAk5BM9UF8PSm0Q2IphWHFZjYEgjHsh3B9y/g==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@types/argparse@1.0.38':
+    resolution: {integrity: sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA==}
+
+  '@types/aria-query@5.0.4':
+    resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
+
+  '@types/babel__core@7.20.5':
+    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
+
+  '@types/babel__generator@7.27.0':
+    resolution: {integrity: sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==}
+
+  '@types/babel__template@7.4.4':
+    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
+
+  '@types/babel__traverse@7.28.0':
+    resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}
+
+  '@types/debug@4.1.13':
+    resolution: {integrity: sha512-KSVgmQmzMwPlmtljOomayoR89W4FynCAi3E8PPs7vmDVPe84hT+vGPKkJfThkmXs0x0jAaa9U8uW8bbfyS2fWw==}
+
+  '@types/estree-jsx@1.0.5':
+    resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==}
+
+  '@types/estree@1.0.8':
+    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
+
+  '@types/estree@1.0.9':
+    resolution: {integrity: sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==}
+
+  '@types/hast@3.0.4':
+    resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
+
+  '@types/mdast@4.0.4':
+    resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
+
+  '@types/mdx@2.0.13':
+    resolution: {integrity: sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==}
+
+  '@types/ms@2.1.0':
+    resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}
+
+  '@types/node@22.19.19':
+    resolution: {integrity: sha512-dyh/xO2Fh5bYrfWaaqGrRQQGkNdmYw6AmaAUvYeUMNTWQtvb796ikLdmTchRmOlOiIJ1TDXfWgVx1QkUlQ6Hew==}
+
+  '@types/prop-types@15.7.15':
+    resolution: {integrity: sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==}
+
+  '@types/react-dom@18.3.7':
+    resolution: {integrity: sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==}
+    peerDependencies:
+      '@types/react': ^18.0.0
+
+  '@types/react@18.3.28':
+    resolution: {integrity: sha512-z9VXpC7MWrhfWipitjNdgCauoMLRdIILQsAEV+ZesIzBq/oUlxk0m3ApZuMFCXdnS4U7KrI+l3WRUEGQ8K1QKw==}
+
+  '@types/unist@2.0.11':
+    resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
+
+  '@types/unist@3.0.3':
+    resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
+
+  '@ungap/structured-clone@1.3.1':
+    resolution: {integrity: sha512-mUFwbeTqrVgDQxFveS+df2yfap6iuP20NAKAsBt5jDEoOTDew+zwLAOilHCeQJOVSvmgCX4ogqIrA0mnyr08yQ==}
+
+  '@vitejs/plugin-react@4.7.0':
+    resolution: {integrity: sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
+
+  '@vitest/expect@2.1.9':
+    resolution: {integrity: sha512-UJCIkTBenHeKT1TTlKMJWy1laZewsRIzYighyYiJKZreqtdxSos/S1t+ktRMQWu2CKqaarrkeszJx1cgC5tGZw==}
+
+  '@vitest/mocker@2.1.9':
+    resolution: {integrity: sha512-tVL6uJgoUdi6icpxmdrn5YNo3g3Dxv+IHJBr0GXHaEdTcw3F+cPKnsXFhli6nO+f/6SDKPHEK1UN+k+TQv0Ehg==}
+    peerDependencies:
+      msw: ^2.4.9
+      vite: ^5.0.0
+    peerDependenciesMeta:
+      msw:
+        optional: true
+      vite:
+        optional: true
+
+  '@vitest/pretty-format@2.1.9':
+    resolution: {integrity: sha512-KhRIdGV2U9HOUzxfiHmY8IFHTdqtOhIzCpd8WRdJiE7D/HUcZVD0EgQCVjm+Q9gkUXWgBvMmTtZgIG48wq7sOQ==}
+
+  '@vitest/runner@2.1.9':
+    resolution: {integrity: sha512-ZXSSqTFIrzduD63btIfEyOmNcBmQvgOVsPNPe0jYtESiXkhd8u2erDLnMxmGrDCwHCCHE7hxwRDCT3pt0esT4g==}
+
+  '@vitest/snapshot@2.1.9':
+    resolution: {integrity: sha512-oBO82rEjsxLNJincVhLhaxxZdEtV0EFHMK5Kmx5sJ6H9L183dHECjiefOAdnqpIgT5eZwT04PoggUnW88vOBNQ==}
+
+  '@vitest/spy@2.1.9':
+    resolution: {integrity: sha512-E1B35FwzXXTs9FHNK6bDszs7mtydNi5MIfUWpceJ8Xbfb1gBMscAnwLbEu+B44ed6W3XjL9/ehLPHR1fkf1KLQ==}
+
+  '@vitest/utils@2.1.9':
+    resolution: {integrity: sha512-v0psaMSkNJ3A2NMrUEHFRzJtDPFn+/VWZ5WxImB21T9fjucJRmS7xCS3ppEnARb9y11OAzaD+P2Ps+b+BGX5iQ==}
+
+  '@volar/language-core@2.4.28':
+    resolution: {integrity: sha512-w4qhIJ8ZSitgLAkVay6AbcnC7gP3glYM3fYwKV3srj8m494E3xtrCv6E+bWviiK/8hs6e6t1ij1s2Endql7vzQ==}
+
+  '@volar/source-map@2.4.28':
+    resolution: {integrity: sha512-yX2BDBqJkRXfKw8my8VarTyjv48QwxdJtvRgUpNE5erCsgEUdI2DsLbpa+rOQVAJYshY99szEcRDmyHbF10ggQ==}
+
+  '@volar/typescript@2.4.28':
+    resolution: {integrity: sha512-Ja6yvWrbis2QtN4ClAKreeUZPVYMARDYZl9LMEv1iQ1QdepB6wn0jTRxA9MftYmYa4DQ4k/DaSZpFPUfxl8giw==}
+
+  '@vue/compiler-core@3.5.34':
+    resolution: {integrity: sha512-s9cLyK5mLcvZ4Agva5QgRsQyLKvts9WbU9DB6NqiZkkGEdwmcEiylj5Jbwkp680drF/NNCV8OlAJSe+yMLxaJw==}
+
+  '@vue/compiler-dom@3.5.34':
+    resolution: {integrity: sha512-EbF/T++k0e2MMZlJsBhzK8Sgwt0HcIPOhzn1CTB/lv6sQcyk+OWf8YeiLxZp3ro7MbbLcAfAJ6sEvjFWuNgUCw==}
+
+  '@vue/compiler-vue2@2.7.16':
+    resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==}
+
+  '@vue/language-core@2.2.0':
+    resolution: {integrity: sha512-O1ZZFaaBGkKbsRfnVH1ifOK1/1BUkyK+3SQsfnh6PmMmD4qJcTU8godCeA96jjDRTL6zgnK7YzCHfaUlH2r0Mw==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@vue/shared@3.5.34':
+    resolution: {integrity: sha512-24uqU4OIiX29ryC3MeWid/Xf2fa2EFRUVLb77nRhk+UrTVrh/XiGtFAFmJBAtBRbjwNdsPRP+jj/OL27Eg1NDA==}
+
+  acorn-jsx@5.3.2:
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  acorn@8.16.0:
+    resolution: {integrity: sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
+  agent-base@7.1.4:
+    resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
+    engines: {node: '>= 14'}
+
+  ajv-draft-04@1.0.0:
+    resolution: {integrity: sha512-mv00Te6nmYbRp5DCwclxtt7yV/joXJPGS7nM+97GdxvuttCOfgI3K4U25zboyeX0O+myI8ERluxQe5wljMmVIw==}
+    peerDependencies:
+      ajv: ^8.5.0
+    peerDependenciesMeta:
+      ajv:
+        optional: true
+
+  ajv-formats@3.0.1:
+    resolution: {integrity: sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==}
+    peerDependencies:
+      ajv: ^8.0.0
+    peerDependenciesMeta:
+      ajv:
+        optional: true
+
+  ajv@8.18.0:
+    resolution: {integrity: sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==}
+
+  alien-signals@0.4.14:
+    resolution: {integrity: sha512-itUAVzhczTmP2U5yX67xVpsbbOiquusbWVyA9N+sy6+r6YVbFkahXvNCeEPWEOMhwDYwbVbGHFkVL03N9I5g+Q==}
+
+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
+  ansi-styles@5.2.0:
+    resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
+    engines: {node: '>=10'}
+
+  any-promise@1.3.0:
+    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
+
+  anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
+
+  arg@5.0.2:
+    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
+
+  argparse@1.0.10:
+    resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
+
+  aria-query@5.3.0:
+    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
+
+  aria-query@5.3.2:
+    resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
+    engines: {node: '>= 0.4'}
+
+  assertion-error@2.0.1:
+    resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
+    engines: {node: '>=12'}
+
+  astring@1.9.0:
+    resolution: {integrity: sha512-LElXdjswlqjWrPpJFg1Fx4wpkOCxj1TDHlSV4PlaRxHGWko024xICaa97ZkMfs6DRKlCguiAI+rbXv5GWwXIkg==}
+    hasBin: true
+
+  asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+
+  autoprefixer@10.5.0:
+    resolution: {integrity: sha512-FMhOoZV4+qR6aTUALKX2rEqGG+oyATvwBt9IIzVR5rMa2HRWPkxf+P+PAJLD1I/H5/II+HuZcBJYEFBpq39ong==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
+
+  bail@2.0.2:
+    resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
+
+  balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+
+  balanced-match@4.0.4:
+    resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==}
+    engines: {node: 18 || 20 || >=22}
+
+  baseline-browser-mapping@2.10.31:
+    resolution: {integrity: sha512-MujYO3eP72uvmSE0i4wltsodRfIpZATP3jvzRNRGGxgzId7aVocVJJV3nf01qnzzKFGxQVC9bpWxl5cjxTr/7Q==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  binary-extensions@2.3.0:
+    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
+    engines: {node: '>=8'}
+
+  brace-expansion@2.1.0:
+    resolution: {integrity: sha512-TN1kCZAgdgweJhWWpgKYrQaMNHcDULHkWwQIspdtjV4Y5aurRdZpjAqn6yX3FPqTA9ngHCc4hJxMAMgGfve85w==}
+
+  brace-expansion@5.0.6:
+    resolution: {integrity: sha512-kLpxurY4Z4r9sgMsyG0Z9uzsBlgiU/EFKhj/h91/8yHu0edo7XuixOIH3VcJ8kkxs6/jPzoI6U9Vj3WqbMQ94g==}
+    engines: {node: 18 || 20 || >=22}
+
+  braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
+
+  browserslist@4.28.2:
+    resolution: {integrity: sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+
+  cac@6.7.14:
+    resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
+    engines: {node: '>=8'}
+
+  call-bind-apply-helpers@1.0.2:
+    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
+    engines: {node: '>= 0.4'}
+
+  camelcase-css@2.0.1:
+    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
+    engines: {node: '>= 6'}
+
+  caniuse-lite@1.0.30001793:
+    resolution: {integrity: sha512-iwSsYWaCOoh26cV8NwNRViHlrfUvYsHDfRVcbtmw0Kg6PJIZZXwMkj1442FYLBGkeUf1juAsU3DTfxW579mrPA==}
+
+  ccount@2.0.1:
+    resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
+
+  chai@5.3.3:
+    resolution: {integrity: sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==}
+    engines: {node: '>=18'}
+
+  character-entities-html4@2.1.0:
+    resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
+
+  character-entities-legacy@3.0.0:
+    resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
+
+  character-entities@2.0.2:
+    resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
+
+  character-reference-invalid@2.0.1:
+    resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==}
+
+  check-error@2.1.3:
+    resolution: {integrity: sha512-PAJdDJusoxnwm1VwW07VWwUN1sl7smmC3OKggvndJFadxxDRyFJBX/ggnu/KE4kQAB7a3Dp8f/YXC1FlUprWmA==}
+    engines: {node: '>= 16'}
+
+  chokidar@3.6.0:
+    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
+    engines: {node: '>= 8.10.0'}
+
+  client-only@0.0.1:
+    resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
+
+  collapse-white-space@2.1.0:
+    resolution: {integrity: sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==}
+
+  combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+
+  comma-separated-tokens@2.0.3:
+    resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
+
+  commander@4.1.1:
+    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
+    engines: {node: '>= 6'}
+
+  compare-versions@6.1.1:
+    resolution: {integrity: sha512-4hm4VPpIecmlg59CHXnRDnqGplJFrbLG4aFEl5vl6cK1u76ws3LLvX7ikFnTDl5vo39sjWD6AaDPYodJp/NNHg==}
+
+  confbox@0.1.8:
+    resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
+
+  confbox@0.2.4:
+    resolution: {integrity: sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ==}
+
+  convert-source-map@2.0.0:
+    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
+
+  css.escape@1.5.1:
+    resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
+
+  cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  cssstyle@4.6.0:
+    resolution: {integrity: sha512-2z+rWdzbbSZv6/rhtvzvqeZQHrBaqgogqt85sqFNbabZOuFbCVFb8kPeEtZjiKkbrm395irpNKiYeFeLiQnFPg==}
+    engines: {node: '>=18'}
+
+  csstype@3.2.3:
+    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
+
+  data-urls@5.0.0:
+    resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
+    engines: {node: '>=18'}
+
+  de-indent@1.0.2:
+    resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
+
+  debug@4.4.3:
+    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  decimal.js@10.6.0:
+    resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==}
+
+  decode-named-character-reference@1.3.0:
+    resolution: {integrity: sha512-GtpQYB283KrPp6nRw50q3U9/VfOutZOe103qlN7BPP6Ad27xYnOIWv4lPzo8HCAL+mMZofJ9KEy30fq6MfaK6Q==}
+
+  deep-eql@5.0.2:
+    resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
+    engines: {node: '>=6'}
+
+  delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+
+  dequal@2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+
+  detect-libc@2.1.2:
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
+    engines: {node: '>=8'}
+
+  devlop@1.1.0:
+    resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
+
+  didyoumean@1.2.2:
+    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
+
+  diff@8.0.4:
+    resolution: {integrity: sha512-DPi0FmjiSU5EvQV0++GFDOJ9ASQUVFh5kD+OzOnYdi7n3Wpm9hWWGfB/O2blfHcMVTL5WkQXSnRiK9makhrcnw==}
+    engines: {node: '>=0.3.1'}
+
+  dlv@1.1.3:
+    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
+
+  dom-accessibility-api@0.5.16:
+    resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
+
+  dom-accessibility-api@0.6.3:
+    resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==}
+
+  dunder-proto@1.0.1:
+    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
+    engines: {node: '>= 0.4'}
+
+  electron-to-chromium@1.5.359:
+    resolution: {integrity: sha512-8lPELWuYZIWk7NDvCNthtmMw/7Q5Wu25NpM4djFMHBmk8DubPAtL4YTOp7ou0e7HyJtwkVlWv8XMLURnrtgJQw==}
+
+  entities@6.0.1:
+    resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
+    engines: {node: '>=0.12'}
+
+  entities@7.0.1:
+    resolution: {integrity: sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==}
+    engines: {node: '>=0.12'}
+
+  es-define-property@1.0.1:
+    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
+    engines: {node: '>= 0.4'}
+
+  es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+    engines: {node: '>= 0.4'}
+
+  es-module-lexer@1.7.0:
+    resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
+
+  es-object-atoms@1.1.1:
+    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
+    engines: {node: '>= 0.4'}
+
+  es-set-tostringtag@2.1.0:
+    resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
+    engines: {node: '>= 0.4'}
+
+  esast-util-from-estree@2.0.0:
+    resolution: {integrity: sha512-4CyanoAudUSBAn5K13H4JhsMH6L9ZP7XbLVe/dKybkxMO7eDyLsT8UHl9TRNrU2Gr9nz+FovfSIjuXWJ81uVwQ==}
+
+  esast-util-from-js@2.0.1:
+    resolution: {integrity: sha512-8Ja+rNJ0Lt56Pcf3TAmpBZjmx8ZcK5Ts4cAzIOjsjevg9oSXJnl6SUQ2EevU8tv3h6ZLWmoKL5H4fgWvdvfETw==}
+
+  esbuild@0.21.5:
+    resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==}
+    engines: {node: '>=12'}
+    hasBin: true
+
+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
+
+  estree-util-attach-comments@3.0.0:
+    resolution: {integrity: sha512-cKUwm/HUcTDsYh/9FgnuFqpfquUbwIqwKM26BVCGDPVgvaCl/nDCCjUfiLlx6lsEZ3Z4RFxNbOQ60pkaEwFxGw==}
+
+  estree-util-build-jsx@3.0.1:
+    resolution: {integrity: sha512-8U5eiL6BTrPxp/CHbs2yMgP8ftMhR5ww1eIKoWRMlqvltHF8fZn5LRDvTKuxD3DUn+shRbLGqXemcP51oFCsGQ==}
+
+  estree-util-is-identifier-name@3.0.0:
+    resolution: {integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==}
+
+  estree-util-scope@1.0.0:
+    resolution: {integrity: sha512-2CAASclonf+JFWBNJPndcOpA8EMJwa0Q8LUFJEKqXLW6+qBvbFZuF5gItbQOs/umBUkjviCSDCbBwU2cXbmrhQ==}
+
+  estree-util-to-js@2.0.0:
+    resolution: {integrity: sha512-WDF+xj5rRWmD5tj6bIqRi6CkLIXbbNQUcxQHzGysQzvHmdYG2G7p/Tf0J0gpxGgkeMZNTIjT/AoSvC9Xehcgdg==}
+
+  estree-util-visit@2.0.0:
+    resolution: {integrity: sha512-m5KgiH85xAhhW8Wta0vShLcUvOsh3LLPI2YVwcbio1l7E09NTLL1EyMZFM1OyWowoH0skScNbhOPl4kcBgzTww==}
+
+  estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+
+  estree-walker@3.0.3:
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+
+  expect-type@1.3.0:
+    resolution: {integrity: sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==}
+    engines: {node: '>=12.0.0'}
+
+  exsolve@1.0.8:
+    resolution: {integrity: sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==}
+
+  extend@3.0.2:
+    resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
+
+  fast-deep-equal@3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+
+  fast-glob@3.3.3:
+    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
+    engines: {node: '>=8.6.0'}
+
+  fast-uri@3.1.2:
+    resolution: {integrity: sha512-rVjf7ArG3LTk+FS6Yw81V1DLuZl1bRbNrev6Tmd/9RaroeeRRJhAt7jg/6YFxbvAQXUCavSoZhPPj6oOx+5KjQ==}
+
+  fastq@1.20.1:
+    resolution: {integrity: sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==}
+
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+
+  form-data@4.0.5:
+    resolution: {integrity: sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==}
+    engines: {node: '>= 6'}
+
+  fraction.js@5.3.4:
+    resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==}
+
+  fs-extra@11.3.5:
+    resolution: {integrity: sha512-eKpRKAovdpZtR1WopLHxlBWvAgPny3c4gX1G5Jhwmmw4XJj0ifSD5qB5TOo8hmA0wlRKDAOAhEE1yVPgs6Fgcg==}
+    engines: {node: '>=14.14'}
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+
+  gensync@1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+
+  get-intrinsic@1.3.0:
+    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
+    engines: {node: '>= 0.4'}
+
+  get-proto@1.0.1:
+    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
+    engines: {node: '>= 0.4'}
+
+  glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+
+  glob-parent@6.0.2:
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
+
+  gopd@1.2.0:
+    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+    engines: {node: '>= 0.4'}
+
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
+  has-flag@4.0.0:
+    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
+    engines: {node: '>=8'}
+
+  has-symbols@1.1.0:
+    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
+    engines: {node: '>= 0.4'}
+
+  has-tostringtag@1.0.2:
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+    engines: {node: '>= 0.4'}
+
+  hasown@2.0.3:
+    resolution: {integrity: sha512-ej4AhfhfL2Q2zpMmLo7U1Uv9+PyhIZpgQLGT1F9miIGmiCJIoCgSmczFdrc97mWT4kVY72KA+WnnhJ5pghSvSg==}
+    engines: {node: '>= 0.4'}
+
+  hast-util-from-html@2.0.3:
+    resolution: {integrity: sha512-CUSRHXyKjzHov8yKsQjGOElXy/3EKpyX56ELnkHH34vDVw1N1XSQ1ZcAvTyAPtGqLTuKP/uxM+aLkSPqF/EtMw==}
+
+  hast-util-from-parse5@8.0.3:
+    resolution: {integrity: sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg==}
+
+  hast-util-parse-selector@4.0.0:
+    resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==}
+
+  hast-util-to-estree@3.1.3:
+    resolution: {integrity: sha512-48+B/rJWAp0jamNbAAf9M7Uf//UVqAoMmgXhBdxTDJLGKY+LRnZ99qcG+Qjl5HfMpYNzS5v4EAwVEF34LeAj7w==}
+
+  hast-util-to-html@9.0.5:
+    resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==}
+
+  hast-util-to-jsx-runtime@2.3.6:
+    resolution: {integrity: sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==}
+
+  hast-util-to-string@3.0.1:
+    resolution: {integrity: sha512-XelQVTDWvqcl3axRfI0xSeoVKzyIFPwsAGSLIsKdJKQMXDYJS4WYrBNF/8J7RdhIcFI2BOHgAifggsvsxp/3+A==}
+
+  hast-util-whitespace@3.0.0:
+    resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
+
+  hastscript@9.0.1:
+    resolution: {integrity: sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==}
+
+  he@1.2.0:
+    resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
+    hasBin: true
+
+  html-encoding-sniffer@4.0.0:
+    resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==}
+    engines: {node: '>=18'}
+
+  html-void-elements@3.0.0:
+    resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
+
+  http-proxy-agent@7.0.2:
+    resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
+    engines: {node: '>= 14'}
+
+  https-proxy-agent@7.0.6:
+    resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
+    engines: {node: '>= 14'}
+
+  iconv-lite@0.6.3:
+    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
+    engines: {node: '>=0.10.0'}
+
+  import-lazy@4.0.0:
+    resolution: {integrity: sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==}
+    engines: {node: '>=8'}
+
+  indent-string@4.0.0:
+    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
+    engines: {node: '>=8'}
+
+  inline-style-parser@0.2.7:
+    resolution: {integrity: sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==}
+
+  is-alphabetical@2.0.1:
+    resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==}
+
+  is-alphanumerical@2.0.1:
+    resolution: {integrity: sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==}
+
+  is-binary-path@2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
+
+  is-core-module@2.16.2:
+    resolution: {integrity: sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA==}
+    engines: {node: '>= 0.4'}
+
+  is-decimal@2.0.1:
+    resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==}
+
+  is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
+  is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+
+  is-hexadecimal@2.0.1:
+    resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==}
+
+  is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+
+  is-plain-obj@4.1.0:
+    resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
+    engines: {node: '>=12'}
+
+  is-potential-custom-element-name@1.0.1:
+    resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
+
+  jiti@1.21.7:
+    resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
+    hasBin: true
+
+  jju@1.4.0:
+    resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==}
+
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  jsdom@25.0.1:
+    resolution: {integrity: sha512-8i7LzZj7BF8uplX+ZyOlIz86V6TAsSs+np6m1kpW9u0JWi4z/1t+FzcK1aek+ybTnAC4KhBL4uXCNT0wcUIeCw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      canvas: ^2.11.2
+    peerDependenciesMeta:
+      canvas:
+        optional: true
+
+  jsesc@3.1.0:
+    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  json-schema-traverse@1.0.0:
+    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
+
+  json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  jsonfile@6.2.1:
+    resolution: {integrity: sha512-zwOTdL3rFQ/lRdBnntKVOX6k5cKJwEc1HdilT71BWEu7J41gXIB2MRp+vxduPSwZJPWBxEzv4yH1wYLJGUHX4Q==}
+
+  kolorist@1.8.0:
+    resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
+
+  lilconfig@3.1.3:
+    resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
+    engines: {node: '>=14'}
+
+  lines-and-columns@1.2.4:
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+
+  local-pkg@1.1.2:
+    resolution: {integrity: sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==}
+    engines: {node: '>=14'}
+
+  longest-streak@3.1.0:
+    resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
+
+  loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+
+  loupe@3.2.1:
+    resolution: {integrity: sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==}
+
+  lru-cache@10.4.3:
+    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
+
+  lru-cache@5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+
+  lz-string@1.5.0:
+    resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
+    hasBin: true
+
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
+  markdown-extensions@2.0.0:
+    resolution: {integrity: sha512-o5vL7aDWatOTX8LzaS1WMoaoxIiLRQJuIKKe2wAw6IeULDHaqbiqiggmx+pKvZDb1Sj+pE46Sn1T7lCqfFtg1Q==}
+    engines: {node: '>=16'}
+
+  math-intrinsics@1.1.0:
+    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
+    engines: {node: '>= 0.4'}
+
+  mdast-util-from-markdown@2.0.3:
+    resolution: {integrity: sha512-W4mAWTvSlKvf8L6J+VN9yLSqQ9AOAAvHuoDAmPkz4dHf553m5gVj2ejadHJhoJmcmxEnOv6Pa8XJhpxE93kb8Q==}
+
+  mdast-util-mdx-expression@2.0.1:
+    resolution: {integrity: sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==}
+
+  mdast-util-mdx-jsx@3.2.0:
+    resolution: {integrity: sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==}
+
+  mdast-util-mdx@3.0.0:
+    resolution: {integrity: sha512-JfbYLAW7XnYTTbUsmpu0kdBUVe+yKVJZBItEjwyYJiDJuZ9w4eeaqks4HQO+R7objWgS2ymV60GYpI14Ug554w==}
+
+  mdast-util-mdxjs-esm@2.0.1:
+    resolution: {integrity: sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==}
+
+  mdast-util-phrasing@4.1.0:
+    resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==}
+
+  mdast-util-to-hast@13.2.1:
+    resolution: {integrity: sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==}
+
+  mdast-util-to-markdown@2.1.2:
+    resolution: {integrity: sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==}
+
+  mdast-util-to-string@4.0.0:
+    resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
+
+  merge2@1.4.1:
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
+    engines: {node: '>= 8'}
+
+  micromark-core-commonmark@2.0.3:
+    resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}
+
+  micromark-extension-mdx-expression@3.0.1:
+    resolution: {integrity: sha512-dD/ADLJ1AeMvSAKBwO22zG22N4ybhe7kFIZ3LsDI0GlsNr2A3KYxb0LdC1u5rj4Nw+CHKY0RVdnHX8vj8ejm4Q==}
+
+  micromark-extension-mdx-jsx@3.0.2:
+    resolution: {integrity: sha512-e5+q1DjMh62LZAJOnDraSSbDMvGJ8x3cbjygy2qFEi7HCeUT4BDKCvMozPozcD6WmOt6sVvYDNBKhFSz3kjOVQ==}
+
+  micromark-extension-mdx-md@2.0.0:
+    resolution: {integrity: sha512-EpAiszsB3blw4Rpba7xTOUptcFeBFi+6PY8VnJ2hhimH+vCQDirWgsMpz7w1XcZE7LVrSAUGb9VJpG9ghlYvYQ==}
+
+  micromark-extension-mdxjs-esm@3.0.0:
+    resolution: {integrity: sha512-DJFl4ZqkErRpq/dAPyeWp15tGrcrrJho1hKK5uBS70BCtfrIFg81sqcTVu3Ta+KD1Tk5vAtBNElWxtAa+m8K9A==}
+
+  micromark-extension-mdxjs@3.0.0:
+    resolution: {integrity: sha512-A873fJfhnJ2siZyUrJ31l34Uqwy4xIFmvPY1oj+Ean5PHcPBYzEsvqvWGaWcfEIr11O5Dlw3p2y0tZWpKHDejQ==}
+
+  micromark-factory-destination@2.0.1:
+    resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==}
+
+  micromark-factory-label@2.0.1:
+    resolution: {integrity: sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==}
+
+  micromark-factory-mdx-expression@2.0.3:
+    resolution: {integrity: sha512-kQnEtA3vzucU2BkrIa8/VaSAsP+EJ3CKOvhMuJgOEGg9KDC6OAY6nSnNDVRiVNRqj7Y4SlSzcStaH/5jge8JdQ==}
+
+  micromark-factory-space@2.0.1:
+    resolution: {integrity: sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==}
+
+  micromark-factory-title@2.0.1:
+    resolution: {integrity: sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==}
+
+  micromark-factory-whitespace@2.0.1:
+    resolution: {integrity: sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==}
+
+  micromark-util-character@2.1.1:
+    resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
+
+  micromark-util-chunked@2.0.1:
+    resolution: {integrity: sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==}
+
+  micromark-util-classify-character@2.0.1:
+    resolution: {integrity: sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==}
+
+  micromark-util-combine-extensions@2.0.1:
+    resolution: {integrity: sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==}
+
+  micromark-util-decode-numeric-character-reference@2.0.2:
+    resolution: {integrity: sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==}
+
+  micromark-util-decode-string@2.0.1:
+    resolution: {integrity: sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==}
+
+  micromark-util-encode@2.0.1:
+    resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
+
+  micromark-util-events-to-acorn@2.0.3:
+    resolution: {integrity: sha512-jmsiEIiZ1n7X1Rr5k8wVExBQCg5jy4UXVADItHmNk1zkwEVhBuIUKRu3fqv+hs4nxLISi2DQGlqIOGiFxgbfHg==}
+
+  micromark-util-html-tag-name@2.0.1:
+    resolution: {integrity: sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==}
+
+  micromark-util-normalize-identifier@2.0.1:
+    resolution: {integrity: sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==}
+
+  micromark-util-resolve-all@2.0.1:
+    resolution: {integrity: sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==}
+
+  micromark-util-sanitize-uri@2.0.1:
+    resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==}
+
+  micromark-util-subtokenize@2.1.0:
+    resolution: {integrity: sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==}
+
+  micromark-util-symbol@2.0.1:
+    resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==}
+
+  micromark-util-types@2.0.2:
+    resolution: {integrity: sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==}
+
+  micromark@4.0.2:
+    resolution: {integrity: sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==}
+
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
+
+  mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+
+  min-indent@1.0.1:
+    resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
+    engines: {node: '>=4'}
+
+  minimatch@10.2.3:
+    resolution: {integrity: sha512-Rwi3pnapEqirPSbWbrZaa6N3nmqq4Xer/2XooiOKyV3q12ML06f7MOuc5DVH8ONZIFhwIYQ3yzPH4nt7iWHaTg==}
+    engines: {node: 18 || 20 || >=22}
+
+  minimatch@9.0.9:
+    resolution: {integrity: sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  mlly@1.8.2:
+    resolution: {integrity: sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA==}
+
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
+  muggle-string@0.4.1:
+    resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
+
+  mz@2.7.0:
+    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
+
+  nanoid@3.3.12:
+    resolution: {integrity: sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  next@15.5.18:
+    resolution: {integrity: sha512-eKL8zUJkX9Y5lE+RX/2YJoItVdGlIscyVyboeD9wSpp0PaGqjoA4tTpT2qPqz9ax+5IzGESyLSeZ/RCwbSZ2uQ==}
+    engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@opentelemetry/api': ^1.1.0
+      '@playwright/test': ^1.51.1
+      babel-plugin-react-compiler: '*'
+      react: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
+      react-dom: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
+      sass: ^1.3.0
+    peerDependenciesMeta:
+      '@opentelemetry/api':
+        optional: true
+      '@playwright/test':
+        optional: true
+      babel-plugin-react-compiler:
+        optional: true
+      sass:
+        optional: true
+
+  node-releases@2.0.44:
+    resolution: {integrity: sha512-5WUyunoPMsvvEhS8AxHtRzP+oA8UCkJ7YRxatWKjngndhDGLiqEVAQKWjFAiAiuL8zMRGzGSJxFnLetoa43qGQ==}
+
+  normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+
+  nwsapi@2.2.23:
+    resolution: {integrity: sha512-7wfH4sLbt4M0gCDzGE6vzQBo0bfTKjU7Sfpqy/7gs1qBfYz2vEJH6vXcBKpO3+6Yu1telwd0t9HpyOoLEQQbIQ==}
+
+  object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+
+  object-hash@3.0.0:
+    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
+    engines: {node: '>= 6'}
+
+  oniguruma-parser@0.12.2:
+    resolution: {integrity: sha512-6HVa5oIrgMC6aA6WF6XyyqbhRPJrKR02L20+2+zpDtO5QAzGHAUGw5TKQvwi5vctNnRHkJYmjAhRVQF2EKdTQw==}
+
+  oniguruma-to-es@4.3.6:
+    resolution: {integrity: sha512-csuQ9x3Yr0cEIs/Zgx/OEt9iBw9vqIunAPQkx19R/fiMq2oGVTgcMqO/V3Ybqefr1TBvosI6jU539ksaBULJyA==}
+
+  parse-entities@4.0.2:
+    resolution: {integrity: sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==}
+
+  parse-numeric-range@1.3.0:
+    resolution: {integrity: sha512-twN+njEipszzlMJd4ONUYgSfZPDxgHhT9Ahed5uTigpQn90FggW4SA/AIPq/6a149fTbE9qBEcSwE3FAEp6wQQ==}
+
+  parse5@7.3.0:
+    resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
+
+  path-browserify@1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
+
+  path-parse@1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+
+  pathe@1.1.2:
+    resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
+
+  pathe@2.0.3:
+    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
+
+  pathval@2.0.1:
+    resolution: {integrity: sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==}
+    engines: {node: '>= 14.16'}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  picomatch@2.3.2:
+    resolution: {integrity: sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==}
+    engines: {node: '>=8.6'}
+
+  picomatch@4.0.4:
+    resolution: {integrity: sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==}
+    engines: {node: '>=12'}
+
+  pify@2.3.0:
+    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
+    engines: {node: '>=0.10.0'}
+
+  pirates@4.0.7:
+    resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
+    engines: {node: '>= 6'}
+
+  pkg-types@1.3.1:
+    resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
+
+  pkg-types@2.3.1:
+    resolution: {integrity: sha512-y+ichcgc2LrADuhLNAx8DFjVfgz91pRxfZdI3UDhxHvcVEZsenLO+7XaU5vOp0u/7V/wZ+plyuQxtrDlZJ+yeg==}
+
+  postcss-import@15.1.0:
+    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      postcss: ^8.0.0
+
+  postcss-js@4.1.0:
+    resolution: {integrity: sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==}
+    engines: {node: ^12 || ^14 || >= 16}
+    peerDependencies:
+      postcss: ^8.4.21
+
+  postcss-load-config@6.0.1:
+    resolution: {integrity: sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      jiti: '>=1.21.0'
+      postcss: '>=8.0.9'
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      jiti:
+        optional: true
+      postcss:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
+  postcss-nested@6.2.0:
+    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+
+  postcss-selector-parser@6.1.2:
+    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
+    engines: {node: '>=4'}
+
+  postcss-value-parser@4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+
+  postcss@8.4.31:
+    resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  postcss@8.5.15:
+    resolution: {integrity: sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  pretty-format@27.5.1:
+    resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  property-information@7.1.0:
+    resolution: {integrity: sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==}
+
+  punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
+    engines: {node: '>=6'}
+
+  quansync@0.2.11:
+    resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==}
+
+  queue-microtask@1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+
+  react-dom@18.3.1:
+    resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
+    peerDependencies:
+      react: ^18.3.1
+
+  react-is@17.0.2:
+    resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
+
+  react-refresh@0.17.0:
+    resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==}
+    engines: {node: '>=0.10.0'}
+
+  react@18.3.1:
+    resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
+    engines: {node: '>=0.10.0'}
+
+  read-cache@1.0.0:
+    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
+
+  readdirp@3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
+
+  recma-build-jsx@1.0.0:
+    resolution: {integrity: sha512-8GtdyqaBcDfva+GUKDr3nev3VpKAhup1+RvkMvUxURHpW7QyIvk9F5wz7Vzo06CEMSilw6uArgRqhpiUcWp8ew==}
+
+  recma-jsx@1.0.1:
+    resolution: {integrity: sha512-huSIy7VU2Z5OLv6oFLosQGGDqPqdO1iq6bWNAdhzMxSJP7RAso4fCZ1cKu8j9YHCZf3TPrq4dw3okhrylgcd7w==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  recma-parse@1.0.0:
+    resolution: {integrity: sha512-OYLsIGBB5Y5wjnSnQW6t3Xg7q3fQ7FWbw/vcXtORTnyaSFscOtABg+7Pnz6YZ6c27fG1/aN8CjfwoUEUIdwqWQ==}
+
+  recma-stringify@1.0.0:
+    resolution: {integrity: sha512-cjwII1MdIIVloKvC9ErQ+OgAtwHBmcZ0Bg4ciz78FtbT8In39aAYbaA7zvxQ61xVMSPE8WxhLwLbhif4Js2C+g==}
+
+  redent@3.0.0:
+    resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
+    engines: {node: '>=8'}
+
+  regex-recursion@6.0.2:
+    resolution: {integrity: sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==}
+
+  regex-utilities@2.3.0:
+    resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==}
+
+  regex@6.1.0:
+    resolution: {integrity: sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg==}
+
+  rehype-parse@9.0.1:
+    resolution: {integrity: sha512-ksCzCD0Fgfh7trPDxr2rSylbwq9iYDkSn8TCDmEJ49ljEUBxDVCzCHv7QNzZOfODanX4+bWQ4WZqLCRWYLfhag==}
+
+  rehype-pretty-code@0.14.3:
+    resolution: {integrity: sha512-Cz692FeYusTjT5cfFWLc4r7JhgC3/JlJptgUh4iffBxWxUnWW1oqbWFi7jGCeq00DYUm8yzoTnvpocaYa5x82g==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      shiki: ^1.0.0 || ^2.0.0 || ^3.0.0 || ^4.0.0
+
+  rehype-recma@1.0.0:
+    resolution: {integrity: sha512-lqA4rGUf1JmacCNWWZx0Wv1dHqMwxzsDWYMTowuplHF3xH0N/MmrZ/G3BDZnzAkRmxDadujCjaKM2hqYdCBOGw==}
+
+  remark-mdx@3.1.1:
+    resolution: {integrity: sha512-Pjj2IYlUY3+D8x00UJsIOg5BEvfMyeI+2uLPn9VO9Wg4MEtN/VTIq2NEJQfde9PnX15KgtHyl9S0BcTnWrIuWg==}
+
+  remark-parse@11.0.0:
+    resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}
+
+  remark-rehype@11.1.2:
+    resolution: {integrity: sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==}
+
+  require-from-string@2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
+
+  resolve@1.22.12:
+    resolution: {integrity: sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==}
+    engines: {node: '>= 0.4'}
+    hasBin: true
+
+  reusify@1.1.0:
+    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+
+  rollup@4.60.4:
+    resolution: {integrity: sha512-WHeFSbZYsPu3+bLoNRUuAO+wavNlocOPf3wSHTP7hcFKVnJeWsYlCDbr3mTS14FCizf9ccIxXA8sGL8zKeQN3g==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+
+  rrweb-cssom@0.7.1:
+    resolution: {integrity: sha512-TrEMa7JGdVm0UThDJSx7ddw5nVm3UJS9o9CCIZ72B1vSyEZoziDqBYP3XIoi/12lKrJR8rE3jeFHMok2F/Mnsg==}
+
+  rrweb-cssom@0.8.0:
+    resolution: {integrity: sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==}
+
+  run-parallel@1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+
+  safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+
+  saxes@6.0.0:
+    resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
+    engines: {node: '>=v12.22.7'}
+
+  scheduler@0.23.2:
+    resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
+
+  semver@6.3.1:
+    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
+    hasBin: true
+
+  semver@7.7.4:
+    resolution: {integrity: sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  semver@7.8.0:
+    resolution: {integrity: sha512-AcM7dV/5ul4EekoQ29Agm5vri8JNqRyj39o0qpX6vDF2GZrtutZl5RwgD1XnZjiTAfncsJhMI48QQH3sN87YNA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  sharp@0.34.5:
+    resolution: {integrity: sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+
+  shiki@4.1.0:
+    resolution: {integrity: sha512-l/ABZPUR5v70jI10EzqfMS/I96vjSGv2y0ihUV+WYFzv0EfvW4s54m0Lg8wCrrL+2IkwBzFTuxkZjPf8b2NX9Q==}
+    engines: {node: '>=20'}
+
+  siginfo@2.0.0:
+    resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+
+  source-map@0.7.6:
+    resolution: {integrity: sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==}
+    engines: {node: '>= 12'}
+
+  space-separated-tokens@2.0.2:
+    resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
+
+  sprintf-js@1.0.3:
+    resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
+
+  stackback@0.0.2:
+    resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
+
+  std-env@3.10.0:
+    resolution: {integrity: sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==}
+
+  string-argv@0.3.2:
+    resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==}
+    engines: {node: '>=0.6.19'}
+
+  stringify-entities@4.0.4:
+    resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
+
+  strip-indent@3.0.0:
+    resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
+    engines: {node: '>=8'}
+
+  style-to-js@1.1.21:
+    resolution: {integrity: sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ==}
+
+  style-to-object@1.0.14:
+    resolution: {integrity: sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==}
+
+  styled-jsx@5.1.6:
+    resolution: {integrity: sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==}
+    engines: {node: '>= 12.0.0'}
+    peerDependencies:
+      '@babel/core': '*'
+      babel-plugin-macros: '*'
+      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0'
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      babel-plugin-macros:
+        optional: true
+
+  sucrase@3.35.1:
+    resolution: {integrity: sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    hasBin: true
+
+  supports-color@8.1.1:
+    resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
+    engines: {node: '>=10'}
+
+  supports-preserve-symlinks-flag@1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+
+  symbol-tree@3.2.4:
+    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
+
+  tailwindcss@3.4.19:
+    resolution: {integrity: sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
+  thenify-all@1.6.0:
+    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
+    engines: {node: '>=0.8'}
+
+  thenify@3.3.1:
+    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
+
+  tinybench@2.9.0:
+    resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
+
+  tinyexec@0.3.2:
+    resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
+
+  tinyglobby@0.2.16:
+    resolution: {integrity: sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==}
+    engines: {node: '>=12.0.0'}
+
+  tinypool@1.1.1:
+    resolution: {integrity: sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+
+  tinyrainbow@1.2.0:
+    resolution: {integrity: sha512-weEDEq7Z5eTHPDh4xjX789+fHfF+P8boiFB+0vbWzpbnbsEr/GRaohi/uMKxg8RZMXnl1ItAi/IUHWMsjDV7kQ==}
+    engines: {node: '>=14.0.0'}
+
+  tinyspy@3.0.2:
+    resolution: {integrity: sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==}
+    engines: {node: '>=14.0.0'}
+
+  tldts-core@6.1.86:
+    resolution: {integrity: sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==}
+
+  tldts@6.1.86:
+    resolution: {integrity: sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==}
+    hasBin: true
+
+  to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+
+  tough-cookie@5.1.2:
+    resolution: {integrity: sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==}
+    engines: {node: '>=16'}
+
+  tr46@5.1.1:
+    resolution: {integrity: sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==}
+    engines: {node: '>=18'}
+
+  trim-lines@3.0.1:
+    resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
+
+  trough@2.2.0:
+    resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
+
+  ts-interface-checker@0.1.13:
+    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  turbo@2.9.14:
+    resolution: {integrity: sha512-BQqXRr4UoWI3UPFrtznCLykYHxwxWh53iCB57x092jPMjIlW1wnm3N895g5irpiXmnxUhREBB0n6+y8BHhs4nw==}
+    hasBin: true
+
+  typescript@5.9.3:
+    resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  ufo@1.6.4:
+    resolution: {integrity: sha512-JFNbkD1Svwe0KvGi8GOeLcP4kAWQ609twvCdcHxq1oSL8svv39ZuSvajcD8B+5D0eL4+s1Is2D/O6KN3qcTeRA==}
+
+  undici-types@6.21.0:
+    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
+
+  unified@11.0.5:
+    resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
+
+  unist-util-is@6.0.1:
+    resolution: {integrity: sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==}
+
+  unist-util-position-from-estree@2.0.0:
+    resolution: {integrity: sha512-KaFVRjoqLyF6YXCbVLNad/eS4+OfPQQn2yOd7zF/h5T/CSL2v8NpN6a5TPvtbXthAGw5nG+PuTtq+DdIZr+cRQ==}
+
+  unist-util-position@5.0.0:
+    resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
+
+  unist-util-stringify-position@4.0.0:
+    resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
+
+  unist-util-visit-parents@6.0.2:
+    resolution: {integrity: sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==}
+
+  unist-util-visit@5.1.0:
+    resolution: {integrity: sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==}
+
+  universalify@2.0.1:
+    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
+    engines: {node: '>= 10.0.0'}
+
+  update-browserslist-db@1.2.3:
+    resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+
+  util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
+  vfile-location@5.0.3:
+    resolution: {integrity: sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==}
+
+  vfile-message@4.0.3:
+    resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==}
+
+  vfile@6.0.3:
+    resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
+
+  vite-node@2.1.9:
+    resolution: {integrity: sha512-AM9aQ/IPrW/6ENLQg3AGY4K1N2TGZdR5e4gu/MmmR2xR3Ll1+dib+nook92g4TV3PXVyeyxdWwtaCAiUL0hMxA==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+
+  vite-plugin-dts@4.5.4:
+    resolution: {integrity: sha512-d4sOM8M/8z7vRXHHq/ebbblfaxENjogAAekcfcDCCwAyvGqnPrc7f4NZbvItS+g4WTgerW0xDwSz5qz11JT3vg==}
+    peerDependencies:
+      typescript: '*'
+      vite: '*'
+    peerDependenciesMeta:
+      vite:
+        optional: true
+
+  vite@5.4.21:
+    resolution: {integrity: sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^18.0.0 || >=20.0.0
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      sass-embedded: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+
+  vitest@2.1.9:
+    resolution: {integrity: sha512-MSmPM9REYqDGBI8439mA4mWhV5sKmDlBKWIYbA3lRb2PTHACE0mgKwA8yQ2xq9vxDTuk4iPrECBAEW2aoFXY0Q==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@types/node': ^18.0.0 || >=20.0.0
+      '@vitest/browser': 2.1.9
+      '@vitest/ui': 2.1.9
+      happy-dom: '*'
+      jsdom: '*'
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@types/node':
+        optional: true
+      '@vitest/browser':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+
+  vscode-uri@3.1.0:
+    resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
+
+  w3c-xmlserializer@5.0.0:
+    resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
+    engines: {node: '>=18'}
+
+  web-namespaces@2.0.1:
+    resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
+
+  webidl-conversions@7.0.0:
+    resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
+    engines: {node: '>=12'}
+
+  whatwg-encoding@3.1.1:
+    resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
+    engines: {node: '>=18'}
+    deprecated: Use @exodus/bytes instead for a more spec-conformant and faster implementation
+
+  whatwg-mimetype@4.0.0:
+    resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==}
+    engines: {node: '>=18'}
+
+  whatwg-url@14.2.0:
+    resolution: {integrity: sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==}
+    engines: {node: '>=18'}
+
+  why-is-node-running@2.3.0:
+    resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
+    engines: {node: '>=8'}
+    hasBin: true
+
+  ws@8.20.1:
+    resolution: {integrity: sha512-It4dO0K5v//JtTXuPkfEOaI3uUN87iYPnqo/ZzqCoG3g8uhA66QUMs/SrM0YK7/NAu+r4LMh/9dq2A7k+rHs+w==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
+  xml-name-validator@5.0.0:
+    resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
+    engines: {node: '>=18'}
+
+  xmlchars@2.2.0:
+    resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
+
+  yallist@3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+
+  zwitch@2.0.4:
+    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
+
+snapshots:
+
+  '@adobe/css-tools@4.4.4': {}
+
+  '@alloc/quick-lru@5.2.0': {}
+
+  '@asamuzakjp/css-color@3.2.0':
+    dependencies:
+      '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      lru-cache: 10.4.3
+
+  '@babel/code-frame@7.29.0':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.28.5
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
+  '@babel/compat-data@7.29.3': {}
+
+  '@babel/core@7.29.0':
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/generator': 7.29.1
+      '@babel/helper-compilation-targets': 7.28.6
+      '@babel/helper-module-transforms': 7.28.6(@babel/core@7.29.0)
+      '@babel/helpers': 7.29.2
+      '@babel/parser': 7.29.3
+      '@babel/template': 7.28.6
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
+      '@jridgewell/remapping': 2.3.5
+      convert-source-map: 2.0.0
+      debug: 4.4.3
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/generator@7.29.1':
+    dependencies:
+      '@babel/parser': 7.29.3
+      '@babel/types': 7.29.0
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+      jsesc: 3.1.0
+
+  '@babel/helper-compilation-targets@7.28.6':
+    dependencies:
+      '@babel/compat-data': 7.29.3
+      '@babel/helper-validator-option': 7.27.1
+      browserslist: 4.28.2
+      lru-cache: 5.1.1
+      semver: 6.3.1
+
+  '@babel/helper-globals@7.28.0': {}
+
+  '@babel/helper-module-imports@7.28.6':
+    dependencies:
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-transforms@7.28.6(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-module-imports': 7.28.6
+      '@babel/helper-validator-identifier': 7.28.5
+      '@babel/traverse': 7.29.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-plugin-utils@7.28.6': {}
+
+  '@babel/helper-string-parser@7.27.1': {}
+
+  '@babel/helper-validator-identifier@7.28.5': {}
+
+  '@babel/helper-validator-option@7.27.1': {}
+
+  '@babel/helpers@7.29.2':
+    dependencies:
+      '@babel/template': 7.28.6
+      '@babel/types': 7.29.0
+
+  '@babel/parser@7.29.3':
+    dependencies:
+      '@babel/types': 7.29.0
+
+  '@babel/plugin-transform-react-jsx-self@7.27.1(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-plugin-utils': 7.28.6
+
+  '@babel/plugin-transform-react-jsx-source@7.27.1(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-plugin-utils': 7.28.6
+
+  '@babel/runtime@7.29.2': {}
+
+  '@babel/template@7.28.6':
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/parser': 7.29.3
+      '@babel/types': 7.29.0
+
+  '@babel/traverse@7.29.0':
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/generator': 7.29.1
+      '@babel/helper-globals': 7.28.0
+      '@babel/parser': 7.29.3
+      '@babel/template': 7.28.6
+      '@babel/types': 7.29.0
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/types@7.29.0':
+    dependencies:
+      '@babel/helper-string-parser': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
+
+  '@csstools/color-helpers@5.1.0': {}
+
+  '@csstools/css-calc@2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+
+  '@csstools/css-color-parser@3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/color-helpers': 5.1.0
+      '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+
+  '@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/css-tokenizer': 3.0.4
+
+  '@csstools/css-tokenizer@3.0.4': {}
+
+  '@emnapi/runtime@1.10.0':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@esbuild/aix-ppc64@0.21.5':
+    optional: true
+
+  '@esbuild/android-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/android-arm@0.21.5':
+    optional: true
+
+  '@esbuild/android-x64@0.21.5':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/darwin-x64@0.21.5':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-arm@0.21.5':
+    optional: true
+
+  '@esbuild/linux-ia32@0.21.5':
+    optional: true
+
+  '@esbuild/linux-loong64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.21.5':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-s390x@0.21.5':
+    optional: true
+
+  '@esbuild/linux-x64@0.21.5':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.21.5':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.21.5':
+    optional: true
+
+  '@esbuild/sunos-x64@0.21.5':
+    optional: true
+
+  '@esbuild/win32-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/win32-ia32@0.21.5':
+    optional: true
+
+  '@esbuild/win32-x64@0.21.5':
+    optional: true
+
+  '@img/colour@1.1.0':
+    optional: true
+
+  '@img/sharp-darwin-arm64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-arm64': 1.2.4
+    optional: true
+
+  '@img/sharp-darwin-x64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-x64': 1.2.4
+    optional: true
+
+  '@img/sharp-libvips-darwin-arm64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-darwin-x64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-arm64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-arm@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-ppc64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-riscv64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-s390x@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-x64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-x64@1.2.4':
+    optional: true
+
+  '@img/sharp-linux-arm64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm64': 1.2.4
+    optional: true
+
+  '@img/sharp-linux-arm@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm': 1.2.4
+    optional: true
+
+  '@img/sharp-linux-ppc64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-ppc64': 1.2.4
+    optional: true
+
+  '@img/sharp-linux-riscv64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-riscv64': 1.2.4
+    optional: true
+
+  '@img/sharp-linux-s390x@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-s390x': 1.2.4
+    optional: true
+
+  '@img/sharp-linux-x64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-x64': 1.2.4
+    optional: true
+
+  '@img/sharp-linuxmusl-arm64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-arm64': 1.2.4
+    optional: true
+
+  '@img/sharp-linuxmusl-x64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-x64': 1.2.4
+    optional: true
+
+  '@img/sharp-wasm32@0.34.5':
+    dependencies:
+      '@emnapi/runtime': 1.10.0
+    optional: true
+
+  '@img/sharp-win32-arm64@0.34.5':
+    optional: true
+
+  '@img/sharp-win32-ia32@0.34.5':
+    optional: true
+
+  '@img/sharp-win32-x64@0.34.5':
+    optional: true
+
+  '@jridgewell/gen-mapping@0.3.13':
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  '@mdx-js/loader@3.1.1':
+    dependencies:
+      '@mdx-js/mdx': 3.1.1
+      source-map: 0.7.6
+    transitivePeerDependencies:
+      - supports-color
+
+  '@mdx-js/mdx@3.1.1':
+    dependencies:
+      '@types/estree': 1.0.9
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdx': 2.0.13
+      acorn: 8.16.0
+      collapse-white-space: 2.1.0
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
+      estree-util-scope: 1.0.0
+      estree-walker: 3.0.3
+      hast-util-to-jsx-runtime: 2.3.6
+      markdown-extensions: 2.0.0
+      recma-build-jsx: 1.0.0
+      recma-jsx: 1.0.1(acorn@8.16.0)
+      recma-stringify: 1.0.0
+      rehype-recma: 1.0.0
+      remark-mdx: 3.1.1
+      remark-parse: 11.0.0
+      remark-rehype: 11.1.2
+      source-map: 0.7.6
+      unified: 11.0.5
+      unist-util-position-from-estree: 2.0.0
+      unist-util-stringify-position: 4.0.0
+      unist-util-visit: 5.1.0
+      vfile: 6.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@mdx-js/react@3.1.1(@types/react@18.3.28)(react@18.3.1)':
+    dependencies:
+      '@types/mdx': 2.0.13
+      '@types/react': 18.3.28
+      react: 18.3.1
+
+  '@microsoft/api-extractor-model@7.33.8(@types/node@22.19.19)':
+    dependencies:
+      '@microsoft/tsdoc': 0.16.0
+      '@microsoft/tsdoc-config': 0.18.1
+      '@rushstack/node-core-library': 5.23.1(@types/node@22.19.19)
+    transitivePeerDependencies:
+      - '@types/node'
+
+  '@microsoft/api-extractor@7.58.7(@types/node@22.19.19)':
+    dependencies:
+      '@microsoft/api-extractor-model': 7.33.8(@types/node@22.19.19)
+      '@microsoft/tsdoc': 0.16.0
+      '@microsoft/tsdoc-config': 0.18.1
+      '@rushstack/node-core-library': 5.23.1(@types/node@22.19.19)
+      '@rushstack/rig-package': 0.7.3
+      '@rushstack/terminal': 0.24.0(@types/node@22.19.19)
+      '@rushstack/ts-command-line': 5.3.9(@types/node@22.19.19)
+      diff: 8.0.4
+      minimatch: 10.2.3
+      resolve: 1.22.12
+      semver: 7.7.4
+      source-map: 0.6.1
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - '@types/node'
+
+  '@microsoft/tsdoc-config@0.18.1':
+    dependencies:
+      '@microsoft/tsdoc': 0.16.0
+      ajv: 8.18.0
+      jju: 1.4.0
+      resolve: 1.22.12
+
+  '@microsoft/tsdoc@0.16.0': {}
+
+  '@next/env@15.5.18': {}
+
+  '@next/mdx@16.2.6(@mdx-js/loader@3.1.1)(@mdx-js/react@3.1.1(@types/react@18.3.28)(react@18.3.1))':
+    dependencies:
+      source-map: 0.7.6
+    optionalDependencies:
+      '@mdx-js/loader': 3.1.1
+      '@mdx-js/react': 3.1.1(@types/react@18.3.28)(react@18.3.1)
+
+  '@next/swc-darwin-arm64@15.5.18':
+    optional: true
+
+  '@next/swc-darwin-x64@15.5.18':
+    optional: true
+
+  '@next/swc-linux-arm64-gnu@15.5.18':
+    optional: true
+
+  '@next/swc-linux-arm64-musl@15.5.18':
+    optional: true
+
+  '@next/swc-linux-x64-gnu@15.5.18':
+    optional: true
+
+  '@next/swc-linux-x64-musl@15.5.18':
+    optional: true
+
+  '@next/swc-win32-arm64-msvc@15.5.18':
+    optional: true
+
+  '@next/swc-win32-x64-msvc@15.5.18':
+    optional: true
+
+  '@nodelib/fs.scandir@2.1.5':
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+
+  '@nodelib/fs.stat@2.0.5': {}
+
+  '@nodelib/fs.walk@1.2.8':
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.20.1
+
+  '@rolldown/pluginutils@1.0.0-beta.27': {}
+
+  '@rollup/pluginutils@5.3.0(rollup@4.60.4)':
+    dependencies:
+      '@types/estree': 1.0.9
+      estree-walker: 2.0.2
+      picomatch: 4.0.4
+    optionalDependencies:
+      rollup: 4.60.4
+
+  '@rollup/rollup-android-arm-eabi@4.60.4':
+    optional: true
+
+  '@rollup/rollup-android-arm64@4.60.4':
+    optional: true
+
+  '@rollup/rollup-darwin-arm64@4.60.4':
+    optional: true
+
+  '@rollup/rollup-darwin-x64@4.60.4':
+    optional: true
+
+  '@rollup/rollup-freebsd-arm64@4.60.4':
+    optional: true
+
+  '@rollup/rollup-freebsd-x64@4.60.4':
+    optional: true
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.60.4':
+    optional: true
+
+  '@rollup/rollup-linux-arm-musleabihf@4.60.4':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-gnu@4.60.4':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-musl@4.60.4':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-gnu@4.60.4':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-musl@4.60.4':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-gnu@4.60.4':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-musl@4.60.4':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-gnu@4.60.4':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-musl@4.60.4':
+    optional: true
+
+  '@rollup/rollup-linux-s390x-gnu@4.60.4':
+    optional: true
+
+  '@rollup/rollup-linux-x64-gnu@4.60.4':
+    optional: true
+
+  '@rollup/rollup-linux-x64-musl@4.60.4':
+    optional: true
+
+  '@rollup/rollup-openbsd-x64@4.60.4':
+    optional: true
+
+  '@rollup/rollup-openharmony-arm64@4.60.4':
+    optional: true
+
+  '@rollup/rollup-win32-arm64-msvc@4.60.4':
+    optional: true
+
+  '@rollup/rollup-win32-ia32-msvc@4.60.4':
+    optional: true
+
+  '@rollup/rollup-win32-x64-gnu@4.60.4':
+    optional: true
+
+  '@rollup/rollup-win32-x64-msvc@4.60.4':
+    optional: true
+
+  '@rushstack/node-core-library@5.23.1(@types/node@22.19.19)':
+    dependencies:
+      ajv: 8.18.0
+      ajv-draft-04: 1.0.0(ajv@8.18.0)
+      ajv-formats: 3.0.1(ajv@8.18.0)
+      fs-extra: 11.3.5
+      import-lazy: 4.0.0
+      jju: 1.4.0
+      resolve: 1.22.12
+      semver: 7.7.4
+    optionalDependencies:
+      '@types/node': 22.19.19
+
+  '@rushstack/problem-matcher@0.2.1(@types/node@22.19.19)':
+    optionalDependencies:
+      '@types/node': 22.19.19
+
+  '@rushstack/rig-package@0.7.3':
+    dependencies:
+      jju: 1.4.0
+      resolve: 1.22.12
+
+  '@rushstack/terminal@0.24.0(@types/node@22.19.19)':
+    dependencies:
+      '@rushstack/node-core-library': 5.23.1(@types/node@22.19.19)
+      '@rushstack/problem-matcher': 0.2.1(@types/node@22.19.19)
+      supports-color: 8.1.1
+    optionalDependencies:
+      '@types/node': 22.19.19
+
+  '@rushstack/ts-command-line@5.3.9(@types/node@22.19.19)':
+    dependencies:
+      '@rushstack/terminal': 0.24.0(@types/node@22.19.19)
+      '@types/argparse': 1.0.38
+      argparse: 1.0.10
+      string-argv: 0.3.2
+    transitivePeerDependencies:
+      - '@types/node'
+
+  '@shikijs/core@4.1.0':
+    dependencies:
+      '@shikijs/primitive': 4.1.0
+      '@shikijs/types': 4.1.0
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+      hast-util-to-html: 9.0.5
+
+  '@shikijs/engine-javascript@4.1.0':
+    dependencies:
+      '@shikijs/types': 4.1.0
+      '@shikijs/vscode-textmate': 10.0.2
+      oniguruma-to-es: 4.3.6
+
+  '@shikijs/engine-oniguruma@4.1.0':
+    dependencies:
+      '@shikijs/types': 4.1.0
+      '@shikijs/vscode-textmate': 10.0.2
+
+  '@shikijs/langs@4.1.0':
+    dependencies:
+      '@shikijs/types': 4.1.0
+
+  '@shikijs/primitive@4.1.0':
+    dependencies:
+      '@shikijs/types': 4.1.0
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
+  '@shikijs/themes@4.1.0':
+    dependencies:
+      '@shikijs/types': 4.1.0
+
+  '@shikijs/types@4.1.0':
+    dependencies:
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
+  '@shikijs/vscode-textmate@10.0.2': {}
+
+  '@swc/helpers@0.5.15':
+    dependencies:
+      tslib: 2.8.1
+
+  '@testing-library/dom@10.4.1':
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/runtime': 7.29.2
+      '@types/aria-query': 5.0.4
+      aria-query: 5.3.0
+      dom-accessibility-api: 0.5.16
+      lz-string: 1.5.0
+      picocolors: 1.1.1
+      pretty-format: 27.5.1
+
+  '@testing-library/jest-dom@6.9.1':
+    dependencies:
+      '@adobe/css-tools': 4.4.4
+      aria-query: 5.3.2
+      css.escape: 1.5.1
+      dom-accessibility-api: 0.6.3
+      picocolors: 1.1.1
+      redent: 3.0.0
+
+  '@testing-library/react@16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.29.2
+      '@testing-library/dom': 10.4.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.28
+      '@types/react-dom': 18.3.7(@types/react@18.3.28)
+
+  '@turbo/darwin-64@2.9.14':
+    optional: true
+
+  '@turbo/darwin-arm64@2.9.14':
+    optional: true
+
+  '@turbo/linux-64@2.9.14':
+    optional: true
+
+  '@turbo/linux-arm64@2.9.14':
+    optional: true
+
+  '@turbo/windows-64@2.9.14':
+    optional: true
+
+  '@turbo/windows-arm64@2.9.14':
+    optional: true
+
+  '@types/argparse@1.0.38': {}
+
+  '@types/aria-query@5.0.4': {}
+
+  '@types/babel__core@7.20.5':
+    dependencies:
+      '@babel/parser': 7.29.3
+      '@babel/types': 7.29.0
+      '@types/babel__generator': 7.27.0
+      '@types/babel__template': 7.4.4
+      '@types/babel__traverse': 7.28.0
+
+  '@types/babel__generator@7.27.0':
+    dependencies:
+      '@babel/types': 7.29.0
+
+  '@types/babel__template@7.4.4':
+    dependencies:
+      '@babel/parser': 7.29.3
+      '@babel/types': 7.29.0
+
+  '@types/babel__traverse@7.28.0':
+    dependencies:
+      '@babel/types': 7.29.0
+
+  '@types/debug@4.1.13':
+    dependencies:
+      '@types/ms': 2.1.0
+
+  '@types/estree-jsx@1.0.5':
+    dependencies:
+      '@types/estree': 1.0.9
+
+  '@types/estree@1.0.8': {}
+
+  '@types/estree@1.0.9': {}
+
+  '@types/hast@3.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
+  '@types/mdast@4.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
+  '@types/mdx@2.0.13': {}
+
+  '@types/ms@2.1.0': {}
+
+  '@types/node@22.19.19':
+    dependencies:
+      undici-types: 6.21.0
+
+  '@types/prop-types@15.7.15': {}
+
+  '@types/react-dom@18.3.7(@types/react@18.3.28)':
+    dependencies:
+      '@types/react': 18.3.28
+
+  '@types/react@18.3.28':
+    dependencies:
+      '@types/prop-types': 15.7.15
+      csstype: 3.2.3
+
+  '@types/unist@2.0.11': {}
+
+  '@types/unist@3.0.3': {}
+
+  '@ungap/structured-clone@1.3.1': {}
+
+  '@vitejs/plugin-react@4.7.0(vite@5.4.21(@types/node@22.19.19))':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.29.0)
+      '@rolldown/pluginutils': 1.0.0-beta.27
+      '@types/babel__core': 7.20.5
+      react-refresh: 0.17.0
+      vite: 5.4.21(@types/node@22.19.19)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vitest/expect@2.1.9':
+    dependencies:
+      '@vitest/spy': 2.1.9
+      '@vitest/utils': 2.1.9
+      chai: 5.3.3
+      tinyrainbow: 1.2.0
+
+  '@vitest/mocker@2.1.9(vite@5.4.21(@types/node@22.19.19))':
+    dependencies:
+      '@vitest/spy': 2.1.9
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+    optionalDependencies:
+      vite: 5.4.21(@types/node@22.19.19)
+
+  '@vitest/pretty-format@2.1.9':
+    dependencies:
+      tinyrainbow: 1.2.0
+
+  '@vitest/runner@2.1.9':
+    dependencies:
+      '@vitest/utils': 2.1.9
+      pathe: 1.1.2
+
+  '@vitest/snapshot@2.1.9':
+    dependencies:
+      '@vitest/pretty-format': 2.1.9
+      magic-string: 0.30.21
+      pathe: 1.1.2
+
+  '@vitest/spy@2.1.9':
+    dependencies:
+      tinyspy: 3.0.2
+
+  '@vitest/utils@2.1.9':
+    dependencies:
+      '@vitest/pretty-format': 2.1.9
+      loupe: 3.2.1
+      tinyrainbow: 1.2.0
+
+  '@volar/language-core@2.4.28':
+    dependencies:
+      '@volar/source-map': 2.4.28
+
+  '@volar/source-map@2.4.28': {}
+
+  '@volar/typescript@2.4.28':
+    dependencies:
+      '@volar/language-core': 2.4.28
+      path-browserify: 1.0.1
+      vscode-uri: 3.1.0
+
+  '@vue/compiler-core@3.5.34':
+    dependencies:
+      '@babel/parser': 7.29.3
+      '@vue/shared': 3.5.34
+      entities: 7.0.1
+      estree-walker: 2.0.2
+      source-map-js: 1.2.1
+
+  '@vue/compiler-dom@3.5.34':
+    dependencies:
+      '@vue/compiler-core': 3.5.34
+      '@vue/shared': 3.5.34
+
+  '@vue/compiler-vue2@2.7.16':
+    dependencies:
+      de-indent: 1.0.2
+      he: 1.2.0
+
+  '@vue/language-core@2.2.0(typescript@5.9.3)':
+    dependencies:
+      '@volar/language-core': 2.4.28
+      '@vue/compiler-dom': 3.5.34
+      '@vue/compiler-vue2': 2.7.16
+      '@vue/shared': 3.5.34
+      alien-signals: 0.4.14
+      minimatch: 9.0.9
+      muggle-string: 0.4.1
+      path-browserify: 1.0.1
+    optionalDependencies:
+      typescript: 5.9.3
+
+  '@vue/shared@3.5.34': {}
+
+  acorn-jsx@5.3.2(acorn@8.16.0):
+    dependencies:
+      acorn: 8.16.0
+
+  acorn@8.16.0: {}
+
+  agent-base@7.1.4: {}
+
+  ajv-draft-04@1.0.0(ajv@8.18.0):
+    optionalDependencies:
+      ajv: 8.18.0
+
+  ajv-formats@3.0.1(ajv@8.18.0):
+    optionalDependencies:
+      ajv: 8.18.0
+
+  ajv@8.18.0:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-uri: 3.1.2
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+
+  alien-signals@0.4.14: {}
+
+  ansi-regex@5.0.1: {}
+
+  ansi-styles@5.2.0: {}
+
+  any-promise@1.3.0: {}
+
+  anymatch@3.1.3:
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.2
+
+  arg@5.0.2: {}
+
+  argparse@1.0.10:
+    dependencies:
+      sprintf-js: 1.0.3
+
+  aria-query@5.3.0:
+    dependencies:
+      dequal: 2.0.3
+
+  aria-query@5.3.2: {}
+
+  assertion-error@2.0.1: {}
+
+  astring@1.9.0: {}
+
+  asynckit@0.4.0: {}
+
+  autoprefixer@10.5.0(postcss@8.5.15):
+    dependencies:
+      browserslist: 4.28.2
+      caniuse-lite: 1.0.30001793
+      fraction.js: 5.3.4
+      picocolors: 1.1.1
+      postcss: 8.5.15
+      postcss-value-parser: 4.2.0
+
+  bail@2.0.2: {}
+
+  balanced-match@1.0.2: {}
+
+  balanced-match@4.0.4: {}
+
+  baseline-browser-mapping@2.10.31: {}
+
+  binary-extensions@2.3.0: {}
+
+  brace-expansion@2.1.0:
+    dependencies:
+      balanced-match: 1.0.2
+
+  brace-expansion@5.0.6:
+    dependencies:
+      balanced-match: 4.0.4
+
+  braces@3.0.3:
+    dependencies:
+      fill-range: 7.1.1
+
+  browserslist@4.28.2:
+    dependencies:
+      baseline-browser-mapping: 2.10.31
+      caniuse-lite: 1.0.30001793
+      electron-to-chromium: 1.5.359
+      node-releases: 2.0.44
+      update-browserslist-db: 1.2.3(browserslist@4.28.2)
+
+  cac@6.7.14: {}
+
+  call-bind-apply-helpers@1.0.2:
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+
+  camelcase-css@2.0.1: {}
+
+  caniuse-lite@1.0.30001793: {}
+
+  ccount@2.0.1: {}
+
+  chai@5.3.3:
+    dependencies:
+      assertion-error: 2.0.1
+      check-error: 2.1.3
+      deep-eql: 5.0.2
+      loupe: 3.2.1
+      pathval: 2.0.1
+
+  character-entities-html4@2.1.0: {}
+
+  character-entities-legacy@3.0.0: {}
+
+  character-entities@2.0.2: {}
+
+  character-reference-invalid@2.0.1: {}
+
+  check-error@2.1.3: {}
+
+  chokidar@3.6.0:
+    dependencies:
+      anymatch: 3.1.3
+      braces: 3.0.3
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.3
+
+  client-only@0.0.1: {}
+
+  collapse-white-space@2.1.0: {}
+
+  combined-stream@1.0.8:
+    dependencies:
+      delayed-stream: 1.0.0
+
+  comma-separated-tokens@2.0.3: {}
+
+  commander@4.1.1: {}
+
+  compare-versions@6.1.1: {}
+
+  confbox@0.1.8: {}
+
+  confbox@0.2.4: {}
+
+  convert-source-map@2.0.0: {}
+
+  css.escape@1.5.1: {}
+
+  cssesc@3.0.0: {}
+
+  cssstyle@4.6.0:
+    dependencies:
+      '@asamuzakjp/css-color': 3.2.0
+      rrweb-cssom: 0.8.0
+
+  csstype@3.2.3: {}
+
+  data-urls@5.0.0:
+    dependencies:
+      whatwg-mimetype: 4.0.0
+      whatwg-url: 14.2.0
+
+  de-indent@1.0.2: {}
+
+  debug@4.4.3:
+    dependencies:
+      ms: 2.1.3
+
+  decimal.js@10.6.0: {}
+
+  decode-named-character-reference@1.3.0:
+    dependencies:
+      character-entities: 2.0.2
+
+  deep-eql@5.0.2: {}
+
+  delayed-stream@1.0.0: {}
+
+  dequal@2.0.3: {}
+
+  detect-libc@2.1.2:
+    optional: true
+
+  devlop@1.1.0:
+    dependencies:
+      dequal: 2.0.3
+
+  didyoumean@1.2.2: {}
+
+  diff@8.0.4: {}
+
+  dlv@1.1.3: {}
+
+  dom-accessibility-api@0.5.16: {}
+
+  dom-accessibility-api@0.6.3: {}
+
+  dunder-proto@1.0.1:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
+  electron-to-chromium@1.5.359: {}
+
+  entities@6.0.1: {}
+
+  entities@7.0.1: {}
+
+  es-define-property@1.0.1: {}
+
+  es-errors@1.3.0: {}
+
+  es-module-lexer@1.7.0: {}
+
+  es-object-atoms@1.1.1:
+    dependencies:
+      es-errors: 1.3.0
+
+  es-set-tostringtag@2.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.3
+
+  esast-util-from-estree@2.0.0:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      devlop: 1.1.0
+      estree-util-visit: 2.0.0
+      unist-util-position-from-estree: 2.0.0
+
+  esast-util-from-js@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      acorn: 8.16.0
+      esast-util-from-estree: 2.0.0
+      vfile-message: 4.0.3
+
+  esbuild@0.21.5:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.21.5
+      '@esbuild/android-arm': 0.21.5
+      '@esbuild/android-arm64': 0.21.5
+      '@esbuild/android-x64': 0.21.5
+      '@esbuild/darwin-arm64': 0.21.5
+      '@esbuild/darwin-x64': 0.21.5
+      '@esbuild/freebsd-arm64': 0.21.5
+      '@esbuild/freebsd-x64': 0.21.5
+      '@esbuild/linux-arm': 0.21.5
+      '@esbuild/linux-arm64': 0.21.5
+      '@esbuild/linux-ia32': 0.21.5
+      '@esbuild/linux-loong64': 0.21.5
+      '@esbuild/linux-mips64el': 0.21.5
+      '@esbuild/linux-ppc64': 0.21.5
+      '@esbuild/linux-riscv64': 0.21.5
+      '@esbuild/linux-s390x': 0.21.5
+      '@esbuild/linux-x64': 0.21.5
+      '@esbuild/netbsd-x64': 0.21.5
+      '@esbuild/openbsd-x64': 0.21.5
+      '@esbuild/sunos-x64': 0.21.5
+      '@esbuild/win32-arm64': 0.21.5
+      '@esbuild/win32-ia32': 0.21.5
+      '@esbuild/win32-x64': 0.21.5
+
+  escalade@3.2.0: {}
+
+  estree-util-attach-comments@3.0.0:
+    dependencies:
+      '@types/estree': 1.0.9
+
+  estree-util-build-jsx@3.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
+      estree-walker: 3.0.3
+
+  estree-util-is-identifier-name@3.0.0: {}
+
+  estree-util-scope@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.9
+      devlop: 1.1.0
+
+  estree-util-to-js@2.0.0:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      astring: 1.9.0
+      source-map: 0.7.6
+
+  estree-util-visit@2.0.0:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/unist': 3.0.3
+
+  estree-walker@2.0.2: {}
+
+  estree-walker@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.9
+
+  expect-type@1.3.0: {}
+
+  exsolve@1.0.8: {}
+
+  extend@3.0.2: {}
+
+  fast-deep-equal@3.1.3: {}
+
+  fast-glob@3.3.3:
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.8
+
+  fast-uri@3.1.2: {}
+
+  fastq@1.20.1:
+    dependencies:
+      reusify: 1.1.0
+
+  fdir@6.5.0(picomatch@4.0.4):
+    optionalDependencies:
+      picomatch: 4.0.4
+
+  fill-range@7.1.1:
+    dependencies:
+      to-regex-range: 5.0.1
+
+  form-data@4.0.5:
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      es-set-tostringtag: 2.1.0
+      hasown: 2.0.3
+      mime-types: 2.1.35
+
+  fraction.js@5.3.4: {}
+
+  fs-extra@11.3.5:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.2.1
+      universalify: 2.0.1
+
+  fsevents@2.3.3:
+    optional: true
+
+  function-bind@1.1.2: {}
+
+  gensync@1.0.0-beta.2: {}
+
+  get-intrinsic@1.3.0:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      function-bind: 1.1.2
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.3
+      math-intrinsics: 1.1.0
+
+  get-proto@1.0.1:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-object-atoms: 1.1.1
+
+  glob-parent@5.1.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob-parent@6.0.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  gopd@1.2.0: {}
+
+  graceful-fs@4.2.11: {}
+
+  has-flag@4.0.0: {}
+
+  has-symbols@1.1.0: {}
+
+  has-tostringtag@1.0.2:
+    dependencies:
+      has-symbols: 1.1.0
+
+  hasown@2.0.3:
+    dependencies:
+      function-bind: 1.1.2
+
+  hast-util-from-html@2.0.3:
+    dependencies:
+      '@types/hast': 3.0.4
+      devlop: 1.1.0
+      hast-util-from-parse5: 8.0.3
+      parse5: 7.3.0
+      vfile: 6.0.3
+      vfile-message: 4.0.3
+
+  hast-util-from-parse5@8.0.3:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      devlop: 1.1.0
+      hastscript: 9.0.1
+      property-information: 7.1.0
+      vfile: 6.0.3
+      vfile-location: 5.0.3
+      web-namespaces: 2.0.1
+
+  hast-util-parse-selector@4.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+
+  hast-util-to-estree@3.1.3:
+    dependencies:
+      '@types/estree': 1.0.9
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      comma-separated-tokens: 2.0.3
+      devlop: 1.1.0
+      estree-util-attach-comments: 3.0.0
+      estree-util-is-identifier-name: 3.0.0
+      hast-util-whitespace: 3.0.0
+      mdast-util-mdx-expression: 2.0.1
+      mdast-util-mdx-jsx: 3.2.0
+      mdast-util-mdxjs-esm: 2.0.1
+      property-information: 7.1.0
+      space-separated-tokens: 2.0.2
+      style-to-js: 1.1.21
+      unist-util-position: 5.0.0
+      zwitch: 2.0.4
+    transitivePeerDependencies:
+      - supports-color
+
+  hast-util-to-html@9.0.5:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      comma-separated-tokens: 2.0.3
+      hast-util-whitespace: 3.0.0
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.2.1
+      property-information: 7.1.0
+      space-separated-tokens: 2.0.2
+      stringify-entities: 4.0.4
+      zwitch: 2.0.4
+
+  hast-util-to-jsx-runtime@2.3.6:
+    dependencies:
+      '@types/estree': 1.0.9
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      comma-separated-tokens: 2.0.3
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
+      hast-util-whitespace: 3.0.0
+      mdast-util-mdx-expression: 2.0.1
+      mdast-util-mdx-jsx: 3.2.0
+      mdast-util-mdxjs-esm: 2.0.1
+      property-information: 7.1.0
+      space-separated-tokens: 2.0.2
+      style-to-js: 1.1.21
+      unist-util-position: 5.0.0
+      vfile-message: 4.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  hast-util-to-string@3.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+
+  hast-util-whitespace@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+
+  hastscript@9.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      comma-separated-tokens: 2.0.3
+      hast-util-parse-selector: 4.0.0
+      property-information: 7.1.0
+      space-separated-tokens: 2.0.2
+
+  he@1.2.0: {}
+
+  html-encoding-sniffer@4.0.0:
+    dependencies:
+      whatwg-encoding: 3.1.1
+
+  html-void-elements@3.0.0: {}
+
+  http-proxy-agent@7.0.2:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  https-proxy-agent@7.0.6:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  iconv-lite@0.6.3:
+    dependencies:
+      safer-buffer: 2.1.2
+
+  import-lazy@4.0.0: {}
+
+  indent-string@4.0.0: {}
+
+  inline-style-parser@0.2.7: {}
+
+  is-alphabetical@2.0.1: {}
+
+  is-alphanumerical@2.0.1:
+    dependencies:
+      is-alphabetical: 2.0.1
+      is-decimal: 2.0.1
+
+  is-binary-path@2.1.0:
+    dependencies:
+      binary-extensions: 2.3.0
+
+  is-core-module@2.16.2:
+    dependencies:
+      hasown: 2.0.3
+
+  is-decimal@2.0.1: {}
+
+  is-extglob@2.1.1: {}
+
+  is-glob@4.0.3:
+    dependencies:
+      is-extglob: 2.1.1
+
+  is-hexadecimal@2.0.1: {}
+
+  is-number@7.0.0: {}
+
+  is-plain-obj@4.1.0: {}
+
+  is-potential-custom-element-name@1.0.1: {}
+
+  jiti@1.21.7: {}
+
+  jju@1.4.0: {}
+
+  js-tokens@4.0.0: {}
+
+  jsdom@25.0.1:
+    dependencies:
+      cssstyle: 4.6.0
+      data-urls: 5.0.0
+      decimal.js: 10.6.0
+      form-data: 4.0.5
+      html-encoding-sniffer: 4.0.0
+      http-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.6
+      is-potential-custom-element-name: 1.0.1
+      nwsapi: 2.2.23
+      parse5: 7.3.0
+      rrweb-cssom: 0.7.1
+      saxes: 6.0.0
+      symbol-tree: 3.2.4
+      tough-cookie: 5.1.2
+      w3c-xmlserializer: 5.0.0
+      webidl-conversions: 7.0.0
+      whatwg-encoding: 3.1.1
+      whatwg-mimetype: 4.0.0
+      whatwg-url: 14.2.0
+      ws: 8.20.1
+      xml-name-validator: 5.0.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
+  jsesc@3.1.0: {}
+
+  json-schema-traverse@1.0.0: {}
+
+  json5@2.2.3: {}
+
+  jsonfile@6.2.1:
+    dependencies:
+      universalify: 2.0.1
+    optionalDependencies:
+      graceful-fs: 4.2.11
+
+  kolorist@1.8.0: {}
+
+  lilconfig@3.1.3: {}
+
+  lines-and-columns@1.2.4: {}
+
+  local-pkg@1.1.2:
+    dependencies:
+      mlly: 1.8.2
+      pkg-types: 2.3.1
+      quansync: 0.2.11
+
+  longest-streak@3.1.0: {}
+
+  loose-envify@1.4.0:
+    dependencies:
+      js-tokens: 4.0.0
+
+  loupe@3.2.1: {}
+
+  lru-cache@10.4.3: {}
+
+  lru-cache@5.1.1:
+    dependencies:
+      yallist: 3.1.1
+
+  lz-string@1.5.0: {}
+
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  markdown-extensions@2.0.0: {}
+
+  math-intrinsics@1.1.0: {}
+
+  mdast-util-from-markdown@2.0.3:
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      decode-named-character-reference: 1.3.0
+      devlop: 1.1.0
+      mdast-util-to-string: 4.0.0
+      micromark: 4.0.2
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-decode-string: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      unist-util-stringify-position: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdx-expression@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdx-jsx@3.2.0:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+      parse-entities: 4.0.2
+      stringify-entities: 4.0.4
+      unist-util-stringify-position: 4.0.0
+      vfile-message: 4.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdx@3.0.0:
+    dependencies:
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-mdx-expression: 2.0.1
+      mdast-util-mdx-jsx: 3.2.0
+      mdast-util-mdxjs-esm: 2.0.1
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdxjs-esm@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.3
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-phrasing@4.1.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      unist-util-is: 6.0.1
+
+  mdast-util-to-hast@13.2.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@ungap/structured-clone': 1.3.1
+      devlop: 1.1.0
+      micromark-util-sanitize-uri: 2.0.1
+      trim-lines: 3.0.1
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.1.0
+      vfile: 6.0.3
+
+  mdast-util-to-markdown@2.1.2:
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      longest-streak: 3.1.0
+      mdast-util-phrasing: 4.1.0
+      mdast-util-to-string: 4.0.0
+      micromark-util-classify-character: 2.0.1
+      micromark-util-decode-string: 2.0.1
+      unist-util-visit: 5.1.0
+      zwitch: 2.0.4
+
+  mdast-util-to-string@4.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+
+  merge2@1.4.1: {}
+
+  micromark-core-commonmark@2.0.3:
+    dependencies:
+      decode-named-character-reference: 1.3.0
+      devlop: 1.1.0
+      micromark-factory-destination: 2.0.1
+      micromark-factory-label: 2.0.1
+      micromark-factory-space: 2.0.1
+      micromark-factory-title: 2.0.1
+      micromark-factory-whitespace: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-html-tag-name: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-subtokenize: 2.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-mdx-expression@3.0.1:
+    dependencies:
+      '@types/estree': 1.0.9
+      devlop: 1.1.0
+      micromark-factory-mdx-expression: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-events-to-acorn: 2.0.3
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-mdx-jsx@3.0.2:
+    dependencies:
+      '@types/estree': 1.0.9
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
+      micromark-factory-mdx-expression: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-events-to-acorn: 2.0.3
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      vfile-message: 4.0.3
+
+  micromark-extension-mdx-md@2.0.0:
+    dependencies:
+      micromark-util-types: 2.0.2
+
+  micromark-extension-mdxjs-esm@3.0.0:
+    dependencies:
+      '@types/estree': 1.0.9
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.3
+      micromark-util-character: 2.1.1
+      micromark-util-events-to-acorn: 2.0.3
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      unist-util-position-from-estree: 2.0.0
+      vfile-message: 4.0.3
+
+  micromark-extension-mdxjs@3.0.0:
+    dependencies:
+      acorn: 8.16.0
+      acorn-jsx: 5.3.2(acorn@8.16.0)
+      micromark-extension-mdx-expression: 3.0.1
+      micromark-extension-mdx-jsx: 3.0.2
+      micromark-extension-mdx-md: 2.0.0
+      micromark-extension-mdxjs-esm: 3.0.0
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-destination@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-label@2.0.1:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-mdx-expression@2.0.3:
+    dependencies:
+      '@types/estree': 1.0.9
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-events-to-acorn: 2.0.3
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      unist-util-position-from-estree: 2.0.0
+      vfile-message: 4.0.3
+
+  micromark-factory-space@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-title@2.0.1:
+    dependencies:
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-whitespace@2.0.1:
+    dependencies:
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-character@2.1.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-chunked@2.0.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-classify-character@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-combine-extensions@2.0.1:
+    dependencies:
+      micromark-util-chunked: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-decode-numeric-character-reference@2.0.2:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-decode-string@2.0.1:
+    dependencies:
+      decode-named-character-reference: 1.3.0
+      micromark-util-character: 2.1.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-encode@2.0.1: {}
+
+  micromark-util-events-to-acorn@2.0.3:
+    dependencies:
+      '@types/estree': 1.0.9
+      '@types/unist': 3.0.3
+      devlop: 1.1.0
+      estree-util-visit: 2.0.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      vfile-message: 4.0.3
+
+  micromark-util-html-tag-name@2.0.1: {}
+
+  micromark-util-normalize-identifier@2.0.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-resolve-all@2.0.1:
+    dependencies:
+      micromark-util-types: 2.0.2
+
+  micromark-util-sanitize-uri@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-encode: 2.0.1
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-subtokenize@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-symbol@2.0.1: {}
+
+  micromark-util-types@2.0.2: {}
+
+  micromark@4.0.2:
+    dependencies:
+      '@types/debug': 4.1.13
+      debug: 4.4.3
+      decode-named-character-reference: 1.3.0
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-encode: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-subtokenize: 2.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  micromatch@4.0.8:
+    dependencies:
+      braces: 3.0.3
+      picomatch: 2.3.2
+
+  mime-db@1.52.0: {}
+
+  mime-types@2.1.35:
+    dependencies:
+      mime-db: 1.52.0
+
+  min-indent@1.0.1: {}
+
+  minimatch@10.2.3:
+    dependencies:
+      brace-expansion: 5.0.6
+
+  minimatch@9.0.9:
+    dependencies:
+      brace-expansion: 2.1.0
+
+  mlly@1.8.2:
+    dependencies:
+      acorn: 8.16.0
+      pathe: 2.0.3
+      pkg-types: 1.3.1
+      ufo: 1.6.4
+
+  ms@2.1.3: {}
+
+  muggle-string@0.4.1: {}
+
+  mz@2.7.0:
+    dependencies:
+      any-promise: 1.3.0
+      object-assign: 4.1.1
+      thenify-all: 1.6.0
+
+  nanoid@3.3.12: {}
+
+  next@15.5.18(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@next/env': 15.5.18
+      '@swc/helpers': 0.5.15
+      caniuse-lite: 1.0.30001793
+      postcss: 8.4.31
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      styled-jsx: 5.1.6(react@18.3.1)
+    optionalDependencies:
+      '@next/swc-darwin-arm64': 15.5.18
+      '@next/swc-darwin-x64': 15.5.18
+      '@next/swc-linux-arm64-gnu': 15.5.18
+      '@next/swc-linux-arm64-musl': 15.5.18
+      '@next/swc-linux-x64-gnu': 15.5.18
+      '@next/swc-linux-x64-musl': 15.5.18
+      '@next/swc-win32-arm64-msvc': 15.5.18
+      '@next/swc-win32-x64-msvc': 15.5.18
+      sharp: 0.34.5
+    transitivePeerDependencies:
+      - '@babel/core'
+      - babel-plugin-macros
+
+  node-releases@2.0.44: {}
+
+  normalize-path@3.0.0: {}
+
+  nwsapi@2.2.23: {}
+
+  object-assign@4.1.1: {}
+
+  object-hash@3.0.0: {}
+
+  oniguruma-parser@0.12.2: {}
+
+  oniguruma-to-es@4.3.6:
+    dependencies:
+      oniguruma-parser: 0.12.2
+      regex: 6.1.0
+      regex-recursion: 6.0.2
+
+  parse-entities@4.0.2:
+    dependencies:
+      '@types/unist': 2.0.11
+      character-entities-legacy: 3.0.0
+      character-reference-invalid: 2.0.1
+      decode-named-character-reference: 1.3.0
+      is-alphanumerical: 2.0.1
+      is-decimal: 2.0.1
+      is-hexadecimal: 2.0.1
+
+  parse-numeric-range@1.3.0: {}
+
+  parse5@7.3.0:
+    dependencies:
+      entities: 6.0.1
+
+  path-browserify@1.0.1: {}
+
+  path-parse@1.0.7: {}
+
+  pathe@1.1.2: {}
+
+  pathe@2.0.3: {}
+
+  pathval@2.0.1: {}
+
+  picocolors@1.1.1: {}
+
+  picomatch@2.3.2: {}
+
+  picomatch@4.0.4: {}
+
+  pify@2.3.0: {}
+
+  pirates@4.0.7: {}
+
+  pkg-types@1.3.1:
+    dependencies:
+      confbox: 0.1.8
+      mlly: 1.8.2
+      pathe: 2.0.3
+
+  pkg-types@2.3.1:
+    dependencies:
+      confbox: 0.2.4
+      exsolve: 1.0.8
+      pathe: 2.0.3
+
+  postcss-import@15.1.0(postcss@8.5.15):
+    dependencies:
+      postcss: 8.5.15
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.12
+
+  postcss-js@4.1.0(postcss@8.5.15):
+    dependencies:
+      camelcase-css: 2.0.1
+      postcss: 8.5.15
+
+  postcss-load-config@6.0.1(jiti@1.21.7)(postcss@8.5.15):
+    dependencies:
+      lilconfig: 3.1.3
+    optionalDependencies:
+      jiti: 1.21.7
+      postcss: 8.5.15
+
+  postcss-nested@6.2.0(postcss@8.5.15):
+    dependencies:
+      postcss: 8.5.15
+      postcss-selector-parser: 6.1.2
+
+  postcss-selector-parser@6.1.2:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
+  postcss-value-parser@4.2.0: {}
+
+  postcss@8.4.31:
+    dependencies:
+      nanoid: 3.3.12
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  postcss@8.5.15:
+    dependencies:
+      nanoid: 3.3.12
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  pretty-format@27.5.1:
+    dependencies:
+      ansi-regex: 5.0.1
+      ansi-styles: 5.2.0
+      react-is: 17.0.2
+
+  property-information@7.1.0: {}
+
+  punycode@2.3.1: {}
+
+  quansync@0.2.11: {}
+
+  queue-microtask@1.2.3: {}
+
+  react-dom@18.3.1(react@18.3.1):
+    dependencies:
+      loose-envify: 1.4.0
+      react: 18.3.1
+      scheduler: 0.23.2
+
+  react-is@17.0.2: {}
+
+  react-refresh@0.17.0: {}
+
+  react@18.3.1:
+    dependencies:
+      loose-envify: 1.4.0
+
+  read-cache@1.0.0:
+    dependencies:
+      pify: 2.3.0
+
+  readdirp@3.6.0:
+    dependencies:
+      picomatch: 2.3.2
+
+  recma-build-jsx@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.9
+      estree-util-build-jsx: 3.0.1
+      vfile: 6.0.3
+
+  recma-jsx@1.0.1(acorn@8.16.0):
+    dependencies:
+      acorn: 8.16.0
+      acorn-jsx: 5.3.2(acorn@8.16.0)
+      estree-util-to-js: 2.0.0
+      recma-parse: 1.0.0
+      recma-stringify: 1.0.0
+      unified: 11.0.5
+
+  recma-parse@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.9
+      esast-util-from-js: 2.0.1
+      unified: 11.0.5
+      vfile: 6.0.3
+
+  recma-stringify@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.9
+      estree-util-to-js: 2.0.0
+      unified: 11.0.5
+      vfile: 6.0.3
+
+  redent@3.0.0:
+    dependencies:
+      indent-string: 4.0.0
+      strip-indent: 3.0.0
+
+  regex-recursion@6.0.2:
+    dependencies:
+      regex-utilities: 2.3.0
+
+  regex-utilities@2.3.0: {}
+
+  regex@6.1.0:
+    dependencies:
+      regex-utilities: 2.3.0
+
+  rehype-parse@9.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-from-html: 2.0.3
+      unified: 11.0.5
+
+  rehype-pretty-code@0.14.3(shiki@4.1.0):
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-to-string: 3.0.1
+      parse-numeric-range: 1.3.0
+      rehype-parse: 9.0.1
+      shiki: 4.1.0
+      unified: 11.0.5
+      unist-util-visit: 5.1.0
+
+  rehype-recma@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.9
+      '@types/hast': 3.0.4
+      hast-util-to-estree: 3.1.3
+    transitivePeerDependencies:
+      - supports-color
+
+  remark-mdx@3.1.1:
+    dependencies:
+      mdast-util-mdx: 3.0.0
+      micromark-extension-mdxjs: 3.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  remark-parse@11.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-from-markdown: 2.0.3
+      micromark-util-types: 2.0.2
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  remark-rehype@11.1.2:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      mdast-util-to-hast: 13.2.1
+      unified: 11.0.5
+      vfile: 6.0.3
+
+  require-from-string@2.0.2: {}
+
+  resolve@1.22.12:
+    dependencies:
+      es-errors: 1.3.0
+      is-core-module: 2.16.2
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+
+  reusify@1.1.0: {}
+
+  rollup@4.60.4:
+    dependencies:
+      '@types/estree': 1.0.8
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.60.4
+      '@rollup/rollup-android-arm64': 4.60.4
+      '@rollup/rollup-darwin-arm64': 4.60.4
+      '@rollup/rollup-darwin-x64': 4.60.4
+      '@rollup/rollup-freebsd-arm64': 4.60.4
+      '@rollup/rollup-freebsd-x64': 4.60.4
+      '@rollup/rollup-linux-arm-gnueabihf': 4.60.4
+      '@rollup/rollup-linux-arm-musleabihf': 4.60.4
+      '@rollup/rollup-linux-arm64-gnu': 4.60.4
+      '@rollup/rollup-linux-arm64-musl': 4.60.4
+      '@rollup/rollup-linux-loong64-gnu': 4.60.4
+      '@rollup/rollup-linux-loong64-musl': 4.60.4
+      '@rollup/rollup-linux-ppc64-gnu': 4.60.4
+      '@rollup/rollup-linux-ppc64-musl': 4.60.4
+      '@rollup/rollup-linux-riscv64-gnu': 4.60.4
+      '@rollup/rollup-linux-riscv64-musl': 4.60.4
+      '@rollup/rollup-linux-s390x-gnu': 4.60.4
+      '@rollup/rollup-linux-x64-gnu': 4.60.4
+      '@rollup/rollup-linux-x64-musl': 4.60.4
+      '@rollup/rollup-openbsd-x64': 4.60.4
+      '@rollup/rollup-openharmony-arm64': 4.60.4
+      '@rollup/rollup-win32-arm64-msvc': 4.60.4
+      '@rollup/rollup-win32-ia32-msvc': 4.60.4
+      '@rollup/rollup-win32-x64-gnu': 4.60.4
+      '@rollup/rollup-win32-x64-msvc': 4.60.4
+      fsevents: 2.3.3
+
+  rrweb-cssom@0.7.1: {}
+
+  rrweb-cssom@0.8.0: {}
+
+  run-parallel@1.2.0:
+    dependencies:
+      queue-microtask: 1.2.3
+
+  safer-buffer@2.1.2: {}
+
+  saxes@6.0.0:
+    dependencies:
+      xmlchars: 2.2.0
+
+  scheduler@0.23.2:
+    dependencies:
+      loose-envify: 1.4.0
+
+  semver@6.3.1: {}
+
+  semver@7.7.4: {}
+
+  semver@7.8.0:
+    optional: true
+
+  sharp@0.34.5:
+    dependencies:
+      '@img/colour': 1.1.0
+      detect-libc: 2.1.2
+      semver: 7.8.0
+    optionalDependencies:
+      '@img/sharp-darwin-arm64': 0.34.5
+      '@img/sharp-darwin-x64': 0.34.5
+      '@img/sharp-libvips-darwin-arm64': 1.2.4
+      '@img/sharp-libvips-darwin-x64': 1.2.4
+      '@img/sharp-libvips-linux-arm': 1.2.4
+      '@img/sharp-libvips-linux-arm64': 1.2.4
+      '@img/sharp-libvips-linux-ppc64': 1.2.4
+      '@img/sharp-libvips-linux-riscv64': 1.2.4
+      '@img/sharp-libvips-linux-s390x': 1.2.4
+      '@img/sharp-libvips-linux-x64': 1.2.4
+      '@img/sharp-libvips-linuxmusl-arm64': 1.2.4
+      '@img/sharp-libvips-linuxmusl-x64': 1.2.4
+      '@img/sharp-linux-arm': 0.34.5
+      '@img/sharp-linux-arm64': 0.34.5
+      '@img/sharp-linux-ppc64': 0.34.5
+      '@img/sharp-linux-riscv64': 0.34.5
+      '@img/sharp-linux-s390x': 0.34.5
+      '@img/sharp-linux-x64': 0.34.5
+      '@img/sharp-linuxmusl-arm64': 0.34.5
+      '@img/sharp-linuxmusl-x64': 0.34.5
+      '@img/sharp-wasm32': 0.34.5
+      '@img/sharp-win32-arm64': 0.34.5
+      '@img/sharp-win32-ia32': 0.34.5
+      '@img/sharp-win32-x64': 0.34.5
+    optional: true
+
+  shiki@4.1.0:
+    dependencies:
+      '@shikijs/core': 4.1.0
+      '@shikijs/engine-javascript': 4.1.0
+      '@shikijs/engine-oniguruma': 4.1.0
+      '@shikijs/langs': 4.1.0
+      '@shikijs/themes': 4.1.0
+      '@shikijs/types': 4.1.0
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
+  siginfo@2.0.0: {}
+
+  source-map-js@1.2.1: {}
+
+  source-map@0.6.1: {}
+
+  source-map@0.7.6: {}
+
+  space-separated-tokens@2.0.2: {}
+
+  sprintf-js@1.0.3: {}
+
+  stackback@0.0.2: {}
+
+  std-env@3.10.0: {}
+
+  string-argv@0.3.2: {}
+
+  stringify-entities@4.0.4:
+    dependencies:
+      character-entities-html4: 2.1.0
+      character-entities-legacy: 3.0.0
+
+  strip-indent@3.0.0:
+    dependencies:
+      min-indent: 1.0.1
+
+  style-to-js@1.1.21:
+    dependencies:
+      style-to-object: 1.0.14
+
+  style-to-object@1.0.14:
+    dependencies:
+      inline-style-parser: 0.2.7
+
+  styled-jsx@5.1.6(react@18.3.1):
+    dependencies:
+      client-only: 0.0.1
+      react: 18.3.1
+
+  sucrase@3.35.1:
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      commander: 4.1.1
+      lines-and-columns: 1.2.4
+      mz: 2.7.0
+      pirates: 4.0.7
+      tinyglobby: 0.2.16
+      ts-interface-checker: 0.1.13
+
+  supports-color@8.1.1:
+    dependencies:
+      has-flag: 4.0.0
+
+  supports-preserve-symlinks-flag@1.0.0: {}
+
+  symbol-tree@3.2.4: {}
+
+  tailwindcss@3.4.19:
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      arg: 5.0.2
+      chokidar: 3.6.0
+      didyoumean: 1.2.2
+      dlv: 1.1.3
+      fast-glob: 3.3.3
+      glob-parent: 6.0.2
+      is-glob: 4.0.3
+      jiti: 1.21.7
+      lilconfig: 3.1.3
+      micromatch: 4.0.8
+      normalize-path: 3.0.0
+      object-hash: 3.0.0
+      picocolors: 1.1.1
+      postcss: 8.5.15
+      postcss-import: 15.1.0(postcss@8.5.15)
+      postcss-js: 4.1.0(postcss@8.5.15)
+      postcss-load-config: 6.0.1(jiti@1.21.7)(postcss@8.5.15)
+      postcss-nested: 6.2.0(postcss@8.5.15)
+      postcss-selector-parser: 6.1.2
+      resolve: 1.22.12
+      sucrase: 3.35.1
+    transitivePeerDependencies:
+      - tsx
+      - yaml
+
+  thenify-all@1.6.0:
+    dependencies:
+      thenify: 3.3.1
+
+  thenify@3.3.1:
+    dependencies:
+      any-promise: 1.3.0
+
+  tinybench@2.9.0: {}
+
+  tinyexec@0.3.2: {}
+
+  tinyglobby@0.2.16:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.4)
+      picomatch: 4.0.4
+
+  tinypool@1.1.1: {}
+
+  tinyrainbow@1.2.0: {}
+
+  tinyspy@3.0.2: {}
+
+  tldts-core@6.1.86: {}
+
+  tldts@6.1.86:
+    dependencies:
+      tldts-core: 6.1.86
+
+  to-regex-range@5.0.1:
+    dependencies:
+      is-number: 7.0.0
+
+  tough-cookie@5.1.2:
+    dependencies:
+      tldts: 6.1.86
+
+  tr46@5.1.1:
+    dependencies:
+      punycode: 2.3.1
+
+  trim-lines@3.0.1: {}
+
+  trough@2.2.0: {}
+
+  ts-interface-checker@0.1.13: {}
+
+  tslib@2.8.1: {}
+
+  turbo@2.9.14:
+    optionalDependencies:
+      '@turbo/darwin-64': 2.9.14
+      '@turbo/darwin-arm64': 2.9.14
+      '@turbo/linux-64': 2.9.14
+      '@turbo/linux-arm64': 2.9.14
+      '@turbo/windows-64': 2.9.14
+      '@turbo/windows-arm64': 2.9.14
+
+  typescript@5.9.3: {}
+
+  ufo@1.6.4: {}
+
+  undici-types@6.21.0: {}
+
+  unified@11.0.5:
+    dependencies:
+      '@types/unist': 3.0.3
+      bail: 2.0.2
+      devlop: 1.1.0
+      extend: 3.0.2
+      is-plain-obj: 4.1.0
+      trough: 2.2.0
+      vfile: 6.0.3
+
+  unist-util-is@6.0.1:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-position-from-estree@2.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-position@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-stringify-position@4.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-visit-parents@6.0.2:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.1
+
+  unist-util-visit@5.1.0:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.1
+      unist-util-visit-parents: 6.0.2
+
+  universalify@2.0.1: {}
+
+  update-browserslist-db@1.2.3(browserslist@4.28.2):
+    dependencies:
+      browserslist: 4.28.2
+      escalade: 3.2.0
+      picocolors: 1.1.1
+
+  util-deprecate@1.0.2: {}
+
+  vfile-location@5.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      vfile: 6.0.3
+
+  vfile-message@4.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-stringify-position: 4.0.0
+
+  vfile@6.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      vfile-message: 4.0.3
+
+  vite-node@2.1.9(@types/node@22.19.19):
+    dependencies:
+      cac: 6.7.14
+      debug: 4.4.3
+      es-module-lexer: 1.7.0
+      pathe: 1.1.2
+      vite: 5.4.21(@types/node@22.19.19)
+    transitivePeerDependencies:
+      - '@types/node'
+      - less
+      - lightningcss
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+
+  vite-plugin-dts@4.5.4(@types/node@22.19.19)(rollup@4.60.4)(typescript@5.9.3)(vite@5.4.21(@types/node@22.19.19)):
+    dependencies:
+      '@microsoft/api-extractor': 7.58.7(@types/node@22.19.19)
+      '@rollup/pluginutils': 5.3.0(rollup@4.60.4)
+      '@volar/typescript': 2.4.28
+      '@vue/language-core': 2.2.0(typescript@5.9.3)
+      compare-versions: 6.1.1
+      debug: 4.4.3
+      kolorist: 1.8.0
+      local-pkg: 1.1.2
+      magic-string: 0.30.21
+      typescript: 5.9.3
+    optionalDependencies:
+      vite: 5.4.21(@types/node@22.19.19)
+    transitivePeerDependencies:
+      - '@types/node'
+      - rollup
+      - supports-color
+
+  vite@5.4.21(@types/node@22.19.19):
+    dependencies:
+      esbuild: 0.21.5
+      postcss: 8.5.15
+      rollup: 4.60.4
+    optionalDependencies:
+      '@types/node': 22.19.19
+      fsevents: 2.3.3
+
+  vitest@2.1.9(@types/node@22.19.19)(jsdom@25.0.1):
+    dependencies:
+      '@vitest/expect': 2.1.9
+      '@vitest/mocker': 2.1.9(vite@5.4.21(@types/node@22.19.19))
+      '@vitest/pretty-format': 2.1.9
+      '@vitest/runner': 2.1.9
+      '@vitest/snapshot': 2.1.9
+      '@vitest/spy': 2.1.9
+      '@vitest/utils': 2.1.9
+      chai: 5.3.3
+      debug: 4.4.3
+      expect-type: 1.3.0
+      magic-string: 0.30.21
+      pathe: 1.1.2
+      std-env: 3.10.0
+      tinybench: 2.9.0
+      tinyexec: 0.3.2
+      tinypool: 1.1.1
+      tinyrainbow: 1.2.0
+      vite: 5.4.21(@types/node@22.19.19)
+      vite-node: 2.1.9(@types/node@22.19.19)
+      why-is-node-running: 2.3.0
+    optionalDependencies:
+      '@types/node': 22.19.19
+      jsdom: 25.0.1
+    transitivePeerDependencies:
+      - less
+      - lightningcss
+      - msw
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+
+  vscode-uri@3.1.0: {}
+
+  w3c-xmlserializer@5.0.0:
+    dependencies:
+      xml-name-validator: 5.0.0
+
+  web-namespaces@2.0.1: {}
+
+  webidl-conversions@7.0.0: {}
+
+  whatwg-encoding@3.1.1:
+    dependencies:
+      iconv-lite: 0.6.3
+
+  whatwg-mimetype@4.0.0: {}
+
+  whatwg-url@14.2.0:
+    dependencies:
+      tr46: 5.1.1
+      webidl-conversions: 7.0.0
+
+  why-is-node-running@2.3.0:
+    dependencies:
+      siginfo: 2.0.0
+      stackback: 0.0.2
+
+  ws@8.20.1: {}
+
+  xml-name-validator@5.0.0: {}
+
+  xmlchars@2.2.0: {}
+
+  yallist@3.1.1: {}
+
+  zwitch@2.0.4: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
new file mode 100644
index 0000000..18ec407
--- /dev/null
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,2 @@
+packages:
+  - 'packages/*'
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..6fd8b99
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
diff --git a/turbo.json b/turbo.json
new file mode 100644
index 0000000..5621115
--- /dev/null
+++ b/turbo.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://turbo.build/schema.json",
+  "globalDependencies": ["**/.env.*local"],
+  "tasks": {
+    "build": {
+      "dependsOn": ["^build"],
+      "outputs": ["dist/**", ".next/**", "out/**"]
+    },
+    "dev": {
+      "cache": false,
+      "persistent": true
+    },
+    "lint": {
+      "dependsOn": ["^build"]
+    },
+    "test": {
+      "dependsOn": ["^build"]
+    },
+    "clean": {
+      "cache": false
+    }
+  }
+}