11/**
22 * Homepage - Aperture drafting stage.
3+ *
4+ * Strategic anchors: openElement = Elements + UI + Framework + Protocols.
5+ * Current public line: v0.40.7 product graph.
36 */
47import { OpenElement } from '@openelement/element' ;
58import { StyleSheet } from '@openelement/core/style-sheet' ;
69import { openPropsTokenSheet } from '@openelement/ui' ;
10+ import '../../islands/home-console.tsx' ;
711
812export const tagName = 'docs-home' ;
913
@@ -181,11 +185,16 @@ pageSheet.replaceSync(`
181185 border-color: var(--brand);
182186 }
183187
188+ .console-stack {
189+ display: grid;
190+ gap: var(--size-3);
191+ max-width: 520px;
192+ }
193+
184194 .console-line {
185195 display: grid;
186196 grid-template-columns: auto 1fr;
187197 gap: var(--size-3);
188- max-width: 520px;
189198 padding: var(--size-3) var(--size-4);
190199 border: var(--border-size-1) solid color-mix(in srgb, var(--brand) 36%, var(--border));
191200 color: var(--brand);
@@ -199,6 +208,11 @@ pageSheet.replaceSync(`
199208 color: var(--text-muted);
200209 }
201210
211+ home-console {
212+ max-width: 360px;
213+ min-height: 136px;
214+ }
215+
202216 .art {
203217 position: relative;
204218 min-height: 680px;
@@ -569,10 +583,13 @@ export class DocsHome extends OpenElement {
569583 < a class = 'action primary' href = '/guide/getting-started' > Get Started -></ a >
570584 < a class = 'action' href = '/apilist' > View API</ a >
571585 </ div >
572- < div class = 'console-line' aria-label = 'Install command' >
573- < span > $</ span >
574- < span > npm create openelement@latest</ span >
575- < small > Scaffolding your project...</ small >
586+ < div class = 'console-stack' >
587+ < div class = 'console-line' aria-label = 'Install command' >
588+ < span > $</ span >
589+ < span > npm create openelement@latest</ span >
590+ < small > Scaffolding your project...</ small >
591+ </ div >
592+ < home-console > </ home-console >
576593 </ div >
577594 </ div >
578595
0 commit comments