55 lines
2.4 KiB
Svelte
55 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
let {
|
|
title = 'GENERATED SCRIPT',
|
|
lines,
|
|
label = title,
|
|
compact = false,
|
|
readiness = 'READY'
|
|
}: {
|
|
title?: string;
|
|
lines: string[];
|
|
label?: string;
|
|
compact?: boolean;
|
|
readiness?: 'READY' | 'REQUIRES ASSUMPTIONS' | 'CAPTURED ONLY';
|
|
} = $props();
|
|
|
|
const keyword = (line: string) => line.trim().split(/\s+/, 1)[0] ?? '';
|
|
const remainder = (line: string) => line.trim().slice(keyword(line).length).trimStart();
|
|
</script>
|
|
|
|
<section class:compact class="pseudo-script" aria-label={label}>
|
|
<header>
|
|
<span aria-hidden="true">▤</span>
|
|
<strong>{title}</strong>
|
|
<small>{readiness} · READ-ONLY · GENERATED FROM TYPED DATA</small>
|
|
</header>
|
|
<ol>
|
|
{#each lines as line}
|
|
<li class:blank={!line.trim()}>
|
|
{#if line.trim()}
|
|
<code><b>{keyword(line)}</b>{#if remainder(line)}{' '}<span>{remainder(line)}</span>{/if}</code>
|
|
{:else}
|
|
<span aria-hidden="true"> </span>
|
|
{/if}
|
|
</li>
|
|
{/each}
|
|
</ol>
|
|
</section>
|
|
|
|
<style>
|
|
.pseudo-script{min-width:0;border:1px solid var(--shd-model-border);border-left:2px solid var(--shd-info);background:var(--shd-model-surface)}
|
|
header{display:flex;align-items:center;gap:7px;min-height:38px;padding:6px 9px;border-bottom:1px solid var(--shd-border);background:var(--shd-surface-raised)}
|
|
header>span{color:var(--shd-success);font-size:var(--shd-type-body)}
|
|
header strong{color:var(--shd-text);font-size:var(--shd-type-telemetry);letter-spacing:.9px}
|
|
header small{margin-left:auto;color:var(--shd-text-muted);font-size:var(--shd-type-telemetry);font-weight:900;letter-spacing:.7px}
|
|
ol{display:grid;gap:2px;margin:0;padding:8px 9px 9px 3.4rem;counter-reset:script-line;color:var(--shd-text-dim)}
|
|
li{min-height:1.45em;padding-left:8px;border-left:1px solid var(--shd-border-soft);font-family:var(--shd-font-mono);font-size:var(--shd-type-supporting);line-height:1.45}
|
|
li::marker{color:var(--shd-text-dim);font-size:var(--shd-type-telemetry);font-variant-numeric:tabular-nums}
|
|
li.blank{min-height:.55em}
|
|
code{font:inherit;color:var(--shd-text);white-space:pre-wrap;overflow-wrap:anywhere}
|
|
code b{color:var(--shd-success);font-weight:900}
|
|
code span{color:var(--shd-text)}
|
|
.compact header small{display:none}.compact ol{max-height:260px;overflow:auto}
|
|
@media(max-width:620px){header{align-items:flex-start;flex-wrap:wrap}header small{flex-basis:100%;margin-left:24px}ol{padding-left:2.8rem}li{font-size:var(--shd-type-telemetry)}}
|
|
</style>
|