@fartinmartin/ruintime 0.0.0 → 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +75 -0
  2. package/dist/ruintime.css +1 -1
  3. package/dist/svelte.js +1068 -1022
  4. package/dist/svelte.js.map +1 -1
  5. package/package.json +1 -1
package/README.md ADDED
@@ -0,0 +1,75 @@
1
+ # rUIntime
2
+
3
+ An in-browser test runner UI for Vite projects. Write tests with `describe`/`it`, use `expect` from vitest, and watch them run live in the browser.
4
+
5
+ ## Install
6
+
7
+ ```sh
8
+ pnpm add -D @fartinmartin/ruintime
9
+ ```
10
+
11
+ ## Usage (Svelte)
12
+
13
+ Register your test files as side effects before mounting the component:
14
+
15
+ ```svelte
16
+ <!-- app.svelte -->
17
+ <script>
18
+ import Ruintime from '@fartinmartin/ruintime/svelte';
19
+
20
+ import './math.test.ts';
21
+ import './network.test.ts';
22
+ </script>
23
+
24
+ <Ruintime title="my app" version="1.0.0" />
25
+ ```
26
+
27
+ Or use a glob pattern to pick up all test files automatically:
28
+
29
+ ```svelte
30
+ <!-- app.svelte -->
31
+ <script>
32
+ import Ruintime from '@fartinmartin/ruintime/svelte';
33
+ import.meta.glob('./**/*.test.ts', { eager: true });
34
+ </script>
35
+
36
+ <Ruintime />
37
+ ```
38
+
39
+ Write tests using `describe`/`it` from the lib and `expect` from vitest:
40
+
41
+ ```ts
42
+ // example.test.ts
43
+ import { describe, it } from '@fartinmartin/ruintime';
44
+ import { expect } from 'vitest';
45
+
46
+ describe('add', () => {
47
+ it('adds two numbers', () => {
48
+ expect(1 + 1).toBe(2);
49
+ });
50
+ });
51
+ ```
52
+
53
+ ## Callbacks
54
+
55
+ The component accepts lifecycle callbacks to hook into the test run:
56
+
57
+ ```svelte
58
+ <Ruintime
59
+ onTestEnd={(test) => console.log(test.title, test.status)}
60
+ onSuiteEnd={(suite) => console.log(suite.title, suite.status)}
61
+ onRunStart={() => console.log('run started')}
62
+ onRunEnd={() => console.log('run finished')}
63
+ />
64
+ ```
65
+
66
+ ## Props
67
+
68
+ | Prop | Type | Default | Description |
69
+ | ------------ | --------------------------------- | ------------ | ---------------------------------- |
70
+ | `title` | `string` | `'rUIntime'` | Displayed in the header and footer |
71
+ | `version` | `string` | — | Displayed in the footer |
72
+ | `onTestEnd` | `(test: TestSnapshot) => void` | — | Called after each test completes |
73
+ | `onSuiteEnd` | `(suite: SuiteSnapshot) => void` | — | Called after each suite completes |
74
+ | `onRunStart` | `() => void` | — | Called when a test run begins |
75
+ | `onRunEnd` | `() => void` | — | Called when a test run finishes |
package/dist/ruintime.css CHANGED
@@ -1 +1 @@
1
- html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}:root{--font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;--color-bg-card: light-dark(#ffffff, #1a1a1a);--color-bg-muted: light-dark(#f5f5f5, #262626);--color-bg-background: light-dark(#ffffff, #0a0a0a);--color-border: light-dark(#e5e5e5, #404040);--color-text-foreground: light-dark(#171717, #fafafa);--color-text-muted: light-dark(#737373, #a3a3a3);--color-success: #10b981;--color-error: #ef4444;--color-info: #3b82f6;--color-primary: light-dark(#171717, #3b82f6);--color-bg-success: color-mix(in srgb, var(--color-success) 10%, transparent);--color-bg-error: color-mix(in srgb, var(--color-error) 10%, transparent);--color-bg-info: color-mix(in srgb, var(--color-info) 10%, transparent);--color-border-error: color-mix(in srgb, var(--color-error) 20%, transparent)}:root{color-scheme:light dark;font-family:var(--font-mono);font-size:var(--step-1)}.dark{color-scheme:dark}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}:root{--step--2: clamp(.6076rem, .5289rem + .3497vw, .8rem);--step--1: clamp(.7292rem, .6184rem + .4924vw, 1rem);--step-0: clamp(.875rem, .7216rem + .6818vw, 1.25rem);--step-1: clamp(1.05rem, .8403rem + .9318vw, 1.5625rem);--step-2: clamp(1.26rem, .9764rem + 1.2602vw, 1.9531rem);--step-3: clamp(1.512rem, 1.1318rem + 1.6898vw, 2.4414rem);--step-4: clamp(1.8144rem, 1.3082rem + 2.2497vw, 3.0518rem);--step-5: clamp(2.1773rem, 1.5074rem + 2.9771vw, 3.8147rem)}:root{--grid-size: .25rem;--space-3xs: clamp(.25rem, .2244rem + .1136vw, .3125rem);--space-2xs: clamp(.4375rem, .3608rem + .3409vw, .625rem);--space-xs: clamp(.6875rem, .5852rem + .4545vw, .9375rem);--space-s: clamp(.875rem, .7216rem + .6818vw, 1.25rem);--space-m: clamp(1.3125rem, 1.0824rem + 1.0227vw, 1.875rem);--space-l: clamp(1.75rem, 1.4432rem + 1.3636vw, 2.5rem);--space-xl: clamp(2.625rem, 2.1648rem + 2.0455vw, 3.75rem);--space-2xl: clamp(3.5rem, 2.8864rem + 2.7273vw, 5rem);--space-3xl: clamp(5.25rem, 4.3295rem + 4.0909vw, 7.5rem);--space-3xs-2xs: clamp(.25rem, .0966rem + .6818vw, .625rem);--space-2xs-xs: clamp(.4375rem, .233rem + .9091vw, .9375rem);--space-xs-s: clamp(.6875rem, .4574rem + 1.0227vw, 1.25rem);--space-s-m: clamp(.875rem, .4659rem + 1.8182vw, 1.875rem);--space-m-l: clamp(1.3125rem, .8267rem + 2.1591vw, 2.5rem);--space-l-xl: clamp(1.75rem, .9318rem + 3.6364vw, 3.75rem);--space-xl-2xl: clamp(2.625rem, 1.6534rem + 4.3182vw, 5rem);--space-2xl-3xl: clamp(3.5rem, 1.8636rem + 7.2727vw, 7.5rem);--space-s-l: clamp(.875rem, .2102rem + 2.9545vw, 2.5rem)}:root{--grid-max-width: 77.5rem;--grid-gutter: var(--space-s-l, clamp(1.125rem, .5625rem + 2.5vw, 2.5rem));--grid-columns: 12}.button,.icon-button{display:inline-flex;align-items:center;justify-content:center;border:none;cursor:pointer;border-radius:var(--grid-size);font-family:inherit;transition:background-color .15s,opacity .15s}.button{gap:var(--grid-size);padding:0 var(--space-xs);height:calc(var(--grid-size) * 8);font-size:var(--step--1);font-weight:500;line-height:1;white-space:nowrap}.icon-button{width:calc(var(--grid-size) * 6);height:calc(var(--grid-size) * 6);padding:0;background:transparent;color:var(--color-text-foreground)}.button:disabled,.icon-button:disabled{opacity:.5;cursor:not-allowed}.button-sm{height:calc(var(--grid-size) * 6);padding:0 var(--space-2xs);font-size:var(--step--2)}.button-lg{height:calc(var(--grid-size) * 10);padding:0 var(--space-s);font-size:var(--step-0)}.icon-button-sm{width:calc(var(--grid-size) * 5);height:calc(var(--grid-size) * 5)}.icon-button-lg{width:calc(var(--grid-size) * 8);height:calc(var(--grid-size) * 8)}.button .icon,.icon-button .icon{width:var(--icon-xs);height:var(--icon-xs)}.button-primary{background-color:var(--color-primary);color:var(--color-bg-card)}.button-primary:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-primary) 90%,black)}.button-ghost{background:transparent;color:var(--color-text-foreground)}.button-ghost:hover:not(:disabled),.icon-button:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-bg-muted) 50%,transparent)}.button-secondary{background-color:var(--color-bg-muted);color:var(--color-text-foreground)}.button-secondary:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-bg-muted) 80%,black)}details{border:1px solid var(--color-border)}details summary{cursor:pointer;list-style:none;padding:var(--space-xs);transition:background-color .15s}details summary::-webkit-details-marker{display:none}details summary:hover{background-color:color-mix(in srgb,var(--color-bg-muted) 30%,transparent)}details>*:not(summary){padding:var(--space-xs)}.input{width:100%;height:calc(var(--grid-size) * 8);padding:0 var(--space-xs);font-family:inherit;background-color:var(--color-bg-background);color:var(--color-text-foreground);border:1px solid var(--color-border);border-radius:var(--grid-size);outline:none}.input::placeholder{color:var(--color-text-muted)}.input-sm{height:calc(var(--grid-size) * 6);padding:0 var(--space-2xs);font-size:var(--step--2)}.input-lg{height:calc(var(--grid-size) * 10);font-size:var(--step-0)}.input-with-icon-left{padding-left:calc(var(--grid-size) * 7)}.input-with-icon-right{padding-right:calc(var(--grid-size) * 7)}:root{--icon-3xs: calc(var(--grid-size) * 2);--icon-2xs: calc(var(--grid-size) * 2.5);--icon-xs: calc(var(--grid-size) * 3);--icon-sm: calc(var(--grid-size) * 3.5);--icon-md: calc(var(--grid-size) * 4)}.icon,.lucide-icon{--size: var(--icon-xs);width:var(--size);height:var(--size)}:is(.icon,.lucide-icon).xxxs{--size: var(--icon-3xs)}:is(.icon,.lucide-icon).xxs{--size: var(--icon-2xs)}:is(.icon,.lucide-icon).sm{--size: var(--icon-sm)}:is(.icon,.lucide-icon).md{--size: var(--icon-md)}.status{display:flex;align-items:center;gap:calc(var(--grid-size) * .5)}.status-badge{display:flex;align-items:center;justify-content:center;width:calc(var(--grid-size) * 4);height:calc(var(--grid-size) * 4);border-radius:calc(var(--grid-size) * .5)}.progress-bar{height:calc(var(--grid-size) * .5);background-color:var(--color-bg-muted);overflow:hidden;opacity:0;transition:opacity .15s ease-out}.progress-bar.is-visible{opacity:1}.progress-fill{height:100%;background-color:var(--color-primary);transition:width .15s ease-out}#app{min-height:100dvh;background-color:var(--color-bg-background);color:var(--color-text-foreground);font-family:var(--font-mono)}.container{max-width:var(--grid-max-width);padding:0 var(--grid-gutter);margin:0 auto}.column{border-left:1px solid var(--color-border);border-right:1px solid var(--color-border);min-height:100dvh;display:flex;flex-direction:column}header{border-bottom:1px solid var(--color-border);background-color:var(--color-bg-card);padding:var(--space-2xs) var(--space-xs)}header .content{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xs)}header .left{display:flex;align-items:center;gap:var(--space-xs)}header h1{font-size:var(--step--1);font-weight:600}header .elapsed,header .total{color:var(--color-text-muted)}header .stats{display:flex;align-items:center;gap:var(--space-2xs);font-size:var(--step--2)}header .actions{display:flex;align-items:center;gap:var(--grid-size)}.filters{display:flex;align-items:center;gap:var(--space-xs);border-bottom:1px solid var(--color-border);background-color:color-mix(in srgb,var(--color-bg-muted) 30%,transparent)}.filters .search-wrapper{position:relative;flex:1;padding:var(--space-2xs) var(--space-xs)}.search-icon{position:absolute;left:var(--space-2xs);top:50%;transform:translateY(-50%);color:var(--color-text-muted);pointer-events:none}.filters .button-wrapper{display:flex;align-items:center;gap:var(--grid-size);padding:var(--space-2xs) var(--space-xs)}.filters .input{background-color:transparent;padding-left:var(--space-xs);border:none;width:100%}.filters .input:focus{box-shadow:none;outline:none}.clear-btn{position:absolute;right:var(--space-2xs);top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--color-text-muted);cursor:pointer;border-radius:var(--grid-size)}.clear-btn:hover{color:var(--color-text-foreground)}.button.is-error{background-color:var(--color-bg-error);color:var(--color-error)}.button.is-error:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-bg-error) 80%,var(--color-error))}main{flex:1}.empty-state{padding:var(--space-l) var(--space-xs);text-align:center;font-size:var(--step--2);color:var(--color-text-muted)}footer{border-top:1px solid var(--color-border);padding:var(--space-xs);font-size:calc(var(--step--2) * .85);color:var(--color-text-muted);display:flex;align-items:center;justify-content:space-between}footer div{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xs)}.suite{border:none;border-bottom:1px solid var(--color-border);font-family:var(--font-mono)}.suite:last-child{border-bottom:none}.suite-header{display:flex;align-items:center;gap:var(--grid-size);padding:var(--space-3xs) var(--space-2xs);transition:background-color .15s;cursor:pointer;list-style:none}.suite-header::-webkit-details-marker{display:none}.suite-header:hover{background-color:color-mix(in srgb,var(--color-bg-muted) 30%,transparent)}.suite-trigger{display:flex;align-items:center;gap:calc(var(--grid-size) * 1.5);flex:1}.chevron-icon,.file-icon{color:var(--color-text-muted)}.chevron-icon{transition:transform .15s}details[open] .chevron-icon{transform:rotate(90deg)}.suite-name{font-size:var(--step--2);font-weight:500}.suite-count{font-size:calc(var(--step--2) * .85);color:var(--color-text-muted)}.suite-stats{display:flex;align-items:center;gap:calc(var(--grid-size) * 1.5);font-size:calc(var(--step--2) * .85)}.suite-stats .duration{color:var(--color-text-muted);font-variant-numeric:tabular-nums}ul.content{border-top:1px dashed var(--color-border);background-color:color-mix(in srgb,var(--color-bg-muted) 20%,transparent);list-style:none;padding:0;margin:0}li{position:relative;font-family:var(--font-mono);font-size:var(--step--2)}li:hover .row{background-color:color-mix(in srgb,var(--color-bg-muted) 50%,transparent)}li .run-button{opacity:0}li:hover .run-button{opacity:1}.row{display:flex;align-items:center;gap:var(--space-2xs);padding:var(--space-3xs) var(--space-2xs);transition:background-color .15s}.name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;color:color-mix(in srgb,var(--color-text-foreground) 80%,transparent)}.failed-text{color:var(--color-error)}li .duration{color:var(--color-text-muted);font-variant-numeric:tabular-nums;font-size:calc(var(--step--2) * .85)}.error-message{margin:0 var(--space-xs) var(--space-3xs);padding:calc(var(--grid-size) * 1.5) var(--space-2xs);border-radius:calc(var(--grid-size) * 1);background-color:var(--color-bg-error);border:1px solid var(--color-border-error)}.error-code{font-size:calc(var(--step--2) * .85);color:var(--color-error);line-height:1.4}
1
+ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}:root{--font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;--color-bg-card: light-dark(#ffffff, #1a1a1a);--color-bg-muted: light-dark(#f5f5f5, #262626);--color-bg-background: light-dark(#ffffff, #0a0a0a);--color-border: light-dark(#e5e5e5, #404040);--color-text-foreground: light-dark(#171717, #fafafa);--color-text-muted: light-dark(#737373, #a3a3a3);--color-success: #10b981;--color-error: #ef4444;--color-info: #3b82f6;--color-primary: light-dark(#171717, #3b82f6);--color-bg-success: color-mix(in srgb, var(--color-success) 10%, transparent);--color-bg-error: color-mix(in srgb, var(--color-error) 10%, transparent);--color-bg-info: color-mix(in srgb, var(--color-info) 10%, transparent);--color-border-error: color-mix(in srgb, var(--color-error) 20%, transparent)}:root{color-scheme:light dark;font-family:var(--font-mono);font-size:var(--step-1)}.dark{color-scheme:dark}.light{color-scheme:light}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}:root{--step--2: clamp(.6076rem, .5289rem + .3497vw, .8rem);--step--1: clamp(.7292rem, .6184rem + .4924vw, 1rem);--step-0: clamp(.875rem, .7216rem + .6818vw, 1.25rem);--step-1: clamp(1.05rem, .8403rem + .9318vw, 1.5625rem);--step-2: clamp(1.26rem, .9764rem + 1.2602vw, 1.9531rem);--step-3: clamp(1.512rem, 1.1318rem + 1.6898vw, 2.4414rem);--step-4: clamp(1.8144rem, 1.3082rem + 2.2497vw, 3.0518rem);--step-5: clamp(2.1773rem, 1.5074rem + 2.9771vw, 3.8147rem)}:root{--grid-size: .25rem;--space-3xs: clamp(.25rem, .2244rem + .1136vw, .3125rem);--space-2xs: clamp(.4375rem, .3608rem + .3409vw, .625rem);--space-xs: clamp(.6875rem, .5852rem + .4545vw, .9375rem);--space-s: clamp(.875rem, .7216rem + .6818vw, 1.25rem);--space-m: clamp(1.3125rem, 1.0824rem + 1.0227vw, 1.875rem);--space-l: clamp(1.75rem, 1.4432rem + 1.3636vw, 2.5rem);--space-xl: clamp(2.625rem, 2.1648rem + 2.0455vw, 3.75rem);--space-2xl: clamp(3.5rem, 2.8864rem + 2.7273vw, 5rem);--space-3xl: clamp(5.25rem, 4.3295rem + 4.0909vw, 7.5rem);--space-3xs-2xs: clamp(.25rem, .0966rem + .6818vw, .625rem);--space-2xs-xs: clamp(.4375rem, .233rem + .9091vw, .9375rem);--space-xs-s: clamp(.6875rem, .4574rem + 1.0227vw, 1.25rem);--space-s-m: clamp(.875rem, .4659rem + 1.8182vw, 1.875rem);--space-m-l: clamp(1.3125rem, .8267rem + 2.1591vw, 2.5rem);--space-l-xl: clamp(1.75rem, .9318rem + 3.6364vw, 3.75rem);--space-xl-2xl: clamp(2.625rem, 1.6534rem + 4.3182vw, 5rem);--space-2xl-3xl: clamp(3.5rem, 1.8636rem + 7.2727vw, 7.5rem);--space-s-l: clamp(.875rem, .2102rem + 2.9545vw, 2.5rem)}:root{--grid-max-width: 77.5rem;--grid-gutter: var(--space-s-l, clamp(1.125rem, .5625rem + 2.5vw, 2.5rem));--grid-columns: 12}.button,.icon-button{display:inline-flex;align-items:center;justify-content:center;border:none;cursor:pointer;border-radius:var(--grid-size);font-family:inherit;transition:background-color .15s,opacity .15s}.button{gap:var(--grid-size);padding:0 var(--space-xs);height:calc(var(--grid-size) * 8);font-size:var(--step--1);font-weight:500;line-height:1;white-space:nowrap}.icon-button{width:calc(var(--grid-size) * 6);height:calc(var(--grid-size) * 6);padding:0;background:transparent;color:var(--color-text-foreground)}.button:disabled,.icon-button:disabled{opacity:.5;cursor:not-allowed}.button-sm{height:calc(var(--grid-size) * 6);padding:0 var(--space-2xs);font-size:var(--step--2)}.button-lg{height:calc(var(--grid-size) * 10);padding:0 var(--space-s);font-size:var(--step-0)}.icon-button-sm{width:calc(var(--grid-size) * 5);height:calc(var(--grid-size) * 5)}.icon-button-lg{width:calc(var(--grid-size) * 8);height:calc(var(--grid-size) * 8)}.button .icon,.icon-button .icon{width:var(--icon-xs);height:var(--icon-xs)}.button-primary{background-color:var(--color-primary);color:var(--color-bg-card)}.button-primary:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-primary) 90%,black)}.button-ghost{background:transparent;color:var(--color-text-foreground)}.button-ghost:hover:not(:disabled),.icon-button:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-bg-muted) 50%,transparent)}.button-secondary{background-color:var(--color-bg-muted);color:var(--color-text-foreground)}.button-secondary:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-bg-muted) 80%,black)}details{border:1px solid var(--color-border)}details summary{cursor:pointer;list-style:none;padding:var(--space-xs);transition:background-color .15s}details summary::-webkit-details-marker{display:none}details summary:hover{background-color:color-mix(in srgb,var(--color-bg-muted) 30%,transparent)}details>*:not(summary){padding:var(--space-xs)}.input{width:100%;height:calc(var(--grid-size) * 8);padding:0 var(--space-xs);font-family:inherit;background-color:var(--color-bg-background);color:var(--color-text-foreground);border:1px solid var(--color-border);border-radius:var(--grid-size);outline:none}.input::placeholder{color:var(--color-text-muted)}.input-sm{height:calc(var(--grid-size) * 6);padding:0 var(--space-2xs);font-size:var(--step--2)}.input-lg{height:calc(var(--grid-size) * 10);font-size:var(--step-0)}.input-with-icon-left{padding-left:calc(var(--grid-size) * 7)}.input-with-icon-right{padding-right:calc(var(--grid-size) * 7)}:root{--icon-3xs: calc(var(--grid-size) * 2);--icon-2xs: calc(var(--grid-size) * 2.5);--icon-xs: calc(var(--grid-size) * 3);--icon-sm: calc(var(--grid-size) * 3.5);--icon-md: calc(var(--grid-size) * 4)}.icon,.lucide-icon{--size: var(--icon-xs);width:var(--size);height:var(--size)}:is(.icon,.lucide-icon).xxxs{--size: var(--icon-3xs)}:is(.icon,.lucide-icon).xxs{--size: var(--icon-2xs)}:is(.icon,.lucide-icon).sm{--size: var(--icon-sm)}:is(.icon,.lucide-icon).md{--size: var(--icon-md)}.status{display:flex;align-items:center;gap:calc(var(--grid-size) * .5)}.status-badge{display:flex;align-items:center;justify-content:center;width:calc(var(--grid-size) * 4);height:calc(var(--grid-size) * 4);border-radius:calc(var(--grid-size) * .5)}.progress-bar{height:calc(var(--grid-size) * .5);background-color:var(--color-bg-muted);overflow:hidden;opacity:0;transition:opacity .15s ease-out}.progress-bar.is-visible{opacity:1}.progress-fill{height:100%;background-color:var(--color-primary);transition:width .15s ease-out}#app{min-height:100dvh;background-color:var(--color-bg-background);color:var(--color-text-foreground);font-family:var(--font-mono)}.container{max-width:var(--grid-max-width);padding:0 var(--grid-gutter);margin:0 auto}.column{border-left:1px solid var(--color-border);border-right:1px solid var(--color-border);min-height:100dvh;display:flex;flex-direction:column}header{border-bottom:1px solid var(--color-border);background-color:var(--color-bg-card);padding:var(--space-2xs) var(--space-xs)}header .content{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xs)}header .left{display:flex;align-items:center;gap:var(--space-xs)}header h1{font-size:var(--step--1);font-weight:600}header .elapsed,header .total{color:var(--color-text-muted)}header .stats{display:flex;align-items:center;gap:var(--space-2xs);font-size:var(--step--2)}header .actions{display:flex;align-items:center;gap:var(--grid-size)}.filters{display:flex;align-items:center;gap:var(--space-xs);border-bottom:1px solid var(--color-border);background-color:color-mix(in srgb,var(--color-bg-muted) 30%,transparent)}.filters .search-wrapper{position:relative;flex:1;padding:var(--space-2xs) var(--space-xs)}.search-icon{position:absolute;left:var(--space-2xs);top:50%;transform:translateY(-50%);color:var(--color-text-muted);pointer-events:none}.filters .button-wrapper{display:flex;align-items:center;gap:var(--grid-size);padding:var(--space-2xs) var(--space-xs)}.filters .input{background-color:transparent;padding-left:var(--space-xs);border:none;width:100%}.filters .input:focus{box-shadow:none;outline:none}.clear-btn{position:absolute;right:var(--space-2xs);top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--color-text-muted);cursor:pointer;border-radius:var(--grid-size)}.clear-btn:hover{color:var(--color-text-foreground)}.button.is-error{background-color:var(--color-bg-error);color:var(--color-error)}.button.is-error:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-bg-error) 80%,var(--color-error))}main{flex:1}.empty-state{padding:var(--space-l) var(--space-xs);text-align:center;font-size:var(--step--2);color:var(--color-text-muted)}footer{border-top:1px solid var(--color-border);padding:var(--space-xs);font-size:calc(var(--step--2) * .85);color:var(--color-text-muted);display:flex;align-items:center;justify-content:space-between}footer div{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xs)}.suite{border:none;border-bottom:1px solid var(--color-border);font-family:var(--font-mono)}.suite:last-child{border-bottom:none}.suite-header{display:flex;align-items:center;gap:var(--grid-size);padding:var(--space-3xs) var(--space-2xs);transition:background-color .15s;cursor:pointer;list-style:none}.suite-header::-webkit-details-marker{display:none}.suite-header:hover{background-color:color-mix(in srgb,var(--color-bg-muted) 30%,transparent)}.suite-trigger{display:flex;align-items:center;gap:calc(var(--grid-size) * 1.5);flex:1}.chevron-icon,.file-icon{color:var(--color-text-muted)}.chevron-icon{transition:transform .15s}details[open] .chevron-icon{transform:rotate(90deg)}.suite-name{font-size:var(--step--2);font-weight:500}.suite-count{font-size:calc(var(--step--2) * .85);color:var(--color-text-muted)}.suite-stats{display:flex;align-items:center;gap:calc(var(--grid-size) * 1.5);font-size:calc(var(--step--2) * .85)}.suite-stats .duration{color:var(--color-text-muted);font-variant-numeric:tabular-nums}ul.content{border-top:1px dashed var(--color-border);background-color:color-mix(in srgb,var(--color-bg-muted) 20%,transparent);list-style:none;padding:0;margin:0}li{position:relative;font-family:var(--font-mono);font-size:var(--step--2)}li:hover .row{background-color:color-mix(in srgb,var(--color-bg-muted) 50%,transparent)}li .run-button{opacity:0}li:hover .run-button{opacity:1}.row{display:flex;align-items:center;gap:var(--space-2xs);padding:var(--space-3xs) var(--space-2xs);transition:background-color .15s}.name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;color:color-mix(in srgb,var(--color-text-foreground) 80%,transparent)}.failed-text{color:var(--color-error)}li .duration{color:var(--color-text-muted);font-variant-numeric:tabular-nums;font-size:calc(var(--step--2) * .85)}.error-message{margin:0 var(--space-xs) var(--space-3xs);padding:calc(var(--grid-size) * 1.5) var(--space-2xs);border-radius:calc(var(--grid-size) * 1);background-color:var(--color-bg-error);border:1px solid var(--color-border-error)}.error-code{font-size:calc(var(--step--2) * .85);color:var(--color-error);line-height:1.4}