@rettangoli/vt 1.0.0-rc1 → 1.0.0-rc13

package/README.md

@@ -5,12 +5,18 @@ Visual regression testing for Rettangoli specs using Playwright screenshots.
 ## Commands
 
 - `rtgl vt generate`
+- `rtgl vt screenshot`
 - `rtgl vt report`
 - `rtgl vt accept`
 
-## Public Generate Options
+Behavior split:
+
+- `generate` builds candidate HTML only (no Playwright capture)
+- `screenshot` runs generate flow and captures candidate screenshots
+- `report` compares existing artifacts only (does not run generate/screenshot)
+
+## Public Screenshot Options
 
-- `--skip-screenshots`
 - `--headed`
 - `--concurrency <number>`
 - `--timeout <ms>`
@@ -30,10 +36,10 @@ Visual regression testing for Rettangoli specs using Playwright screenshots.
 
 ## Scoped Runs
 
-Use selectors to run only part of VT in both `generate` and `report`:
+Use selectors to run only part of VT in both `screenshot` and `report`:
 
 - `folder`: matches specs by folder prefix under `vt/specs` (example: `components/forms`)
-- `group`: matches section page key from `vt.sections` (`title` for flat sections, `items[].title` for grouped sections)
+- `group`: matches derived section page key from `vt.sections` titles (`kebab-case(title)`)
 - `item`: matches a single spec path relative to `vt/specs` (with or without extension)
 
 Selector rules:
@@ -45,21 +51,21 @@ Examples:
 
 ```bash
 # Only specs under a folder
-rtgl vt generate --folder components/forms
+rtgl vt screenshot --folder components/forms
 
 # Only one section/group key from vt.sections
-rtgl vt generate --group components_basic
+rtgl vt screenshot --group components-basic
 
 # Only one spec item (extension optional)
-rtgl vt generate --item components/forms/login
-rtgl vt generate --item components/forms/login.html
+rtgl vt screenshot --item components/forms/login
+rtgl vt screenshot --item components/forms/login.html
 
 # Combine selectors (union)
-rtgl vt generate --group components_basic --item pages/home
+rtgl vt screenshot --group components-basic --item pages/home
 
 # Same selectors for report
 rtgl vt report --folder components/forms
-rtgl vt report --group components_basic
+rtgl vt report --group components-basic
 rtgl vt report --item components/forms/login
 ```
 
@@ -73,20 +79,31 @@ Everything else in capture is internal and intentionally not user-configurable.
 vt:
   path: ./vt
   port: 3001
-  skipScreenshots: false
+  url: http://127.0.0.1:4173
+  service:
+    start: bun run preview
   concurrency: 4
   timeout: 30000
   waitEvent: vt:ready
+  viewport:
+    id: desktop
+    width: 1280
+    height: 720
   sections:
-    - title: components_basic
+    - title: Components Basic
       files: components
 ```
 
 Notes:
 
 - `vt.sections` is required.
-- Section page keys (`title` for flat sections and group `items[].title`) allow only letters, numbers, `-`, `_`.
+- `vt.service` is optional. When set, VT starts the command before capture, waits for `vt.url`, then stops it after capture.
+- when `vt.service` is omitted and `vt.url` is set, VT expects that URL to already be running.
+- Section page keys are derived as `kebab-case(title)` for flat sections and group `items[].title`.
+- Derived section page keys must be unique case-insensitively.
+- `vt.viewport` supports object or array; each viewport requires `id`, `width`, `height`.
 - `vt.capture` is internal and must be omitted.
+- Viewport contract details: `docs/viewport-contract.md`.
 
 ## Spec Frontmatter
 
@@ -99,23 +116,65 @@ Supported frontmatter keys per spec file:
 - `waitEvent`
 - `waitSelector`
 - `waitStrategy` (`networkidle` | `load` | `event` | `selector`)
+- `viewport` (object or array of viewport objects)
 - `skipScreenshot`
+- `skipInitialScreenshot`
 - `specs`
 - `steps`
 
+Step action reference:
+
+- `docs/step-actions.md`
+- canonical format is structured action objects (`- action: ...`); legacy one-line string steps are not supported.
+- `assert` supports `js` deep-equal checks for object/array values.
+
 Screenshot naming:
 
-- First screenshot is `-01`.
+- By default, VT takes an immediate first screenshot before running `steps`.
+- Set `skipInitialScreenshot: true` in frontmatter to skip that immediate first screenshot.
+- First captured screenshot is `-01`.
 - Then `-02`, `-03`, up to `-99`.
+- When viewport id is configured, filenames include `--<viewportId>` before ordinal (for example `pages/home--mobile-01.webp`).
+
+## Docker
+
+A pre-built Docker image with `rtgl` and Playwright browsers is available:
+
+```bash
+docker pull han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.0.0-rc13
+```
+
+Run commands against a local project:
+
+```bash
+docker run --rm -v "$(pwd):/workspace" han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.0.0-rc13 rtgl vt screenshot
+docker run --rm -v "$(pwd):/workspace" han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.0.0-rc13 rtgl vt report
+docker run --rm -v "$(pwd):/workspace" han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.0.0-rc13 rtgl vt accept
+```
+
+Note:
+
+- Image default working directory is `/workspace`.
+- Use `-w /workspace/<subdir>` only when running commands from a subfolder within the mounted project.
+
+Supports `linux/amd64` and `linux/arm64`.
 
 ## Development
 
-Run tests:
+Run unit tests:
 
 ```bash
 bun test
 ```
 
+Default unit run behavior:
+
+- `bun test` skips the real-browser smoke tests in `spec/e2e-smoke.spec.js` unless `VT_E2E=1`.
+- Skipped smoke tests are:
+  - `runs generate, accept, and report with real screenshots`
+  - `supports waitEvent readiness with real browser screenshots`
+  - `supports managed service lifecycle with vt.service.start and vt.url`
+
 Run real-browser smoke:
 
 ```bash
@@ -125,15 +184,13 @@ VT_E2E=1 bun test spec/e2e-smoke.spec.js
 Run Docker E2E tests (requires Docker daemon running):
 
 ```bash
-# Full pipeline: build image → verify → run all Docker E2E tests
-bun run test:docker:full
+# Full pipeline: build test image → run all E2E scenarios
+bun run test:e2e:full
 
-# Tests only (skip image build, assumes image already exists)
-bun run test:docker
+# Scenarios only (skip image build, assumes image already exists)
+bun run test:e2e
 ```
 
-The Docker E2E suite builds a local `rtgl-local-test:latest` image, then runs generate/report/accept in temp directories inside containers. Tests validate WebP screenshot headers, report.json schema, metrics.json schema, HTML content, directory structure, accept file copies, multi-spec fixtures, multi-screenshot ordinals, and pixelmatch diff detection.
-
 Optional benchmark fixture:
 
 ```bash

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/vt",
-  "version": "1.0.0-rc1",
+  "version": "1.0.0-rc13",
   "description": "Rettangoli Visual Testing",
   "type": "module",
   "main": "./src/index.js",

package/src/capture/playwright-runner.js

@@ -3,11 +3,7 @@ import { dirname, join } from "node:path";
 import sharp from "sharp";
 import { createSteps } from "../createSteps.js";
 import { formatScreenshotOrdinal } from "./screenshot-naming.js";
-
-const DEFAULT_VIEWPORT = Object.freeze({
-  width: 1280,
-  height: 720,
-});
+import { DEFAULT_VIEWPORT } from "../viewport.js";
 
 function nowMs() {
   return performance.now();
@@ -128,8 +124,11 @@ export class PlaywrightRunner {
     return context;
   }
 
-  async configurePage(page) {
-    await page.setViewportSize(DEFAULT_VIEWPORT);
+  async configurePage(page, viewport = DEFAULT_VIEWPORT) {
+    await page.setViewportSize({
+      width: viewport.width,
+      height: viewport.height,
+    });
     await page.setDefaultNavigationTimeout(this.navigationTimeout);
     await page.setDefaultTimeout(this.readyTimeout);
     await page.emulateMedia({
@@ -348,6 +347,7 @@ export class PlaywrightRunner {
 
     try {
       resetMs = await resetSession();
+      await this.configurePage(page, task.viewport ?? DEFAULT_VIEWPORT);
       const readyState = await this.navigateToReadyState(page, task, registeredReadyEvents);
       strategy = readyState.strategy;
       navigationMs = readyState.navigationMs;
@@ -359,10 +359,12 @@ export class PlaywrightRunner {
       }
       settleMs = nowMs() - settleStart;
 
-      const firstScreenshotStart = nowMs();
-      const firstScreenshotPath = await wrappedScreenshot(page, task.baseName);
-      initialScreenshotMs = nowMs() - firstScreenshotStart;
-      console.log(`Screenshot saved: ${firstScreenshotPath}`);
+      if (!task.frontMatter?.skipInitialScreenshot) {
+        const firstScreenshotStart = nowMs();
+        const firstScreenshotPath = await wrappedScreenshot(page, task.baseName);
+        initialScreenshotMs = nowMs() - firstScreenshotStart;
+        console.log(`Screenshot saved: ${firstScreenshotPath}`);
+      }
 
       const stepsStart = nowMs();
       const stepsExecutor = createSteps(page, {

package/src/capture/spec-loader.js

@@ -1,3 +1,5 @@
+import { appendViewportToBaseName, resolveViewports } from "../viewport.js";
+
 const removeExtension = (filePath) => filePath.replace(/\.[^/.]+$/, "");
 
 const toHtmlPath = (filePath) => {
@@ -58,14 +60,20 @@ export function createCaptureTasks(generatedFiles, options) {
     waitEvent,
     waitSelector,
     waitStrategy,
+    viewport,
   } = options;
 
-  return generatedFiles.map((file, index) => {
+  const tasks = [];
+  let taskIndex = 0;
+
+  generatedFiles.forEach((file, fileIndex) => {
     const frontMatter = file.frontMatter || {};
     const normalizedPath = normalizePathForUrl(file.path);
     const constructedUrl = toHtmlPath(`${serverUrl}/candidate/${normalizedPath}`);
-    const rawUrl = frontMatter.url ?? configUrl ?? constructedUrl;
-    const url = toAbsoluteUrl(rawUrl, serverUrl);
+    const resolvedConfigUrl = configUrl ? toAbsoluteUrl(configUrl, serverUrl) : null;
+    const urlResolutionBase = resolvedConfigUrl || serverUrl;
+    const rawUrl = frontMatter.url ?? resolvedConfigUrl ?? constructedUrl;
+    const url = toAbsoluteUrl(rawUrl, urlResolutionBase);
     const resolvedWaitEvent = frontMatter.waitEvent ?? waitEvent;
     const resolvedWaitSelector = frontMatter.waitSelector ?? waitSelector;
 
@@ -75,25 +83,37 @@ export function createCaptureTasks(generatedFiles, options) {
       waitStrategy,
     });
 
-    const task = {
-      id: `${index}:${file.path}`,
-      index,
-      path: file.path,
-      url,
-      baseName: removeExtension(file.path),
-      frontMatter,
-      steps: frontMatter.steps || [],
-      waitStrategy: resolvedWaitStrategy,
-      estimatedCost: estimateTaskCost(frontMatter.steps || [], resolvedWaitStrategy),
-    };
+    const resolvedViewports = resolveViewports(frontMatter.viewport, viewport);
+    resolvedViewports.forEach((resolvedViewport) => {
+      const viewportId = resolvedViewport.id;
+      const task = {
+        id: `${fileIndex}:${file.path}:${viewportId ?? "default"}`,
+        index: taskIndex,
+        path: file.path,
+        url,
+        baseName: appendViewportToBaseName(removeExtension(file.path), viewportId),
+        frontMatter,
+        steps: frontMatter.steps || [],
+        waitStrategy: resolvedWaitStrategy,
+        estimatedCost: estimateTaskCost(frontMatter.steps || [], resolvedWaitStrategy),
+        viewport: {
+          id: viewportId,
+          width: resolvedViewport.width,
+          height: resolvedViewport.height,
+        },
+      };
 
-    if (resolvedWaitEvent !== undefined && resolvedWaitEvent !== null) {
-      task.waitEvent = resolvedWaitEvent;
-    }
-    if (resolvedWaitSelector !== undefined && resolvedWaitSelector !== null) {
-      task.waitSelector = resolvedWaitSelector;
-    }
+      if (resolvedWaitEvent !== undefined && resolvedWaitEvent !== null) {
+        task.waitEvent = resolvedWaitEvent;
+      }
+      if (resolvedWaitSelector !== undefined && resolvedWaitSelector !== null) {
+        task.waitSelector = resolvedWaitSelector;
+      }
 
-    return task;
+      tasks.push(task);
+      taskIndex += 1;
+    });
   });
+
+  return tasks;
 }

package/src/cli/generate-options.js

@@ -5,6 +5,7 @@ import { normalizeSelectors } from "../selector-filter.js";
 export function resolveGenerateOptions(options = {}, configData = {}) {
   const {
     skipScreenshots: cliSkipScreenshots,
+    captureScreenshots,
     vtPath: cliVtPath,
     port: cliPort,
     concurrency: cliConcurrency,
@@ -25,13 +26,26 @@ export function resolveGenerateOptions(options = {}, configData = {}) {
     item: cliItem,
   });
 
+  let resolvedSkipScreenshots;
+  if (captureScreenshots === true) {
+    resolvedSkipScreenshots = false;
+  } else if (captureScreenshots === false) {
+    resolvedSkipScreenshots = true;
+  } else if (cliSkipScreenshots === true) {
+    resolvedSkipScreenshots = true;
+  } else {
+    resolvedSkipScreenshots = configData.skipScreenshots ?? false;
+  }
+
   const resolvedOptions = {
     vtPath: cliVtPath ?? configData.path ?? "./vt",
-    skipScreenshots: cliSkipScreenshots ? true : (configData.skipScreenshots ?? false),
+    skipScreenshots: resolvedSkipScreenshots,
     port: cliPort ?? configData.port ?? 3001,
     waitEvent,
     headless: cliHeadless ?? true,
     configUrl: cliUrl ?? configData.url,
+    ...(configData.viewport !== undefined ? { viewport: configData.viewport } : {}),
+    ...(configData.service?.start ? { serviceStart: configData.service.start } : {}),
     selectors,
 
     // Internal capture defaults (not user-configurable).

package/src/cli/generate.js

@@ -14,6 +14,11 @@ import {
   filterGeneratedFilesBySelectors,
   hasSelectors,
 } from "../selector-filter.js";
+import {
+  startManagedService,
+  stopManagedService,
+  waitForServiceReady,
+} from "./service-runtime.js";
 
 const libraryTemplatesPath = new URL("./templates", import.meta.url).pathname;
 const libraryStaticPath = new URL("./static", import.meta.url).pathname;
@@ -39,6 +44,7 @@ export function buildCaptureOptions({
     isolationMode,
     metricsPath,
     headless,
+    viewport,
   } = resolvedOptions;
 
   return {
@@ -59,6 +65,7 @@ export function buildCaptureOptions({
     isolationMode,
     metricsPath,
     headless,
+    viewport,
   };
 }
 
@@ -88,6 +95,7 @@ async function main(options = {}) {
     skipScreenshots,
     port,
     configUrl,
+    serviceStart,
   } = resolvedOptions;
 
   const specsPath = join(vtPath, "specs");
@@ -162,8 +170,22 @@ async function main(options = {}) {
       return;
     }
 
-    const server = configUrl ? null : await startWebServer(siteOutputPath, vtPath, port);
+    let server = null;
+    let managedService = null;
+
     try {
+      if (serviceStart) {
+        if (!configUrl) {
+          throw new Error(
+            "vt.service.start requires vt.url (or --url) so VT can wait for readiness and capture against that URL.",
+          );
+        }
+        managedService = startManagedService({ command: serviceStart });
+        await waitForServiceReady({ url: configUrl, handle: managedService });
+      } else if (!configUrl) {
+        server = await startWebServer(siteOutputPath, vtPath, port);
+      }
+
       await takeScreenshots(
         buildCaptureOptions({
           filesToScreenshot,
@@ -177,6 +199,9 @@ async function main(options = {}) {
         server.close();
         console.log("Server stopped");
       }
+      if (managedService) {
+        await stopManagedService(managedService);
+      }
     }
   }
 }

package/src/cli/index.js

@@ -1,9 +1,11 @@
 import generate from './generate.js';
+import screenshot from './screenshot.js';
 import report from './report.js';
 import accept from './accept.js';
 
 export {
   generate,
+  screenshot,
   report,
   accept,
-}
+}

package/src/cli/report.js

@@ -159,7 +159,7 @@ async function main(options = {}) {
 
   try {
     if (!fs.existsSync(candidateDir)) {
-      throw new Error(`Candidate screenshots directory not found: "${candidateDir}". Run "rtgl vt generate" first.`);
+      throw new Error(`Candidate screenshots directory not found: "${candidateDir}". Run "rtgl vt screenshot" first.`);
     }
 
     const candidateFiles = getAllFiles(candidateDir).filter((file) => file.endsWith(".webp"));

package/src/cli/screenshot.js

@@ -0,0 +1,8 @@
+import generate from "./generate.js";
+
+export default async function screenshot(options = {}) {
+  await generate({
+    ...options,
+    captureScreenshots: true,
+  });
+}

package/src/cli/service-runtime.js

@@ -0,0 +1,116 @@
+import { spawn } from "node:child_process";
+
+const READY_TIMEOUT_MS = 120000;
+const READY_INTERVAL_MS = 500;
+const STOP_TIMEOUT_MS = 10000;
+
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+function formatExitMessage(result) {
+  if (!result) return "unknown exit state";
+  if (result.code !== null && result.code !== undefined) {
+    return `code ${result.code}`;
+  }
+  if (result.signal) {
+    return `signal ${result.signal}`;
+  }
+  return "unknown exit state";
+}
+
+function sendSignal(handle, signal) {
+  const { child, useProcessGroup } = handle;
+  const pid = child.pid;
+  if (!pid) {
+    return;
+  }
+
+  try {
+    if (useProcessGroup) {
+      process.kill(-pid, signal);
+      return;
+    }
+    child.kill(signal);
+  } catch (error) {
+    if (error?.code !== "ESRCH") {
+      throw error;
+    }
+  }
+}
+
+export function startManagedService({ command }) {
+  const useProcessGroup = process.platform !== "win32";
+  const child = spawn(command, {
+    cwd: process.cwd(),
+    stdio: "inherit",
+    shell: true,
+    env: process.env,
+    detached: useProcessGroup,
+  });
+
+  const exitPromise = new Promise((resolve, reject) => {
+    child.once("error", reject);
+    child.once("exit", (code, signal) => {
+      resolve({ code, signal });
+    });
+  });
+
+  console.log(`Starting managed service: ${command}`);
+  return { child, exitPromise, useProcessGroup };
+}
+
+export async function waitForServiceReady({ url, handle }) {
+  const startMs = Date.now();
+
+  while (Date.now() - startMs < READY_TIMEOUT_MS) {
+    if (handle.child.exitCode !== null) {
+      const result = await handle.exitPromise.catch(() => null);
+      throw new Error(
+        `Managed service exited before becoming ready (${formatExitMessage(result)}).`,
+      );
+    }
+
+    try {
+      const response = await fetch(url);
+      console.log(`Managed service ready: ${url} (status ${response.status})`);
+      return;
+    } catch {
+      // Keep polling until timeout.
+    }
+
+    await sleep(READY_INTERVAL_MS);
+  }
+
+  throw new Error(
+    `Timed out waiting for managed service at ${url} after ${READY_TIMEOUT_MS}ms.`,
+  );
+}
+
+export async function stopManagedService(handle) {
+  if (!handle) return;
+
+  const { child, exitPromise } = handle;
+  if (child.exitCode !== null) {
+    return;
+  }
+
+  console.log("Stopping managed service (SIGTERM)...");
+  sendSignal(handle, "SIGTERM");
+
+  const exitedGracefully = await Promise.race([
+    exitPromise.then(() => true).catch(() => true),
+    sleep(STOP_TIMEOUT_MS).then(() => false),
+  ]);
+
+  if (exitedGracefully) {
+    return;
+  }
+
+  if (child.exitCode === null) {
+    console.warn("Managed service did not exit after SIGTERM, sending SIGKILL...");
+    sendSignal(handle, "SIGKILL");
+  }
+
+  await exitPromise.catch(() => null);
+}

package/src/cli/templates/default.html

@@ -3,7 +3,8 @@
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="/public/theme.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rettangoli/ui@1.0.0-rc6/dist/themes/base.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rettangoli/ui@1.0.0-rc6/dist/themes/theme-rtgl-slate.css">
     <script>
       window.rtglIcons = {
         text: `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M4 12H20M4 8H20M4 16H12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
@@ -38,7 +39,8 @@
         `,
       }
     </script>
-    <script src="https://cdn.jsdelivr.net/npm/rettangoli-ui@0.1.0-rc2/dist/rettangoli-iife-ui.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/construct-style-sheets-polyfill@3.1.0/dist/adoptedStyleSheets.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@rettangoli/ui@1.0.0-rc6/dist/rettangoli-iife-ui.min.js"></script>
     <script src="/public/main.js"></script>
   </head>
   <body class="dark">
@@ -46,4 +48,4 @@
       {{ content }}
     </div>
   </body>
-</html>
+</html>

package/src/cli/templates/index.html

@@ -4,7 +4,8 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="/public/theme.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rettangoli/ui@1.0.0-rc6/dist/themes/base.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rettangoli/ui@1.0.0-rc6/dist/themes/theme-rtgl-slate.css">
   <script>
     window.addEventListener('DOMContentLoaded', () => {
       if (location.hash) {
@@ -15,7 +16,8 @@
       }
     });
   </script>
-  <script src="https://cdn.jsdelivr.net/npm/rettangoli-ui@0.1.0-rc2/dist/rettangoli-iife-ui.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/construct-style-sheets-polyfill@3.1.0/dist/adoptedStyleSheets.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@rettangoli/ui@1.0.0-rc6/dist/rettangoli-iife-ui.min.js"></script>
 
   <style>
     pre {
@@ -45,14 +47,14 @@
 </head>
 
 <body class="dark">
-  <rtgl-view d="h" w="100vw" h="100vh">
+  <rtgl-view d="h" w="f" h="100vh">
 
     <rtgl-view h="f" sm-hidden>
       <rtgl-sidebar items="{{ sidebarItems }}">
       </rtgl-sidebar>
     </rtgl-view>
 
-    <rtgl-view id="content" h="100vh" w="1fg" p="lg" g="lg" style="flex-wrap: nowrap;" sv ah="c">
+    <rtgl-view id="content" h="100vh" w="1fg" p="lg" g="lg" style="flex-wrap: nowrap; min-width: 0;" sv ah="c">
       <rtgl-view w="f" g="xl">
         <rtgl-text s="h2">{{ currentSection.title }} </rtgl-text>
         {% for file in files %}
@@ -100,8 +102,8 @@
         <rtgl-view h="33vh"></rtgl-view>
       </rtgl-view>
     </rtgl-view>
-    <rtgl-view lg-hidden>
-      <rtgl-page-outline id="page-outline" target-id="content"></rtgl-page-outline>
+    <rtgl-view lg-hidden style="flex: 0 0 auto;">
+      <rtgl-page-outline id="page-outline" target-id="content" scroll-container-id="content"></rtgl-page-outline>
     </rtgl-view>
   </rtgl-view>
 </body>

package/src/cli/templates/report.html

@@ -4,8 +4,10 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="/public/theme.css">
-  <script src="https://cdn.jsdelivr.net/npm/rettangoli-ui@0.1.0-rc2/dist/rettangoli-iife-ui.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rettangoli/ui@1.0.0-rc6/dist/themes/base.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rettangoli/ui@1.0.0-rc6/dist/themes/theme-rtgl-slate.css">
+  <script src="https://cdn.jsdelivr.net/npm/construct-style-sheets-polyfill@3.1.0/dist/adoptedStyleSheets.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@rettangoli/ui@1.0.0-rc6/dist/rettangoli-iife-ui.min.js"></script>
   <style>
     code {
       white-space: pre-wrap;