Layout DSL
Write a compressed layout expression (compact XLE or indented outline XLO). It is validated live against @astryxdesign/core; the expanded TSX and token counts update below. The whole pipeline runs in-browser via the @astryxdesign/cli/xle barrel.Valid · compact
XLE input · est.204 tok417 chars
Output TSX · est.986 tok6864 chars
Expansion4.8×output ÷ input
Rendered source (TSX)19 components · 2 TODO
// Generated by `astryx layout expand` — this file is the artifact; edit freely.
import {XDSAppShell} from '@astryxdesign/core/AppShell';
import {XDSBadge} from '@astryxdesign/core/Badge';
import {XDSButton} from '@astryxdesign/core/Button';
import {XDSCard} from '@astryxdesign/core/Card';
import {XDSGrid} from '@astryxdesign/core/Grid';
import {XDSHeading} from '@astryxdesign/core/Heading';
import {XDSLayout, XDSLayoutContent} from '@astryxdesign/core/Layout';
import {XDSSideNav} from '@astryxdesign/core/SideNav';
import {XDSHStack, XDSVStack} from '@astryxdesign/core/Stack';
import {XDSTable, XDSTableBody, XDSTableCell, XDSTableHeader, XDSTableHeaderCell, XDSTableRow} from '@astryxdesign/core/Table';
import {XDSText} from '@astryxdesign/core/Text';
import {XDSTopNav} from '@astryxdesign/core/TopNav';
export default function PlaygroundLayout() {
return (
<XDSAppShell
contentPadding={6}
topNav={
<XDSTopNav />
}
sideNav={
<XDSSideNav />
}
>
<XDSLayout
content={
<XDSLayoutContent>
<XDSVStack gap={6}>
<XDSHStack hAlign="between" vAlign="center">
<XDSHeading level={2}>
Analytics
</XDSHeading>
<XDSHStack gap={2}>
<XDSButton label="Export" />
<XDSButton variant="primary" label="New report" />
</XDSHStack>
</XDSHStack>
<XDSGrid columns={4} gap={4}>
<XDSCard padding={6}>
<XDSVStack gap={1}>
<XDSText size="lg">
$42k
</XDSText>
<XDSText type="supporting">
Revenue
</XDSText>
</XDSVStack>
</XDSCard>
<XDSCard padding={6}>
<XDSVStack gap={1}>
<XDSText size="lg">
$42k
</XDSText>
<XDSText type="supporting">
Revenue
</XDSText>
</XDSVStack>
</XDSCard>
<XDSCard padding={6}>
<XDSVStack gap={1}>
<XDSText size="lg">
$42k
</XDSText>
<XDSText type="supporting">
Revenue
</XDSText>
</XDSVStack>
</XDSCard>
<XDSCard padding={6}>
<XDSVStack gap={1}>
<XDSText size="lg">
$42k
</XDSText>
<XDSText type="supporting">
Revenue
</XDSText>
</XDSVStack>
</XDSCard>
</XDSGrid>
<XDSGrid columns={{minWidth: 340}} gap={4}>
<XDSCard>
{/* TODO(xle): content block 'CardCallout' — scaffold it with: astryx template CardCallout */}
</XDSCard>
<XDSCard>
{/* TODO(xle): content block 'CardCallout' — scaffold it with: astryx template CardCallout */}
</XDSCard>
</XDSGrid>
<XDSCard padding={0}>
<XDSTable isStriped>
<XDSTableHeader>
<XDSTableRow>
<XDSTableHeaderCell>
Order
</XDSTableHeaderCell>
<XDSTableHeaderCell>
Customer
</XDSTableHeaderCell>
<XDSTableHeaderCell>
Status
</XDSTableHeaderCell>
<XDSTableHeaderCell>
Total
</XDSTableHeaderCell>
</XDSTableRow>
</XDSTableHeader>
<XDSTableBody>
<XDSTableRow>
<XDSTableCell>
#101
</XDSTableCell>
<XDSTableCell>
Acme Inc
</XDSTableCell>
<XDSTableCell>
<XDSBadge variant="success" label="Paid" />
</XDSTableCell>
<XDSTableCell>
$120
</XDSTableCell>
</XDSTableRow>
<XDSTableRow>
<XDSTableCell>
#102
</XDSTableCell>
<XDSTableCell>
Acme Inc
</XDSTableCell>
<XDSTableCell>
<XDSBadge variant="success" label="Paid" />
</XDSTableCell>
<XDSTableCell>
$120
</XDSTableCell>
</XDSTableRow>
<XDSTableRow>
<XDSTableCell>
#103
</XDSTableCell>
<XDSTableCell>
Acme Inc
</XDSTableCell>
<XDSTableCell>
<XDSBadge variant="success" label="Paid" />
</XDSTableCell>
<XDSTableCell>
$120
</XDSTableCell>
</XDSTableRow>
<XDSTableRow>
<XDSTableCell>
#104
</XDSTableCell>
<XDSTableCell>
Acme Inc
</XDSTableCell>
<XDSTableCell>
<XDSBadge variant="success" label="Paid" />
</XDSTableCell>
<XDSTableCell>
$120
</XDSTableCell>
</XDSTableRow>
<XDSTableRow>
<XDSTableCell>
#105
</XDSTableCell>
<XDSTableCell>
Acme Inc
</XDSTableCell>
<XDSTableCell>
<XDSBadge variant="success" label="Paid" />
</XDSTableCell>
<XDSTableCell>
$120
</XDSTableCell>
</XDSTableRow>
</XDSTableBody>
</XDSTable>
</XDSCard>
</XDSVStack>
</XDSLayoutContent>
}
/>
</XDSAppShell>
);
}
Canonical forms
compact:
A[cp=6 @topNav=(TN) @sideNav=(SN)] > L > LC > V[g=6] > (H[j=between a=center] > Hd"Analytics"[level=2] + (H[g=2] > B"Export" + B.primary"New report")) + (G[c=4 g=4] > (C[p=6] > V[g=1] > Tx.lg"\$42k" + Tx"Revenue"[t=supporting])*4) + (G[c={min:340} g=4] > C{card-callout} + C{card-callout}) + (C[p=0] > T[striped] > (TR > THC"Order" + THC"Customer" + THC"Status" + THC"Total") + (TR > TC"#10$" + TC"Acme Inc" + (TC > Bd.success"Paid") + TC"\$120")*5)
outline:
A cp=6
topNav: TN
sideNav: SN
L
LC
V g=6
H j=between a=center
Hd "Analytics" level=2
H g=2
B "Export"
B.primary "New report"
G c=4 g=4
repeat 4:
C p=6
V g=1
Tx.lg "\$42k"
Tx "Revenue" t=supporting
G c={min:340} g=4
C {card-callout}
C {card-callout}
C p=0
T striped
TR
THC "Order"
THC "Customer"
THC "Status"
THC "Total"
repeat 5:
TR
TC "#10$"
TC "Acme Inc"
TC
Bd.success "Paid"
TC "\$120"Examples81 of 81
Pages
Layout
Cards
Content
Tables
Forms
Nav
Feedback
Blocks
Outline
Chat