@qaick/runner 0.2.0-alpha.10

package/package-dist/styles.css

@@ -0,0 +1,262 @@
+:root { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #182234; background: #f7f9fc; font-size: 13px; color-scheme: light; }
+:root[data-theme='dark'] { color: #e6edf7; background: #111827; color-scheme: dark; }
+* { box-sizing: border-box; } body { margin: 0; min-width: 1120px; } button, select { font: inherit; }
+.runner-shell { height: 100vh; min-height: 100vh; display: grid; grid-template-rows: 44px minmax(0, 1fr); } .runner-header { display: flex; align-items: center; gap: 18px; padding: 0 12px 0 16px; border-bottom: 1px solid #dfe4ec; background: #fff; font-size: 13px; }
+.runner-brand { display: flex; align-items: baseline; gap: 6px; flex: none; } .runner-brand-mark { color: #3569d4; font-size: 13px; font-weight: 700; letter-spacing: .04em; } .runner-brand-product { color: #182234; font-size: 13px; font-weight: 500; } .runner-brand .about-button { height: 25px; margin-left: 6px; padding: 0 9px; border: 0; border-radius: 4px; background: transparent; color: #40516c; font-size: 12px; font-weight: 650; } .runner-brand .about-button:hover { background: #f0f3f8; color: #182234; } .runner-logo { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: white; background: #3569d4; font-size: 13px; } .alpha-label { color: #70809a; font-size: 13px; } .header-spacer, .panel-spacer { flex: 1; }
+.engine-status { display: flex; align-items: center; gap: 7px; color: #14804a; font-size: 12px; font-weight: 700; } .engine-status i { width: 8px; height: 8px; border-radius: 50%; background: #19a463; }
+.theme-picker { display: flex; align-items: center; gap: 7px; color: #596a82; font-size: 12px; font-weight: 700; } .theme-picker select { min-width: 82px; height: 30px; padding: 0 8px; border: 1px solid #cdd7e5; border-radius: 6px; background: white; color: #182234; }
+.runner-main { display: grid; grid-template-columns: 218px minmax(560px, 1fr) 350px; min-height: 0; overflow: hidden; } .runner-nav, .inspector { min-height: 0; overflow-y: auto; background: #fff; } .runner-nav { padding: 18px 12px; border-right: 1px solid #dfe4ec; }
+.nav-label, .eyebrow { color: #8794a8; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .nav-label { margin: 4px 12px 10px; }
+.nav-item { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 7px; color: #40516c; font-size: 14px; text-decoration: none; cursor: pointer; } .nav-item span { width: 20px; text-align: center; } .nav-item.active { color: #2458c4; background: #e9f0ff; font-weight: 700; }
+.package-card { margin: 24px 8px 0; padding: 12px; border: 1px solid #dce4f0; border-radius: 8px; background: #f8faff; } .package-card small { display: block; color: #77869b; } .package-card strong { display: block; margin: 5px 0; font-size: 12px; overflow-wrap: anywhere; }
+.runner-workspace { min-height: 0; overflow-y: auto; padding: 26px 30px; background: #f7f9fc; } .eyebrow { color: #687a95; } h1 { margin: 5px 0 4px; font-size: 25px; letter-spacing: -.02em; } .description { margin: 0; color: #66758c; }
+.run-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 10px 14px; margin-top: 25px; } label { display: grid; gap: 6px; color: #596a82; font-size: 12px; font-weight: 700; } select { min-width: 145px; height: 36px; padding: 0 10px; border: 1px solid #cdd7e5; border-radius: 6px; background: white; color: #182234; }
+.button { height: 36px; padding: 0 15px; border: 1px solid #cdd7e5; border-radius: 6px; background: white; color: #334560; font-weight: 700; cursor: pointer; } .button.primary { border-color: #3569d4; background: #3569d4; color: white; } .button.dry-run { border-color: #8a9fc4; color: #315da9; background: #eef3fc; } .button.stop { color: #b33a30; }
+.file-button { position: relative; display: inline-grid; height: 36px; padding: 0 15px; place-items: center; border: 1px solid #cdd7e5; border-radius: 6px; background: white; color: #334560; cursor: pointer; } .file-button input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .load-error { margin: 12px 0 -8px; color: #b33a30; font-size: 12px; font-weight: 700; }
+.inputs-panel { margin-top: 18px; } .input-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 16px; } .input-field { color: #596a82; } .input-field input { width: 100%; height: 34px; padding: 0 9px; border: 1px solid #cdd7e5; border-radius: 6px; color: #182234; background: #fff; font: inherit; font-weight: 500; } .input-hint { color: #7a899d; font-size: 11px; }
+.history-view-banner { margin-top: 12px; padding: 9px 12px; border: 1px solid #b9cbed; border-radius: 6px; color: #315da9; background: #eaf2ff; font-size: 12px; font-weight: 700; }
+.panel { margin-top: 24px; border: 1px solid #dce4ed; border-radius: 8px; background: white; overflow: hidden; } .panel-heading { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #e6ebf2; } h2 { margin: 0; font-size: 16px; } .running { color: #14804a; font-size: 12px; font-weight: 750; } .stopped { color: #b33a30; font-size: 12px; font-weight: 750; }
+table { width: 100%; border-collapse: collapse; font-size: 13px; } th { padding: 10px 14px; color: #7b899d; background: #fafbfd; font-size: 11px; text-align: left; text-transform: uppercase; letter-spacing: .04em; } td { padding: 13px 14px; border-top: 1px solid #edf0f5; } tr.parent-row td { background: #fbfdff; } tr.nested-row td { background: #f3f7fd; } tr.selected td { background: #dce8ff !important; border-top-color: #9db9ed; } tr.selected td:first-child { border-left: 4px solid #3569d4; } tr.selected .hierarchy-name { color: #173e91; font-weight: 700; } tbody tr { cursor: pointer; }
+.hierarchy-hint { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid #dbe6fa; color: #315da9; background: #f2f6ff; font-size: 11px; } .hierarchy-hint span { color: #637897; } .hierarchy-action { padding: 4px 7px; border: 1px solid #b9cbed; border-radius: 4px; color: #315da9; background: #fff; font-size: 10px; font-weight: 700; cursor: pointer; } .hierarchy-action:first-of-type { margin-left: auto; } .hierarchy-name { display: inline-flex; align-items: center; gap: 7px; min-height: 22px; } .collapse-toggle { display: inline-grid; width: 18px; height: 18px; place-items: center; padding: 0; border: 1px solid #9eb5df; border-radius: 4px; color: #315da9; background: #eaf1ff; font-size: 14px; line-height: 1; cursor: pointer; } .branch-marker { color: #5d82ca; font-size: 18px; font-weight: 400; } .kind-label { display: inline-flex; padding: 3px 5px; border-radius: 4px; color: #6c7890; background: #edf1f7; font-size: 9px; font-weight: 800; letter-spacing: .05em; } .nested-label { color: #315da9; background: #e5efff; } .nested-row td:first-child { border-left: 3px solid #8eaded; } .parent-row td:first-child { border-left: 3px solid transparent; }
+.step-icon { display: inline-grid; width: 20px; height: 20px; margin-right: 7px; place-items: center; border-radius: 50%; color: white; background: #18a15d; font-size: 11px; } .nested-row .step-icon { margin-left: 18px; } .nested-row .hierarchy-name { padding-left: 0 !important; } .step-icon.waiting { background: #efaa18; } .step-icon.skipped { color: #62738c; background: #edf1f6; } .step-icon.failed, .step-icon.cancelled { background: #c94b42; } .step-icon.pending { border: 2px solid #aab6c7; background: transparent; }
+.selected-label { display: inline-flex; margin-left: 8px; padding: 3px 5px; border-radius: 4px; color: #2458c4; background: #c4d7ff; font-size: 9px; font-weight: 800; letter-spacing: .05em; }
+.status { display: inline-flex; padding: 4px 8px; border-radius: 5px; font-size: 10px; font-weight: 800; letter-spacing: .03em; } .status.finished { color: #14804a; background: #e7f6ed; } .status.waiting { color: #98660b; background: #fff2d5; } .status.pending, .status.skipped { color: #62738c; background: #edf1f6; } .status.failed, .status.cancelled { color: #a33a32; background: #ffebe8; }
+.loop-row td { background: #f5f8fe; border-top: 1px solid #c8d7f0; border-bottom: 1px solid #dce6f6; } .loop-row td:first-child { border-left: 3px solid #668bd2; border-radius: 9px 0 0 0; } .loop-row td:last-child { border-right: 1px solid #c8d7f0; border-radius: 0 9px 0 0; } .loop-icon { color: #fff; background: #668bd2; font-size: 15px; } .loop-label { color: #315da9; background: #e7efff; } .loop-progress { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 8px; min-width: 220px; margin-bottom: 4px; color: #315da9; font-size: 10px; letter-spacing: .02em; } .loop-progress small { flex-basis: 100%; color: #71839c; font-size: 10px; } .loop-bar { width: 92px; height: 6px; overflow: hidden; border-radius: 99px; background: #dce6f6; } .loop-bar i { display: block; height: 100%; border-radius: inherit; background: #668bd2; transition: width .2s ease; } .loop-content td { border-top: 0; border-bottom: 0; background: #fbfdff; } .loop-content td:first-child { border-left: 3px solid #c8d7f0; } .loop-content td:last-child { border-right: 1px solid #c8d7f0; } .loop-end td { border-bottom: 1px solid #c8d7f0; } .loop-end td:first-child { border-radius: 0 0 0 9px; } .loop-end td:last-child { border-radius: 0 0 9px 0; }
+.event-panel { margin-top: 18px; } .event-row td { padding: 9px 14px; font-size: 12px; } code { color: #294d9c; font-family: ui-monospace, monospace; font-size: 11px; }
+.inspector { padding: 22px 18px; border-left: 1px solid #dfe4ec; } .inspector h2 { font-size: 17px; } .selected-detail-name { margin: 6px 0 0; color: #2458c4; font-size: 13px; } .run-id { margin: 5px 0 20px; color: #7a899d; font-family: ui-monospace, monospace; font-size: 10px; } .inspector-section { padding: 17px 0; border-top: 1px solid #e6ebf2; } .inspector-section h3 { margin: 0 0 11px; font-size: 13px; }
+.selection-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; } .selection-nav .button { padding: 5px 8px; font-size: 11px; }
+.parallel-event { color: #66758c; font-size: 10px; }
+.event-filter { min-width: 120px; padding: 6px 8px; font-size: 11px; }
+.key-values { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #e0e6ef; border-radius: 6px; overflow: hidden; font-size: 12px; } .key-values span { padding: 9px 10px; border-bottom: 1px solid #e9edf3; } .key-values span:nth-child(odd) { color: #63738a; background: #fafbfd; } .key-values span:nth-last-child(-n+2) { border-bottom: 0; }
+.iteration-history { display: grid; gap: 7px; } .iteration-entry { display: grid; gap: 3px; padding: 9px 10px; border: 1px solid #dce4ed; border-radius: 6px; background: #fbfdff; font-size: 11px; } .iteration-entry span { color: #637897; font-size: 10px; } .iteration-entry small { color: #71839c; line-height: 1.35; } .timing-details { display: grid; gap: 4px; margin-top: 8px; padding: 9px 10px; border: 1px solid #dce4ed; border-radius: 6px; color: #637897; background: #fbfdff; font-size: 10px; } .timing-details strong { color: #40516c; font-size: 11px; }
+.notice { padding: 12px; border-radius: 6px; color: #59708e; background: #f3f6fa; font-size: 12px; line-height: 1.5; } .draft-badge { position: fixed; right: 18px; bottom: 14px; padding: 7px 10px; border: 1px solid #e5c987; border-radius: 5px; color: #85600e; background: #fff7df; font-size: 11px; font-weight: 750; }
+.about-button { height: 30px; padding: 0 10px; border: 1px solid #cdd7e5; border-radius: 6px; background: white; color: #40516c; font-size: 12px; font-weight: 700; cursor: pointer; }
+.about-backdrop { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgb(7 12 24 / 48%); }
+.about-dialog { position: relative; width: min(360px, calc(100vw - 40px)); padding: 28px; border: 1px solid #dce4ed; border-radius: 12px; background: white; color: #40516c; box-shadow: 0 20px 60px rgb(0 0 0 / 24%); text-align: center; }
+.about-dialog .runner-logo { margin: 0 auto 14px; }.about-dialog h2 { margin: 0 0 8px; color: #182234; }.about-dialog p { margin: 0 0 8px; color: #66758c; line-height: 1.5; }.about-dialog small { color: #8794a8; }.about-dialog footer { margin-top: 24px; color: #7a899d; font-size: 11px; }.about-close { position: absolute; top: 10px; right: 12px; border: 0; background: transparent; color: #7a899d; font-size: 22px; cursor: pointer; }
+.error-notice { padding: 12px; border: 1px solid #f0c5c1; border-radius: 6px; color: #9d332b; background: #fff1ef; font-size: 12px; line-height: 1.5; } .dry-run-issues { display: grid; gap: 8px; } .dry-run-issues .error-notice { font-size: 11px; } .dry-run-issues small { display: block; margin-top: 5px; color: inherit; opacity: .8; }
+.validation-panel { display: flex; gap: 11px; align-items: flex-start; margin-top: 18px; padding: 13px 16px; border: 1px solid; border-radius: 8px; font-size: 12px; } .validation-panel strong { display: block; } .validation-panel small { display: block; margin-top: 3px; color: inherit; opacity: .8; } .validation-pass { border-color: #b9dfca; color: #176d41; background: #effaf3; } .validation-failed { display: grid; gap: 11px; border-color: #edc2bd; color: #963b33; background: #fff5f3; } .validation-heading { display: flex; gap: 11px; align-items: flex-start; } .validation-icon, .issue-icon { display: inline-grid; flex: 0 0 auto; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: white; background: #1b9a5b; font-size: 14px; font-weight: 800; } .validation-failed .validation-icon, .issue-icon { background: #c94b42; } .validation-issues { display: grid; gap: 6px; padding-left: 33px; } .validation-issue { display: flex; gap: 8px; align-items: flex-start; padding: 8px 9px; border: 1px solid #f0d1cd; border-radius: 5px; background: rgba(255,255,255,.55); } .validation-issue .issue-icon { width: 16px; height: 16px; font-size: 12px; } .validation-issue span, .validation-issue small { display: block; } .validation-issue strong { font-size: 10px; letter-spacing: .04em; } .validation-issue span { margin-top: 2px; font-size: 11px; } .validation-issue small { margin-top: 3px; opacity: .75; }
+
+:root[data-theme='dark'] .runner-header, :root[data-theme='dark'] .runner-nav, :root[data-theme='dark'] .inspector, :root[data-theme='dark'] .panel, :root[data-theme='dark'] .key-values, :root[data-theme='dark'] .button, :root[data-theme='dark'] select, :root[data-theme='dark'] .input-field input { border-color: #334155; background: #182235; color: #e6edf7; }
+:root[data-theme='dark'] .runner-workspace { background: #111827; } :root[data-theme='dark'] .runner-header { border-color: #334155; } :root[data-theme='dark'] .runner-nav { border-color: #334155; } :root[data-theme='dark'] .inspector { border-color: #334155; }
+:root[data-theme='dark'] .description, :root[data-theme='dark'] .nav-item, :root[data-theme='dark'] .run-id, :root[data-theme='dark'] .input-hint, :root[data-theme='dark'] .theme-picker, :root[data-theme='dark'] label { color: #a8b6ca; }
+:root[data-theme='dark'] .nav-item.active { color: #b8d0ff; background: #243b68; } :root[data-theme='dark'] .package-card, :root[data-theme='dark'] .notice { border-color: #334155; background: #202c40; color: #b9c8dc; }
+:root[data-theme='dark'] th { color: #9aaac0; background: #1c293d; } :root[data-theme='dark'] td { border-color: #2b3a50; } :root[data-theme='dark'] tr.parent-row td { background: #182235; } :root[data-theme='dark'] tr.nested-row td { background: #202c40; } :root[data-theme='dark'] tr.selected td { background: #243b68 !important; border-top-color: #496da8; } :root[data-theme='dark'] tr.selected .hierarchy-name { color: #d4e2ff; } :root[data-theme='dark'] .selected-detail-name { color: #a9c5ff; }
+:root[data-theme='dark'] .hierarchy-hint { border-color: #314d80; color: #b8d0ff; background: #1b3159; } :root[data-theme='dark'] .hierarchy-hint span { color: #b0bfd5; } :root[data-theme='dark'] .hierarchy-action { border-color: #496da8; color: #c5d9ff; background: #202c40; } :root[data-theme='dark'] .collapse-toggle { border-color: #496da8; color: #c5d9ff; background: #294b80; } :root[data-theme='dark'] .kind-label { color: #b5c2d4; background: #334155; } :root[data-theme='dark'] .nested-label { color: #c5d9ff; background: #294b80; } :root[data-theme='dark'] .nested-row td:first-child { border-color: #6f96e5; } :root[data-theme='dark'] .branch-marker { color: #9ab9ff; }
+:root[data-theme='dark'] .panel-heading, :root[data-theme='dark'] .inspector-section { border-color: #334155; } :root[data-theme='dark'] .key-values span { border-color: #334155; } :root[data-theme='dark'] .key-values span:nth-child(odd) { background: #1c293d; color: #a8b6ca; }
+:root[data-theme='dark'] .iteration-entry { border-color: #334155; background: #1c293d; } :root[data-theme='dark'] .iteration-entry span, :root[data-theme='dark'] .iteration-entry small { color: #a8b6ca; }
+:root[data-theme='dark'] .status.pending { color: #b5c2d4; background: #334155; } :root[data-theme='dark'] .file-button { border-color: #334155; background: #182235; color: #e6edf7; } :root[data-theme='dark'] .error-notice { border-color: #7f3434; background: #3a2025; color: #ffb4ad; }
+:root[data-theme='dark'] body { background: #111827; } :root[data-theme='dark'] .runner-header strong, :root[data-theme='dark'] h1, :root[data-theme='dark'] h2, :root[data-theme='dark'] h3, :root[data-theme='dark'] td, :root[data-theme='dark'] .package-card strong { color: #e6edf7; }
+:root[data-theme='dark'] .alpha-label, :root[data-theme='dark'] .nav-label, :root[data-theme='dark'] .eyebrow, :root[data-theme='dark'] .package-card small { color: #9aaac0; } :root[data-theme='dark'] code { color: #a9c7ff; }
+:root[data-theme='dark'] .step-icon.pending { border-color: #718096; } :root[data-theme='dark'] .status.finished { color: #8ee0b1; background: #173b2d; } :root[data-theme='dark'] .status.waiting { color: #ffd27a; background: #4a3511; } :root[data-theme='dark'] .status.skipped { color: #b5c2d4; background: #334155; } :root[data-theme='dark'] .status.failed, :root[data-theme='dark'] .status.cancelled { color: #ffaaa2; background: #4a2428; }
+:root[data-theme='dark'] .running { color: #8ee0b1; } :root[data-theme='dark'] .stopped, :root[data-theme='dark'] .load-error { color: #ffaaa2; } :root[data-theme='dark'] .draft-badge { border-color: #806a2e; color: #f4d477; background: #322b17; }
+:root[data-theme='dark'] .loop-row td { background: #1c2b47; border-color: #405b8b; } :root[data-theme='dark'] .loop-row td:first-child { border-color: #79a1ff; } :root[data-theme='dark'] .loop-icon { color: #fff; background: #668bd2; } :root[data-theme='dark'] .loop-label { color: #d2e0ff; background: #294b80; } :root[data-theme='dark'] .loop-progress { color: #c5d9ff; } :root[data-theme='dark'] .loop-progress small { color: #b0bfd5; } :root[data-theme='dark'] .loop-bar { background: #334155; } :root[data-theme='dark'] .loop-bar i { background: #79a1ff; } :root[data-theme='dark'] .loop-content td { border-color: #405b8b; background: #151f31; } :root[data-theme='dark'] .loop-content td:first-child { border-color: #405b8b; } :root[data-theme='dark'] .loop-end td { border-color: #405b8b; }
+:root[data-theme='dark'] .button:hover, :root[data-theme='dark'] .file-button:hover { border-color: #6289d9; background: #22324d; } :root[data-theme='dark'] .button.primary { border-color: #4d7fe0; background: #3f70d2; color: #fff; } :root[data-theme='dark'] .button.stop { color: #ffaaa2; }
+:root[data-theme='dark'] .button.dry-run { border-color: #496da8; color: #c5d9ff; background: #202c40; }
+:root[data-theme='dark'] .about-button, :root[data-theme='dark'] .about-dialog { border-color: #334155; background: #182235; color: #e6edf7; } :root[data-theme='dark'] .about-dialog h2 { color: #e6edf7; } :root[data-theme='dark'] .about-dialog p, :root[data-theme='dark'] .about-dialog footer { color: #a8b6ca; }
+:root[data-theme='dark'] .validation-pass { border-color: #2d7653; color: #9be5b9; background: #173b2d; } :root[data-theme='dark'] .validation-failed { border-color: #7f3434; color: #ffb4ad; background: #3a2025; } :root[data-theme='dark'] .validation-issue { border-color: #6c3b3c; background: rgba(24, 20, 28, .45); }
+.event-search { min-width: 180px; }
+.empty-state { margin: 0; padding: 18px; color: var(--muted-text); }
+.history-panel { margin-top: 16px; }
+.history-panel table { width: 100%; }
+.history-meta { display: block; margin-top: 3px; color: #71839c; font-size: 10px; }
+.history-retention { display: flex; align-items: center; gap: 6px; font-size: 11px; }
+.history-retention select { min-width: 92px; height: 30px; font-size: 11px; }
+.history-delete { margin-left: 6px; color: #a33a32; }
+.validation-issue[data-step-id] { cursor: pointer; }
+.branch-path { display: grid; gap: 6px; margin-top: 8px; padding: 9px 10px; border: 1px solid #dce4ed; border-radius: 6px; background: #fbfdff; font-size: 11px; }
+.branch-path-row { display: grid; grid-template-columns: auto 1fr auto; gap: 7px; align-items: center; }
+.branch-path-row small { color: #71839c; font-size: 10px; }
+.parallel-details { color: #637897; }
+.parallel-details > span { font-size: 10px; }
+.result-summary { display: grid; gap: 4px; margin-top: 8px; padding: 9px 10px; border: 1px solid #dce4ed; border-radius: 6px; color: #637897; background: #fbfdff; font-size: 10px; }
+.result-summary strong { color: #40516c; font-size: 11px; }
+.demo-entry { padding: 7px 10px; border: 1px solid var(--border); border-radius: 5px; background: var(--panel); color: var(--accent); font-size: 12px; font-weight: 650; text-decoration: none; }
+
+.breakpoint-toggle { border: 0; background: transparent; color: var(--muted, #718096); cursor: pointer; margin-left: .4rem; padding: 0 .2rem; }
+.breakpoint-toggle.active { color: #d64545; font-weight: 700; }
+.inspector-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }
+.attempt-history { display: grid; gap: .35rem; }
+.debug-session-badge { height: 36px; display: inline-flex; align-items: center; padding: 0 .65rem; border: 1px solid #e5a4a4; border-radius: 6px; color: #a83232; background: #fff4f4; font-size: 11px; font-weight: 800; }
+.execution-menu-label { color: #637897; font-size: 11px; font-weight: 700; }
+.local-control { height: 30px; padding: 0 9px; font-size: 11px; }
+.local-control.active { border-color: #d78383; color: #a83232; background: #fff4f4; }
+.runner-context-menu { position: fixed; z-index: 20; min-width: 170px; padding: 6px; border: 1px solid #cbd6e6; border-radius: 7px; background: #fff; box-shadow: 0 8px 24px rgba(28, 47, 76, .18); }
+.runner-context-menu strong { display: block; padding: 7px 9px 5px; color: #637897; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
+.runner-context-menu button { display: block; width: 100%; padding: 8px 9px; border: 0; border-radius: 4px; color: #243753; background: transparent; text-align: left; font: inherit; font-size: 12px; cursor: pointer; }
+.runner-context-menu button:hover { background: #edf3ff; color: #173e91; }
+.breakpoint-marker { display: inline-grid; width: 22px; height: 22px; place-items: center; color: #fff; background: #b93645; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); filter: drop-shadow(0 1px 1px rgba(62, 20, 27, .25)); font-family: Arial, sans-serif; font-size: 4.5px; font-weight: 900; letter-spacing: .06em; line-height: 1; }
+
+.button.resume-highlight { border-color: #3569d4; background: #3569d4; color: #fff; box-shadow: 0 0 0 3px rgba(53, 105, 212, .18); }
+
+/* Match Studio's compact toolbar rhythm and quiet menu controls. */
+.runner-header { border-color: var(--runner-line); background: var(--runner-surface); }
+.runner-brand { align-items: baseline; gap: 6px; }
+.runner-brand-mark { color: var(--runner-blue); font-size: 13px; letter-spacing: .04em; }
+.runner-brand-product { color: var(--runner-ink); font-size: 13px; font-weight: 500; }
+.alpha-label { padding-left: 2px; color: var(--runner-faint); font-family: ui-monospace, monospace; font-size: 9.5px; }
+.runner-header .about-button,
+.runner-header .demo-entry { height: 25px; padding: 0 9px; border: 0; border-radius: 4px; background: transparent; color: var(--runner-ink-2); font-size: 12px; font-weight: 400; }
+.runner-header .about-button:hover,
+.runner-header .demo-entry:hover { background: var(--runner-surface-3); color: var(--runner-ink); }
+.runner-header .demo-entry { display: inline-flex; align-items: center; text-decoration: none; }
+.theme-picker { gap: 7px; color: var(--runner-ink-2); font-size: 12px; font-weight: 700; white-space: nowrap; }
+.theme-picker select { min-width: 82px; height: 30px; padding: 0 8px; border-color: var(--runner-line); border-radius: 6px; background: var(--runner-surface); color: var(--runner-ink); font: inherit; font-weight: 400; }
+
+/* Keep Runner aligned with the shared QAICK Studio design tokens. These are
+   Runner-scoped names so the integrated stylesheet does not overwrite Studio's
+   own variables. Execution statuses retain their semantic colours below. */
+:root {
+  --runner-blue: #4f46d8;
+  --runner-blue-strong: #3f37b8;
+  --runner-blue-soft: #e8eeff;
+  --runner-blue-line: #c8d5fa;
+  --runner-ink: #182234;
+  --runner-ink-2: #34435b;
+  --runner-muted: #617089;
+  --runner-faint: #7c8aa0;
+  --runner-surface: #fff;
+  --runner-surface-2: #f7f8fc;
+  --runner-surface-3: #edf0f7;
+  --runner-pane: #eef0f2;
+  --runner-heading: #e1e4e8;
+  --runner-divider: #cbd1d8;
+  --runner-line: #e5e7eb;
+  --runner-line-strong: #cfd5dd;
+  --runner-ok: #14804a;
+  --runner-ok-soft: #e6f5ec;
+  --runner-warn: #92620a;
+  --runner-warn-soft: #fdf3e2;
+  --runner-fail: #bc3327;
+  --runner-fail-soft: #fdecea;
+}
+
+:root[data-theme='dark'] {
+  --runner-blue: #8b9cff;
+  --runner-blue-strong: #aab5ff;
+  --runner-blue-soft: #252c4b;
+  --runner-blue-line: #4a5684;
+  --runner-ink: #edf1f8;
+  --runner-ink-2: #c8d1e2;
+  --runner-muted: #9da9bd;
+  --runner-faint: #7d899e;
+  --runner-surface: #171b24;
+  --runner-surface-2: #1d2230;
+  --runner-surface-3: #282f3e;
+  --runner-pane: #1b202a;
+  --runner-heading: #252c37;
+  --runner-divider: #3b4555;
+  --runner-line: #303949;
+  --runner-line-strong: #465267;
+  --runner-ok: #67d39a;
+  --runner-ok-soft: #1b382b;
+  --runner-warn: #e8bd66;
+  --runner-warn-soft: #3a301d;
+  --runner-fail: #ff8d83;
+  --runner-fail-soft: #402522;
+}
+
+:root,
+:root[data-theme='dark'] {
+  color: var(--runner-ink);
+  background: var(--runner-surface);
+}
+
+body { background: var(--runner-surface-2); }
+.runner-header,
+.runner-nav,
+.inspector,
+.panel,
+.button,
+.file-button,
+select,
+.input-field input,
+.about-button,
+.about-dialog,
+.hierarchy-action,
+.runner-context-menu { border-color: var(--runner-line-strong); background: var(--runner-surface); color: var(--runner-ink-2); }
+.runner-header { border-color: var(--runner-divider); }
+.runner-brand-mark,
+.runner-logo,
+.button.primary,
+.button.resume-highlight { background: var(--runner-blue); color: #fff; }
+.runner-brand-mark { background: transparent; color: var(--runner-blue); }
+.runner-brand-product,
+.runner-header strong,
+h1,
+h2,
+h3,
+td,
+.package-card strong,
+.about-dialog h2 { color: var(--runner-ink); }
+.alpha-label,
+.nav-label,
+.eyebrow,
+.package-card small,
+.run-id,
+.input-hint,
+.theme-picker,
+label { color: var(--runner-muted); }
+.runner-workspace { background: var(--runner-surface-2); }
+.runner-nav { border-color: var(--runner-divider); }
+.inspector { border-color: var(--runner-divider); }
+.nav-item { color: var(--runner-muted); }
+.nav-item.active { color: var(--runner-blue-strong); background: var(--runner-blue-soft); }
+.package-card,
+.notice { border-color: var(--runner-line); background: var(--runner-surface-3); color: var(--runner-muted); }
+.button:hover,
+.file-button:hover,
+.about-button:hover { border-color: var(--runner-blue-line); background: var(--runner-blue-soft); }
+.button.primary:hover,
+.button.resume-highlight:hover { border-color: var(--runner-blue-strong); background: var(--runner-blue-strong); }
+.panel-heading,
+.inspector-section { border-color: var(--runner-line); }
+th { color: var(--runner-faint); background: var(--runner-surface-2); }
+td { border-color: var(--runner-line); }
+tr.parent-row td,
+.loop-content td { background: var(--runner-surface); }
+tr.nested-row td { background: var(--runner-surface-3); }
+tr.selected td { background: var(--runner-blue-soft) !important; border-top-color: var(--runner-blue-line); }
+tr.selected td:first-child { border-left-color: var(--runner-blue); }
+tr.selected .hierarchy-name,
+.selected-detail-name,
+code { color: var(--runner-blue-strong); }
+.hierarchy-hint { border-color: var(--runner-blue-line); color: var(--runner-blue-strong); background: var(--runner-blue-soft); }
+.hierarchy-hint span,
+.parallel-details { color: var(--runner-muted); }
+.hierarchy-action,
+.collapse-toggle { border-color: var(--runner-blue-line); color: var(--runner-blue-strong); background: var(--runner-surface); }
+.kind-label { color: var(--runner-muted); background: var(--runner-surface-3); }
+.nested-label,
+.loop-label { color: var(--runner-blue-strong); background: var(--runner-blue-soft); }
+.key-values,
+.iteration-entry,
+.timing-details,
+.branch-path,
+.result-summary { border-color: var(--runner-line); background: var(--runner-surface); }
+.key-values span:nth-child(odd) { color: var(--runner-muted); background: var(--runner-surface-2); }
+.iteration-entry span,
+.iteration-entry small,
+.timing-details,
+.branch-path-row small,
+.result-summary { color: var(--runner-muted); }
+.status.finished,
+.validation-pass { color: var(--runner-ok); background: var(--runner-ok-soft); }
+.status.waiting { color: var(--runner-warn); background: var(--runner-warn-soft); }
+.status.failed,
+.status.cancelled,
+.validation-failed { color: var(--runner-fail); background: var(--runner-fail-soft); }
+.error-notice { border-color: color-mix(in srgb, var(--runner-fail) 35%, var(--runner-surface)); color: var(--runner-fail); background: var(--runner-fail-soft); }
+:root[data-theme='dark'] .runner-header,
+:root[data-theme='dark'] .runner-nav,
+:root[data-theme='dark'] .inspector,
+:root[data-theme='dark'] .panel,
+:root[data-theme='dark'] .button,
+:root[data-theme='dark'] select,
+:root[data-theme='dark'] .input-field input,
+:root[data-theme='dark'] .about-button,
+:root[data-theme='dark'] .about-dialog { background: var(--runner-surface); color: var(--runner-ink); }
+:root[data-theme='dark'] .runner-workspace { background: var(--runner-surface-2); }
+:root[data-theme='dark'] .package-card,
+:root[data-theme='dark'] .notice,
+:root[data-theme='dark'] .kind-label { background: var(--runner-surface-3); color: var(--runner-ink-2); }

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@qaick/runner",
+  "description": "Reusable QAick Runner module and standalone execution application.",
+  "version": "0.2.0-alpha.10",
+  "type": "module",
+  "files": [
+    "package-dist",
+    "README.md"
+  ],
+  "main": "./package-dist/src/runner/RunnerModule.js",
+  "types": "./package-dist/src/runner/RunnerModule.d.ts",
+  "publishConfig": {
+    "access": "public",
+    "tag": "alpha"
+  },
+  "exports": {
+    ".": {
+      "types": "./package-dist/src/runner/RunnerModule.d.ts",
+      "import": "./package-dist/src/runner/RunnerModule.js"
+    },
+    "./runner-module": {
+      "types": "./package-dist/src/runner/RunnerModule.d.ts",
+      "import": "./package-dist/src/runner/RunnerModule.js"
+    },
+    "./runtime-client-adapter": {
+      "types": "./package-dist/src/runner/runtime-client-adapter.d.ts",
+      "import": "./package-dist/src/runner/runtime-client-adapter.js"
+    },
+    "./styles.css": "./package-dist/styles.css",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "build:package": "node scripts/build-package.mjs",
+    "check:package": "npm run build:package && node scripts/check-package.mjs",
+    "pack:check": "npm run build:package && npm pack --dry-run",
+    "pack:tarball": "npm run build:package && npm pack",
+    "publish:alpha": "npm run check:package && npm publish --tag alpha",
+    "package:standalone": "npm run build && node scripts/package-standalone.mjs",
+    "smoke": "node scripts/smoke-check.mjs",
+    "smoke:deployment": "node scripts/smoke-check.mjs --deployment",
+    "lint": "oxlint",
+    "verify": "npm test && npm run build && npm run smoke && npm run lint",
+    "verify:clean": "npm ci && npm run verify",
+    "build:cloudflare": "npm run build",
+    "deploy:cloudflare": "npx wrangler deploy",
+    "deploy:cloudflare:preview": "npx wrangler versions upload",
+    "deploy": "npm run deploy:cloudflare",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "typecheck": "tsc -b"
+  },
+  "dependencies": {
+    "@qaick/contract": "0.2.10",
+    "@qaick/executor": "0.1.0-alpha.1",
+    "@qaick/http-executor": "0.1.0-alpha.1",
+    "@qaick/runtime": "0.1.0-alpha.2",
+    "zustand": "^5.0.15"
+  },
+  "peerDependencies": {
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^6.1.1",
+    "@testing-library/dom": "^10.4.2",
+    "@testing-library/react": "^16.3.3",
+    "@types/node": "^24.13.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.7",
+    "jsdom": "^30.0.1",
+    "oxlint": "^1.81.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "typescript": "~6.0.2",
+    "vite": "^8.3.0",
+    "vitest": "^5.0.0"
+  }
+}