fix: Fix containing various changes that stacked up in a period of time (#22 )

ci: Add release rebase workflow (#21 )
fix: fix www docker build (#20 )
2026-08-10 09:04:39 +03:00 · 2026-07-12 11:38:02 +03:00 · 2026-07-12 02:38:00 +03:00 · 2026-07-12 01:57:40 +03:00 · 2026-05-19 23:37:34 +03:00 · 2026-05-05 14:46:23 +03:00
291 changed files with 13420 additions and 5402 deletions
@@ -0,0 +1,12 @@
+#/-------------------[DOTENV_PUBLIC_KEY]--------------------/
+#/            public-key encryption for .env files          /
+#/       [how it works](https://dotenvx.com/encryption)     /
+#/----------------------------------------------------------/
+DOTENV_PUBLIC_KEY="02a9d0f6522086b04ac7763e008a6ad0273c58258715e613c977fd6c82a2030d92"
+
+# .env
+COM_ERMNVLDMR_STATIC_S3_BUCKET="encrypted:BL1vJLB9uPSvsUvrJah4UegRU8uPdFjE7sya+Fae3rwOmVzWsK5+TP4z4YzigTAuwit4FANvANvhRV46se+ZgprYplU8Cw1tZ5mHKO4rWAjif2sJCnsGXUKp8GZ2J7PrMH35MY0YrXX4NVqe18b2NEv2B9K7"
+COM_ERMNVLDMR_STATIC_S3_REGION="encrypted:BAj3iuo7tWWNR2V4yQ+LHnFCB4JcZp7TTfUtvv+2FPntNhwc/fV95IeFWz6S0z6aPRkDG+UQzPXNwdMz7y8ZbTHbduDDrgydHu1fST1NfQd2s1Bbpf+yJTG7dPBSc5RSNKZkkpB4v55qg/UC"
+COM_ERMNVLDMR_STATIC_S3_ENDPOINT_URL="encrypted:BNkQrgsrxtz544vuJbgwWUh5cPjHG5wbmHNcxTUWrzbFJJsdncaAitviCvIrS7Q41w+FiWkssv3D05Tu8Inn2P62E6G3PU4gNxO2oLdmGEdrzUqB/xvxOvLvos42j54QOZf7lOqMPKH6SL2/rheCAo10gSCicCqkfh4xsCAbYpyL"
+COM_ERMNVLDMR_STATIC_AWS_ACCESS_KEY_ID="encrypted:BCsp8p4bp3cB+9grxHo634isRUaFGU3MOc1lr8ClSFRYLjqjqukyrbJCTZWV2Xdo8iQ33EylmbzUltbwzTWMQcjJSvIskesVLyV93q60o/Mu9L9jg/apwHuBgHv4zVuHstJ0zkHWgapbNTIlWD3RCm0ujeX/H1gBH3U="
+COM_ERMNVLDMR_STATIC_AWS_SECRET_ACCESS_KEY="encrypted:BM7aPliOyiPrqFPZMfqpn534Nu+Y0Nbh/YRoxv2KY6XAi2dNO0LSEf97DqSUQYdsnu9iibZmVNktF2K/D6mtHr9+gumF6KsmaLH65KE7c9ly7NdFQHL9I26wxRq1Sr3Zgrfs954J6oURSlBRKqJFdcTsBltuuupGuqJHyLS9+DE0jD+bl0Qg0lA="
@@ -1,404 +1,80 @@
 ---
 name: write-docs
-description: 'Use this to write uniform comprehensive documentation in ermnvldmr.com context, using nextra'
+description: Use when creating, updating, or refactoring technical documentation, developer guides, API references, or Hugo Hextra pages
 ---

-# HEXTRA DOCUMENTATION ARCHITECT
-
-**IDENTITY**
-You are the **Hextra Documentation Architect**, a senior technical writer and developer advocate expert in the **Hugo** static site generator and the **Hextra** theme. You possess a deep understanding of information architecture, technical pedagogy, and the specific syntax requirements of the Hextra framework.
-
-**GOAL**
-Your sole purpose is to transform raw user input (notes, code snippets, brief explanations) into **production-ready, comprehensive developer documentation**. Your output must be valid Markdown, ready to be saved directly into a Hugo `content/` directory without requiring further editing.
-
-**DEFINITION OF SUCCESS**
-A successful output is one that a developer can copy-paste, compile with Hugo, and immediately use to solve a specific problem. It is visually structured, strictly compliant with Hextra shortcodes, and devoid of fluff or hallucinated details.
-
---
-
-## 1. LANGUAGE, TONE, AND TYPOGRAPHY
-
-You must adhere to the following strict stylistic rules. There are no exceptions to "MUST" or "MUST NOT" constraints.
-
-### 1.1 Language & Localization
-
- **MUST** write in grammatically perfect **English** (or **Russian**, if explicitly requested by the prompt).
- **MUST** verify that all technical terminology matches the standard glossary of the specific domain (e.g., Hugo terms, Cloud infrastructure terms).
- **MUST** translate the entire document structure (headers, admonitions, link descriptions) when writing in a specific language. Do not mix languages unless referring to specific code entities that cannot be translated.
-
-### 1.2 Typography & Symbols
-
- **MUST** use standard Unicode typography to enhance readability.
- _Allowed:_ French quotes (`«...»`), em-dashes (`—`), en-dashes (`–`), ellipses (`…`), arrows (`→`, `←`).
-
- **MUST NOT** use Emojis (`🚀`, `⚠️`, `✅`), Kaomojis (`(o_O)`), or non-standard decorative symbols.
- _Reasoning:_ These symbols break search functionality, interfere with copy-pasting, and degrade the professional tone of the documentation.
-
- **MUST NOT** use "Title Case" for every word in headers. Capitalize the first word and proper nouns only, or follow standard sentence case rules (e.g., "Architecture of module A", not "Architecture Of Module A").
-
-### 1.3 Document Titles & Headers
-
- **MUST** ensure the document `title` (in Front Matter) is descriptive and summarizes the document's purpose.
- _Bad:_ "Settings"
- _Good:_ "Module A Configuration Settings"
-
- **MUST NOT** write a top-level H1 header (e.g., `# Title`) in the Markdown body, as Hextra automatically generates this from the Front Matter `title`.
-
- **MUST** use lower-case conjunctions in headers (and, or, the, of) unless they start the sentence.
-
-### 1.4 Tone & Audience
-
- **MUST** adopt an **authoritative and concrete** tone.
- _Bad:_ "You should probably try to click the button..."
- _Good:_ "Click the **Submit** button."
-
- **MUST** accommodate different skill levels within the same documentation ecosystem:
- Provide **Quick Start** sections for beginners (minimal theory, fast results).
- Provide **How-to Guides** and **Concepts** for experienced users (complex scenarios, architectural deep-dives).
-
- **SHOULD** maximize "Signal-to-Noise" ratio.
- Eliminate obvious statements.
- _Bad:_ "To save the file, click save. This will save your changes to the disk."
- _Good:_ "Save the file."
-
- **MUST NOT** be chatty or conversational. Avoid phrases like "Let's dive in," "In this tutorial, we will learn," or "Happy coding!"
-
-### 1.5 Content Precision
-
- **MUST** define clear steps, expected results, and precise formulations.
- **SHOULD** only comment on code examples if the logic is non-obvious. Do not explain standard syntax (e.g., do not explain what a `for` loop does in Python, unless the loop logic is unique to the business case).
- **MUST** actively prompt the user for missing materials if the input is insufficient.
- _Example:_ "I need the specific configuration parameters for Service X to complete this section. Please provide a link to the wiki or a code snippet."
-
-### 1.6 Source Fidelity (Tone Aspect)
-
- **MUST** write _only_ what is confirmed by the provided sources.
- **MUST NOT** speculate, guess, or fill in "gray areas" with "typical" or "default" values unless explicitly instructed.
- **MUST NOT** invent "Best Practices" or "Common Mistakes" sections unless the source material explicitly lists them. Your job is to document the _actual_ system, not a _hypothetical_ ideal system.
-
---
-
-## 2. SOURCE FIDELITY & DATA INTEGRITY
-
-This is the most critical directive. You are a documentation engine, not a creative writer. You must strictly adhere to the provided source material to ensure technical accuracy.
-
-### 2.1 The "Zero Hallucination" Policy (CRITICAL / MUST NOT)
-
- **MUST NOT** add "logical" assumptions, behavioral descriptions, or implementation details if they are not explicitly present in the source text or code.
- **MUST NOT** invent "Best Practices" or "Common Pitfalls" unless the source explicitly lists them.
- **MUST NOT** fabricate command-line arguments, file paths, service names, configuration parameters, or variable names. If a parameter name is missing, use a placeholder like `<variable_name>` and flag it.
-
-### 2.2 Evidence-Based Writing (MUST)
-
- **MUST** ensure every technical assertion is backed by one of the provided sources (documents, user-provided files, chat logs).
- **MUST** explicitly identify missing information. If the source material is insufficient to complete a section (e.g., a missing step in a procedure):
-
-1. Stop writing that specific section.
-2. Ask the user clarifying questions.
-3. List exactly what data is missing (e.g., "I need the default port number for Service X to complete the Configuration section.").
-
-### 2.3 Handling Conflicts
-
- **MUST** integrate materials sequentially if multiple sources are provided. Process Source A -> Normalize headers/terms -> Process Source B.
- **MUST NOT** resolve contradictions yourself. If Source A says "Port 80" and Source B says "Port 8080", you must document the discrepancy and ask the user for the "Source of Truth."
-
---
-
-## 3. FILE MANAGEMENT & DIRECTORY STRUCTURE
-
-You must structure the output to fit a standard localized Hugo project architecture.
-
-### 3.1 File Locations (MUST)
-
- **MUST** assume documentation lives in the following localized directories:
- `content/en/` (English)
- `content/ru/` (Russian)
-
- **MUST** provide output that is ready to be placed in these directories.
-
-### 3.2 Asset Management (MUST)
-
- **MUST** assume all static assets (images, videos, PDFs) are stored in the `static/` directory at the project root.
- **MUST** format links relative to the `static` root.
- _Input:_ An image named `diagram.png` stored in `static/images/`.
- _Markdown Output:_ `![Description](/images/diagram.png)` (Note the leading slash).
-
- **MUST NOT** include `static/` in the markdown link path itself (e.g., `![...](static/images/...)` is **WRONG**).
-
-### 3.3 Translation Requirements (MUST)
-
- **MUST** be capable of generating the document in both English and Russian upon request.
- **MUST** ensure the glossary terms (see Part 3) are consistent across both languages.
-
---
-
-## 4. GLOSSARY, LINKS, & CITATIONS
-
-A consistent glossary and linking strategy is mandatory for maintainable documentation.
-
-### 4.1 The Glossary Standards (MUST)
-
-The glossary is the "Source of Truth" for terminology. It resides in `(en/ru)/{project}/glossary.md`.
-
- **MUST** maintain the glossary in **Alphabetical Order**.
- **MUST** assign a Markdown anchor to every term in the glossary definition.
- _Format:_ `## Term Name {#term-key}`
- _Definition Format:_
-
-```markdown
-## Term Name {#term-key}
-
-**Term Name** - A brief definition in 1-3 sentences.
-```
-
- **MUST** link to these anchors whenever the term is first used in other documents.
- _Usage Syntax:_ `... configure the [Term Name](/glossary#term-key) settings...`
-
- **MUST** maintain the glossary in both English and Russian if the documentation is bilingual.
-
-### 4.2 Hyperlink Formatting (MUST / SHOULD)
-
- **MUST NOT** use "naked" URLs in the text.
- _Bad:_ `Check this link: https://example.com/api`
- _Bad:_ `[https://example.com/api](https://example.com/api)`
-
- **MUST** format links with the **Source Type** and **Content Description**.
- _Good:_ `[Wiki: API Deployment Guide](https://example.com/api)`
- _Good:_ `[RFC: HTTP/2 Protocol](https://tools.ietf.org/html/rfc7540)`
-
- **SHOULD** use relative paths for internal links using Hugo `ref` or standard relative markdown paths where possible.
-
-### 4.3 The "See Also" Footer (MUST)
-
-Every document MUST end with a "See Also" block containing external references and last update metadata.
-
- **Location:** Always at the very bottom of the file.
- **Format:** Use a horizontal rule (`---`) followed by bold text.
- **Content:**
- **MUST** contain only a bulleted list of Markdown links.
- **MUST NOT** contain paths to files as inline code.
- **MUST NOT** link to the current document (self-referencing) or the Glossary (redundant).
-
- **Template:**
-
-```markdown
---
-
-**See also:**
-
- [Doc: Related Component A](https://docs.example.com/comp-a)
- [Wiki: Legacy Architecture](https://wiki.example.com/arch)
-```
-
-### 4.4 Code References (MUST)
-
- **Product Code:**
- **SHOULD NOT** paste large blocks of product source code, as it becomes stale.
- **MUST** link to a specific GitHub/GitLab commit (permalink) that shows the implementation.
- _Format:_ `[GitHub: sha - Description of change](https://github.com/org/repo/blob/sha/file.go)`
-
- **Commands & Scripts:**
- **MUST** use Fenced Code Blocks (````bash`) for instructions, scripts, or conceptual examples that the user needs to copy.
-
- **Inline Code Entities:**
- **MUST** use inline code backticks for:
- Variable names (`retryCount`)
- Function names (`init()`)
- Component names (`UserProfile`)
- Literal values (`true`, `404`)
- File extensions (`.md`, `.json`)
- Filenames (`hugo.yaml`)
-
---
-
-## 5. VISUALS, UI, & HEXTRA SHORTCODES
-
-You must use Hextra's advanced features to create structured, interactive documentation. Plain Markdown is often insufficient for complex technical concepts.
-
-### 5.1 Images & Media (MUST)
-
- **Alt Text & Titles:** Every image **MUST** have alt-text and a hover title.
- _Syntax:_ `![Alt Text](./path/image.png "Hover Title" =700x)`
-
- **Sizing:**
- **Small/Medium Images:** **SHOULD** be resized using the width attribute (e.g., `=700x`) to prevent layout shift.
- **Large Images/Diagrams:** **MUST NOT** be resized if detail loss is a risk. Instead, wrap them in a **Details** shortcode (see below).
-
- **YouTube:** Use the shortcode for videos.
- _Syntax:_ `{{< youtube id="VIDEO_ID" loading="lazy" >}}`
-
- **PDFs:** Use the PDF shortcode for embeddings.
- _Syntax:_ `{{< pdf "/path/to/doc.pdf" >}}`
-
-### 5.2 UI & Text Formatting (MUST)
-
- **"Points of Attraction":** Use **Bold** for goals, key list items, important preambles, and action names.
- _Example:_ **Goal:** Set up the environment.
-
- **UI References:** Use _Italics_ for buttons, labels, window names, and screen titles.
- _Example:_ Click the _Submit_ button on the _Settings_ screen.
-
-### 5.3 Interactive Shortcodes (MUST / SHOULD)
-
-#### A. Details (Collapsible Content)
-
-Use for large screenshots, detailed logs, or deep-dive explanations that disrupt the flow.
-
-```markdown
-{{% details title="Click to reveal configuration details" closed="true" %}}
-
-1. Detailed step one...
-   ![Large Screenshot](/images/screen.png 'Settings Config')
-   {{% /details %}}
-```
-
-#### B. Tabs (Mutually Exclusive Content)
-
-Use when the user must choose _one_ path (e.g., OS specific, Language specific).
-
-```markdown
-{{< tabs >}}
-{{< tab name="JSON" >}} **JSON** content here... {{< /tab >}}
-{{< tab name="YAML" >}} **YAML** content here... {{< /tab >}}
-{{< /tabs >}}
-```
-
-#### C. Steps (Procedures)
-
-Use for sequential instructions. **MUST** use H3 (`###`) headers inside.
-
-```markdown
-{{% steps %}}
-
-### Step 1: Install
-
-Run `npm install`
-
-### Step 2: Configure
-
-Edit `config.js`
-{{% /steps %}}
-```
-
-#### D. Badges (Status/Versioning)
-
-Use to denote version availability or feature status.
-
- _Options:_ `color` (green, orange, red, blue), `icon` (sparkles, github), `style` (outline/filled).
-
-```markdown
-{{< badge content="v2.0+" color="green" >}}
-{{< badge content="Beta" color="orange" icon="sparkles" >}}
-```
-
-#### E. File Trees (Directory Structure)
-
-Use to visualize folder layouts.
-
-```markdown
-{{< filetree/container >}}
-{{< filetree/folder name="src" state="open" >}}
-{{< filetree/file name="index.js" >}}
-{{< /filetree/folder >}}
-{{< /filetree/container >}}
-```
-
-#### F. Alerts/Callouts
-
-Use GitHub-flavored alerts for emphasis.
-
-```markdown
-> [!TIP]
-> This is a helpful tip.
-
-> [!WARNING]
-> This action is irreversible.
-```
-
---
-
-## 6. DOCUMENT TYPES & TEMPLATES
-
-Do not output full-page boilerplate unless requested. Instead, apply these structural rules ("Skeletons") dynamically based on the content type.
-This is also serves as the fixed categories which should populate every project's docs: Getting Started, Guides, Concepts, Troubleshooting.
-
-### 6.1 General Skeleton (All Docs)
-
-1. **Front Matter:** `title`, `weight`, `date` (optional).
-2. **Brief:** 1-2 sentences summarizing the "What" and "Why".
-3. **Body Sections:** (See specific types below).
-4. **Glossary Tooltips:** Use `[Term](/glossary#term)` for first mentions.
-5. **Footer:** The `> [!NOTE]` "See Also" block.
-
-### 6.2 Quick Start (Beginner)
-
- **Goal:** Minimal steps to "Hello World".
- **Structure:**
-
-1. **Prerequisites:** (Brief list).
-2. **Steps:** Use `{{% steps %}}`. Keep theory to zero.
-3. **Validation:** How to check it worked.
-
-### 6.3 Procedure / Guide (Strict)
-
- **Goal:** Reproducible, audit-ready process.
- **Structure:**
-
-1. **Objective:** What is being done.
-2. **Launch Conditions:** When to start (Triggers).
-3. **Procedure:** Strict numbered steps (or `{{% steps %}}`).
-4. **Result Control:** How to verify success.
-
-### 6.4 How-to / Guide (Task-Oriented)
-
- **Goal:** Solve a specific problem.
- **Structure:**
-
-1. **Context:** Why do this?
-2. **Steps:** Detailed execution.
-3. **Notes:** Edge cases or warnings.
-
-### 6.5 Concept / Architecture (Theory)
-
- **Goal:** Explain how it works.
- **Structure:**
-
-1. **Overview:** High-level summary.
-2. **Architecture:** Mermaid diagrams or Images.
-3. **Components:** Description of parts.
-4. **Terminology:** Definitions.
-
-### 6.6 Troubleshooting (Diagnostic)
-
- **Goal:** Fix a broken state.
- **Structure:**
-
-1. **Symptoms:** Error logs, behaviors.
-2. **Diagnosis:** How to confirm the issue.
-3. **Solution:** Steps to resolve.
-
---
-
-## 7. EXECUTION PROTOCOL
-
-You are now active. Your operating loop is as follows:
-
-1. **Wait for Input:** Receive raw text, code, or a topic request.
-2. **Classify:** Determine the Document Type (Quick Start, How-to, etc.).
-3. **Validate Sources:** Check if you have enough info.
-
- _If info is missing:_ STOP and ask the user specific questions.
- _If info is contradictory:_ STOP and ask for the "Source of Truth".
-
-4. **Draft:** Generate the Hextra Markdown.
-5. **Audit:**
-
- Did I use `filename=""` in code blocks?
- Did I use Hextra shortcodes (`steps`, `tabs`) effectively?
- Are links descriptive (No naked URLs)?
- Is the "See Also" footer present?
- Did I avoid hallucinations?
-
-6. **Output:** Present the final Markdown code block.
-
-**Awaiting user input...** (Please provide the topic, raw notes, API details, or specific file fragments you want converted into documentation).
+# Write Technical Documentation (ASD-STE100 & Hextra Standard)
+
+## Overview
+Technical documentation must be unambiguous, direct, and easy to translate. This skill enforces **ASD-STE100** (Simplified Technical English) language constraints combined with **Hextra/Hugo** static site architecture.
+
+Core principle: Write with controlled vocabulary, strict sentence limits, active voice, and zero fluff.
+
+## ASD-STE100 Language Rules
+
+### 1. Grammar & Sentence Constraints
+
+| Rule | Constraint | Example |
+| :--- | :--- | :--- |
+| **Procedural Sentence Length** | Maximum **20 words** per sentence for steps, commands, or instructions. | ✅ "Run `hugo server`. Open the local preview link." (10 words)<br>❌ "To start the local preview server, run the hugo server command and then open the generated localhost URL in your browser." (22 words) |
+| **Descriptive Sentence Length** | Maximum **25 words** per sentence for explanations or concepts. | ✅ "Hugo compiles markdown files into static HTML. The Hextra theme provides search and layout components." (15 words)<br>❌ "Hugo is an exceptionally fast static site generator that compiles markdown files into static HTML while the Hextra theme adds modern documentation layouts and search capabilities." (26 words) |
+| **Voice** | **Active voice** only. Avoid passive voice. | ✅ "The worker node drops expired messages."<br>❌ "Expired messages are dropped by the worker node." |
+| **Tense & Mood** | Use **present tense** for descriptions and **imperative mood** for steps. | ✅ "Click **Save**. The server restarts."<br>❌ "You will click Save, after which the server will be restarting." |
+| **Noun Clusters** | Maximum **3 sequential nouns**. Unpack longer clusters using prepositions. | ✅ "Index file for site search" (4 words, 2 nouns)<br>❌ "Site search index configuration file" (5 sequential nouns) |
+
+### 2. Controlled Vocabulary
+- **One approved meaning per word**: Use words in only one part of speech (e.g. *close* as verb, never adjective; use *near* or *adjacent* instead).
+- **Eliminate conversational filler**: Do NOT use "let's dive in", "basically", "simply", "easily", "in order to", "feel free to".
+- **Standard verbs**: Use *use* (not *utilize*), *stop* (not *terminate*), *start* (not *initiate*), *show* (not *exhibit*).
+- **No metaphors or jargon**: Write explicit, literal statements.
+
+## Hextra & Hugo Formatting
+
+### 1. Document Structure & Front Matter
+- **Front Matter**: Always include `title` and `description`.
+- **Top-level Header**: **MUST NOT** include `# Title` in the markdown body. Hextra automatically renders H1 from front matter `title`.
+- **Admonitions**: Use GitHub alerts (`> [!NOTE]`, `> [!TIP]`, `> [!WARNING]`, `> [!CAUTION]`).
+
+### 2. Hextra Shortcodes
+- **Steps**: Use `{{% steps %}}` with `### Step` headers for sequential procedures.
+- **Tabs**: Use `{{< tabs >}}` for alternative paths (e.g. OS, languages).
+- **Details**: Use `{{% details title="..." %}}` for large code dumps, raw logs, or edge cases.
+
+### 3. Hyperlinks & Code References
+- **No naked URLs**: Use `[Source Type: Description](URL)` (e.g. `[RFC: HTTP/2 Specification](https://tools.ietf.org/html/rfc7540)`).
+- **Inline code**: Use backticks for filenames (`hugo.yaml`), functions (`init()`), variables (`port`), and commands.
+
+## Document Templates (Skeletons)
+
+### Quick Start
+1. **Prerequisites**: Bullet list.
+2. **Steps**: Use `{{% steps %}}`. Keep steps under 20 words each.
+3. **Verification**: Direct command or test to check success.
+
+### Procedure / How-to
+1. **Objective**: 1 sentence explanation (<25 words).
+2. **Procedure**: Numbered steps or `{{% steps %}}`.
+3. **Expected Result**: Direct verification.
+
+### Troubleshooting
+1. **Symptom**: Concrete error message or behavior.
+2. **Cause**: Direct explanation of root failure.
+3. **Solution**: Imperative repair steps.
+
+## Red Flags & Rationalization Table
+
+| Excuse / Rationalization | Reality |
+| :--- | :--- |
+| "A longer sentence makes it flow better." | Long sentences cause translation errors and slow reading. Split into two sentences under 20/25 words. |
+| "Passive voice sounds more formal." | Passive voice creates ambiguity about who or what performs the action. Use active voice. |
+| "The noun cluster is standard industry jargon." | 4+ sequential nouns confuse non-native speakers. Unpack with prepositions. |
+| "I added H1 because markdown needs a main title." | Hextra generates H1 from Front Matter. Duplicate H1 breaks page layout. |
+
+## Verification Checklist
+- [ ] Procedural sentences are **20 words or fewer**.
+- [ ] Descriptive sentences are **25 words or fewer**.
+- [ ] Every step uses **imperative active voice**.
+- [ ] Noun clusters contain **3 or fewer sequential nouns**.
+- [ ] No conversational filler ("basically", "let's dive in").
+- [ ] No top-level `# H1` header in markdown body.
+- [ ] All links have descriptive text and source types.
@@ -0,0 +1,361 @@
+name: packages/kits - next/required
+
+on:
+  push:
+    branches: [next]
+    paths:
+      - 'packages/kits/**'
+      - 'packages/ui/**'
+      - 'packages/stl/**'
+      - 'packages/i18n/**'
+      - '.github/workflows/packages-kits-next-required.yml'
+      - 'pnpm-lock.yaml'
+
+concurrency:
+  group: ci-next-kits-${{ github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+  actions: read
+
+jobs:
+  setup-stage:
+    name: Setup - Stage
+    runs-on: ubuntu-latest
+    outputs:
+      cache-hit: ${{ steps.cache-pnpm-store.outputs.cache-hit }}
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.12.3
+
+      - name: Setup Node.js with pnpm cache
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+
+      - name: Cache pnpm store
+        id: cache-pnpm-store
+        uses: actions/cache@v3
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+  build-configs:
+    name: Build - Configs & UI
+    needs: setup-stage
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.12.3
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Build Rsbuild config
+        run: pnpm --filter @ermnvldmr/rsbuild-config build
+      - name: Build Storybook config
+        run: pnpm --filter @ermnvldmr/storybook-config build
+      - name: Build i18n
+        run: pnpm --filter @ermnvldmr/i18n build
+      - name: Build UI
+        run: pnpm --filter @ermnvldmr/ui build
+      - name: Upload Rsbuild Config
+        uses: actions/upload-artifact@v4
+        with:
+          name: rsbuild-config-dist-${{ github.run_id }}
+          path: packages/rsbuild-config/dist
+          retention-days: 1
+      - name: Upload Storybook Config
+        uses: actions/upload-artifact@v4
+        with:
+          name: storybook-config-dist-${{ github.run_id }}
+          path: packages/storybook-config/dist
+          retention-days: 1
+      - name: Upload i18n dist
+        uses: actions/upload-artifact@v4
+        with:
+          name: i18n-dist-${{ github.run_id }}
+          path: packages/i18n/dist
+          retention-days: 1
+      - name: Upload UI dist
+        uses: actions/upload-artifact@v4
+        with:
+          name: ui-dist-${{ github.run_id }}
+          path: packages/ui/dist
+          retention-days: 1
+
+  lint-kits:
+    name: Lint - Kits
+    needs: build-configs
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.12.3
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Download Rsbuild Config
+        uses: actions/download-artifact@v4
+        with:
+          name: rsbuild-config-dist-${{ github.run_id }}
+          path: packages/rsbuild-config/dist
+      - name: Download Storybook Config
+        uses: actions/download-artifact@v4
+        with:
+          name: storybook-config-dist-${{ github.run_id }}
+          path: packages/storybook-config/dist
+      - name: Download i18n dist
+        uses: actions/download-artifact@v4
+        with:
+          name: i18n-dist-${{ github.run_id }}
+          path: packages/i18n/dist
+      - name: Download UI dist
+        uses: actions/download-artifact@v4
+        with:
+          name: ui-dist-${{ github.run_id }}
+          path: packages/ui/dist
+      - name: Lint Kits package
+        run: pnpm --filter @ermnvldmr/kits lint
+
+  typecheck-kits:
+    name: Typecheck - Kits
+    needs: build-configs
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.12.3
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Download Rsbuild Config
+        uses: actions/download-artifact@v4
+        with:
+          name: rsbuild-config-dist-${{ github.run_id }}
+          path: packages/rsbuild-config/dist
+      - name: Download Storybook Config
+        uses: actions/download-artifact@v4
+        with:
+          name: storybook-config-dist-${{ github.run_id }}
+          path: packages/storybook-config/dist
+      - name: Download i18n dist
+        uses: actions/download-artifact@v4
+        with:
+          name: i18n-dist-${{ github.run_id }}
+          path: packages/i18n/dist
+      - name: Download UI dist
+        uses: actions/download-artifact@v4
+        with:
+          name: ui-dist-${{ github.run_id }}
+          path: packages/ui/dist
+      - name: Typecheck Kits package
+        run: pnpm --filter @ermnvldmr/kits typecheck
+
+  test-kits:
+    name: Test - Unit
+    needs: build-configs
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.12.3
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Download Rsbuild Config
+        uses: actions/download-artifact@v4
+        with:
+          name: rsbuild-config-dist-${{ github.run_id }}
+          path: packages/rsbuild-config/dist
+      - name: Download Storybook Config
+        uses: actions/download-artifact@v4
+        with:
+          name: storybook-config-dist-${{ github.run_id }}
+          path: packages/storybook-config/dist
+      - name: Download i18n dist
+        uses: actions/download-artifact@v4
+        with:
+          name: i18n-dist-${{ github.run_id }}
+          path: packages/i18n/dist
+      - name: Download UI dist
+        uses: actions/download-artifact@v4
+        with:
+          name: ui-dist-${{ github.run_id }}
+          path: packages/ui/dist
+      - name: Test Kits package
+        run: pnpm --filter @ermnvldmr/kits test:coverage
+      - name: Upload coverage to Codecov
+        uses: codecov/codecov-action@v4
+        with:
+          files: ./packages/kits/coverage/lcov.info
+          flags: kits
+        env:
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+
+  build-storybook:
+    name: Build - Storybook
+    needs: build-configs
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.12.3
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Download Rsbuild Config
+        uses: actions/download-artifact@v4
+        with:
+          name: rsbuild-config-dist-${{ github.run_id }}
+          path: packages/rsbuild-config/dist
+      - name: Download Storybook Config
+        uses: actions/download-artifact@v4
+        with:
+          name: storybook-config-dist-${{ github.run_id }}
+          path: packages/storybook-config/dist
+      - name: Download i18n dist
+        uses: actions/download-artifact@v4
+        with:
+          name: i18n-dist-${{ github.run_id }}
+          path: packages/i18n/dist
+      - name: Download UI dist
+        uses: actions/download-artifact@v4
+        with:
+          name: ui-dist-${{ github.run_id }}
+          path: packages/ui/dist
+      - name: Build Kits Storybook
+        run: pnpm --filter @ermnvldmr/kits build-storybook
+      - name: Upload Storybook build
+        uses: actions/upload-artifact@v4
+        with:
+          name: kits-storybook-static-${{ github.run_id }}
+          path: packages/kits/storybook-static/
+          retention-days: 1
+
+  test-storybook:
+    name: Test - Storybook
+    needs: build-storybook
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.12.3
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Download Rsbuild Config
+        uses: actions/download-artifact@v4
+        with:
+          name: rsbuild-config-dist-${{ github.run_id }}
+          path: packages/rsbuild-config/dist
+      - name: Download Storybook Config
+        uses: actions/download-artifact@v4
+        with:
+          name: storybook-config-dist-${{ github.run_id }}
+          path: packages/storybook-config/dist
+      - name: Download i18n dist
+        uses: actions/download-artifact@v4
+        with:
+          name: i18n-dist-${{ github.run_id }}
+          path: packages/i18n/dist
+      - name: Download UI dist
+        uses: actions/download-artifact@v4
+        with:
+          name: ui-dist-${{ github.run_id }}
+          path: packages/ui/dist
+      - name: Install Playwright browsers
+        run: pnpm --filter @ermnvldmr/kits exec playwright install --with-deps chromium
+      - name: Download Storybook build
+        uses: actions/download-artifact@v4
+        with:
+          name: kits-storybook-static-${{ github.run_id }}
+          path: packages/kits/storybook-static/
+      - name: Test Storybook
+        run: pnpm --filter @ermnvldmr/kits test:storybook:ci
+      - name: Upload coverage to Codecov
+        uses: codecov/codecov-action@v4
+        with:
+          files: ./packages/kits/coverage/storybook/lcov.info
+          flags: kits-storybook
+        env:
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+
+  build-kits:
+    name: Build - Kits
+    needs: build-configs
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.12.3
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Download Rsbuild Config
+        uses: actions/download-artifact@v4
+        with:
+          name: rsbuild-config-dist-${{ github.run_id }}
+          path: packages/rsbuild-config/dist
+      - name: Download Storybook Config
+        uses: actions/download-artifact@v4
+        with:
+          name: storybook-config-dist-${{ github.run_id }}
+          path: packages/storybook-config/dist
+      - name: Download i18n dist
+        uses: actions/download-artifact@v4
+        with:
+          name: i18n-dist-${{ github.run_id }}
+          path: packages/i18n/dist
+      - name: Download UI dist
+        uses: actions/download-artifact@v4
+        with:
+          name: ui-dist-${{ github.run_id }}
+          path: packages/ui/dist
+      - name: Build Kits package
+        run: pnpm --filter @ermnvldmr/kits build
@@ -0,0 +1,361 @@
+name: packages/kits - pr/required
+
+on:
+  pull_request:
+    branches: [next]
+    paths:
+      - 'packages/kits/**'
+      - 'packages/ui/**'
+      - 'packages/stl/**'
+      - 'packages/i18n/**'
+      - '.github/workflows/packages-kits-pr-required.yml'
+      - 'pnpm-lock.yaml'
+
+concurrency:
+  group: ci-pr-kits-${{ github.head_ref }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+  actions: read
+
+jobs:
+  setup-stage:
+    name: Setup - Stage
+    runs-on: ubuntu-latest
+    outputs:
+      cache-hit: ${{ steps.cache-pnpm-store.outputs.cache-hit }}
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.12.3
+
+      - name: Setup Node.js with pnpm cache
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+
+      - name: Cache pnpm store
+        id: cache-pnpm-store
+        uses: actions/cache@v3
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+  build-configs:
+    name: Build - Configs & UI
+    needs: setup-stage
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.12.3
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Build Rsbuild config
+        run: pnpm --filter @ermnvldmr/rsbuild-config build
+      - name: Build Storybook config
+        run: pnpm --filter @ermnvldmr/storybook-config build
+      - name: Build i18n
+        run: pnpm --filter @ermnvldmr/i18n build
+      - name: Build UI
+        run: pnpm --filter @ermnvldmr/ui build
+      - name: Upload Rsbuild Config
+        uses: actions/upload-artifact@v4
+        with:
+          name: rsbuild-config-dist-${{ github.run_id }}
+          path: packages/rsbuild-config/dist
+          retention-days: 1
+      - name: Upload Storybook Config
+        uses: actions/upload-artifact@v4
+        with:
+          name: storybook-config-dist-${{ github.run_id }}
+          path: packages/storybook-config/dist
+          retention-days: 1
+      - name: Upload i18n dist
+        uses: actions/upload-artifact@v4
+        with:
+          name: i18n-dist-${{ github.run_id }}
+          path: packages/i18n/dist
+          retention-days: 1
+      - name: Upload UI dist
+        uses: actions/upload-artifact@v4
+        with:
+          name: ui-dist-${{ github.run_id }}
+          path: packages/ui/dist
+          retention-days: 1
+
+  lint-kits:
+    name: Lint - Kits
+    needs: build-configs
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.12.3
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Download Rsbuild Config
+        uses: actions/download-artifact@v4
+        with:
+          name: rsbuild-config-dist-${{ github.run_id }}
+          path: packages/rsbuild-config/dist
+      - name: Download Storybook Config
+        uses: actions/download-artifact@v4
+        with:
+          name: storybook-config-dist-${{ github.run_id }}
+          path: packages/storybook-config/dist
+      - name: Download i18n dist
+        uses: actions/download-artifact@v4
+        with:
+          name: i18n-dist-${{ github.run_id }}
+          path: packages/i18n/dist
+      - name: Download UI dist
+        uses: actions/download-artifact@v4
+        with:
+          name: ui-dist-${{ github.run_id }}
+          path: packages/ui/dist
+      - name: Lint Kits package
+        run: pnpm --filter @ermnvldmr/kits lint
+
+  typecheck-kits:
+    name: Typecheck - Kits
+    needs: build-configs
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.12.3
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Download Rsbuild Config
+        uses: actions/download-artifact@v4
+        with:
+          name: rsbuild-config-dist-${{ github.run_id }}
+          path: packages/rsbuild-config/dist
+      - name: Download Storybook Config
+        uses: actions/download-artifact@v4
+        with:
+          name: storybook-config-dist-${{ github.run_id }}
+          path: packages/storybook-config/dist
+      - name: Download i18n dist
+        uses: actions/download-artifact@v4
+        with:
+          name: i18n-dist-${{ github.run_id }}
+          path: packages/i18n/dist
+      - name: Download UI dist
+        uses: actions/download-artifact@v4
+        with:
+          name: ui-dist-${{ github.run_id }}
+          path: packages/ui/dist
+      - name: Typecheck Kits package
+        run: pnpm --filter @ermnvldmr/kits typecheck
+
+  test-kits:
+    name: Test - Unit
+    needs: build-configs
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.12.3
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Download Rsbuild Config
+        uses: actions/download-artifact@v4
+        with:
+          name: rsbuild-config-dist-${{ github.run_id }}
+          path: packages/rsbuild-config/dist
+      - name: Download Storybook Config
+        uses: actions/download-artifact@v4
+        with:
+          name: storybook-config-dist-${{ github.run_id }}
+          path: packages/storybook-config/dist
+      - name: Download i18n dist
+        uses: actions/download-artifact@v4
+        with:
+          name: i18n-dist-${{ github.run_id }}
+          path: packages/i18n/dist
+      - name: Download UI dist
+        uses: actions/download-artifact@v4
+        with:
+          name: ui-dist-${{ github.run_id }}
+          path: packages/ui/dist
+      - name: Test Kits package
+        run: pnpm --filter @ermnvldmr/kits test:coverage
+      - name: Upload coverage to Codecov
+        uses: codecov/codecov-action@v4
+        with:
+          files: ./packages/kits/coverage/lcov.info
+          flags: kits
+        env:
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+
+  build-storybook:
+    name: Build - Storybook
+    needs: build-configs
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.12.3
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Download Rsbuild Config
+        uses: actions/download-artifact@v4
+        with:
+          name: rsbuild-config-dist-${{ github.run_id }}
+          path: packages/rsbuild-config/dist
+      - name: Download Storybook Config
+        uses: actions/download-artifact@v4
+        with:
+          name: storybook-config-dist-${{ github.run_id }}
+          path: packages/storybook-config/dist
+      - name: Download i18n dist
+        uses: actions/download-artifact@v4
+        with:
+          name: i18n-dist-${{ github.run_id }}
+          path: packages/i18n/dist
+      - name: Download UI dist
+        uses: actions/download-artifact@v4
+        with:
+          name: ui-dist-${{ github.run_id }}
+          path: packages/ui/dist
+      - name: Build Kits Storybook
+        run: pnpm --filter @ermnvldmr/kits build-storybook
+      - name: Upload Storybook build
+        uses: actions/upload-artifact@v4
+        with:
+          name: kits-storybook-static-${{ github.run_id }}
+          path: packages/kits/storybook-static/
+          retention-days: 1
+
+  test-storybook:
+    name: Test - Storybook
+    needs: build-storybook
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.12.3
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Download Rsbuild Config
+        uses: actions/download-artifact@v4
+        with:
+          name: rsbuild-config-dist-${{ github.run_id }}
+          path: packages/rsbuild-config/dist
+      - name: Download Storybook Config
+        uses: actions/download-artifact@v4
+        with:
+          name: storybook-config-dist-${{ github.run_id }}
+          path: packages/storybook-config/dist
+      - name: Download i18n dist
+        uses: actions/download-artifact@v4
+        with:
+          name: i18n-dist-${{ github.run_id }}
+          path: packages/i18n/dist
+      - name: Download UI dist
+        uses: actions/download-artifact@v4
+        with:
+          name: ui-dist-${{ github.run_id }}
+          path: packages/ui/dist
+      - name: Install Playwright browsers
+        run: pnpm --filter @ermnvldmr/kits exec playwright install --with-deps chromium
+      - name: Download Storybook build
+        uses: actions/download-artifact@v4
+        with:
+          name: kits-storybook-static-${{ github.run_id }}
+          path: packages/kits/storybook-static/
+      - name: Test Storybook
+        run: pnpm --filter @ermnvldmr/kits test:storybook:ci
+      - name: Upload coverage to Codecov
+        uses: codecov/codecov-action@v4
+        with:
+          files: ./packages/kits/coverage/storybook/lcov.info
+          flags: kits-storybook
+        env:
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+
+  build-kits:
+    name: Build - Kits
+    needs: build-configs
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.12.3
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Download Rsbuild Config
+        uses: actions/download-artifact@v4
+        with:
+          name: rsbuild-config-dist-${{ github.run_id }}
+          path: packages/rsbuild-config/dist
+      - name: Download Storybook Config
+        uses: actions/download-artifact@v4
+        with:
+          name: storybook-config-dist-${{ github.run_id }}
+          path: packages/storybook-config/dist
+      - name: Download i18n dist
+        uses: actions/download-artifact@v4
+        with:
+          name: i18n-dist-${{ github.run_id }}
+          path: packages/i18n/dist
+      - name: Download UI dist
+        uses: actions/download-artifact@v4
+        with:
+          name: ui-dist-${{ github.run_id }}
+          path: packages/ui/dist
+      - name: Build Kits package
+        run: pnpm --filter @ermnvldmr/kits build
@@ -0,0 +1,145 @@
+name: packages/ssg - next/required
+
+on:
+  push:
+    branches: [next]
+    paths:
+      - 'packages/ssg/**'
+      - '.github/workflows/packages-ssg-next-required.yml'
+      - 'pnpm-lock.yaml'
+
+concurrency:
+  group: ci-ssg-${{ github.ref_name }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+  actions: read
+
+jobs:
+  setup-stage:
+    name: Setup - Stage
+    runs-on: ubuntu-latest
+    outputs:
+      cache-hit: ${{ steps.cache-pnpm-store.outputs.cache-hit }}
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.12.3
+
+      - name: Setup Node.js with pnpm cache
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+
+      - name: Cache pnpm store
+        id: cache-pnpm-store
+        uses: actions/cache@v3
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+  build-configs:
+    name: Build - Configs
+    needs: setup-stage
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.12.3
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Build Rsbuild config
+        run: pnpm --filter @ermnvldmr/rsbuild-config build
+      - name: Upload Config Artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: rsbuild-config-dist
+          path: packages/rsbuild-config/dist
+          retention-days: 1
+
+  lint-ssg:
+    name: Lint - SSG
+    needs: build-configs
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.12.3
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Download Config Artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: rsbuild-config-dist
+          path: packages/rsbuild-config/dist
+      - name: Lint SSG package
+        run: pnpm --filter @ermnvldmr/ssg lint
+
+  typecheck-ssg:
+    name: Typecheck - SSG
+    needs: build-configs
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.12.3
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Download Config Artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: rsbuild-config-dist
+          path: packages/rsbuild-config/dist
+      - name: Typecheck SSG package
+        run: pnpm --filter @ermnvldmr/ssg typecheck
+
+  build-ssg:
+    name: Build - SSG
+    needs: build-configs
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.12.3
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Download Config Artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: rsbuild-config-dist
+          path: packages/rsbuild-config/dist
+      - name: Build SSG package
+        run: pnpm --filter @ermnvldmr/ssg build
@@ -0,0 +1,145 @@
+name: packages/ssg - pr/required
+
+on:
+  pull_request:
+    branches: [next]
+    paths:
+      - 'packages/ssg/**'
+      - '.github/workflows/packages-ssg-pr-required.yml'
+      - 'pnpm-lock.yaml'
+
+concurrency:
+  group: ci-pr-ssg-${{ github.head_ref }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+  actions: read
+
+jobs:
+  setup-stage:
+    name: Setup - Stage
+    runs-on: ubuntu-latest
+    outputs:
+      cache-hit: ${{ steps.cache-pnpm-store.outputs.cache-hit }}
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.12.3
+
+      - name: Setup Node.js with pnpm cache
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+
+      - name: Cache pnpm store
+        id: cache-pnpm-store
+        uses: actions/cache@v3
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+  build-configs:
+    name: Build - Configs
+    needs: setup-stage
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.12.3
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Build Rsbuild config
+        run: pnpm --filter @ermnvldmr/rsbuild-config build
+      - name: Upload Config Artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: rsbuild-config-dist-${{ github.run_id }}
+          path: packages/rsbuild-config/dist
+          retention-days: 1
+
+  lint-ssg:
+    name: Lint - SSG
+    needs: build-configs
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.12.3
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Download Config Artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: rsbuild-config-dist-${{ github.run_id }}
+          path: packages/rsbuild-config/dist
+      - name: Lint SSG package
+        run: pnpm --filter @ermnvldmr/ssg lint
+
+  typecheck-ssg:
+    name: Typecheck - SSG
+    needs: build-configs
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.12.3
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Download Config Artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: rsbuild-config-dist-${{ github.run_id }}
+          path: packages/rsbuild-config/dist
+      - name: Typecheck SSG package
+        run: pnpm --filter @ermnvldmr/ssg typecheck
+
+  build-ssg:
+    name: Build - SSG
+    needs: build-configs
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.12.3
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Download Config Artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: rsbuild-config-dist-${{ github.run_id }}
+          path: packages/rsbuild-config/dist
+      - name: Build SSG package
+        run: pnpm --filter @ermnvldmr/ssg build
@@ -12,6 +12,10 @@ concurrency:
  group: ci-stl-${{ github.ref_name }}
  cancel-in-progress: true

+permissions:
+  contents: read
+  actions: read
+
 jobs:
  setup-stage:
    name: Setup - Stage
@@ -12,6 +12,10 @@ concurrency:
  group: ci-pr-stl-${{ github.head_ref }}
  cancel-in-progress: true

+permissions:
+  contents: read
+  actions: read
+
 jobs:
  setup-stage:
    name: Setup - Stage
@@ -14,6 +14,10 @@ concurrency:
  group: ci-ui-${{ github.ref_name }}
  cancel-in-progress: true

+permissions:
+  contents: read
+  actions: read
+
 jobs:
  setup-stage:
    name: Setup - Stage
@@ -14,6 +14,10 @@ concurrency:
  group: ci-pr-ui-${{ github.head_ref }}
  cancel-in-progress: true

+permissions:
+  contents: read
+  actions: read
+
 jobs:
  setup-stage:
    name: Setup - Stage
@@ -10,6 +10,10 @@ concurrency:
  group: ci-docs-${{ github.ref_name }}
  cancel-in-progress: true

+permissions:
+  contents: read
+  actions: read
+
 jobs:
  setup-hugo:
    name: Setup - Hugo
@@ -11,6 +11,10 @@ concurrency:
  group: ci-pr-docs-${{ github.head_ref }}
  cancel-in-progress: true

+permissions:
+  contents: read
+  actions: read
+
 jobs:
  setup-hugo:
    name: Setup - Hugo
@@ -15,6 +15,10 @@ concurrency:
  group: ci-static-${{ github.ref_name }}
  cancel-in-progress: true

+permissions:
+  contents: read
+  actions: read
+
 jobs:
  setup-stage:
    name: Setup - Stage
@@ -15,6 +15,10 @@ concurrency:
  group: ci-pr-static-${{ github.head_ref }}
  cancel-in-progress: true

+permissions:
+  contents: read
+  actions: read
+
 jobs:
  setup-stage:
    name: Setup - Stage
@@ -3,9 +3,13 @@ name: services/www - next/checkout-release-branch
 on:
  workflow_dispatch:

+permissions:
+  contents: read
+  actions: read
+
 jobs:
-  workflow-create-release-branch:
-    name: Workflow - Create Release Branch
+  workflow-release-branch:
+    name: Workflow - Create or Update Release Branch
    runs-on: ubuntu-latest
    permissions:
      contents: write
@@ -16,19 +20,40 @@ jobs:
        with:
          fetch-depth: 0

-      - name: Determine Branch Name
-        id: branch
+      - name: Determine Mode and Branch Name
+        id: plan
        run: |
-          BRANCH_NAME=$(bash ci/scripts/semantic-release.sh checkout services/www)
-          echo "branch_name=$BRANCH_NAME" >> $GITHUB_OUTPUT
+          REF="${{ github.ref_name }}"
+          if [[ "$REF" =~ ^releases/www/v[0-9]+\.[0-9]+$ ]]; then
+            # Dispatched against an existing release branch: update it.
+            echo "mode=update" >> "$GITHUB_OUTPUT"
+            echo "branch_name=$REF" >> "$GITHUB_OUTPUT"
+          else
+            # Dispatched against next (or any other ref): create a new release branch.
+            BRANCH_NAME=$(bash ci/scripts/semantic-release.sh checkout services/www)
+            echo "mode=create" >> "$GITHUB_OUTPUT"
+            echo "branch_name=$BRANCH_NAME" >> "$GITHUB_OUTPUT"
+          fi

      - name: Create and Push Branch
+        if: steps.plan.outputs.mode == 'create'
        run: |
-          git checkout -b ${{ steps.branch.outputs.branch_name }}
-          git push origin ${{ steps.branch.outputs.branch_name }}
+          git checkout -b ${{ steps.plan.outputs.branch_name }}
+          git push origin ${{ steps.plan.outputs.branch_name }}
+
+      - name: Rebase Existing Branch onto next
+        if: steps.plan.outputs.mode == 'update'
+        run: |
+          git config user.name "github-actions[bot]"
+          git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
+          # Bring the release branch up to date with its father (next),
+          # replaying any release-branch-only commits on top of the latest next.
+          git fetch origin next
+          git rebase FETCH_HEAD
+          git push --force-with-lease origin ${{ steps.plan.outputs.branch_name }}

      - name: Trigger Release Workflow
        env:
          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        run: |
-          gh workflow run services-www-releases-required.yml --ref ${{ steps.branch.outputs.branch_name }}
+          gh workflow run services-www-releases-required.yml --ref ${{ steps.plan.outputs.branch_name }}
@@ -15,6 +15,10 @@ concurrency:
  group: ci-www-${{ github.ref_name }}
  cancel-in-progress: true

+permissions:
+  contents: read
+  actions: read
+
 jobs:
  setup-stage:
    name: Setup - Stage
@@ -15,6 +15,10 @@ concurrency:
  group: ci-pr-www-${{ github.head_ref }}
  cancel-in-progress: true

+permissions:
+  contents: read
+  actions: read
+
 jobs:
  setup-stage:
    name: Setup - Stage
@@ -3,6 +3,10 @@ name: services/www - releases/dispatch-release
 on:
  workflow_dispatch:

+permissions:
+  contents: read
+  actions: read
+
 jobs:
  setup-stage:
    name: Setup - Stage
@@ -9,6 +9,10 @@ concurrency:
  group: ci-www-rel-${{ github.ref_name }}
  cancel-in-progress: true

+permissions:
+  contents: read
+  actions: read
+
 jobs:
  setup-stage:
    name: Setup - Stage
@@ -2,6 +2,9 @@
 dist/
 *.tsbuildinfo

+# service static assets (local only, synced with S3)
+**/public/static/
+
 # dependencies
 node_modules/

@@ -18,9 +21,9 @@ storybook-static/
 test-results/
 playwright-report/

-# environment variables
+# environment variables (.env.dev is encrypted and tracked; .env is plaintext)
 .env
-.env.production
+.env.keys

 # macOS-specific files
 .DS_Store
@@ -1,444 +1,147 @@
-# AGENTS.md - Development Guide
+# AGENTS.md

-## 📋 Project Overview
+Guidance and operational constraints for AI coding agents working on `ermnvldmr.com`.

-**ermnvldmr.com** is Vladimir Eremin's personal ecosystem of services delivered through a modern monorepo architecture. The project encompasses personal websites, documentation sites, and shared infrastructure for web-based content and services.
+## 1. System Overview & Tech Stack

-### Monorepo Architecture
+`ermnvldmr.com` is a pnpm monorepo hosting personal web services, dividing applications into `services/` and shared packages into `packages/`. The primary website (`services/www`) and static pages (`services/static`) are built with React 19 and Rsbuild (Rspack). Build-time Static Site Generation is performed via `@ermnvldmr/ssg`, a custom Rsbuild plugin that pre-renders React entry points to HTML with inlined critical CSS (via Critters). The documentation service (`services/docs`) runs on Hugo with the Hextra theme.

- **Repository Structure**: pnpm workspace monorepo
- **Package Manager**: pnpm v9.12.3+
- **Core Technology**: TypeScript (Strict mode)
- **Services**: Independent web services with shared dependencies
- **Packages**: Reusable configurations and component libraries
- **Build System**: Distributed builds with dependency management
- **CI/CD**: GitHub Actions with path-based triggers
+Shared workspace packages provide the UI design system (`@ermnvldmr/ui`), application component kits (`@ermnvldmr/kits`), standard types library (`@ermnvldmr/stl`), localization utilities (`@ermnvldmr/i18n`), monorepo CLI tooling (`@ermnvldmr/cli`), static site generator (`@ermnvldmr/ssg`), and reusable presets for ESLint, Rsbuild, and Storybook. Design components utilize Tailwind CSS v4, Radix UI primitives, React-Aria, and CVA, validated using Vitest and Storybook 8.

-### Design Philosophy
+| Technology | Version / Tool | Purpose |
+| :--- | :--- | :--- |
+| **Package Manager** | `pnpm` (>=9.12.3) | Workspace dependency and package management |
+| **Runtime Engine** | Node.js (>=20) | Server and build runtime environment |
+| **UI Library** | React 19 (`react`, `react-dom`) | Declarative UI rendering |
+| **Bundler Engine** | Rsbuild / Rspack | Rust-powered bundling, hot module reloading, and build pipeline |
+| **Static Site Generator** | `@ermnvldmr/ssg` / Hugo (>=0.110.0) | Build-time React HTML pre-rendering & Hugo docs engine |
+| **UI Primitives & Icons** | React Aria, Radix UI, Lucide React | Accessible interactive primitives and icon system |
+| **Styling & Utilities** | Tailwind CSS v4, CVA, `@ermnvldmr/stl` | Utility styling, component variant management, class utilities |
+| **Internationalization** | `@ermnvldmr/i18n` | Multi-locale routing and localization strings (`en`, `ru`) |
+| **Testing Framework** | Vitest, Testing Library, Playwright | Unit, integration, and Storybook interaction testing |
+| **Component Workshop** | Storybook 8 | Isolated component development environment |
+| **Static Analysis** | ESLint 9 (Flat Config), TypeScript 5.8 | Code linting, monorepo import boundary checks, strict typing |
+| **Secrets Encryption** | `@dotenvx/dotenvx` | Public-key encrypted `.env.dev` secrets management |

- **Component-First**: All UI elements developed as isolated, reusable components
- **Configuration Sharing**: Centralized tooling configurations across services
- **TypeScript-First**: Strict typing for all public APIs and components
- **Documentation-Driven**: TSDoc required for all exported elements
- **Dependency Isolation**: Clear separation between packages and services
- **Build Optimization**: Efficient dependency building and caching
+## 2. Project Structure & Key Directories

-## 🏗️ Repository Structure
-
-```
-├── packages/                   # Shared packages and configurations
-│   ├── eslint-config/         # Shared ESLint configurations
-│   ├── rsbuild-config/        # Shared Rsbuild configurations
-│   ├── storybook-config/      # Shared Storybook configurations
-│   ├── stl/                   # Standard Type Library (utilities)
-│   └── ui/                    # Shared React component library
-├── services/                   # Independent web services
-│   ├── www/                   # Main website (Rsbuild + React)
-│   └── docs/                  # Documentation site (Hugo)
-├── .github/workflows/         # CI/CD automation
-├── pnpm-workspace.yaml        # Workspace configuration
-└── [root config files]        # Global configurations
+```text
+ermnvldmr.com/
+├── ci/                      # CI/CD pipelines, Docker containers, deployment scripts
+├── docs/                    # Architectural documentation and design specifications
+├── packages/                # Monorepo shared packages and toolchain configurations
+│   ├── cli/                 # Monorepo CLI utility (`ermnvldmr-cli`) for tasks like S3 asset sync
+│   ├── eslint-config/       # Shared flat ESLint rule sets and monorepo import restriction rules
+│   ├── i18n/                # Localization engine, locale pathing, and translation keysets
+│   ├── kits/                # High-level domain & layout component kits (BentoGrid, InfoCard, PageHead, Page, etc.)
+│   ├── rsbuild-config/      # Shared Rsbuild and Rspack bundler configuration presets
+│   ├── ssg/                 # Build-time Static Site Generation plugin for Rsbuild React apps
+│   ├── stl/                 # Standard Types Library for core utilities, type definitions, and react helpers
+│   ├── storybook-config/    # Shared Storybook workshop configurations
+│   └── ui/                  # Design system React component library, styles, and Storybook stories
+├── services/                # Deployable web applications and services
+│   ├── docs/                # Technical documentation site (Hugo + Hextra theme)
+│   ├── static/              # Static landing pages service (Rsbuild + React 19)
+│   └── www/                 # Primary website (Rsbuild + React 19 + MDX + SSG)
+├── .env.dev                 # Encrypted environment variable storage (tracked in git)
+├── .env.keys                # Private decryption keys (UNTRACKED - do not commit)
+├── eslint.config.mjs        # Root ESLint flat configuration extending `@ermnvldmr/eslint-config`
+├── pnpm-workspace.yaml      # Monorepo workspace package definitions
+└── tsconfig.json            # Root TypeScript configuration with workspace path aliases
 ```

-### Package Organization
-
-#### Configuration Packages (`packages/`)
-
- **eslint-config**: Shared ESLint rules for TypeScript and React
- **rsbuild-config**: Shared Rsbuild and Rspack configurations for library and service builds
- **storybook-config**: Shared Storybook setup and configurations
-
-#### Library Packages (`packages/`)
-
- **stl** (Standard Type Library): Common utilities, types, and helper functions
- **ui**: React component library with design system and Storybook stories
- **i18n**: Internationalization utilities
-
-#### Service Packages (`services/`)
-
- **www**: Main website built with Rsbuild, React, and Tailwind CSS
- **static**: Static landing pages service built with Rsbuild and React
- **docs**: Documentation site built with Hugo and Hextra theme
-
-### Key Directory Rules
-
-#### `/packages/`
-
- **Purpose**: Shared configurations and reusable libraries
- **Dependencies**: Can depend on each other following build order (configs → stl → ui)
- **Exports**: Must provide proper TypeScript declarations
- **Building**: Required before dependent services can build
- **Testing**: Individual test suites for each package
-
-#### `/services/`
-
- **Purpose**: Independent web applications and sites
- **Dependencies**: Can consume packages but not other services
- **Deployment**: Independent deployment pipelines
- **Development**: Can be developed and tested in isolation
- **Configuration**: Inherit from shared packages but can override
-
-## 🛠️ Development Workflow
-
-### Monorepo Development Principles
-
- **Root-Level Scripts**: Check `package.json` at repository root for monorepo-wide operations
- **Service-Specific Scripts**: Each service in `services/` has its own development commands
- **Package Filtering**: Use pnpm workspace filtering to target specific packages/services
- **Dependency-Aware Building**: UI components must be built before dependent services
-
-### Package Development Workflow
-
-The monorepo follows a strict dependency hierarchy that must be respected:
-
-#### 1. Configuration Packages First
-
-Configuration packages provide shared tooling setups and must be built before anything else. Look for packages ending in `-config` in the `packages/` directory.
-
-#### 2. Library Packages
-
-Library packages (`stl`, `ui`) provide reusable code and components. They depend on configuration packages and must be built in dependency order (check their `package.json` dependencies).
-
-#### 3. Services
-
-Services consume packages but are independent of each other. They can be developed and deployed separately. Check `services/` directory for available services and their individual `package.json` files for available scripts.
-
-### Code Organization Principles
-
- **Dependency Order**: configs → stl → ui → services
- **Single Responsibility**: Each package serves one clear purpose
- **Explicit Dependencies**: All inter-package dependencies declared in package.json
- **Build Isolation**: Each package can be built independently
- **Configuration Inheritance**: Services inherit from shared configurations
- **Package Entry Points**:
-  - `.` (Main): Runtime code used in production (e.g., `import { ... } from '@ermnvldmr/stl'`).
-  - `/testing`: Test-related utilities and mocks (e.g., `import { ... } from '@ermnvldmr/stl/testing'`).
-  - `/dev`: Build-time dependencies (e.g., `import { ... } from '@ermnvldmr/stl/dev'`).
-  - All other entry points are forbidden. Strictly build-time packages must still expose via `/dev`.
- **Directory Structure (Packages & Services)**:
-  - `src/lib/`: Helpers, utilities, and types.
-    - `{category}/`: Grouped logic.
-    - `index.ts`: Barrel export for all of `lib/`.
-    - `testing.ts`: Testing utilities for the library.
-    - `dev.ts`: Build-time utilities for the library.
-  - `src/components/`: UI components.
-    - `{ComponentName}/`: Isolated component directory.
-    - `index.ts`: Barrel export for all components.
-    - `testing.ts`: Component-specific testing utilities.
-  - `src/static/`: Static assets (`.html`, `.css`, `.js`) directly in this directory (no subdirectories).
-  - `src/app/` (Services only): Page definitions.
-    - `{page}.tsx`: Single file per page, inlining the component in `createPage`.
-    - `{path}/{page}.tsx`: Nested routing structure.
-  - Top-level `src/index.ts`, `src/testing.ts`, and `src/dev.ts` should only re-export from `lib/` or `components/`.
-
-## 📝 Coding Conventions
-
-### Package Naming Convention
-
-All packages use the `@ermnvldmr/` namespace:
-
- `@ermnvldmr/eslint-config` - Shared ESLint configurations
- `@ermnvldmr/rsbuild-config` - Shared Rsbuild configurations
- `@ermnvldmr/storybook-config` - Shared Storybook configurations
- `@ermnvldmr/stl` - Standard Type Library
- `@ermnvldmr/ui` - Component library
- `@ermnvldmr/i18n` - Internationalization utilities
- `@ermnvldmr/www` - Main website service
- `@ermnvldmr/static` - Static landing pages service
- `@ermnvldmr/docs` - Documentation service
-
-### TypeScript Guidelines
-
- **Strict Mode**: All TypeScript strict checks must pass
- **No 'any'**: The use of `any` is strictly prohibited. Use `unknown` if the type is truly unknown, or define proper generic constraints.
- **No 'ts-ignore' or 'ts-expect-error'**: Never suppress compiler errors. If a third-party library has missing types, provide a local declaration file (.d.ts) instead.
- **No Unsafe Assertions**: Avoid `as any` or `as T` assertions. Prefer type guards, `instanceof` checks, or proper schema validation (e.g., Zod) to narrow types.
- **Explicit Types**: Avoid type inference for public APIs; prefer explicit type definitions for exports.
- **Interface First**: Use interfaces for component props and public APIs.
- **Cross-Package Types**: Export types from packages for service consumption.
-
-### TSDoc Documentation Requirements
-
-**MANDATORY for all exported elements**: types, functions, constants, components
-
-```typescript
-/**
- * Combines class names using clsx and tailwind-merge for consistent styling.
- *
- * @param inputs - Class name inputs to combine
- * @returns Combined and deduplicated class string
- *
- * @example
- * \`\`\`typescript
- * cn('px-4 py-2', 'bg-blue-500', 'px-6') // 'py-2 bg-blue-500 px-6'
- * cn('text-lg', condition && 'font-bold') // 'text-lg font-bold'
- * \`\`\`
- */
-export function cn(...inputs: ClassValue[]): string {
-  return twMerge(clsx(inputs));
-}
-```
-
-### Internationalization (i18n) Guidelines
-
- **Package**: Use the `@ermnvldmr/i18n` package for all translations across services.
- **Keyset Pattern**: Create `.i18n.ts` files alongside components that require translation.
- **Russian Translation Style**: Embrace the Russian language fully. Prefer phonetic transliteration/transcription for global brand names and descriptive terms over keeping them in English.
-  - **Brands**: 'GitHub' → 'ГитХаб', 'Instagram' → 'Инстаграм', 'Telegram' → 'Телеграм'.
-  - **Descriptive**: 'Email' → 'Электропочта'.
- **Source of Truth**: The English locale (`en`) serves as the primary reference for keys and structure.
-
-### Component Development Patterns
-
-#### UI Package Components
-
-```typescript
-/**
- * Props for the Button component.
- */
-export interface ButtonProps {
-  /** The button content */
-  children: React.ReactNode;
-  /** Visual style variant */
-  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
-  /** Button size */
-  size?: 'default' | 'sm' | 'lg' | 'icon';
-}
-
-/**
- * Versatile button component with multiple variants and sizes.
- */
-export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant = 'default', size = 'default', ...props }, ref) => {
-    return (
-      <button
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-```
-
-### File Naming Conventions
-
- **Components**: PascalCase (e.g., `Button.tsx`, `NavigationMenu.tsx`)
- **Utilities**: camelCase (e.g., `cn.ts`, `formatters.ts`)
- **Constants**: UPPER_SNAKE_CASE for exports (e.g., `API_ENDPOINTS`)
- **Types**: PascalCase with descriptive suffixes (e.g., `ButtonProps`, `ApiResponse`)
- **Config Files**: kebab-case (e.g., `rsbuild-config`, `eslint-config`)
-
-### Module Structure Patterns
-
-#### Package Structure
-
-```
-packages/ui/
-├── .config/
-│   ├── vitest/
-│   │   └── setup.ts
-│   └── storybook/
-│       ├── main.ts
-│       └── preview.tsx
-├── src/
-│   ├── components/           # Component categories
-│   │   ├── index.ts         # Production barrel
-│   │   ├── testing.ts       # Testing barrel
-│   │   └── Button/          # Isolated component
-│   ├── lib/                  # Core logic
-│   │   ├── index.ts
-│   │   ├── testing.ts
-│   │   └── dev.ts
-│   ├── static/               # Flat static assets (CSS, etc.)
-│   ├── index.ts              # Main entry point (runtime)
-│   ├── testing.ts            # Testing entry point
-│   └── dev.ts                # Dev entry point
-├── package.json
-├── rsbuild.config.ts
-└── tsconfig.json
-```
-
-#### Service Structure (www example)
-
-```
-services/www/
-├── .config/
-│   ├── vitest/
-│   │   └── setup.ts
-│   └── storybook/
-├── src/
-│   ├── app/                 # Single file per page
-│   │   ├── index.tsx        # Inlined createPage
-│   │   └── articles/
-│   ├── components/          # layouts, widgets
-│   ├── lib/                 # core, shared
-│   ├── static/              # global.css, index.html
-│   ├── index.ts
-│   └── ...
-├── public/                 # Direct static assets (images)
-├── rsbuild.config.ts
-└── package.json
-```
-
-## 🎨 Design System (UI Package)
-
-### Component Organization
-
- **Generic Components**: Layout utilities (Stack, VStack, HStack)
- **Themed Components**: Paper-themed variants with consistent styling
- **Radix Integration**: Accessibility-first components using Radix UI
- **Storybook Stories**: Every component has comprehensive documentation
-
-### Styling Approach
-
- **Tailwind CSS v4+**: Utility-first CSS framework
- **Class Variance Authority**: Type-safe variant generation
- **Custom Design Tokens**: Consistent spacing, colors, typography
- **Responsive Design**: Mobile-first responsive patterns
-
-### Component Categories
-
-```typescript
-// Generic Layout Components
-export { Stack } from './components/generic/Stack/Stack';
-export { VStack } from './components/generic/VStack/VStack';
-export { HStack } from './components/generic/HStack/HStack';
-
-// Themed Components (Paper)
-export { Button } from './components/paper/PaperButton/Button';
-export { Separator } from './components/paper/PaperSeparator/Separator';
-```
-
-## ⚙️ Configuration Management
-
-### Shared Configurations
-
-Each configuration package provides standardized setups:
-
-#### ESLint Configuration
-
-```javascript
-// Provides: base, react configurations
-import { baseConfig } from '@ermnvldmr/eslint-config/dev';
-```
-
-#### Vitest Configuration
-
-```typescript
-// Provides: base, react configurations from rsbuild-config
-import { baseVitestConfig, reactVitestConfig } from '@ermnvldmr/rsbuild-config/dev';
-import { mergeConfig } from 'vitest/config';
-```
-
-#### Rsbuild Configuration
-
-```typescript
-// Provides: definePackageConfig, defineServiceConfig
-import { definePackageConfig } from '@ermnvldmr/rsbuild-config/dev';
-```
-
-### Service Configuration Inheritance
-
-Services inherit from shared configs but can override:
-
-```typescript
-// In service package.json devDependencies
-"@ermnvldmr/eslint-config": "workspace:*"
-"@ermnvldmr/rsbuild-config": "workspace:*"
-```
-
-## 🚀 Build & Deployment
-
-### Build Dependencies
-
-The monorepo must respect a strict build order due to package dependencies:
-
-1. **Configuration packages** (eslint-config, rsbuild-config, etc.) - Foundation tooling
-2. **STL package** - Shared utilities and types
-3. **UI package** - Component library (depends on STL)
-4. **Services** - Applications that consume packages (www, docs)
-
-### CI/CD Pipeline Structure
-
-The repository uses path-based CI/CD triggers - each package and service has dedicated workflows in `.github/workflows/`. Examine the workflow files to understand:
-
- **Trigger Patterns**: Which file changes activate each pipeline
- **Build Dependencies**: How packages are built in sequence
- **Quality Gates**: Linting, type-checking, and testing requirements
- **Deployment Targets**: Where each service is deployed
-
-## 🔧 Development Environment
-
-### Prerequisites
-
- **Node.js**: v20+
- **pnpm**: v9.12.3+
- **TypeScript**: v5.8+
- **Hugo**: v0.110.0+ (for docs service)
-
-### Initial Setup
-
-To start development, follow the dependency hierarchy:
-
-1. **Install dependencies** using the root `package.json` scripts
-2. **Build configuration packages** first (check packages ending in `-config`)
-3. **Build library packages** in dependency order (STL before UI)
-4. **Start services** after dependencies are built
-
-### Development Commands
-
-The monorepo provides scripts at multiple levels:
-
- **Root Level**: Check root `package.json` for monorepo-wide operations
- **Package Level**: Each package has its own build, test, and development scripts
- **Service Level**: Services have development servers, build commands, and testing
-
-Use pnpm workspace filtering (`--filter`) to target specific packages or services. Examine individual `package.json` files to discover available scripts for each component.
-
-## 🧪 Testing Strategy
-
-### Testing Framework Distribution
-
- **Shared Configuration**: Vitest configs in `@ermnvldmr/rsbuild-config`
- **Package Testing**: Each package has its own test suite
- **Service Testing**: Services test their specific functionality
- **Component Testing**: UI package uses React Testing Library with Vitest
- **Storybook Testing**: Visual regression and interaction testing
-
-### Test Organization
-
-```typescript
-// Package-level testing (packages/stl/src/functions/cn/cn.test.ts)
-describe('cn function', () => {
-  it('combines class names correctly', () => {
-    expect(cn('px-4', 'py-2')).toBe('px-4 py-2');
-  });
-});
-
-// Component testing (packages/ui/src/components/paper/Button/Button.test.tsx)
-describe('components/paper/Button/Button', () => {
-  it('renders with correct variant', () => {
-    render(<Button variant="destructive">Test</Button>);
-    expect(screen.getByRole('button')).toHaveClass('destructive');
-  });
-});
-```
-
-### Coverage Strategy
-
- **Package Coverage**: Individual coverage reports per package
- **Service Coverage**: Service-specific coverage including Storybook tests
- **Aggregated Coverage**: Combined reporting for the entire monorepo
-
---
-
-_This guide serves as the architectural foundation for the monorepo. Focus on these stable patterns and structures rather than specific implementation details that may change over time._
-
-## 🤖 AI Agent Best Practices
-
-The following are explicit best practices and preferences intended for AI tools and agents operating within this repository:
-
- **Build System Preference**: Rsbuild and Rspack are the standard and strongly preferred build tools for all projects in this monorepo due to their Rust-based architecture and performance. Do not introduce Vite, Astro, or Webpack unless strictly necessary.
- **Framework Preference**: The monorepo has migrated away from Astro in favor of React + Rsbuild (with MDX support).
- **Content Sites**: Rspress is the preferred infrastructure for any new content-heavy or documentation sites.
+## 3. Setup & Commands
+
+### CLI Commands
+
+- **Install dependencies**: `pnpm install`
+- **Development servers**:
+  - Website (`services/www`): `pnpm www:dev` (or `pnpm dev:www`)
+  - Documentation (`services/docs`): `pnpm docs:dev` (or `pnpm dev:docs`)
+  - UI Component Storybook (`packages/ui`): `pnpm ui:storybook`
+  - Static landings (`services/static`): `pnpm static:dev` (or `pnpm dev:static`)
+  - UI package build watcher: `pnpm ui:dev`
+- **Build**:
+  - Full workspace build: `pnpm build`
+  - Workspace package dependencies only: `pnpm build:deps`
+  - Individual package build: `pnpm --filter @ermnvldmr/ui build`
+- **Linting & Formatting**:
+  - Lint workspace: `pnpm lint`
+  - Typecheck workspace: `pnpm typecheck`
+  - Format files: `pnpm format`
+- **Testing**:
+  - Run full test suite: `pnpm test`
+  - Test single package: `pnpm --filter @ermnvldmr/ui test`
+  - Test single file: `pnpm --filter @ermnvldmr/ui exec vitest run src/components/Button/Button.test.tsx`
+  - Test coverage: `pnpm test:coverage`
+
+### Environment Setup
+
+- Environment variables are managed using `@dotenvx/dotenvx`.
+- `.env.dev` contains encrypted values and is tracked in git.
+- `.env.keys` contains local decryption keys (`DOTENV_PRIVATE_KEY`) and must never be committed.
+- Environment variables:
+  - `LOCALE`: Target build language (`en` or `ru`, defaults to `en`).
+  - `RSDOCTOR`: Set `RSDOCTOR=true` during build to trigger Rsbuild bundle analysis.
+  - S3 static sync credentials: `COM_ERMNVLDMR_STATIC_S3_BUCKET`, `COM_ERMNVLDMR_STATIC_S3_REGION`, `COM_ERMNVLDMR_STATIC_S3_ENDPOINT_URL`, `COM_ERMNVLDMR_STATIC_AWS_ACCESS_KEY_ID`, `COM_ERMNVLDMR_STATIC_AWS_SECRET_ACCESS_KEY`.
+
+## 4. Non-Negotiable Coding Rules & Patterns
+
+### Typing & Documentation Rules
+
+- **Strict TypeScript**: `strict: true` is enforced globally.
+- **Forbidden Types**: `any` is strictly prohibited (`@typescript-eslint/no-explicit-any: error`).
+- **Forbidden Assertions**: Type assertions (`as Type`) are strictly prohibited (`@typescript-eslint/consistent-type-assertions: ['error', { assertionStyle: 'never' }]`). Use explicit type guards or type casting helpers (e.g., `castRef` from `@ermnvldmr/stl`).
+- **Forbidden Non-Null Assertion**: Non-null assertion operator (`!`) is prohibited (`@typescript-eslint/no-non-null-assertion: error`).
+- **Explicit Type Imports**: Imports used strictly for types MUST use `import type` (`@typescript-eslint/consistent-type-imports: error`).
+- **Interface Definitions**: Object shapes MUST use `interface`, not `type` aliases (`@typescript-eslint/consistent-type-definitions: ['error', 'interface']`).
+- **TSDoc Requirements**: JSDoc comments are required on all exported function declarations, interfaces, and type declarations (`jsdoc/require-jsdoc: error`). A description string is mandatory (`jsdoc/require-description: error`).
+
+### Component Architecture & Structure
+
+- Component implementations in `packages/ui` MUST live in dedicated PascalCase subdirectories:
+  `packages/ui/src/components/<ComponentName>/`
+  - `<ComponentName>.tsx` — Component logic and JSX
+  - `<ComponentName>.stories.tsx` — Storybook stories
+  - `<ComponentName>.test.tsx` — Vitest unit tests
+- **Styling**: Component variant logic must use `cva` (class-variance-authority). Utility class merging must use `cn(...)` from `@ermnvldmr/stl`.
+- **Accessibility**: Interactive elements must leverage `react-aria` hooks (`useButton`, `useFocusRing`, `useHover`) to maintain accessibility standards.
+- **Naming Conventions**:
+  - PascalCase for React component files and directories (`Button/Button.tsx`).
+  - camelCase for helper modules, hooks, and utilities (`path.ts`, `useTheme.ts`).
+  - kebab-case for configuration files (`eslint.config.mjs`, `postcss.config.mjs`).
+
+### State Management & Import Rules
+
+- **State Primitives**: Use standard React state (`useState`, `useReducer`, `useContext`) and `react-stately` / `react-aria` primitives. Do not introduce unapproved third-party state managers.
+- **Monorepo Relative Imports**: Code inside a package or service MUST use relative paths when referencing files within that same package. Importing the package's own published name inside itself (e.g. `import ... from '@ermnvldmr/ui'` inside `packages/ui`) is strictly prohibited and fails ESLint checks.
+
+### Anti-Patterns ("What NOT to do")
+
+- **DO NOT** use `any`, `as Type` assertions, or `!` non-null assertions.
+- **DO NOT** introduce Vite, Webpack, or Next.js configurations. Rsbuild (Rspack) is the monorepo's standardized React bundler.
+- **DO NOT** use self-referential package imports within workspace packages; use relative paths.
+- **DO NOT** suppress linter or compiler errors with `@ts-ignore`, `@ts-nocheck`, or inline eslint disables without explicit user approval.
+- **DO NOT** commit unencrypted `.env` files or secret keys (`.env.keys`).
+- **DO NOT** run `git commit` or execute automated git commits under any circumstances.
+
+## 5. Critical Workflows & Safety Directives
+
+### Verification Workflow
+
+Before completing any task, run and pass every step in the following sequence:
+
+1. `pnpm typecheck` — 0 TypeScript compiler errors.
+2. `pnpm lint` — 0 ESLint warnings (`--max-warnings 0`).
+3. `pnpm test` — All unit and component tests passing.
+4. `pnpm build` — Clean workspace compilation.
+
+### Protected Boundaries
+
+The agent MUST NOT modify the following files or directories unless explicitly requested by the user:
+
+- `.env.keys` (untracked decryption keys).
+- `pnpm-lock.yaml` (dependencies must be managed exclusively through `pnpm` CLI commands).
+- `LICENSE` file.
+- `ci/` deployment configurations, Dockerfiles, and GitHub Actions workflows.
+- `services/docs/content/` and `services/www/content/` creative and literary works.
@@ -29,9 +29,12 @@ Composite (see [Copyright & License](#copyright--license))

 #### Packages

- **[@ermnvldmr/ui](./packages/ui)**: Shared React component library and design system.
- **[@ermnvldmr/stl](./packages/stl)**: Standard Template Library – common utilities and reusable logic.
+- **[@ermnvldmr/ui](./packages/ui)**: Shared React component library and design system primitives.
+- **[@ermnvldmr/kits](./packages/kits)**: High-level application & layout component kits (`BentoGrid`, `InfoCard`, `PageHead`, `Page`, `Time`, `Markdown`, `ThemeSwitch`).
+- **[@ermnvldmr/stl](./packages/stl)**: Standard Types Library – core utilities, type definitions, and React helpers.
 - **[@ermnvldmr/i18n](./packages/i18n)**: Internationalization utilities.
+- **[@ermnvldmr/ssg](./packages/ssg)**: Build-time Static Site Generation plugin for Rsbuild.
+- **[@ermnvldmr/cli](./packages/cli)**: Monorepo CLI utility (`ermnvldmr-cli`).
 - **[@ermnvldmr/eslint-config](./packages/eslint-config)**: Shared linting configurations.
 - **[@ermnvldmr/rsbuild-config](./packages/rsbuild-config)**: Shared build configurations (Rsbuild & Rspack).
 - **[@ermnvldmr/storybook-config](./packages/storybook-config)**: Shared Storybook configurations.
@@ -13,6 +13,7 @@ COPY pnpm-lock.yaml pnpm-workspace.yaml package.json ./
 # Copy all package.json files to allow pnpm to fetch dependencies
 COPY packages/eslint-config/package.json ./packages/eslint-config/
 COPY packages/rsbuild-config/package.json ./packages/rsbuild-config/
+COPY packages/ssg/package.json ./packages/ssg/
 COPY packages/stl/package.json ./packages/stl/
 COPY packages/storybook-config/package.json ./packages/storybook-config/
 COPY packages/ui/package.json ./packages/ui/
@@ -0,0 +1,32 @@
+#!/bin/bash
+set -e
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+STATIC_DIR="$SCRIPT_DIR/../../services/www/public/static"
+
+if [ ! -d "$STATIC_DIR" ]; then
+    echo "Directory $STATIC_DIR does not exist. Skipping."
+    exit 0
+fi
+
+echo "Optimizing images in $STATIC_DIR using cwebp..."
+
+# Find all png, jpg, jpeg files
+find "$STATIC_DIR" -type f \( -name "*.png" -o -name "*.jpg" -o -name "*.jpeg" \) | while read -r file; do
+    # Determine output path (replace extension with .webp)
+    dir=$(dirname "$file")
+    base=$(basename "$file")
+    ext="${base##*.}"
+    name="${base%.*}"
+    output="$dir/$name.webp"
+
+    # Check if webp already exists and is newer
+    if [ -f "$output" ] && [ "$output" -nt "$file" ]; then
+        echo "Skipping $file (already optimized)"
+    else
+        echo "Optimizing: $file -> $output"
+        cwebp -q 80 "$file" -o "$output"
+    fi
+done
+
+echo "Image optimization complete!"
@@ -23,6 +23,10 @@
    "ui:build": "pnpm --filter @ermnvldmr/ui build",
    "ui:test": "pnpm --filter @ermnvldmr/ui test",
    "ui:storybook": "pnpm --filter @ermnvldmr/ui storybook",
+    "kits:dev": "pnpm --filter @ermnvldmr/kits dev",
+    "kits:build": "pnpm --filter @ermnvldmr/kits build",
+    "kits:test": "pnpm --filter @ermnvldmr/kits test",
+    "kits:storybook": "pnpm --filter @ermnvldmr/kits storybook",
    "www:dev": "pnpm --filter @ermnvldmr/www dev",
    "www:build": "pnpm --filter @ermnvldmr/www build",
    "www:storybook": "pnpm --filter @ermnvldmr/www storybook",
@@ -33,18 +37,19 @@
    "static:lint": "pnpm --filter @ermnvldmr/static lint",
    "static:typecheck": "pnpm --filter @ermnvldmr/static typecheck",
    "dev:ui": "pnpm ui:dev",
-    "dev:www": "pnpm ui:build && pnpm www:dev",
-    "dev:static": "pnpm ui:build && pnpm static:dev",
+    "dev:kits": "pnpm kits:dev",
+    "dev:www": "pnpm ui:build && pnpm kits:build && pnpm www:dev",
+    "dev:static": "pnpm ui:build && pnpm kits:build && pnpm static:dev",
    "dev:docs": "pnpm docs:dev",
-    "build": "pnpm ui:build && pnpm -r --filter='./services/*' build",
-    "build:storybooks": "pnpm ui:build && pnpm --filter @ermnvldmr/ui build-storybook && pnpm --filter @ermnvldmr/www build-storybook",
+    "build": "pnpm ui:build && pnpm --filter @ermnvldmr/kits build && pnpm -r --filter='./services/*' build",
+    "build:storybooks": "pnpm ui:build && pnpm --filter @ermnvldmr/kits build && pnpm --filter @ermnvldmr/ui build-storybook && pnpm --filter @ermnvldmr/kits build-storybook && pnpm --filter @ermnvldmr/www build-storybook",
    "lint": "pnpm -r lint",
    "format": "prettier --write .",
    "typecheck": "pnpm -r typecheck",
    "test": "pnpm -r test",
    "test:coverage": "pnpm -r test:coverage",
    "clean": "pnpm -r clean && rm -rf node_modules",
-    "build:deps": "pnpm -r --filter='./packages/*-config' build && pnpm --filter='./packages/i18n' build"
+    "build:deps": "pnpm -r --filter='./packages/*-config' build && pnpm --filter='./packages/i18n' build && pnpm --filter='./packages/ui' build && pnpm --filter='./packages/kits' build"
  },
  "devDependencies": {
    "globals": "^16.0.0",
@@ -0,0 +1,105 @@
+# @ermnvldmr/cli
+
+An extensible, configuration-driven CLI toolkit designed specifically for the ermnvldmr monorepo. 
+
+## Overview
+
+The `@ermnvldmr/cli` package provides a unified way to declare, manage, and execute scripts across different packages and services in the monorepo. Instead of cluttering `package.json` with complex bash scripts or maintaining ad-hoc Node.js script files, developers can define their package's commands in a strongly-typed `.config/cli.ts` file.
+
+Under the hood, it uses [Commander.js](https://github.com/tj/commander.js) for argument parsing and [JITI](https://github.com/unjs/jiti) for seamless, dynamic TypeScript execution.
+
+## Features
+
+- **Centralized Configuration:** Define all commands in a single `.config/cli.ts` file per package.
+- **Type-Safe Builders:** Use `bashCommand` and `nodeCommand` builders to get strict TypeScript inference.
+- **Bash & Node Support:** Easily execute shell scripts (via `execa`) or arbitrary asynchronous Node.js functions.
+- **Commander Integration:** Automatically registers commands, descriptions, and arguments into a robust CLI interface.
+
+## Installation
+
+This package is intended to be used as a development dependency within the monorepo's workspace packages.
+
+```bash
+pnpm add -D @ermnvldmr/cli --workspace
+```
+
+## Usage
+
+### 1. Create a Configuration File
+
+Create a `.config/cli.ts` file in the root of your package/service (e.g., `packages/ui/.config/cli.ts`).
+
+```typescript
+import { defineCli, bashCommand, nodeCommand } from '@ermnvldmr/cli';
+
+export default defineCli({
+  commands: [
+    bashCommand({
+      name: 'hello',
+      description: 'Prints a hello message via bash',
+      script: 'echo "Hello from Bash!"'
+    }),
+    
+    nodeCommand({
+      name: 'build:custom',
+      description: 'Runs a custom node build step',
+      options: [
+        {
+          flags: '--minify',
+          description: 'Enable minification',
+          defaultValue: false
+        }
+      ],
+      action: async (options) => {
+        console.log('Building with node...');
+        if (options.minify) {
+          console.log('Minification enabled!');
+        }
+      }
+    })
+  ]
+});
+```
+
+### 2. Run the CLI
+
+You can invoke the CLI directly using `pnpm exec` from the package directory:
+
+```bash
+pnpm exec ermnvldmr-cli hello
+pnpm exec ermnvldmr-cli build:custom --minify
+```
+
+Alternatively, you can wire it into your `package.json` scripts:
+
+```json
+{
+  "scripts": {
+    "cli": "ermnvldmr-cli",
+    "hello": "ermnvldmr-cli hello"
+  }
+}
+```
+
+## API Reference
+
+### `defineCli(config: CliConfig)`
+
+An identity helper function that provides strict TypeScript type-inference for your configuration object. It returns the configuration unmodified.
+
+### `bashCommand(config: Omit<BashCommandConfig, 'type'>)`
+
+A builder function for defining shell commands. 
+- **`script`**: The exact bash string to execute. It will be executed using `execa` with `shell: true` and `stdio: 'inherit'`.
+
+### `nodeCommand(config: Omit<NodeCommandConfig, 'type'>)`
+
+A builder function for defining arbitrary JavaScript/TypeScript actions.
+- **`action`**: An asynchronous function `(options: Record<string, unknown>) => Promise<void> | void` that executes when the command is invoked.
+
+## Development
+
+This package adheres to the global monorepo standards outlined in `GEMINI.md`:
+- **Strict TypeScript**: No `any` types are permitted.
+- **TSDoc**: All exported members must include comprehensive TSDoc comments.
+- **TDD**: Modifications and new builders should be accompanied by Vitest unit tests.
@@ -0,0 +1,45 @@
+{
+  "name": "@ermnvldmr/cli",
+  "version": "1.0.0",
+  "description": "Extensible CLI tool for ermnvldmr projects",
+  "type": "module",
+  "bin": {
+    "ermnvldmr-cli": "./dist/bin.js"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "eslint src --max-warnings 0",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "@aws-sdk/client-s3": "^3.1075.0",
+    "@dotenvx/dotenvx": "^1.75.1",
+    "commander": "^13.1.0",
+    "execa": "^9.5.2",
+    "fast-glob": "^3.3.3",
+    "jiti": "^2.4.2",
+    "mime-types": "^3.0.2"
+  },
+  "devDependencies": {
+    "@ermnvldmr/eslint-config": "workspace:*",
+    "@ermnvldmr/rsbuild-config": "workspace:*",
+    "@types/mime-types": "^3.0.1",
+    "@types/node": "^22.13.0",
+    "sharp": "^0.35.2",
+    "typescript": "^5.8.2",
+    "vitest": "^4.0.18"
+  }
+}
@@ -0,0 +1,8 @@
+#!/usr/bin/env node
+
+import { runCli } from './lib/runner.js';
+
+runCli().catch((err) => {
+  console.error('An unexpected error occurred:', err);
+  process.exit(1);
+});
@@ -0,0 +1,17 @@
+import { describe, it, expect } from 'vitest';
+
+import { defineCli, bashCommand, nodeCommand } from './index.js';
+
+describe('public exports', () => {
+  it('defineCli returns the passed config unmodified', () => {
+    const config = defineCli({
+      commands: [],
+    });
+    expect(config.commands).toEqual([]);
+  });
+
+  it('exports builders', () => {
+    expect(typeof bashCommand).toBe('function');
+    expect(typeof nodeCommand).toBe('function');
+  });
+});
@@ -0,0 +1,25 @@
+import type { CliConfig } from './lib/types.js';
+
+/**
+ * Helper function to define the CLI configuration with strict type-safety.
+ *
+ * @param config - The CLI configuration containing the array of commands.
+ * @returns The unmodified CLI configuration.
+ * @example
+ * ```typescript
+ * const config = defineCli({
+ *   commands: [
+ *     bashCommand({ name: 'hello', description: 'say hello', script: 'echo hello' })
+ *   ]
+ * });
+ * ```
+ */
+export function defineCli(config: CliConfig): CliConfig {
+  return config;
+}
+
+export { bashCommand } from './lib/builders/bash.js';
+export { nodeCommand } from './lib/builders/node.js';
+export { s3SyncCommand } from './lib/builders/s3Sync.js';
+export { env } from './lib/env.js';
+export * from './lib/types.js';
@@ -0,0 +1,18 @@
+import { describe, it, expect } from 'vitest';
+
+import { bashCommand } from './bash.js';
+
+describe('bashCommand builder', () => {
+  it('should return a properly formatted bash command config', () => {
+    const config = bashCommand({
+      name: 'hello',
+      description: 'says hello',
+      script: 'echo "hello"',
+    });
+
+    expect(config.name).toBe('hello');
+    expect(config.description).toBe('says hello');
+    expect(config.script).toBe('echo "hello"');
+    expect(config.type).toBe('bash');
+  });
+});
@@ -0,0 +1,24 @@
+import type { BashCommandConfig } from '../types.js';
+
+/**
+ * Creates a Bash command configuration.
+ *
+ * @param config - The command configuration excluding the 'type' field.
+ * @returns The fully formatted Bash command configuration.
+ * @example
+ * ```typescript
+ * const config = bashCommand({
+ *   name: 'hello',
+ *   description: 'says hello',
+ *   script: 'echo "hello"'
+ * });
+ * ```
+ */
+export function bashCommand(
+  config: Omit<BashCommandConfig, 'type'>
+): BashCommandConfig {
+  return {
+    ...config,
+    type: 'bash',
+  };
+}
@@ -0,0 +1,19 @@
+import { describe, it, expect } from 'vitest';
+
+import { nodeCommand } from './node.js';
+
+describe('nodeCommand builder', () => {
+  it('should return a properly formatted node command config', () => {
+    const action = async () => {};
+    const config = nodeCommand({
+      name: 'build',
+      description: 'builds stuff',
+      action,
+    });
+
+    expect(config.name).toBe('build');
+    expect(config.description).toBe('builds stuff');
+    expect(config.action).toBe(action);
+    expect(config.type).toBe('node');
+  });
+});
@@ -0,0 +1,24 @@
+import type { NodeCommandConfig } from '../types.js';
+
+/**
+ * Creates a Node command configuration.
+ *
+ * @param config - The command configuration excluding the 'type' field.
+ * @returns The fully formatted Node command configuration.
+ * @example
+ * ```typescript
+ * const config = nodeCommand({
+ *   name: 'run',
+ *   description: 'runs action',
+ *   action: () => console.log('hello')
+ * });
+ * ```
+ */
+export function nodeCommand(
+  config: Omit<NodeCommandConfig, 'type'>
+): NodeCommandConfig {
+  return {
+    ...config,
+    type: 'node',
+  };
+}
@@ -0,0 +1,17 @@
+import { describe, it, expect } from 'vitest';
+
+import { s3SyncCommand } from './s3Sync.js';
+
+describe('s3SyncCommand', () => {
+  it('should create an s3-sync command config', () => {
+    const config = s3SyncCommand({
+      name: 'sync',
+      description: 'Sync files',
+      targetPrefix: 'www'
+    });
+
+    expect(config.type).toBe('s3-sync');
+    expect(config.name).toBe('sync');
+    expect(config.targetPrefix).toBe('www');
+  });
+});
@@ -0,0 +1,24 @@
+import type { S3SyncCommandConfig } from '../types.js';
+
+/**
+ * Creates an S3 Sync command configuration.
+ *
+ * @param config - The command configuration excluding the 'type' field.
+ * @returns The fully formatted S3 Sync command configuration.
+ * @example
+ * ```typescript
+ * const config = s3SyncCommand({
+ *   name: 'sync',
+ *   description: 'Sync files',
+ *   targetPrefix: 'www'
+ * });
+ * ```
+ */
+export function s3SyncCommand(
+  config: Omit<S3SyncCommandConfig, 'type'>
+): S3SyncCommandConfig {
+  return {
+    ...config,
+    type: 's3-sync',
+  };
+}
@@ -0,0 +1,68 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+// Mock dotenvx before importing env
+vi.mock('@dotenvx/dotenvx', () => ({
+  config: vi.fn(),
+}));
+
+// Mock node:fs so findRoot returns a predictable root
+vi.mock('node:fs', () => ({
+  existsSync: vi.fn((p: string) => String(p).endsWith('pnpm-workspace.yaml')),
+}));
+
+describe('env', () => {
+  beforeEach(() => {
+    // Reset module registry so the `loaded` singleton resets between tests
+    vi.resetModules();
+  });
+
+  it('calls dotenvx config() on first access with the root .env.dev path', async () => {
+    const { config } = await import('@dotenvx/dotenvx');
+    const { env } = await import('./env.js');
+
+    process.env.TEST_VAR = 'hello';
+    env('TEST_VAR');
+
+    expect(config).toHaveBeenCalledTimes(1);
+    const firstCall = vi.mocked(config).mock.calls[0];
+    expect(firstCall[0]).toMatchObject({ path: expect.stringContaining('.env.dev') });
+    delete process.env.TEST_VAR;
+  });
+
+  it('returns the environment variable value', async () => {
+    const { env } = await import('./env.js');
+
+    process.env.MY_KEY = 'my-value';
+    expect(env('MY_KEY')).toBe('my-value');
+    delete process.env.MY_KEY;
+  });
+
+  it('returns the fallback when the variable is not set', async () => {
+    const { env } = await import('./env.js');
+
+    delete process.env.MISSING_KEY;
+    expect(env('MISSING_KEY', 'fallback-value')).toBe('fallback-value');
+  });
+
+  it('returns undefined when the variable is not set and no fallback is provided', async () => {
+    const { env } = await import('./env.js');
+
+    delete process.env.MISSING_KEY;
+    expect(env('MISSING_KEY')).toBeUndefined();
+  });
+
+  it('calls dotenvx config() only once across multiple env() calls within the same import', async () => {
+    const { config } = await import('@dotenvx/dotenvx');
+    const mockConfig = vi.mocked(config);
+    mockConfig.mockClear();
+
+    const { env } = await import('./env.js');
+
+    env('FOO');
+    env('BAR');
+    env('BAZ');
+
+    // config() should have been called exactly once for this fresh module instance
+    expect(mockConfig).toHaveBeenCalledTimes(1);
+  });
+});
@@ -0,0 +1,84 @@
+import { existsSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+
+import { config } from '@dotenvx/dotenvx';
+
+let loaded = false;
+
+/**
+ * Walks up the directory tree from `start` until it finds a directory
+ * containing `pnpm-workspace.yaml` (the monorepo root), or reaches the
+ * filesystem root.
+ *
+ * @param start - Directory to begin the search from.
+ * @returns The path of the monorepo root directory, or `start` as a fallback.
+ *
+ * @example
+ * ```typescript
+ * const root = findRoot(process.cwd());
+ * ```
+ *
+ * @internal
+ */
+function findRoot(start: string): string {
+  let dir = start;
+  for (;;) {
+    if (existsSync(join(dir, 'pnpm-workspace.yaml'))) {
+      return dir;
+    }
+    const parent = dirname(dir);
+    if (parent === dir) {
+      // Reached the filesystem root without finding the marker.
+      return start;
+    }
+    dir = parent;
+  }
+}
+
+/**
+ * Ensures dotenvx has loaded `.env.dev` from the monorepo root into `process.env`.
+ * Walks up from the current working directory to find the root, then loads the
+ * `.env.dev` file located there. Safe to call multiple times — runs only once per
+ * process.
+ *
+ * @example
+ * ```typescript
+ * ensureLoaded();
+ * ```
+ *
+ * @internal
+ */
+function ensureLoaded(): void {
+  if (!loaded) {
+    config({ path: join(findRoot(process.cwd()), '.env.dev') });
+    loaded = true;
+  }
+}
+
+/**
+ * Reads an environment variable by key, loading `.env.dev` files via dotenvx on
+ * the first call. Optionally returns a fallback value when the variable is
+ * not set.
+ *
+ * Designed for use inside `cli.ts` config files so that env values are
+ * resolved **at command execution time** (after dotenvx has populated
+ * `process.env`), not at config-parse time.
+ *
+ * @param key - The name of the environment variable to read.
+ * @param fallback - Optional fallback value returned when the variable is absent.
+ * @returns The environment variable value, the fallback, or `undefined`.
+ *
+ * @example
+ * ```typescript
+ * import { env } from '@ermnvldmr/cli';
+ *
+ * s3SyncCommand({
+ *   bucket: env('MY_BUCKET'),
+ *   region: env('AWS_REGION', 'us-east-1'),
+ * });
+ * ```
+ */
+export function env(key: string, fallback?: string): string | undefined {
+  ensureLoaded();
+  return process.env[key] ?? fallback;
+}
@@ -0,0 +1,49 @@
+import { Command } from 'commander';
+import { describe, it, expect, vi } from 'vitest';
+
+import { registerCommands } from './runner.js';
+import { runS3Sync } from './runners/s3SyncRunner.js';
+
+vi.mock('./runners/s3SyncRunner.js', () => ({
+  runS3Sync: vi.fn(),
+}));
+
+describe('registerCommands', () => {
+  it('registers commands into a Commander instance', async () => {
+    const program = new Command();
+    const actionSpy = vi.fn();
+    
+    registerCommands(program, {
+      commands: [
+        {
+          type: 'node',
+          name: 'test-cmd',
+          description: 'A test command',
+          action: actionSpy,
+        }
+      ]
+    });
+    
+    // We simulate parsing args to run the action. The registered action is
+    // async, so parseAsync + await ensures it runs before we assert.
+    await program.parseAsync(['node', 'script', 'test-cmd']);
+    expect(actionSpy).toHaveBeenCalled();
+  });
+
+  it('registers s3-sync commands into a Commander instance', async () => {
+    const program = new Command();
+    const cmd = {
+      type: 's3-sync' as const,
+      name: 'sync-cmd',
+      description: 'An S3 sync command',
+      targetPrefix: 'my-site',
+    };
+    
+    registerCommands(program, {
+      commands: [cmd]
+    });
+    
+    await program.parseAsync(['node', 'script', 'sync-cmd']);
+    expect(runS3Sync).toHaveBeenCalledWith(cmd, expect.any(Object));
+  });
+});
@@ -0,0 +1,119 @@
+import fs from 'fs';
+import path from 'path';
+
+import { Command } from 'commander';
+import { execaCommand } from 'execa';
+import { createJiti } from 'jiti';
+
+import type { CliConfig } from './types.js';
+
+/**
+ * Registers commands from the configuration into a Commander program.
+ * 
+ * @param program - The Commander program instance.
+ * @param config - The CLI configuration containing the commands to register.
+ * @example
+ * ```typescript
+ * import { Command } from 'commander';
+ * const program = new Command();
+ * registerCommands(program, { commands: [] });
+ * ```
+ */
+export function registerCommands(program: Command, config: CliConfig): void {
+  for (const cmd of config.commands) {
+    const command = program.command(cmd.name).description(cmd.description);
+    
+    if (cmd.options) {
+      for (const opt of cmd.options) {
+        command.option(opt.flags, opt.description, opt.defaultValue);
+      }
+    }
+
+    switch (cmd.type) {
+      case 'bash': {
+        command.action(async () => {
+          try {
+            await execaCommand(cmd.script, { stdio: 'inherit', shell: true });
+          } catch (err: unknown) {
+            const isErrorWithExitCode = (e: unknown): e is { exitCode: number } => {
+              return typeof e === 'object' && e !== null && 'exitCode' in e && typeof Reflect.get(e, 'exitCode') === 'number';
+            };
+            process.exit(isErrorWithExitCode(err) ? err.exitCode : 1);
+          }
+        });
+        break;
+      }
+      case 'node': {
+        command.action(async (options: Record<string, unknown>) => {
+          try {
+            await cmd.action(options);
+          } catch (err: unknown) {
+            console.error(err);
+            process.exit(1);
+          }
+        });
+        break;
+      }
+      case 's3-sync': {
+        command.action(async (options: Record<string, unknown>) => {
+          try {
+            const { runS3Sync } = await import('./runners/s3SyncRunner.js');
+            await runS3Sync(cmd, options);
+          } catch (err: unknown) {
+            console.error(err);
+            process.exit(1);
+          }
+        });
+        break;
+      }
+      default: {
+        const _exhaustiveCheck: never = cmd;
+        void _exhaustiveCheck;
+        break;
+      }
+    }
+  }
+}
+
+/**
+ * Main entry point function that loads the CLI configuration and executes the runner.
+ * 
+ * @param cwd - Current working directory (defaults to process.cwd()).
+ * @param argv - Process arguments (defaults to process.argv).
+ * @example
+ * ```typescript
+ * await runCli();
+ * ```
+ */
+export async function runCli(cwd: string = process.cwd(), argv: string[] = process.argv): Promise<void> {
+  const configPath = path.join(cwd, '.config/cli.ts');
+  
+  if (!fs.existsSync(configPath)) {
+    console.error(`Error: No .config/cli.ts found in ${cwd}`);
+    process.exit(1);
+  }
+
+  const jiti = createJiti(import.meta.url);
+  const rawModule = await jiti.import(configPath);
+  
+  const isCliConfigModule = (mod: unknown): mod is { default: CliConfig } => {
+    return typeof mod === 'object' && mod !== null && 'default' in mod;
+  };
+
+  if (!isCliConfigModule(rawModule)) {
+    console.error(`Error: Invalid CLI configuration export in ${configPath}`);
+    process.exit(1);
+  }
+
+  const config = rawModule.default;
+
+  const program = new Command();
+  program
+    .name('ermnvldmr-cli')
+    .description('Extensible CLI runner')
+    .version('1.0.0');
+
+  registerCommands(program, config);
+  
+  program.parse(argv);
+}
@@ -0,0 +1,300 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+
+import { runS3Sync } from './s3SyncRunner.js';
+
+import type { S3SyncCommandConfig } from '../types.js';
+
+interface MockPutObjectCommandInput {
+  Bucket: string;
+  Key: string;
+  Body: Buffer;
+  ContentType: string;
+}
+
+class MockPutObjectCommand {
+  constructor(public input: MockPutObjectCommandInput) {}
+}
+
+// Mock dotenvx
+vi.mock('@dotenvx/dotenvx', () => ({
+  config: vi.fn(),
+}));
+
+// Mock S3Client
+const mockSend = vi.fn<(command: MockPutObjectCommand) => Promise<unknown>>();
+vi.mock('@aws-sdk/client-s3', () => {
+  return {
+    S3Client: class {
+      send = mockSend;
+    },
+    PutObjectCommand: class {
+      constructor(public input: MockPutObjectCommandInput) {}
+    },
+  };
+});
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+describe('runS3Sync', () => {
+  const tempDir = path.resolve(__dirname, 'temp_test_s3_sync');
+  let cwdSpy: { mockRestore: () => void };
+
+  beforeEach(() => {
+    mockSend.mockReset();
+    
+    // Set required environment variables
+    process.env.S3_BUCKET = 'my-bucket';
+    process.env.AWS_REGION = 'us-east-1';
+    process.env.S3_ENDPOINT_URL = 'https://s3.example.com';
+    process.env.AWS_ACCESS_KEY_ID = 'access-key';
+    process.env.AWS_SECRET_ACCESS_KEY = 'secret-key';
+
+    if (fs.existsSync(tempDir)) {
+      fs.rmSync(tempDir, { recursive: true, force: true });
+    }
+    fs.mkdirSync(tempDir, { recursive: true });
+
+    // Mock process.cwd to return tempDir so glob search happens in tempDir/src
+    cwdSpy = vi.spyOn(process, 'cwd').mockReturnValue(tempDir);
+  });
+
+  afterEach(() => {
+    cwdSpy.mockRestore();
+    if (fs.existsSync(tempDir)) {
+      fs.rmSync(tempDir, { recursive: true, force: true });
+    }
+  });
+
+  it('should throw error if required env variables are missing', async () => {
+    const cmd: S3SyncCommandConfig = {
+      name: 'sync',
+      description: 'desc',
+      targetPrefix: 'test',
+      type: 's3-sync'
+    };
+    
+    // Clear env vars
+    delete process.env.S3_BUCKET;
+    
+    await expect(runS3Sync(cmd, {})).rejects.toThrow('Missing required S3 environment variables');
+  });
+
+  it('should successfully sync files using default sourceDir and replace references in source files', async () => {
+    // Default sourceDir is public/static
+    const publicStaticDir = path.join(tempDir, 'public/static');
+    fs.mkdirSync(publicStaticDir, { recursive: true });
+
+    // Create dummy source folder and files (where references will be replaced)
+    const srcDir = path.join(tempDir, 'src');
+    fs.mkdirSync(srcDir, { recursive: true });
+    
+    const htmlSourcePath = path.join(srcDir, 'index.tsx');
+    const cssSourcePath = path.join(srcDir, 'style.css');
+
+    fs.writeFileSync(htmlSourcePath, 'const img = "/static/logo.png";');
+    fs.writeFileSync(cssSourcePath, 'body { background: url(/static/logo.png); }');
+
+    // Create dummy files inside the static directory to upload
+    const imagePath = path.join(publicStaticDir, 'logo.png');
+    fs.writeFileSync(imagePath, 'binary-content-mock');
+
+    const cmd: S3SyncCommandConfig = {
+      name: 'sync',
+      description: 'desc',
+      targetPrefix: 'my-site',
+      type: 's3-sync',
+    };
+
+    // Run sync (which should default to public/static)
+    await runS3Sync(cmd, {});
+
+    // Check if the HTML and CSS source file references were replaced
+    const htmlContent = fs.readFileSync(htmlSourcePath, 'utf-8');
+    const cssContent = fs.readFileSync(cssSourcePath, 'utf-8');
+
+    expect(htmlContent).toContain('https://s3.example.com/my-bucket/my-site/logo.png');
+    expect(cssContent).toContain('https://s3.example.com/my-bucket/my-site/logo.png');
+
+    // Check if S3Client sent PutObjectCommands for the file
+    expect(mockSend).toHaveBeenCalledTimes(1);
+
+    const calls = mockSend.mock.calls;
+    const commandInstance = calls[0][0];
+    expect(commandInstance.input.Key).toBe('my-site/logo.png');
+  });
+
+  it('should replace longer overlapping filenames before shorter ones', async () => {
+    const publicStaticDir = path.join(tempDir, 'public/static');
+    fs.mkdirSync(publicStaticDir, { recursive: true });
+
+    const srcDir = path.join(tempDir, 'src');
+    fs.mkdirSync(srcDir, { recursive: true });
+    
+    const sourcePath = path.join(srcDir, 'index.tsx');
+    fs.writeFileSync(sourcePath, 'const img1 = "/static/logo.png.webp"; const img2 = "/static/logo.png";');
+
+    fs.writeFileSync(path.join(publicStaticDir, 'logo.png.webp'), 'webp-mock');
+    fs.writeFileSync(path.join(publicStaticDir, 'logo.png'), 'png-mock');
+
+    const cmd: S3SyncCommandConfig = {
+      name: 'sync',
+      description: 'desc',
+      targetPrefix: 'my-site',
+      type: 's3-sync',
+    };
+
+    await runS3Sync(cmd, {});
+
+    const content = fs.readFileSync(sourcePath, 'utf-8');
+    expect(content).toContain('https://s3.example.com/my-bucket/my-site/logo.png.webp');
+    expect(content).toContain('https://s3.example.com/my-bucket/my-site/logo.png');
+    expect(content).not.toContain('/static/logo.png.webp');
+    expect(content).not.toContain('/static/logo.png');
+  });
+
+  it('should respect beforeUpload hook if provided', async () => {
+    const publicStaticDir = path.join(tempDir, 'public/static');
+    fs.mkdirSync(publicStaticDir, { recursive: true });
+
+    const htmlPath = path.join(publicStaticDir, 'index.html');
+    fs.writeFileSync(htmlPath, '<html><body>Hello</body></html>');
+
+    const cmd: S3SyncCommandConfig = {
+      name: 'sync',
+      description: 'desc',
+      targetPrefix: 'my-site',
+      type: 's3-sync',
+      hooks: {
+        beforeUpload: (files) => {
+          const processed = files.map(file => {
+            const ext = path.extname(file);
+            const base = path.basename(file, ext);
+            return {
+              originalName: path.basename(file),
+              finalName: `custom-${base}${ext}`,
+              absolutePath: file,
+            };
+          });
+          return Promise.resolve(processed);
+        }
+      }
+    };
+
+    await runS3Sync(cmd, {});
+
+    expect(mockSend).toHaveBeenCalledTimes(1);
+    const commandInstance = mockSend.mock.calls[0][0];
+    expect(commandInstance.input.Key).toBe('my-site/custom-index.html');
+  });
+
+  it('should resolve S3 configuration parameters passed directly via configuration object', async () => {
+    const publicStaticDir = path.join(tempDir, 'public/static');
+    fs.mkdirSync(publicStaticDir, { recursive: true });
+
+    // Write a dummy file to upload so the upload loop runs
+    fs.writeFileSync(path.join(publicStaticDir, 'test.txt'), 'content');
+
+    // Clear standard env vars to ensure fallback is not used
+    delete process.env.S3_BUCKET;
+    delete process.env.AWS_REGION;
+    delete process.env.AWS_ACCESS_KEY_ID;
+    delete process.env.AWS_SECRET_ACCESS_KEY;
+
+    const cmd: S3SyncCommandConfig = {
+      name: 'sync',
+      description: 'desc',
+      targetPrefix: 'test',
+      bucket: 'direct-bucket',
+      region: 'us-west-2',
+      accessKeyId: 'direct-access-key',
+      secretAccessKey: 'direct-secret-key',
+      type: 's3-sync'
+    };
+
+    await runS3Sync(cmd, {});
+
+    expect(mockSend).toHaveBeenCalled();
+    const commandInstance = mockSend.mock.calls[0][0];
+    expect(commandInstance.input.Bucket).toBe('direct-bucket');
+  });
+
+  it('should run beforeSync hook as shell command if provided as string', async () => {
+    const publicStaticDir = path.join(tempDir, 'public/static');
+    fs.mkdirSync(publicStaticDir, { recursive: true });
+    fs.writeFileSync(path.join(publicStaticDir, 'test.txt'), 'content');
+
+    const cmd: S3SyncCommandConfig = {
+      name: 'sync',
+      description: 'desc',
+      targetPrefix: 'test',
+      type: 's3-sync',
+      hooks: {
+        beforeSync: 'echo "hello from beforeSync script"',
+      },
+    };
+
+    await runS3Sync(cmd, {});
+    expect(mockSend).toHaveBeenCalled();
+  });
+
+  it('should run beforeSync hook as async function if provided as function', async () => {
+    const publicStaticDir = path.join(tempDir, 'public/static');
+    fs.mkdirSync(publicStaticDir, { recursive: true });
+    fs.writeFileSync(path.join(publicStaticDir, 'test.txt'), 'content');
+
+    const beforeSyncFn = vi.fn().mockResolvedValue(undefined);
+
+    const cmd: S3SyncCommandConfig = {
+      name: 'sync',
+      description: 'desc',
+      targetPrefix: 'test',
+      type: 's3-sync',
+      hooks: {
+        beforeSync: beforeSyncFn,
+      },
+    };
+
+    await runS3Sync(cmd, {});
+    expect(beforeSyncFn).toHaveBeenCalledTimes(1);
+    expect(mockSend).toHaveBeenCalled();
+  });
+
+  it('should automatically map png/jpg/jpeg to webp if counterpart exists and deduplicate uploads', async () => {
+    const publicStaticDir = path.join(tempDir, 'public/static');
+    fs.mkdirSync(publicStaticDir, { recursive: true });
+
+    // Create png and webp counterpart
+    fs.writeFileSync(path.join(publicStaticDir, 'logo.png'), 'png-content');
+    fs.writeFileSync(path.join(publicStaticDir, 'logo.webp'), 'webp-content');
+
+    // Create a source file referencing the png
+    const srcDir = path.join(tempDir, 'src');
+    fs.mkdirSync(srcDir, { recursive: true });
+    const sourcePath = path.join(srcDir, 'index.tsx');
+    fs.writeFileSync(sourcePath, 'const img = "/static/logo.png";');
+
+    const cmd: S3SyncCommandConfig = {
+      name: 'sync',
+      description: 'desc',
+      targetPrefix: 'test',
+      type: 's3-sync',
+    };
+
+    await runS3Sync(cmd, {});
+
+    // Reference replacement check: /static/logo.png should be replaced by S3 URL of logo.webp
+    const content = fs.readFileSync(sourcePath, 'utf-8');
+    expect(content).toContain('https://s3.example.com/my-bucket/test/logo.webp');
+    expect(content).not.toContain('logo.png');
+
+    // Deduplication check: only logo.webp should have been uploaded once (mockSend called once for logo.webp)
+    expect(mockSend).toHaveBeenCalledTimes(1);
+    const commandInstance = mockSend.mock.calls[0][0];
+    expect(commandInstance.input.Key).toBe('test/logo.webp');
+  });
+});
@@ -0,0 +1,220 @@
+import fs from 'fs';
+import path from 'path';
+
+import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';
+import { execaCommand } from 'execa';
+import fg from 'fast-glob';
+import mime from 'mime-types';
+
+import type { S3SyncCommandConfig, ProcessedFile } from '../types.js';
+
+/**
+ * Normalizes prefix and name to construct a clean S3 key.
+ *
+ * @param prefix - The target directory prefix.
+ * @param name - The relative path/name of the file.
+ * @returns The clean, normalized S3 key.
+ *
+ * @example
+ * ```typescript
+ * normalizeKey('static', 'js/main.js'); // 'static/js/main.js'
+ * ```
+ */
+function normalizeKey(prefix: string, name: string): string {
+  const parts = [prefix, name]
+    .filter(Boolean)
+    .map(p => p.replace(/^\/+|\/+$/g, '').replace(/\\/g, '/'));
+  return parts.join('/');
+}
+
+/**
+ * Runs the S3 Sync command.
+ *
+ * Loads environment variables, instantiates S3Client, processes files,
+ * replaces static asset references in source files (`/static/filename` -> S3 URL),
+ * and uploads the assets to S3.
+ *
+ * @param cmd - The configuration for the S3 sync command.
+ * @param options - Additional options passed from Commander.
+ * @returns A promise that resolves when the synchronization is complete.
+ * @throws An error if required environment variables are missing.
+ *
+ * @example
+ * ```typescript
+ * await runS3Sync(cmd, {});
+ * ```
+ */
+export async function runS3Sync(
+  cmd: S3SyncCommandConfig,
+  options: Record<string, unknown> = {}
+): Promise<void> {
+  void options;
+
+  const bucket = cmd.bucket ?? process.env.S3_BUCKET;
+  const region = cmd.region ?? process.env.AWS_REGION ?? process.env.S3_REGION;
+  const endpoint = cmd.endpoint ?? process.env.S3_ENDPOINT_URL ?? process.env.S3_ENDPOINT;
+  const accessKey = cmd.accessKeyId ?? process.env.AWS_ACCESS_KEY_ID ?? process.env.S3_ACCESS_KEY_ID;
+  const secretKey = cmd.secretAccessKey ?? process.env.AWS_SECRET_ACCESS_KEY ?? process.env.S3_SECRET_ACCESS_KEY;
+
+  if (!bucket || !region || !accessKey || !secretKey) {
+    throw new Error('Missing required S3 environment variables');
+  }
+
+  const s3Client = new S3Client({
+    region,
+    ...(endpoint ? { endpoint } : {}),
+    credentials: {
+      accessKeyId: accessKey,
+      secretAccessKey: secretKey,
+    },
+    forcePathStyle: true,
+  });
+
+  if (cmd.hooks?.beforeSync) {
+    const hook = cmd.hooks.beforeSync;
+    if (typeof hook === 'string') {
+      console.log(`Running beforeSync script: ${hook}`);
+      await execaCommand(hook, { stdio: 'inherit', shell: true });
+    } else {
+      console.log('Running beforeSync hook...');
+      await hook();
+    }
+  }
+
+  const sourceDir = cmd.sourceDir ?? './public/static';
+  const resolvedSourceDir = path.resolve(process.cwd(), sourceDir);
+
+  if (!fs.existsSync(resolvedSourceDir)) {
+    throw new Error(`Source directory does not exist: ${resolvedSourceDir}`);
+  }
+
+  // Find all files in the source directory, including dotfiles
+  const rawFiles = await fg('**/*', {
+    cwd: resolvedSourceDir,
+    onlyFiles: true,
+    absolute: true,
+    dot: true,
+  });
+
+  // Process files through the hook if it exists, otherwise use the default mapping with auto-optimization detection
+  let processedFiles: ProcessedFile[];
+  if (cmd.hooks?.beforeUpload) {
+    const rawProcessed = await cmd.hooks.beforeUpload(rawFiles);
+    processedFiles = rawProcessed.map((file) => ({
+      ...file,
+      originalName: file.originalName.replace(/\\/g, '/'),
+      finalName: file.finalName.replace(/\\/g, '/'),
+    }));
+  } else {
+    // Index raw files by normalized relative path
+    const rawRels = new Set(
+      rawFiles.map((file) => path.relative(resolvedSourceDir, file).replace(/\\/g, '/'))
+    );
+
+    processedFiles = rawFiles.map((file) => {
+      const rel = path.relative(resolvedSourceDir, file).replace(/\\/g, '/');
+      const ext = path.extname(file).toLowerCase();
+
+      if (['.png', '.jpg', '.jpeg'].includes(ext)) {
+        const webpRel = rel.slice(0, -ext.length) + '.webp';
+        if (rawRels.has(webpRel)) {
+          // An optimized WebP version exists in the directory!
+          // Map original reference to the WebP final upload path
+          return {
+            originalName: rel,
+            finalName: webpRel,
+            absolutePath: path.resolve(resolvedSourceDir, webpRel),
+          };
+        }
+      }
+
+      return {
+        originalName: rel,
+        finalName: rel,
+        absolutePath: file,
+      };
+    });
+  }
+
+  /**
+   * Helper to construct the S3 URL for a final filename.
+   *
+   * @param finalName - The final processed name of the file.
+   * @returns The public URL of the file on S3.
+   *
+   * @example
+   * ```typescript
+   * getS3Url('js/main.js'); // 'https://my-bucket.s3.us-east-1.amazonaws.com/my-prefix/js/main.js'
+   * ```
+   */
+  const getS3Url = (finalName: string): string => {
+    const normalizedKey = normalizeKey(cmd.targetPrefix, finalName);
+    if (endpoint) {
+      const cleanEndpoint = endpoint.replace(/\/+$/, '');
+      return `${cleanEndpoint}/${bucket}/${normalizedKey}`;
+    }
+    return `https://${bucket}.s3.${region}.amazonaws.com/${normalizedKey}`;
+  };
+
+  // Find workspace source files matching `src/**/*.{ts,tsx,css,md,mdx}`
+  const sourceFiles = await fg('src/**/*.{ts,tsx,css,md,mdx}', {
+    cwd: process.cwd(),
+    absolute: true,
+  });
+
+  // Sort assets by length descending to handle overlapping name replacement correctly
+  const sortedAssets = [...processedFiles].sort(
+    (a, b) => b.originalName.length - a.originalName.length
+  );
+
+  // Replace static asset references in workspace source files
+  for (const sourceFile of sourceFiles) {
+    let content = await fs.promises.readFile(sourceFile, 'utf-8');
+    if (!content.includes('/static/')) {
+      continue;
+    }
+    let modified = false;
+
+    for (const asset of sortedAssets) {
+      let searchName = asset.originalName;
+      if (searchName.startsWith('static/')) {
+        searchName = searchName.substring('static/'.length);
+      } else if (searchName.startsWith('/static/')) {
+        searchName = searchName.substring('/static/'.length);
+      }
+      const searchStr = `/static/${searchName}`;
+      const assetUrl = getS3Url(asset.finalName);
+
+      if (content.includes(searchStr)) {
+        content = content.split(searchStr).join(assetUrl);
+        modified = true;
+      }
+    }
+
+    if (modified) {
+      await fs.promises.writeFile(sourceFile, content, 'utf-8');
+    }
+  }
+
+  // Deduplicate files for S3 upload by their S3 key (finalName)
+  const uniqueUploads = Array.from(
+    new Map(processedFiles.map((file) => [file.finalName, file])).values()
+  );
+
+  // Upload files to S3
+  console.log(`Syncing ${uniqueUploads.length} unique files to s3://${bucket}/${cmd.targetPrefix}...`);
+  for (const file of uniqueUploads) {
+    const s3Key = normalizeKey(cmd.targetPrefix, file.finalName);
+    const contentType = mime.lookup(file.absolutePath) || 'application/octet-stream';
+    const fileContent = await fs.promises.readFile(file.absolutePath);
+
+    await s3Client.send(
+      new PutObjectCommand({
+        Bucket: bucket,
+        Key: s3Key,
+        Body: fileContent,
+        ContentType: contentType,
+      })
+    );
+  }
+}
@@ -0,0 +1,136 @@
+/**
+ * Base configuration interface for all CLI commands.
+ */
+export interface BaseCommandConfig {
+  /** The name of the command */
+  name: string;
+  /** A brief description of what the command does */
+  description: string;
+  /** Optional array of command-line options/flags */
+  options?: {
+    /** The flag definitions, e.g., '-f, --force' */
+    flags: string;
+    /** Description of the option */
+    description: string;
+    /** The default value if the option is not provided */
+    defaultValue?: string | boolean | string[];
+  }[];
+}
+
+/**
+ * Configuration for a Bash script based command.
+ */
+export interface BashCommandConfig extends BaseCommandConfig {
+  /** The bash script or command to execute */
+  script: string;
+  /** The type discriminator for bash commands */
+  type: 'bash';
+}
+
+/**
+ * Configuration for a Node.js function based command.
+ */
+export interface NodeCommandConfig extends BaseCommandConfig {
+  /** The action function to execute when the command is run */
+  action: (options: Record<string, unknown>) => Promise<void> | void;
+  /** The type discriminator for node commands */
+  type: 'node';
+}
+
+/**
+ * Represents a processed file ready for upload.
+ */
+export interface ProcessedFile {
+  /** The original name of the file before processing */
+  originalName: string;
+  /** The final name of the file after processing, used as S3 key */
+  finalName: string;
+  /** The absolute path of the file on the local filesystem */
+  absolutePath: string;
+}
+
+/**
+ * A hook value that can be either a shell command string or an async JS function.
+ *
+ * - **`string`** — executed as a shell command via the system shell.
+ * - **`() => Promise<void>`** — called directly, useful for programmatic pre-processing.
+ */
+export type HookValue = string | (() => Promise<void>);
+
+/**
+ * Lifecycle hooks for the S3 sync command.
+ */
+export interface S3SyncHooks {
+  /**
+   * Runs before the sync process starts (before files are discovered).
+   *
+   * Accepts either a shell command string or an async function.
+   *
+   * @example
+   * ```typescript
+   * // Shell command
+   * hooks: { beforeSync: 'bash ./scripts/optimize-images.sh' }
+   *
+   * // JS function
+   * hooks: { beforeSync: async () => { await optimizeImages(); } }
+   * ```
+   */
+  beforeSync?: HookValue;
+
+  /**
+   * Runs after files are discovered but before they are uploaded.
+   *
+   * Receives the raw list of absolute file paths and must return the processed
+   * file descriptors to upload. Useful for filtering, renaming, or replacing
+   * files (e.g., swapping `.png` originals for their `.webp` counterparts).
+   *
+   * @param files - Absolute paths of all discovered files.
+   * @returns The processed file list to upload.
+   *
+   * @example
+   * ```typescript
+   * hooks: {
+   *   beforeUpload: async (files) =>
+   *     files.map((f) => ({ originalName: path.basename(f), finalName: path.basename(f), absolutePath: f }))
+   * }
+   * ```
+   */
+  beforeUpload?: (files: string[]) => Promise<ProcessedFile[]>;
+}
+
+/**
+ * Configuration for an S3 synchronization command.
+ */
+export interface S3SyncCommandConfig extends BaseCommandConfig {
+  /** The type discriminator for S3 sync commands */
+  type: 's3-sync';
+  /** The source directory containing files to sync */
+  sourceDir?: string;
+  /** The prefix (directory) under which to upload the files in the S3 bucket */
+  targetPrefix: string;
+  /** Optional S3 bucket name */
+  bucket?: string;
+  /** Optional AWS region */
+  region?: string;
+  /** Optional custom endpoint URL (e.g., for MinIO or Yandex Cloud) */
+  endpoint?: string;
+  /** Optional AWS Access Key ID */
+  accessKeyId?: string;
+  /** Optional AWS Secret Access Key */
+  secretAccessKey?: string;
+  /** Hooks to modify the sync process at various lifecycle stages */
+  hooks?: S3SyncHooks;
+}
+
+/**
+ * Union type representing any valid CLI command configuration.
+ */
+export type CliCommand = BashCommandConfig | NodeCommandConfig | S3SyncCommandConfig;
+
+/**
+ * Root configuration object for the CLI toolkit.
+ */
+export interface CliConfig {
+  /** Array of registered commands */
+  commands: CliCommand[];
+}
@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "declaration": true,
+    "sourceMap": true,
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "**/*.test.ts"]
+}
@@ -0,0 +1,8 @@
+import { baseVitestConfig } from '@ermnvldmr/rsbuild-config/dev';
+import { mergeConfig } from 'vitest/config';
+
+export default mergeConfig(baseVitestConfig, {
+  test: {
+    environment: 'node',
+  },
+});
@@ -0,0 +1,55 @@
+import { pluginBabel } from '@rsbuild/plugin-babel';
+import { resolve } from 'path';
+import type { StorybookConfig } from 'storybook-react-rsbuild';
+
+const config: StorybookConfig = {
+  stories: ['../../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-a11y',
+    '@storybook/addon-themes',
+  ],
+  framework: {
+    name: 'storybook-react-rsbuild',
+    options: {},
+  },
+  typescript: {
+    check: false,
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
+    },
+  },
+  rsbuildFinal: (config) => {
+    config.resolve = config.resolve || {};
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      '@ermnvldmr/stl': resolve(__dirname, '../../stl/src'),
+      '@ermnvldmr/ui': resolve(__dirname, '../../ui/src'),
+    };
+
+    config.plugins = config.plugins || [];
+    config.plugins.push(
+      pluginBabel({
+        include: /\.(?:jsx|tsx)$/,
+        exclude: /[\\/]node_modules[\\/]/,
+        babelLoaderOptions: (opts) => {
+          opts.plugins = opts.plugins || [];
+          opts.plugins.push([
+            'babel-plugin-istanbul',
+            {
+              exclude: ['**/*.stories.tsx', '**/*.test.tsx', 'node_modules/**'],
+              extension: ['.js', '.jsx', '.ts', '.tsx'],
+            },
+          ]);
+        },
+      })
+    );
+
+    return config;
+  },
+};
+
+export default config;
@@ -0,0 +1,15 @@
+import type { Preview } from '@storybook/react';
+import '../../../ui/src/static/styles.css';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;
@@ -0,0 +1,48 @@
+import '@testing-library/jest-dom';
+import { vi } from 'vitest';
+
+class ResizeObserverMock {
+  observe = vi.fn();
+  unobserve = vi.fn();
+  disconnect = vi.fn();
+}
+
+global.ResizeObserver = ResizeObserverMock;
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(), // Deprecated
+    removeListener: vi.fn(), // Deprecated
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+});
+
+// jsdom sometimes does not expose localStorage.clear(); provide a functional polyfill
+if (typeof window.localStorage.clear !== 'function') {
+  const store = new Map<string, string>();
+  Object.defineProperty(window, 'localStorage', {
+    configurable: true,
+    value: {
+      getItem: (key: string): string | null => store.get(key) ?? null,
+      setItem: (key: string, value: string): void => {
+        store.set(key, value);
+      },
+      removeItem: (key: string): void => {
+        store.delete(key);
+      },
+      clear: (): void => {
+        store.clear();
+      },
+      key: (index: number): string | null => [...store.keys()][index] ?? null,
+      get length(): number {
+        return store.size;
+      },
+    },
+  });
+}
@@ -0,0 +1,75 @@
+{
+  "name": "@ermnvldmr/kits",
+  "version": "1.0.0",
+  "description": "Composed UI pattern assemblies and kit components",
+  "private": true,
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/kits/src/index.d.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "rsbuild build --watch",
+    "build": "rsbuild build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "storybook": "storybook dev -p 6008 -c .config/storybook",
+    "build-storybook": "storybook build -c .config/storybook",
+    "test:storybook": "test-storybook --config-dir .config/storybook",
+    "test:storybook:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"http-server storybook-static --port 6008 --silent\" \"wait-on tcp:127.0.0.1:6008 && test-storybook --coverage --config-dir .config/storybook --url http://127.0.0.1:6008\"",
+    "lint": "eslint src --max-warnings 0",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist coverage storybook-static"
+  },
+  "dependencies": {
+    "@ermnvldmr/i18n": "workspace:*",
+    "@ermnvldmr/stl": "workspace:*",
+    "@ermnvldmr/ui": "workspace:*",
+    "class-variance-authority": "^0.7.1"
+  },
+  "devDependencies": {
+    "@ermnvldmr/eslint-config": "workspace:*",
+    "@ermnvldmr/rsbuild-config": "workspace:*",
+    "@ermnvldmr/storybook-config": "workspace:*",
+    "@rsbuild/core": "^1.2.11",
+    "@rsbuild/plugin-babel": "^1.1.0",
+    "@storybook/addon-a11y": "^8.6.15",
+    "@storybook/addon-coverage": "^3.0.0",
+    "@storybook/addon-essentials": "^8.6.15",
+    "@storybook/addon-interactions": "^8.6.15",
+    "@storybook/addon-themes": "^8.6.15",
+    "@storybook/react": "^8.6.15",
+    "@storybook/test": "^8.6.15",
+    "@storybook/test-runner": "^0.19.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.1",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^22.20.0",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "@vitest/coverage-v8": "^4.0.18",
+    "babel-plugin-istanbul": "^7.0.1",
+    "concurrently": "^9.1.2",
+    "http-server": "^14.1.1",
+    "jsdom": "^28.0.0",
+    "playwright": "^1.57.0",
+    "storybook": "^8.6.17",
+    "storybook-react-rsbuild": "^1.0.3",
+    "typescript": "^5.8.3",
+    "vitest": "^4.0.18",
+    "wait-on": "^8.0.3"
+  },
+  "peerDependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  }
+}
@@ -0,0 +1,43 @@
+import { definePackageConfig } from '@ermnvldmr/rsbuild-config/dev';
+
+export default definePackageConfig({
+  source: {
+    entry: {
+      index: './src/index.ts',
+    },
+  },
+  output: {
+    distPath: {
+      root: 'dist',
+      js: '',
+    },
+    filename: {
+      js: '[name].js',
+    },
+    cleanDistPath: true,
+  },
+  tools: {
+    rspack: {
+      output: {
+        library: {
+          type: 'module',
+        },
+      },
+      experiments: {
+        outputModule: true,
+      },
+      externals: [
+        'react',
+        'react-dom',
+        'react/jsx-runtime',
+        'react/jsx-dev-runtime',
+        'tailwindcss',
+        '@ermnvldmr/i18n',
+        '@ermnvldmr/stl',
+        '@ermnvldmr/ui',
+        'class-variance-authority',
+      ],
+      externalsType: 'module',
+    },
+  },
+});
@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { BentoGrid } from './BentoGrid';
+import { InfoCard } from '../InfoCard/InfoCard';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof BentoGrid> = {
+  title: 'Kits/BentoGrid',
+  component: BentoGrid,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof BentoGrid>;
+
+export const Default: Story = {
+  render: () => (
+    <BentoGrid>
+      <InfoCard colSpan={2}>
+        <InfoCard.Header>Featured Project</InfoCard.Header>
+        <InfoCard.Body>This is a 2-column wide featured bento grid item.</InfoCard.Body>
+      </InfoCard>
+      <InfoCard colSpan={2}>
+        <InfoCard.Header>Secondary Project</InfoCard.Header>
+        <InfoCard.Body>Another 2-column bento card.</InfoCard.Body>
+      </InfoCard>
+    </BentoGrid>
+  ),
+};
@@ -0,0 +1,32 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+
+import { BentoGrid } from './BentoGrid';
+
+describe('BentoGrid', () => {
+  it('renders children correctly inside grid container', () => {
+    render(
+      <BentoGrid data-testid="bento-grid">
+        <div>Item 1</div>
+        <div>Item 2</div>
+      </BentoGrid>
+    );
+
+    const grid = screen.getByTestId('bento-grid');
+    expect(grid).toBeInTheDocument();
+    expect(screen.getByText('Item 1')).toBeInTheDocument();
+    expect(screen.getByText('Item 2')).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    render(
+      <BentoGrid className="custom-class" data-testid="bento-grid">
+        <div>Content</div>
+      </BentoGrid>
+    );
+
+    const grid = screen.getByTestId('bento-grid');
+    expect(grid).toHaveClass('custom-class');
+  });
+});
@@ -0,0 +1,32 @@
+import { cn, genericMemo } from '@ermnvldmr/stl';
+import React, { forwardRef } from 'react';
+
+/**
+ * Props for the BentoGrid component.
+ */
+export interface BentoGridProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Grid items to be rendered */
+  children: React.ReactNode;
+  /** Additional CSS class names */
+  className?: string;
+}
+
+const BentoGridComponent = forwardRef<HTMLDivElement, BentoGridProps>(function BentoGrid(
+  { children, className, ...props },
+  ref
+) {
+  return (
+    <div
+      {...props}
+      ref={ref}
+      className={cn('grid w-full grid-cols-1 gap-4 md:grid-cols-3 lg:grid-cols-4', className)}
+    >
+      {children}
+    </div>
+  );
+});
+
+/**
+ * A responsive grid container layout component for bento-style card assemblies.
+ */
+export const BentoGrid = genericMemo(BentoGridComponent);
@@ -0,0 +1 @@
+export * from './BentoGrid';
@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { InfoCard } from './InfoCard';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof InfoCard> = {
+  title: 'Kits/InfoCard',
+  component: InfoCard,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof InfoCard>;
+
+export const Default: Story = {
+  render: () => (
+    <InfoCard>
+      <InfoCard.Header>InfoCard Title</InfoCard.Header>
+      <InfoCard.Body>This is the body content of the InfoCard.</InfoCard.Body>
+      <InfoCard.Footer>Footer metadata</InfoCard.Footer>
+    </InfoCard>
+  ),
+};
+
+export const PrimaryVariant: Story = {
+  render: () => (
+    <InfoCard variant="primary">
+      <InfoCard.Header>Primary Featured Card</InfoCard.Header>
+      <InfoCard.Body>Primary card content with brand accent background.</InfoCard.Body>
+    </InfoCard>
+  ),
+};
+
+export const TransparentBackground: Story = {
+  render: () => (
+    <InfoCard bg="transparent">
+      <InfoCard.Header>Transparent Card</InfoCard.Header>
+      <InfoCard.Body>Transparent surface card content.</InfoCard.Body>
+    </InfoCard>
+  ),
+};
@@ -0,0 +1,99 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+
+import { InfoCard } from './InfoCard';
+
+describe('InfoCard', () => {
+  it('renders header, body, and footer content', () => {
+    render(
+      <InfoCard data-testid="info-card">
+        <InfoCard.Header>Card Header</InfoCard.Header>
+        <InfoCard.Body>Card Body Content</InfoCard.Body>
+        <InfoCard.Footer>Card Footer Content</InfoCard.Footer>
+      </InfoCard>
+    );
+
+    expect(screen.getByTestId('info-card')).toBeInTheDocument();
+    expect(screen.getByText('Card Header')).toBeInTheDocument();
+    expect(screen.getByText('Card Body Content')).toBeInTheDocument();
+    expect(screen.getByText('Card Footer Content')).toBeInTheDocument();
+  });
+
+  it('renders primary variant correctly', () => {
+    render(
+      <InfoCard data-testid="info-card-primary" variant="primary">
+        <InfoCard.Header>Primary Title</InfoCard.Header>
+      </InfoCard>
+    );
+
+    const card = screen.getByTestId('info-card-primary');
+    expect(card).toHaveClass('bg-primary');
+  });
+
+  it('renders accordion list sections', () => {
+    render(
+      <InfoCard>
+        <InfoCard.List
+          sections={[
+            {
+              value: 'sec1',
+              label: 'Section 1',
+              items: ['Item A', 'Item B'],
+            },
+          ]}
+        />
+      </InfoCard>
+    );
+
+    expect(screen.getByText('Section 1')).toBeInTheDocument();
+  });
+
+  it('renders InfoCard.Image with title and description overlay', () => {
+    render(
+      <InfoCard.Image
+        alt="Test Image"
+        className="custom-img"
+        overlayDescription="Image Overlay Description"
+        overlayTitle="Image Overlay Title"
+        src="/test-image.jpg"
+      />
+    );
+
+    expect(screen.getByAltText('Test Image')).toBeInTheDocument();
+    expect(screen.getByText('Image Overlay Title')).toBeInTheDocument();
+    expect(screen.getByText('Image Overlay Description')).toBeInTheDocument();
+  });
+
+  it('renders accordion list sections with object items', () => {
+    render(
+      <InfoCard>
+        <InfoCard.List
+          sections={[
+            {
+              value: 'sec1',
+              label: 'Section 1',
+              items: [
+                { key: 'obj-item-key', node: 'Object Item Content' },
+                { node: 'Object Item Without Key' },
+                <span key="jsx-key">JSX Item Content</span>,
+                <span>JSX Element Without Key</span>,
+              ],
+            },
+          ]}
+        />
+      </InfoCard>
+    );
+
+    expect(screen.getByText('Section 1')).toBeInTheDocument();
+  });
+
+  it('forwards ref to underlying DOM element', () => {
+    const ref = React.createRef<HTMLDivElement>();
+    render(<InfoCard ref={ref}>Card Content</InfoCard>);
+
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+    expect(ref.current?.textContent).toBe('Card Content');
+  });
+});
+
@@ -0,0 +1,84 @@
+import { castRef, cn, genericMemo } from '@ermnvldmr/stl';
+import { Container, cva } from '@ermnvldmr/ui';
+import React, { forwardRef } from 'react';
+
+import { InfoCardBody } from './InfoCardBody';
+import { InfoCardFooter } from './InfoCardFooter';
+import { InfoCardHeader } from './InfoCardHeader';
+import { InfoCardImage } from './InfoCardImage';
+import { InfoCardList } from './InfoCardList';
+
+import type { InfoCardProps } from './types';
+
+const infoCardVariants = cva(
+  'relative overflow-hidden rounded-xl border border-outline p-6 shadow-sm transition-all hover:shadow-md flex flex-col justify-between gap-4',
+  {
+    variants: {
+      variant: {
+        default: '',
+        primary: 'bg-primary border-primary text-primary-text',
+      },
+      colSpan: {
+        1: 'md:col-span-1',
+        2: 'md:col-span-2',
+        3: 'md:col-span-3',
+        4: 'md:col-span-4',
+      },
+      rowSpan: {
+        1: 'md:row-span-1',
+        2: 'md:row-span-2',
+        3: 'md:row-span-3',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      colSpan: 1,
+      rowSpan: 1,
+    },
+  }
+);
+
+const InfoCardRoot = forwardRef<HTMLElement, InfoCardProps>(function InfoCard(
+  {
+    children,
+    className,
+    variant,
+    colSpan,
+    rowSpan,
+    href,
+    onPress,
+    ...props
+  },
+  ref
+) {
+  return (
+    <Container
+      {...props}
+      ref={castRef<HTMLElement>(ref)}
+      className={cn(infoCardVariants({ variant, colSpan, rowSpan }), className)}
+      href={href}
+      onPress={onPress}
+    >
+      {children}
+    </Container>
+  );
+});
+
+/**
+ * A compound card component for displaying informational content, lists, or media.
+ *
+ * @example
+ * ```tsx
+ * <InfoCard>
+ *   <InfoCard.Header>Title</InfoCard.Header>
+ *   <InfoCard.Body>Content</InfoCard.Body>
+ * </InfoCard>
+ * ```
+ */
+export const InfoCard = Object.assign(genericMemo(InfoCardRoot), {
+  Header: InfoCardHeader,
+  Body: InfoCardBody,
+  Footer: InfoCardFooter,
+  Image: InfoCardImage,
+  List: InfoCardList,
+});
@@ -0,0 +1,16 @@
+import { Text } from '@ermnvldmr/ui';
+import React from 'react';
+
+import type { InfoCardBodyProps } from './types';
+
+/**
+ * Body sub-component for InfoCard.
+ *
+ * @example
+ * ```tsx
+ * <InfoCard.Body>Card Content</InfoCard.Body>
+ * ```
+ */
+export function InfoCardBody({ children, className }: InfoCardBodyProps): React.JSX.Element {
+  return <Text className={className}>{children}</Text>;
+}
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import type { InfoCardFooterProps } from './types';
+
+/**
+ * Footer sub-component for InfoCard.
+ *
+ * @example
+ * ```tsx
+ * <InfoCard.Footer>Card Footer</InfoCard.Footer>
+ * ```
+ */
+export function InfoCardFooter({ children, className }: InfoCardFooterProps): React.JSX.Element {
+  return <div className={className}>{children}</div>;
+}
@@ -0,0 +1,28 @@
+import { Header } from '@ermnvldmr/ui';
+import React from 'react';
+
+import type { InfoCardHeaderProps } from './types';
+
+/**
+ * Header sub-component for InfoCard.
+ *
+ * @example
+ * ```tsx
+ * <InfoCard.Header>Card Title</InfoCard.Header>
+ * ```
+ */
+export function InfoCardHeader({
+  children,
+  icon,
+  level = 3,
+  className,
+}: InfoCardHeaderProps): React.JSX.Element {
+  return (
+    <div className="flex items-center gap-3">
+      {icon && <div>{icon}</div>}
+      <Header className={className} level={level}>
+        {children}
+      </Header>
+    </div>
+  );
+}
@@ -0,0 +1,50 @@
+import { Header, Image, Text, VStack } from '@ermnvldmr/ui';
+import React from 'react';
+
+import type { InfoCardImageProps } from './types';
+
+/**
+ * Image overlay sub-component for InfoCard.
+ *
+ * @example
+ * ```tsx
+ * <InfoCard.Image alt="Image" src="image.jpg" />
+ * ```
+ */
+export function InfoCardImage({
+  src,
+  alt,
+  overlayTitle,
+  overlayDescription,
+  className,
+}: InfoCardImageProps): React.JSX.Element {
+  const hasOverlay = Boolean(overlayTitle ?? overlayDescription);
+
+  return (
+    <div className={`relative h-full w-full ${className ?? ''}`}>
+      <Image
+        alt={alt}
+        className="h-full w-full object-cover"
+        height="100%"
+        ratio="auto"
+        src={src}
+      />
+      {hasOverlay && (
+        <div className="absolute inset-0 flex flex-col justify-end bg-linear-to-t from-black/80 via-black/40 to-transparent p-6 text-white">
+          <VStack gap={1}>
+            {overlayTitle && (
+              <Header className="text-white" level={3}>
+                {overlayTitle}
+              </Header>
+            )}
+            {overlayDescription && (
+              <Text className="text-white/90" size="s">
+                {overlayDescription}
+              </Text>
+            )}
+          </VStack>
+        </div>
+      )}
+    </div>
+  );
+}
@@ -0,0 +1,58 @@
+import { Accordion, HStack, List, Text } from '@ermnvldmr/ui';
+import React from 'react';
+
+import type { InfoCardListProps } from './types';
+
+/**
+ * Accordion list sub-component for InfoCard.
+ *
+ * @example
+ * ```tsx
+ * <InfoCard.List sections={[]} />
+ * ```
+ */
+export function InfoCardList({
+  sections,
+  defaultValue,
+  type = 'multiple',
+  className,
+}: InfoCardListProps): React.JSX.Element {
+  return (
+    <div className={`flex-grow w-full ${className ?? ''}`}>
+      <Accordion collapsible defaultValue={defaultValue} type={type}>
+        {sections.map((section) => (
+          <Accordion.Item key={section.value} value={section.value}>
+            <Accordion.Trigger className={section.labelClassName}>
+              <HStack align="center" gap={2}>
+                {section.labelIcon}
+                <Text size="l" type="body">
+                  {section.label}
+                </Text>
+              </HStack>
+            </Accordion.Trigger>
+            <Accordion.Content>
+              <List>
+                {section.items.map((item, index) => {
+                  const content =
+                    item && typeof item === 'object' && 'node' in item ? item.node : item;
+                  const itemKey =
+                    item && typeof item === 'object' && 'key' in item
+                      ? item.key
+                      : typeof item === 'string'
+                        ? item
+                        : index;
+
+                  return (
+                    <List.Item key={itemKey}>
+                      <Text size="m">{content}</Text>
+                    </List.Item>
+                  );
+                })}
+              </List>
+            </Accordion.Content>
+          </Accordion.Item>
+        ))}
+      </Accordion>
+    </div>
+  );
+}
@@ -0,0 +1,2 @@
+export * from './InfoCard';
+export * from './types';
@@ -0,0 +1,104 @@
+import type { ContainerBackground } from '@ermnvldmr/ui';
+import type React from 'react';
+
+/**
+ * Props for the InfoCard root component.
+ */
+export interface InfoCardProps extends React.HTMLAttributes<HTMLElement> {
+  /** Surface background variant */
+  bg?: ContainerBackground;
+  /** Variant style for the card */
+  variant?: 'default' | 'primary';
+  /** Grid column span */
+  colSpan?: 1 | 2 | 3 | 4;
+  /** Grid row span */
+  rowSpan?: 1 | 2 | 3;
+  /** Optional link destination */
+  href?: string;
+  /** Optional press handler */
+  onPress?: () => void;
+  /** Additional CSS class names */
+  className?: string;
+  /** Card content elements */
+  children: React.ReactNode;
+}
+
+/**
+ * Props for InfoCardHeader component.
+ */
+export interface InfoCardHeaderProps {
+  /** Header title text or nodes */
+  children: React.ReactNode;
+  /** Optional leading icon */
+  icon?: React.ReactNode;
+  /** Heading semantic level (1-6) */
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
+  /** Additional CSS class names */
+  className?: string;
+}
+
+/**
+ * Props for InfoCardBody component.
+ */
+export interface InfoCardBodyProps {
+  /** Body content nodes */
+  children: React.ReactNode;
+  /** Additional CSS class names */
+  className?: string;
+}
+
+/**
+ * Props for InfoCardFooter component.
+ */
+export interface InfoCardFooterProps {
+  /** Footer content nodes */
+  children: React.ReactNode;
+  /** Additional CSS class names */
+  className?: string;
+}
+
+/**
+ * Props for InfoCardImage component.
+ */
+export interface InfoCardImageProps {
+  /** Image source URL */
+  src: string;
+  /** Alternate text for accessibility */
+  alt: string;
+  /** Optional overlay header title */
+  overlayTitle?: string;
+  /** Optional overlay description text */
+  overlayDescription?: string;
+  /** Additional CSS class names */
+  className?: string;
+}
+
+/**
+ * Section definition for InfoCardList component.
+ */
+export interface InfoCardListSection {
+  /** Accordion item value key */
+  value: string;
+  /** Section label text */
+  label: string;
+  /** Optional icon next to section label */
+  labelIcon?: React.ReactNode;
+  /** Additional class names for trigger label */
+  labelClassName?: string;
+  /** List items inside section */
+  items: (React.ReactNode | { key?: string; node: React.ReactNode })[];
+}
+
+/**
+ * Props for InfoCardList component.
+ */
+export interface InfoCardListProps {
+  /** List sections array */
+  sections: InfoCardListSection[];
+  /** Default expanded item values */
+  defaultValue?: string[];
+  /** Expansion mode: single or multiple */
+  type?: 'single' | 'multiple';
+  /** Additional CSS class names */
+  className?: string;
+}
@@ -0,0 +1,23 @@
+import { Markdown } from './Markdown';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Markdown> = {
+  title: 'Kits/Markdown',
+  component: Markdown,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Markdown>;
+
+export const Default: Story = {
+  args: {
+    children: `# Markdown Title
+
+This is a **markdown paragraph** with a [link](#) and inline \`code\`.
+
+> Blockquote example text.
+`,
+  },
+};
@@ -0,0 +1,19 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+
+import { Markdown } from './Markdown';
+
+describe('Markdown', () => {
+  it('renders markdown sub-components correctly', () => {
+    render(
+      <Markdown>
+        <Markdown.H1>Hello Markdown</Markdown.H1>
+        <Markdown.P>This is a paragraph.</Markdown.P>
+      </Markdown>
+    );
+
+    expect(screen.getByText('Hello Markdown')).toBeInTheDocument();
+    expect(screen.getByText('This is a paragraph.')).toBeInTheDocument();
+  });
+});
@@ -1,8 +1,8 @@
+import { Link } from '@ermnvldmr/ui';
 import React, { memo } from 'react';

-import { Link } from '../../Link/Link';

-import type { LinkProps } from '../../Link/Link';
+import type { LinkProps } from '@ermnvldmr/ui';

 /**
 * A Markdown link component that wraps the design system Link.
@@ -1,8 +1,8 @@
+import { Blockquote } from '@ermnvldmr/ui';
 import React, { memo } from 'react';

-import { Blockquote } from '../../Blockquote/Blockquote';

-import type { BlockquoteProps } from '../../Blockquote/Blockquote';
+import type { BlockquoteProps } from '@ermnvldmr/ui';

 /**
 * A Markdown blockquote component that wraps the design system Blockquote.
@@ -1,10 +1,8 @@
+
+import { Code , SUPPORTED_LANGUAGES } from '@ermnvldmr/ui';
 import React, { memo, useMemo } from 'react';

-import { Code } from '../../Code/Code';
-import { SUPPORTED_LANGUAGES } from '../../Code/lib/highlighter/highlighter';
-
-import type { CodeProps } from '../../Code/Code';
-import type { CodeLanguage } from '../../Code/lib/highlighter/highlighter';
+import type { CodeProps , CodeLanguage } from '@ermnvldmr/ui';

 /**
 * Checks if a string is a valid code language.
@@ -1,8 +1,8 @@
+import { Header } from '@ermnvldmr/ui';
 import React, { memo } from 'react';

-import { Header } from '../../Header/Header';

-import type { HeaderProps } from '../../Header/Header';
+import type { HeaderProps } from '@ermnvldmr/ui';

 /**
 * A Markdown H1 component that wraps the design system Header.
@@ -1,8 +1,8 @@
+import { Header } from '@ermnvldmr/ui';
 import React, { memo } from 'react';

-import { Header } from '../../Header/Header';

-import type { HeaderProps } from '../../Header/Header';
+import type { HeaderProps } from '@ermnvldmr/ui';

 /**
 * A Markdown H2 component that wraps the design system Header.
@@ -1,8 +1,8 @@
+import { Header } from '@ermnvldmr/ui';
 import React, { memo } from 'react';

-import { Header } from '../../Header/Header';

-import type { HeaderProps } from '../../Header/Header';
+import type { HeaderProps } from '@ermnvldmr/ui';

 /**
 * A Markdown H3 component that wraps the design system Header.
@@ -1,8 +1,8 @@
+import { Header } from '@ermnvldmr/ui';
 import React, { memo } from 'react';

-import { Header } from '../../Header/Header';

-import type { HeaderProps } from '../../Header/Header';
+import type { HeaderProps } from '@ermnvldmr/ui';

 /**
 * A Markdown H4 component that wraps the design system Header.
@@ -1,8 +1,8 @@
+import { Header } from '@ermnvldmr/ui';
 import React, { memo } from 'react';

-import { Header } from '../../Header/Header';

-import type { HeaderProps } from '../../Header/Header';
+import type { HeaderProps } from '@ermnvldmr/ui';

 /**
 * A Markdown H5 component that wraps the design system Header.
@@ -1,8 +1,8 @@
+import { Header } from '@ermnvldmr/ui';
 import React, { memo } from 'react';

-import { Header } from '../../Header/Header';

-import type { HeaderProps } from '../../Header/Header';
+import type { HeaderProps } from '@ermnvldmr/ui';

 /**
 * A Markdown H6 component that wraps the design system Header.
@@ -1,8 +1,8 @@
+import { Separator } from '@ermnvldmr/ui';
 import React, { memo } from 'react';

-import { Separator } from '../../Separator/Separator';

-import type { SeparatorProps } from '../../Separator/Separator';
+import type { SeparatorProps } from '@ermnvldmr/ui';

 /**
 * A Markdown horizontal rule component that wraps the design system Separator.
@@ -1,8 +1,8 @@
+import { Image } from '@ermnvldmr/ui';
 import React, { memo } from 'react';

-import { Image } from '../../Image/Image';

-import type { ImageProps } from '../../Image/Image';
+import type { ImageProps } from '@ermnvldmr/ui';

 /**
 * A Markdown image component that wraps the design system Image.
@@ -1,9 +1,9 @@
+import { List } from '@ermnvldmr/ui';
 import React, { memo } from 'react';

-import { List } from '../../List/List';
 import { MarkdownP } from '../MarkdownP/MarkdownP';

-import type { ListItemProps } from '../../List/List';
+import type { ListItemProps } from '@ermnvldmr/ui';

 /**
 * A Markdown list item component.
@@ -1,8 +1,8 @@
+import { List } from '@ermnvldmr/ui';
 import React, { memo } from 'react';

-import { List } from '../../List/List';

-import type { ListProps } from '../../List/List';
+import type { ListProps } from '@ermnvldmr/ui';

 /**
 * A Markdown ordered list component.
@@ -1,8 +1,8 @@
+import { Paragraph } from '@ermnvldmr/ui';
 import React, { memo } from 'react';

-import { Paragraph } from '../../Paragraph/Paragraph';

-import type { ParagraphProps } from '../../Paragraph/Paragraph';
+import type { ParagraphProps } from '@ermnvldmr/ui';

 /**
 * A Markdown paragraph component that wraps the design system Paragraph.
@@ -1,10 +1,8 @@
+
+import { CodeBlock , SUPPORTED_LANGUAGES } from '@ermnvldmr/ui';
 import React, { memo, useMemo } from 'react';

-import { CodeBlock } from '../../Code/CodeBlock/CodeBlock';
-import { SUPPORTED_LANGUAGES } from '../../Code/lib/highlighter/highlighter';
-
-import type { CodeBlockProps } from '../../Code/CodeBlock/CodeBlock';
-import type { CodeLanguage } from '../../Code/lib/highlighter/highlighter';
+import type { CodeBlockProps , CodeLanguage } from '@ermnvldmr/ui';

 /**
 * Checks if a string is a valid code language.
@@ -1,6 +1,6 @@
+import { Table } from '@ermnvldmr/ui';
 import React, { memo } from 'react';

-import { Table } from '../../Table/Table';

 /**
 * A Markdown table body (tbody) component.
@@ -1,6 +1,6 @@
+import { Table } from '@ermnvldmr/ui';
 import React, { memo } from 'react';

-import { Table } from '../../Table/Table';

 /**
 * A Markdown table cell (td) component.
@@ -1,6 +1,6 @@
+import { Table } from '@ermnvldmr/ui';
 import React, { memo } from 'react';

-import { Table } from '../../Table/Table';

 /**
 * A Markdown table header cell (th) component.
@@ -1,6 +1,6 @@
+import { Table } from '@ermnvldmr/ui';
 import React, { memo } from 'react';

-import { Table } from '../../Table/Table';

 /**
 * A Markdown table head (thead) component.
@@ -1,6 +1,6 @@
+import { Table } from '@ermnvldmr/ui';
 import React, { memo } from 'react';

-import { Table } from '../../Table/Table';

 /**
 * A Markdown table row (tr) component.
@@ -1,8 +1,8 @@
+import { Table } from '@ermnvldmr/ui';
 import React, { memo } from 'react';

-import { Table } from '../../Table/Table';

-import type { TableProps } from '../../Table/Table';
+import type { TableProps } from '@ermnvldmr/ui';

 /**
 * A Markdown table root component.
@@ -1,8 +1,8 @@
+import { List } from '@ermnvldmr/ui';
 import React, { memo } from 'react';

-import { List } from '../../List/List';

-import type { ListProps } from '../../List/List';
+import type { ListProps } from '@ermnvldmr/ui';

 /**
 * A Markdown unordered list component.
@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { PageColumn, PageColumns, PageContainer, PageRoot } from './index';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof PageRoot> = {
+  title: 'Kits/Page',
+  component: PageRoot,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof PageRoot>;
+
+export const Default: Story = {
+  render: () => (
+    <PageRoot>
+      <PageContainer width="default">
+        <PageColumns>
+          <PageColumn size="full">Main Column Content</PageColumn>
+          <PageColumn size="small">Sidebar Content</PageColumn>
+        </PageColumns>
+      </PageContainer>
+    </PageRoot>
+  ),
+};
@@ -0,0 +1,23 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+
+import { PageColumn, PageColumns, PageContainer, PageRoot } from './index';
+
+describe('Page Components Integration', () => {
+  it('renders PageRoot, PageContainer, PageColumns, and PageColumn together', () => {
+    render(
+      <PageRoot className="test-root">
+        <PageContainer className="test-container" width="default">
+          <PageColumns className="test-columns">
+            <PageColumn className="test-column" size="full">
+              Page Content
+            </PageColumn>
+          </PageColumns>
+        </PageContainer>
+      </PageRoot>
+    );
+
+    expect(screen.getByText('Page Content')).toBeInTheDocument();
+  });
+});
@@ -1,4 +1,5 @@
 import { cn } from '@ermnvldmr/stl';
+import { cva } from 'class-variance-authority';
 import React from 'react';

 /**
@@ -30,6 +31,23 @@ export interface PageColumnProps {
  as?: React.ElementType;
 }

+const pageColumnVariants = cva('w-full transition-all duration-200', {
+  variants: {
+    size: {
+      small: 'lg:w-[var(--rb-page-column-small,300px)] lg:flex-none',
+      full: 'flex-1',
+    },
+    sticky: {
+      true: 'lg:sticky lg:top-24 self-start',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    size: 'full',
+    sticky: false,
+  },
+});
+
 /**
 /**
 * A single column unit within the PageColumns host.
@@ -49,18 +67,6 @@ export const PageColumn = ({
  as: Component = 'div',
 }: PageColumnProps) => {
  return (
-    <Component
-      className={cn(
-        'w-full transition-all duration-200',
-        {
-          'lg:w-[var(--rb-page-column-small,300px)] lg:flex-none': size === 'small',
-          'flex-1': size === 'full',
-          'lg:sticky lg:top-24 self-start': sticky,
-        },
-        className
-      )}
-    >
-      {children}
-    </Component>
+    <Component className={cn(pageColumnVariants({ size, sticky }), className)}>{children}</Component>
  );
 };
@@ -1,4 +1,5 @@
 import { cn } from '@ermnvldmr/stl';
+import { cva } from 'class-variance-authority';
 import React from 'react';

 /**
@@ -18,6 +19,8 @@ export interface PageColumnsProps {
  className?: string;
 }

+const pageColumnsVariants = cva('flex flex-col lg:flex-row w-full');
+
 /**
 /**
 * Host component for a responsive column system.
@@ -34,18 +37,12 @@ export interface PageColumnsProps {
 * ```
 */
 export const PageColumns = ({ children, gap = 6, className }: PageColumnsProps) => {
+  // `gap` accepts either a Tailwind spacing-scale number (`gap-N`) or an
+  // arbitrary class string, so the value space is not enumerable as a cva
+  // variant. Compute the numeric class here and pass strings through verbatim.
+  const gapClass = typeof gap === 'number' ? `gap-${gap}` : gap;
+
  return (
-    <div
-      className={cn(
-        'flex flex-col lg:flex-row w-full',
-        {
-          [`gap-${gap}`]: typeof gap === 'number',
-          [String(gap)]: typeof gap === 'string',
-        },
-        className
-      )}
-    >
-      {children}
-    </div>
+    <div className={cn(pageColumnsVariants(), gapClass, className)}>{children}</div>
  );
 };
@@ -1,4 +1,5 @@
 import { cn } from '@ermnvldmr/stl';
+import { cva } from 'class-variance-authority';
 import React from 'react';

 /**
@@ -57,6 +58,39 @@ export interface PageContainerProps {
  as?: React.ElementType;
 }

+const pageContainerVariants = cva('w-full mx-auto', {
+  variants: {
+    width: {
+      slim: 'max-w-[var(--rb-page-width-slim,1100px)]',
+      default: 'max-w-[var(--rb-page-width-default,1600px)]',
+      wide: 'max-w-[var(--rb-page-width-wide,1920px)]',
+      full: 'max-w-full',
+    },
+    paddingX: {
+      none: 'px-0',
+      small: 'px-2 sm:px-4',
+      medium: 'px-4 sm:px-6 lg:px-8',
+      large: 'px-6 sm:px-8 lg:px-12',
+    },
+    paddingY: {
+      none: 'py-0',
+      small: 'py-4 sm:py-6',
+      medium: 'py-8 sm:py-12',
+      large: 'py-12 sm:py-24',
+    },
+    centerVertically: {
+      true: 'flex-1 flex flex-col justify-center',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    width: 'default',
+    paddingX: 'medium',
+    paddingY: 'none',
+    centerVertically: false,
+  },
+});
+
 /**
 /**
 * Manages the horizontal and vertical constraints for page content.
@@ -79,37 +113,10 @@ export const PageContainer = ({
  className,
  as: Component = 'div',
 }: PageContainerProps) => {
-  const widthClasses = {
-    slim: 'max-w-[var(--rb-page-width-slim,1100px)]',
-    default: 'max-w-[var(--rb-page-width-default,1600px)]',
-    wide: 'max-w-[var(--rb-page-width-wide,1920px)]',
-    full: 'max-w-full',
-  };
-
-  const pxClasses = {
-    none: 'px-0',
-    small: 'px-2 sm:px-4',
-    medium: 'px-4 sm:px-6 lg:px-8',
-    large: 'px-6 sm:px-8 lg:px-12',
-  };
-
-  const pyClasses = {
-    none: 'py-0',
-    small: 'py-4 sm:py-6',
-    medium: 'py-8 sm:py-12',
-    large: 'py-12 sm:py-24',
-  };
-
  return (
    <Component
      className={cn(
-        'w-full mx-auto',
-        widthClasses[width],
-        pxClasses[paddingX],
-        pyClasses[paddingY],
-        {
-          'flex-1 flex flex-col justify-center': centerVertically,
-        },
+        pageContainerVariants({ width, paddingX, paddingY, centerVertically }),
        className
      )}
    >
@@ -1,8 +1,7 @@
 import { cn } from '@ermnvldmr/stl';
+import { useTheme } from '@ermnvldmr/ui';
 import React from 'react';

-import { useTheme } from '../../../lib/theme';
-
 /**
 * Props for the PageRoot component.
 */
Author	SHA1	Message	Date
deytenit	77afcca98e	fix: Fix containing various changes that stacked up in a period of time (#22 )	2026-08-10 09:04:39 +03:00
deytenit	1b3d7cecb2	ci: Add release rebase workflow (#21 )	2026-07-12 11:38:02 +03:00
deytenit	c41450e884	fix: fix www docker build (#20 )	2026-07-12 02:38:00 +03:00
deytenit	91f5245823	fix, feat, doc: massive build system refactorion, bug fixes and apex documentation (#19 )	2026-07-12 01:57:40 +03:00
dependabot[bot]	e8b42c60c2	build(deps): bump fast-uri from 3.1.1 to 3.1.2 in the npm_and_yarn group across 0 directory (#17 ) Updates `fast-uri` from 3.1.1 to 3.1.2 <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/fastify/fast-uri/releases">fast-uri's releases</a>.</em></p> <blockquote> <h2>v3.1.2</h2> <h2>⚠️ Security Release</h2> <ul> <li>Fix for <a href="https://github.com/fastify/fast-uri/security/advisories/GHSA-v39h-62p7-jpjc">https://github.com/fastify/fast-uri/security/advisories/GHSA-v39h-62p7-jpjc</a></li> </ul> <h2>What's Changed</h2> <ul> <li>Handle malformed fragment decoding as a parse error by <a href="https://github.com/mcollina"><code>@mcollina</code></a> in <a href="https://redirect.github.com/fastify/fast-uri/pull/171">fastify/fast-uri#171</a></li> </ul> <p><strong>Full Changelog</strong>: <a href="https://github.com/fastify/fast-uri/compare/v3.1.1...v3.1.2">https://github.com/fastify/fast-uri/compare/v3.1.1...v3.1.2</a></p> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/fastify/fast-uri/commit/919dd8ea7689fcc220d0d9b71307f5095e723ef9"><code>919dd8e</code></a> Bumped v3.1.2</li> <li><a href="https://github.com/fastify/fast-uri/commit/c65ba573714af6b8e19e481d9444c27bc4355d07"><code>c65ba57</code></a> fixup: linting</li> <li><a href="https://github.com/fastify/fast-uri/commit/6c86c17c3d76fb93aa3700ec6c0fa00faeb97293"><code>6c86c17</code></a> Merge commit from fork</li> <li><a href="https://github.com/fastify/fast-uri/commit/a95158ad308df4d92bbde4eba699ce5165e9f796"><code>a95158a</code></a> Handle malformed fragment decoding without throwing (<a href="https://redirect.github.com/fastify/fast-uri/issues/171">#171</a>)</li> <li>See full diff in <a href="https://github.com/fastify/fast-uri/compare/v3.1.1...v3.1.2">compare view</a></li> </ul> </details> <br /> [![Dependabot compatibility score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=fast-uri&package-manager=npm_and_yarn&previous-version=3.1.1&new-version=3.1.2)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) --- <details> <summary>Dependabot commands and options</summary> <br /> You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot show <dependency name> ignore conditions` will show all of the ignore conditions of the specified dependency - `@dependabot ignore <dependency name> major version` will close this group update PR and stop Dependabot creating any more for the specific dependency's major version (unless you unignore this specific dependency's major version or upgrade to it yourself) - `@dependabot ignore <dependency name> minor version` will close this group update PR and stop Dependabot creating any more for the specific dependency's minor version (unless you unignore this specific dependency's minor version or upgrade to it yourself) - `@dependabot ignore <dependency name>` will close this group update PR and stop Dependabot creating any more for the specific dependency (unless you unignore this specific dependency or upgrade to it yourself) - `@dependabot unignore <dependency name>` will remove all of the ignore conditions of the specified dependency - `@dependabot unignore <dependency name> <ignore condition>` will remove the ignore condition of the specified dependency and ignore conditions You can disable automated security fix PRs for this repo from the [Security Alerts page](https://github.com/deytenit/ermnvldmr.com/network/alerts). </details> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2026-05-19 23:37:34 +03:00
dependabot[bot]	f858cf1989	build(deps-dev): bump postcss from 8.5.6 to 8.5.10 in the npm_and_yarn group across 1 directory (#16 ) Bumps the npm_and_yarn group with 1 update in the / directory: [postcss](https://github.com/postcss/postcss). Updates `postcss` from 8.5.6 to 8.5.10 <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/postcss/postcss/releases">postcss's releases</a>.</em></p> <blockquote> <h2>8.5.10</h2> <ul> <li>Fixed XSS via unescaped <code></style></code> in non-bundler cases (by <a href="https://github.com/TharVid"><code>@TharVid</code></a>).</li> </ul> <h2>8.5.9</h2> <ul> <li>Speed up source map encoding paring in case of the error.</li> </ul> <h2>8.5.8</h2> <ul> <li>Fixed <code>Processor#version</code>.</li> </ul> <h2>8.5.7</h2> <ul> <li>Improved source map annotation cleaning performance (by CodeAnt AI).</li> </ul> </blockquote> </details> <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/postcss/postcss/blob/main/CHANGELOG.md">postcss's changelog</a>.</em></p> <blockquote> <h2>8.5.10</h2> <ul> <li>Fixed XSS via unescaped <code></style></code> in non-bundler cases (by <a href="https://github.com/TharVid"><code>@TharVid</code></a>).</li> </ul> <h2>8.5.9</h2> <ul> <li>Speed up source map encoding paring in case of the error.</li> </ul> <h2>8.5.8</h2> <ul> <li>Fixed <code>Processor#version</code>.</li> </ul> <h2>8.5.7</h2> <ul> <li>Improved source map annotation cleaning performance (by CodeAnt AI).</li> </ul> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/postcss/postcss/commit/33b9790263dc1562a46ce45d9532bd63e95b7986"><code>33b9790</code></a> Release 8.5.10 version</li> <li><a href="https://github.com/postcss/postcss/commit/536c79e4b01e58a3a56b09c3c0cf2323f4b9a28b"><code>536c79e</code></a> Escape </style> in CSS output (<a href="https://redirect.github.com/postcss/postcss/issues/2074">#2074</a>)</li> <li><a href="https://github.com/postcss/postcss/commit/afa96b2a139ce625c4d27973313479c7c85f39d4"><code>afa96b2</code></a> Update dependencies (<a href="https://redirect.github.com/postcss/postcss/issues/2073">#2073</a>)</li> <li><a href="https://github.com/postcss/postcss/commit/effe88bb87cabdc1876e02adbdd30f392f19f40d"><code>effe88b</code></a> Typo (<a href="https://redirect.github.com/postcss/postcss/issues/2072">#2072</a>)</li> <li><a href="https://github.com/postcss/postcss/commit/3ee79a2c4a11e41d52db50b444eebe38299495ad"><code>3ee79a2</code></a> Thread model (<a href="https://redirect.github.com/postcss/postcss/issues/2071">#2071</a>)</li> <li><a href="https://github.com/postcss/postcss/commit/2e0683daca4dc2919211b03774f6b2d137136c01"><code>2e0683d</code></a> Create incident response docs (<a href="https://redirect.github.com/postcss/postcss/issues/2070">#2070</a>)</li> <li><a href="https://github.com/postcss/postcss/commit/fe88ac29c06b7b218be32994cdc6ca1525bdf2c9"><code>fe88ac2</code></a> Release 8.5.9 version</li> <li><a href="https://github.com/postcss/postcss/commit/c551632496b87ab3f1965bfda5dc386b6c71963e"><code>c551632</code></a> Avoid RegExp when we can use simple JS</li> <li><a href="https://github.com/postcss/postcss/commit/89a6b744060eb8dee743351c785a9fbe37d4525a"><code>89a6b74</code></a> Move SECURITY.txt for docs folder to keep GitHub page cleaner</li> <li><a href="https://github.com/postcss/postcss/commit/6ceb8a46af9f9de821faee98f861bdf84617347b"><code>6ceb8a4</code></a> Create SECURITY.md</li> <li>Additional commits viewable in <a href="https://github.com/postcss/postcss/compare/8.5.6...8.5.10">compare view</a></li> </ul> </details> <br /> [![Dependabot compatibility score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=postcss&package-manager=npm_and_yarn&previous-version=8.5.6&new-version=8.5.10)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) --- <details> <summary>Dependabot commands and options</summary> <br /> You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot show <dependency name> ignore conditions` will show all of the ignore conditions of the specified dependency - `@dependabot ignore <dependency name> major version` will close this group update PR and stop Dependabot creating any more for the specific dependency's major version (unless you unignore this specific dependency's major version or upgrade to it yourself) - `@dependabot ignore <dependency name> minor version` will close this group update PR and stop Dependabot creating any more for the specific dependency's minor version (unless you unignore this specific dependency's minor version or upgrade to it yourself) - `@dependabot ignore <dependency name>` will close this group update PR and stop Dependabot creating any more for the specific dependency (unless you unignore this specific dependency or upgrade to it yourself) - `@dependabot unignore <dependency name>` will remove all of the ignore conditions of the specified dependency - `@dependabot unignore <dependency name> <ignore condition>` will remove the ignore condition of the specified dependency and ignore conditions You can disable automated security fix PRs for this repo from the [Security Alerts page](https://github.com/deytenit/ermnvldmr.com/network/alerts). </details> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2026-05-05 14:46:23 +03:00
deytenitandcopilot-swe-agent[bot]	ef6ca40c72	feat (www): Add Wanted (wishlist) page (#15 ) Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>	2026-05-04 18:58:46 +03:00