testio-tailwind 3.27.2 → 3.27.4

package/CLAUDE.md

@@ -0,0 +1,41 @@
+# testio-tailwind
+
+Tailwind CSS 4.x design system for the Test IO platform. Publishes as the `testio-tailwind` npm package consumed by other apps.
+
+## Dev Server
+
+```bash
+npm start
+# http://localhost:8080/
+```
+
+Component pages live under `src/pages/` and are served at matching URL paths (e.g., `src/pages/buttons/buttons.haml` → `http://localhost:8080/buttons/`). Templates use HAML.
+
+## Build
+
+```bash
+npm run build   # compiles CSS + JS to dist/
+```
+
+## AI Design System Reference
+
+**Start here:** [AI_DESIGN_SYSTEM_REFERENCE.md](AI_DESIGN_SYSTEM_REFERENCE.md) — lightweight index pointing to topic files.
+
+**Topic files** (load only what you need):
+
+| File | Topics |
+|---|---|
+| [ai-reference/00-index.md](ai-reference/00-index.md) | Full index with load guidance |
+| [ai-reference/01-setup-colors-typography.md](ai-reference/01-setup-colors-typography.md) | Colors, typography, spacing, breakpoints |
+| [ai-reference/02-layout-patterns.md](ai-reference/02-layout-patterns.md) | Layouts, page header, navigation |
+| [ai-reference/03-buttons.md](ai-reference/03-buttons.md) | Buttons |
+| [ai-reference/04-cards.md](ai-reference/04-cards.md) | Cards |
+| [ai-reference/05-forms.md](ai-reference/05-forms.md) | All form components |
+| [ai-reference/06-overlays.md](ai-reference/06-overlays.md) | Modals & drawers |
+| [ai-reference/07-feedback.md](ai-reference/07-feedback.md) | Alerts, notifications, empty states |
+| [ai-reference/08-data-display.md](ai-reference/08-data-display.md) | Tables |
+| [ai-reference/09-lists-splitview.md](ai-reference/09-lists-splitview.md) | Lists & splitview |
+| [ai-reference/10-chat-charts-status.md](ai-reference/10-chat-charts-status.md) | Chat, charts, status stepper, utility components |
+| [ai-reference/11-agenticqa.md](ai-reference/11-agenticqa.md) | AgenticQA platform components |
+| [ai-reference/12-dark-mode.md](ai-reference/12-dark-mode.md) | Dark mode |
+| [ai-reference/13-best-practices.md](ai-reference/13-best-practices.md) | Best practices & version info |

package/Dockerfile

@@ -1,4 +1,4 @@
-FROM europe-west3-docker.pkg.dev/oi-tset/hub/node:18-alpine
+FROM europe-west3-docker.pkg.dev/oi-tset/hub/node:20-alpine
 
 ARG APP_UID=5123
 ARG USER=appuser
@@ -10,15 +10,11 @@ USER ${USER}
 
 WORKDIR /home/${USER}/app
 
-COPY --chown=${USER}:${GROUP} package*.json ./
-
-RUN mkdir -p /home/${USER}/app/node_modules && \
-    npm install && \
-    npm install http-server
-
 COPY --chown=${USER}:${GROUP} . ./
 
-RUN npm run build
+RUN npm ci && \
+    npm install http-server && \
+    npm run build
 
 EXPOSE 8080
 

package/README.md

@@ -1,9 +1,5 @@
 # Test IO TailWind Design System
 
-[![CircleCI](https://dl.circleci.com/status-badge/img/gh/test-IO/testio-tailwind/tree/main.svg?style=svg)](https://dl.circleci.com/status-badge/redirect/gh/test-IO/testio-tailwind/tree/main)
-
---- (Live deployment)
-
 
 ## Development
 
@@ -48,4 +44,4 @@ npm run build
 ### Integration of the design system into your app
 
 1. Import `app.css` to get all relevant modules and files.
-2. Run TailWindCSS V4 to compile everything.
+2. Run TailWindCSS V4 to compile everything.

package/ai-reference/00-index.md

@@ -0,0 +1,54 @@
+# Test IO Tailwind Design System — AI Reference Index
+
+**Version:** 3.23.0 | **Framework:** Tailwind CSS 4.x | **Package:** `testio-tailwind`
+
+This index is the entry point. Load only the topic files you actually need — each file is self-contained.
+
+---
+
+## How to Use This Reference
+
+Load the specific file(s) relevant to your task. Do not load all files at once.
+
+| File | Topics | When to Load |
+|---|---|---|
+| [01-setup-colors-typography.md](01-setup-colors-typography.md) | Installation, CSS/JS imports, color palette, semantic colors, typography scale, spacing, breakpoints | Starting a new project, setting up imports, choosing colors or fonts |
+| [02-layout-patterns.md](02-layout-patterns.md) | Full-width layout, centered layout, page header, navigation (header, sidebar, tabs) | Building page structure, choosing layout type, adding navigation |
+| [03-buttons.md](03-buttons.md) | All button variants, sizes, shapes, icons, inverted, dropdown, groups | Adding any button or interactive control |
+| [04-cards.md](04-cards.md) | Card structure, sizes, variants (highlight, icon, image), card layouts (grid, list) | Displaying content in cards |
+| [05-forms.md](05-forms.md) | Inputs, labels, hints, grid, checkboxes, radios, toggles, selects, date picker, tokens, addons, form cards | Any form or input component |
+| [06-overlays.md](06-overlays.md) | Modal (basic, sizes, disabled-close), Drawer (basic, close btn, filter) | Overlays, modals, side drawers |
+| [07-feedback.md](07-feedback.md) | Alerts, notifications, progress bars, loading spinner, empty states | User feedback, status messages, loading states |
+| [08-data-display.md](08-data-display.md) | Tables (basic, variants, cell-style, cell utilities, interactive rows) | Data tables |
+| [09-lists-splitview.md](09-lists-splitview.md) | List items (basic, variants, collapsable, nested, selectable), splitview two-pane layout | List views, master-detail layouts |
+| [10-chat-charts-status.md](10-chat-charts-status.md) | Chat messages/window, ECharts integration, status stepper, tags, badges, pagination, popovers, icons | Chat UI, charts, status indicators, utility components |
+| [11-agenticqa.md](11-agenticqa.md) | AgenticQA-specific: page header, chat, status stepper, splitview, list items, grid/form tables, header nav, layout | Building AgenticQA platform pages |
+| [12-dark-mode.md](12-dark-mode.md) | Dark mode setup, color palette, CSS variables, differences from light mode | Dark mode implementation |
+| [13-best-practices.md](13-best-practices.md) | AI agent guidelines, layout selection, accessibility, version info | General guidance and best practices |
+
+---
+
+## Quick Reference
+
+### Installation
+```bash
+npm install testio-tailwind
+```
+```css
+@import 'testio-tailwind/dist/static/app.compiled.css';
+```
+```javascript
+import 'testio-tailwind/dist/static/app.bundled.js';
+```
+
+### Key Semantic Colors
+```
+bg-primary     bg-success     bg-danger      bg-info
+bg-blocked     bg-pending     bg-appbody     bg-card
+bg-header      bg-actionbar   border-bordercolor
+```
+
+### Dev Server
+```bash
+npm start  →  http://localhost:8080/
+```

package/ai-reference/01-setup-colors-typography.md

@@ -0,0 +1,164 @@
+# Setup, Colors & Typography
+
+**Package:** `testio-tailwind` | **Version:** 3.23.0 | **Framework:** Tailwind CSS 4.x
+
+---
+
+## Installation & Setup
+
+### NPM Installation
+```bash
+npm install testio-tailwind
+```
+
+### CSS Import
+```css
+@import 'testio-tailwind/dist/static/app.compiled.css';
+```
+
+### JavaScript Import
+```javascript
+import 'testio-tailwind/dist/static/app.bundled.js';
+```
+
+---
+
+## Component Library Structure
+
+```
+src/pages/
+├── agenticqa/           # AgenticQA-specific components
+├── buttons/             # Button components and variants
+├── charts/              # ECharts data visualization
+├── components/          # UI components
+├── forms/               # Form components
+├── layout/              # Layout utilities
+├── layouts/             # Full layout examples
+├── navigation/          # Navigation components
+├── tables/              # Table components
+└── typography/          # Typography examples
+```
+
+Dev server: `npm start` → `http://localhost:8080/`
+
+---
+
+## Color System
+
+### Semantic Colors
+```html
+<div class="bg-primary text-white">Primary action</div>
+<div class="bg-link text-white">Link color</div>
+<div class="bg-success text-white">Success state</div>
+<div class="bg-danger text-white">Error/danger state</div>
+<div class="bg-info text-white">Information</div>
+<div class="bg-blocked text-white">Warning/blocked</div>
+<div class="bg-pending text-gray-darker">Pending state</div>
+<div class="bg-appbody text-appbody-textcolor">App background</div>
+<div class="bg-card">Card background</div>
+<div class="bg-header text-white">Header background</div>
+<div class="bg-listitem">List item background</div>
+<div class="bg-actionbar">Action bar (dark)</div>
+<div class="border-bordercolor">Standard border</div>
+```
+
+### Color Palette
+
+**Grays:** `gray-100` through `gray-900`, plus `gray-lightest`, `gray-lighter`, `gray-light`, `gray-dark`, `gray-darker`, `gray-darkest`
+
+**Brand Colors:**
+- **Primary (Petrol):** `petrol` (#236a84 light, #78eac1 dark)
+- **Success:** `green` (#8cbd24 light, #33BA9E dark)
+- **Danger/Critical:** `red` (#ec0404 light, #FF3131 dark)
+- **Warning:** `orange` (#f48d21)
+- **Info:** `blue` (#326dd1)
+- **Accent Colors:** `teal`, `purple`, `pink`, `yellow`
+
+**Priority Levels:**
+- `critical` - Red (#FF3131)
+- `high` - Yellow (#d8ce0d)
+- `low` - Gray (#9fa2a8)
+
+**Issue Types:**
+- `visual` - Orange (#f48d21)
+- `content` - Blue (#326dd1)
+- `usability` - Petrol dark (#263340)
+
+---
+
+## Typography
+
+### Font Families
+- **Body/Sans:** `font-sans` - Source Sans 3
+- **Monospace:** `font-mono` - Source Code Pro
+
+### Headings
+```html
+<h1 class="text-heading-1 font-light">Main Title (2.25rem)</h1>
+<h2 class="text-heading-2 font-light">Section Title (1.875rem)</h2>
+<h3 class="text-heading-3 font-light">Subsection (1.563rem)</h3>
+<h4 class="text-heading-4 font-light">Sub-heading (1.375rem)</h4>
+<h5 class="text-heading-5 font-light">Minor heading (1.125rem)</h5>
+<h6 class="text-heading-6 font-light">Smallest heading (1rem)</h6>
+```
+
+### Display Text
+```html
+<h1 class="text-display-1 font-extralight">Hero Text (3.25rem)</h1>
+<h2 class="text-display-2 font-extralight">Large Display (3rem)</h2>
+<h3 class="text-display-3 font-extralight">Medium Display (2.75rem)</h3>
+<h4 class="text-display-4 font-extralight">Small Display (2.5rem)</h4>
+```
+
+### Body Text Sizes
+```html
+<p class="text-base">Base text (0.875rem - default)</p>
+<p class="text-lg">Large text (1.25rem)</p>
+<p class="text-sm">Small text (0.813rem)</p>
+<p class="text-xs">Extra small (0.6875rem)</p>
+<p class="text-xxs">Tiny text (0.625rem)</p>
+```
+
+### Labels & Special Text
+```html
+<label class="text-label">Form Label (0.8125rem, 0.75rem in dark)</label>
+<label class="text-label-sm">Small Label (0.75rem)</label>
+<h3 class="text-card-header">Card Header (1.125rem in dark)</h3>
+```
+
+---
+
+## Spacing & Layout
+
+### Spacing Scale
+- `xxs` - 0.3125rem (5px)
+- `xs` - 0.625rem (10px)
+- `sm` - 0.9375rem (15px)
+- `md` - 1.25rem (20px)
+- `spacing` - 1.875rem (30px) — **base unit**
+- `lg` - 3.125rem (50px)
+- `xl` - 3.75rem (60px)
+- `xxl` - 5.625rem (90px)
+
+### Common Spacing Patterns
+```html
+<div class="p-md">Standard padding (20px)</div>
+<div class="p-card-padding">Card padding (30px)</div>
+<div class="px-md py-sm">Mixed padding</div>
+<div class="mb-spacing">Standard margin bottom (30px)</div>
+<div class="mt-xxs">Tiny margin top (5px)</div>
+<div class="mb-heading">Bottom margin for headings</div>
+<div class="flex gap-xs">Flex with 10px gap</div>
+<div class="grid gap-grid-gutter">Grid with gutter (20px light, 40px dark)</div>
+```
+
+### Breakpoints
+```
+xs:  30rem  (480px)
+sm:  640px
+md:  768px
+lg:  70rem  (1120px)
+xl:  90rem  (1440px)
+2xl: 100rem (1600px)
+3xl: 1930px
+```

package/ai-reference/02-layout-patterns.md

@@ -0,0 +1,253 @@
+# Layout Patterns & Navigation
+
+---
+
+## Layout Patterns
+
+### Standard Application Layout Structure
+```html
+<body class="app-body">
+  <header class="header">
+    <!-- Navigation and branding -->
+  </header>
+  <main class="main-content">
+    <!-- Page content -->
+  </main>
+  <footer class="actionbar">
+    <!-- Actions and controls -->
+  </footer>
+</body>
+```
+
+### Full-Width Layout
+Standard layout with content spanning the full width of the viewport.
+
+```html
+<body class="app-body">
+  <header class="header"></header>
+  <main class="main-content">
+    <div class="page-content">
+      <!-- Content fills available space -->
+    </div>
+  </main>
+  <footer class="actionbar"></footer>
+</body>
+```
+
+**Use Case:** Dashboard layouts, full-width data displays, responsive mobile views.
+
+### Centered Layout
+Centered layout with max-width constraints for optimal readability on widescreen screens.
+
+```html
+<body class="app-body">
+  <header class="header"></header>
+  <main class="main-content centered">
+    <div class="centered-content">
+      <!-- Content centered with max-width -->
+    </div>
+  </main>
+  <footer class="actionbar centered"></footer>
+</body>
+```
+
+**Key Classes:**
+- `.main-content.centered` - Centers the main content
+- `.centered-content` - Wrapper with max-width constraint
+- `.actionbar.centered` - Centered variant of action bar
+- `.max-w-capped` - Standard max-width for centered content (~800px)
+
+**Use Case:** Documentation pages, information displays, form submissions.
+
+**Example Centered Actionbar:**
+```html
+<footer class="actionbar centered">
+  <div class="flex justify-center gap-md">
+    <button class="btn btn-secondary">Cancel</button>
+    <button class="btn btn-primary">Submit</button>
+  </div>
+</footer>
+```
+
+---
+
+## Page Layout Components
+
+### Basic Page Header
+A responsive grid layout component for dashboard and session management pages.
+
+```html
+<div class="page-header">
+  <div class="card page-maincard p-card-padding">
+    <h1 class="text-card-header">Session Details</h1>
+    <h2 class="page-session-title">Test Session Title</h2>
+
+    <dl class="page-meta-info">
+      <dt class="label">Created on:</dt>
+      <dd>2025-10-21 10:45 AM</dd>
+      <dt class="label">Last test:</dt>
+      <dd>2025-10-21 11:30 AM</dd>
+      <dt class="label">ID:</dt>
+      <dd>321456987</dd>
+      <dt class="label">URL:</dt>
+      <dd class="row-testsuite">
+        <a href="#" class="label">Test Suite Name</a>
+      </dd>
+      <dt class="label">Status:</dt>
+      <dd class="text-white">Active</dd>
+    </dl>
+  </div>
+
+  <div class="page-actions">
+    <a href="#" class="btn btn-primary btn-main">
+      <span class="icon icon-test-running-xl"></span>
+      Start Test
+    </a>
+  </div>
+</div>
+```
+
+### Page Header with Chart
+```html
+<div class="page-header with-chart">
+  <div class="card page-maincard p-card-padding">
+    <!-- Main card content -->
+  </div>
+  <div class="page-chart card p-card-padding">
+    <div class="echarts-container" id="chart"></div>
+  </div>
+  <div class="page-actions">
+    <a href="#" class="btn btn-primary btn-main">
+      <span class="icon icon-review-xl"></span>
+      Show Report
+    </a>
+    <a href="#" class="btn btn-secondary">Re-run All Checks</a>
+  </div>
+</div>
+```
+
+### Page Header with Forms
+```html
+<div class="page-header">
+  <div class="card page-maincard p-card-padding">
+    <div class="form-grid">
+      <div class="form-group">
+        <label class="form-label">Test Name</label>
+        <input type="text" class="form-control" placeholder="Enter test name">
+      </div>
+      <div class="form-group">
+        <label class="form-label">URL for Testing</label>
+        <input type="url" class="form-control" placeholder="https://example.com">
+      </div>
+    </div>
+  </div>
+  <div class="page-actions">
+    <a href="#" class="btn btn-primary btn-xl">
+      <span class="icon icon-test-running-xl"></span>
+      Save and Run Test
+    </a>
+    <a href="#" class="btn btn-secondary">Save Draft</a>
+    <a href="#" class="btn btn-secondary">Cancel</a>
+  </div>
+</div>
+```
+
+**Key Classes:**
+- `.page-header` - Main grid container with responsive columns
+- `.page-maincard` - Primary content card (spans 2-4 columns by screen size)
+- `.page-actions` - Action buttons column
+- `.page-session-title` - Session/test title with bottom margin
+- `.page-meta-info` - Metadata grid (2 cols mobile, 6 cols xl)
+- `.row-testsuite` - Special metadata row (spans 5 cols on xl)
+- `.with-chart` - Modifier for including chart column
+- `.btn-main` - Primary action button that grows to fill available space
+
+---
+
+## Navigation Components
+
+### Header Navigation
+```html
+<header class="header">
+  <div class="header-logo">
+    <img src="logo.svg" alt="Logo">
+  </div>
+  <nav class="header-nav">
+    <a href="#" class="nav-link">Dashboard</a>
+    <a href="#" class="nav-link active">Projects</a>
+    <a href="#" class="nav-link">Settings</a>
+  </nav>
+  <div class="header-actions">
+    <button class="btn btn-sm btn-primary">New Project</button>
+  </div>
+</header>
+```
+
+### Sidebar Navigation
+```html
+<aside class="sidebar">
+  <nav class="sidebar-nav">
+    <a href="#" class="sidebar-link active">
+      <i class="icon icon-home"></i>
+      Dashboard
+    </a>
+    <a href="#" class="sidebar-link">
+      <i class="icon icon-folder"></i>
+      Projects
+    </a>
+    <a href="#" class="sidebar-link">
+      <i class="icon icon-settings"></i>
+      Settings
+    </a>
+  </nav>
+</aside>
+```
+
+### Tab Navigation
+```html
+<nav class="nav-tabs">
+  <div class="navlink active" href="">Navlink active</div>
+  <div class="navlink" href="">Navlink</div>
+  <div class="navlink" href="">
+    Counter
+    <div class="counter">99</div>
+  </div>
+  <div class="navlink disabled" href="">Disabled</div>
+</nav>
+```
+
+### Tab Navigation Variants
+```html
+<!-- Pills style -->
+<nav class="nav-tabs pills">...</nav>
+
+<!-- Small tabs -->
+<nav class="nav-tabs sm">...</nav>
+
+<!-- Tabs with actions -->
+<nav class="nav-tabs with-actions">
+  <div class="navlink active">Tab 1</div>
+  <div class="navlink">Tab 2</div>
+  <div class="tab-actions">
+    <button class="btn btn-sm btn-primary">Action</button>
+  </div>
+</nav>
+```
+
+### Radio Tabs
+```html
+<div class="radio-tabs">
+  <input type="radio" id="tab1" name="tabs" checked>
+  <label for="tab1">Tab 1</label>
+  <input type="radio" id="tab2" name="tabs">
+  <label for="tab2">Tab 2</label>
+</div>
+```
+
+### Product-Specific Headers
+```html
+<header class="header customer_header">...</header>
+<header class="header tester_header">...</header>
+<header class="header manager_header">...</header>
+<header class="header agenticqa_header">...</header>
+```

package/ai-reference/03-buttons.md

@@ -0,0 +1,106 @@
+# Button Components
+
+---
+
+## Basic Buttons
+```html
+<button class="btn btn-primary">Primary Action</button>
+<button class="btn btn-secondary">Secondary Action</button>
+<button class="btn btn-ghost">Ghost Action</button>
+<button class="btn btn-link">Link Style</button>
+<button class="btn btn-dashed">Add New</button>
+```
+
+## Semantic Button Variants
+```html
+<button class="btn btn-success">Success Action</button>
+<button class="btn btn-danger">Delete/Danger</button>
+<button class="btn btn-warning">Warning Action</button>
+<button class="btn btn-info">Info Action</button>
+```
+
+## Button Sizes
+```html
+<button class="btn btn-sm btn-primary">Small</button>
+<button class="btn btn-primary">Default (h-btn = 2.5rem/40px)</button>
+<button class="btn btn-lg btn-primary">
+  <i class="icon icon-star"></i>
+</button>
+<button class="btn btn-xl btn-primary">
+  <i class="icon icon-upload"></i>
+  Upload
+</button>
+```
+
+## Button Shapes
+```html
+<button class="btn btn-square btn-primary">
+  <i class="icon icon-search"></i>
+</button>
+<button class="btn btn-circle btn-primary">
+  <i class="icon icon-add"></i>
+</button>
+<button class="btn btn-block btn-primary">Full Width</button>
+```
+
+## Inverted Buttons (for dark backgrounds)
+```html
+<div class="bg-actionbar p-md">
+  <button class="btn btn-primary-inverted">Primary Inverted</button>
+  <button class="btn btn-inverted">Inverted</button>
+  <button class="btn btn-secondary-inverted">Secondary Inverted</button>
+  <button class="btn btn-outline-primary-inverted">Outline Primary Inverted</button>
+  <button class="btn btn-ghost-inverted">Ghost Inverted</button>
+</div>
+```
+
+## Buttons with Icons
+```html
+<button class="btn btn-primary">
+  <i class="icon icon-save mr-icon-spacing"></i>
+  Save Changes
+</button>
+
+<button class="btn btn-secondary">
+  <i class="icon icon-download mr-icon-spacing"></i>
+  Download
+</button>
+```
+
+## Dropdown Menu Button
+```html
+<details class="dropdown-actions">
+  <summary>
+    <div class="btn btn-square btn-primary">
+      <span class="icon icon-more"></span>
+    </div>
+  </summary>
+  <div class="popover-menu">
+    <a class="popover-action" href="#">
+      <span class="icon icon-pencil"></span>
+      Edit
+    </a>
+    <a class="popover-action" href="#">
+      <span class="icon icon-duplicate"></span>
+      Duplicate
+    </a>
+    <a class="popover-action" href="#">
+      <span class="icon icon-remove"></span>
+      Delete
+    </a>
+  </div>
+</details>
+
+<!-- Direction variants -->
+<details class="dropdown-actions dropright"><!-- Opens to right --></details>
+<details class="dropdown-actions dropup dropright"><!-- Opens up and right --></details>
+```
+
+## Button Groups
+```html
+<div class="btn-group">
+  <button class="btn btn-primary">Left</button>
+  <button class="btn btn-primary">Center</button>
+  <button class="btn btn-primary">Right</button>
+</div>
+```