astryx-dracula 0.5.0 → 0.6.2

package/templates/mixed-gallery.template.mjs

@@ -1,6 +1,7 @@
 export default {
-  type: 'page',
-  name: 'Mixed Gallery',
-  description: 'Masonry image gallery with varying tile sizes',
-  category: 'marketing',
+	type: "page",
+	name: "Mixed Gallery",
+	description: "Masonry image gallery with varying tile sizes",
+	keywords: ["gallery", "mixed", "grid", "collection", "showcase", "images"],
+	category: "marketing",
 };

package/templates/mixed-gallery.tsx

@@ -1,14 +1,16 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
-// XLE (canonical structure, validated with `bunx astryx layout check`):
-//   L > LC[p=6] > V[g=8] > ((V[g=2 a=center] > Hd"Every corner of the castle, caught after dark."[level=1] + Tx"Relics, sketches, and moonlit views from the coven archives, collected over one long Transylvanian night."[t=body]) + (V[g=3] > (V[g=2] > AR[ratio=3/1] + Tx"The castle at moonrise"[t=body]) + (G[c={min:280} g=4] > (V[g=2] > AR[ratio=3/2] + Tx"Coven gathering"[t=body]) + (V[g=2] > AR[ratio=3/2] + Tx"Belfry view"[t=body]) + (V[g=2] > AR[ratio=3/2] + Tx"Crypt archives"[t=body]) + (V[g=2] > AR[ratio=3/2] + Tx"Midnight garden"[t=body]))))
+// XLE (canonical structure of the tree below; the CLI had no XLE validator
+// after `astryx layout` was removed in 0.7.0, so this is a reading aid and a
+// human drift check — update it with the file, never alone):
+//   L[h=fill] > LC[p=6] > V[g=8] > ((V[g=2 a=center] > Hd"Every corner of the castle, caught after dark."[level=1] + Tx"Relics, sketches, and moonlit views from the coven archives, collected over one long Transylvanian night."[t=body]) + (V[g=3] > (V[g=2] > (AR[ratio=3/1] > Scene{SceneTile}) + Tx"The castle at moonrise"[t=body]) + (G[c={min:280} g=4] > (V[g=2] > (AR[ratio=3/2] > Scene{SceneTile}) + Tx"Coven gathering"[t=body]) + (V[g=2] > (AR[ratio=3/2] > Scene{SceneTile}) + Tx"Belfry view"[t=body]) + (V[g=2] > (AR[ratio=3/2] > Scene{SceneTile}) + Tx"Crypt archives"[t=body]) + (V[g=2] > (AR[ratio=3/2] > Scene{SceneTile}) + Tx"Midnight garden"[t=body]))))
 
-import {VStack, Layout, LayoutContent} from '@astryxdesign/core/Layout';
-import {Text, Heading} from '@astryxdesign/core/Text';
-import {AspectRatio} from '@astryxdesign/core/AspectRatio';
-import {Grid} from '@astryxdesign/core/Grid';
-import {galleryImageClip} from 'astryx-dracula/shared/gallery-image';
-import {SceneTile} from 'astryx-dracula/shared/scene-tile';
-import type {SceneHue} from 'astryx-dracula/shared/scene-hues';
+import { AspectRatio } from "@astryxdesign/core/AspectRatio";
+import { Grid } from "@astryxdesign/core/Grid";
+import { Layout, LayoutContent, VStack } from "@astryxdesign/core/Layout";
+import { Heading, Text } from "@astryxdesign/core/Text";
+import { galleryImageClip } from "astryx-dracula/shared/gallery-image";
+import type { SceneHue } from "astryx-dracula/shared/scene-hues";
+import { SceneTile } from "astryx-dracula/shared/scene-tile";
 
 // ─── Styles ────────────────────────────────────────────────────────────────
 // Image fill + radius live in shared/gallery-image (no Image primitive in
@@ -17,18 +19,18 @@ import type {SceneHue} from 'astryx-dracula/shared/scene-hues';
 // ─── Gallery Data ───────────────────────────────────────────────────────────
 
 interface GalleryImage {
-  title: string;
-  hue: SceneHue;
+	title: string;
+	hue: SceneHue;
 }
 
 // One accent per tile from the fixed badge vocabulary; the SVG scenes below
 // resolve to Dracula tokens so tiles stay on-brand in the dark-only theme.
 const IMAGES: GalleryImage[] = [
-  {title: 'The castle at moonrise', hue: 'var(--dracula-orange)'},
-  {title: 'Coven gathering', hue: 'var(--dracula-cyan)'},
-  {title: 'Belfry view', hue: 'var(--dracula-pink)'},
-  {title: 'Crypt archives', hue: 'var(--dracula-yellow)'},
-  {title: 'Midnight garden', hue: 'var(--dracula-green)'},
+	{ title: "The castle at moonrise", hue: "var(--dracula-orange)" },
+	{ title: "Coven gathering", hue: "var(--dracula-cyan)" },
+	{ title: "Belfry view", hue: "var(--dracula-pink)" },
+	{ title: "Crypt archives", hue: "var(--dracula-yellow)" },
+	{ title: "Midnight garden", hue: "var(--dracula-green)" },
 ];
 
 // ─── Gallery Card ─────────────────────────────────────────────────────────
@@ -37,55 +39,55 @@ const IMAGES: GalleryImage[] = [
 // definite, self-contained height from its ratio, so images can't overflow
 // their grid cell and no tile depends on a neighbour's caption height.
 
-function GalleryCard({image, ratio}: {image: GalleryImage; ratio: number}) {
-  return (
-    <VStack gap={2}>
-      <AspectRatio ratio={ratio} style={galleryImageClip}>
-        <SceneTile label={image.title} hue={image.hue} size="lg" />
-      </AspectRatio>
-      <Text type="body" color="secondary" justify="center">
-        {image.title}
-      </Text>
-    </VStack>
-  );
+function GalleryCard({ image, ratio }: { image: GalleryImage; ratio: number }) {
+	return (
+		<VStack gap={2}>
+			<AspectRatio ratio={ratio} style={galleryImageClip}>
+				<SceneTile label={image.title} hue={image.hue} size="lg" />
+			</AspectRatio>
+			<Text type="body" color="secondary" justify="center">
+				{image.title}
+			</Text>
+		</VStack>
+	);
 }
 
 // ─── Main Page ──────────────────────────────────────────────────────────────
 
 export default function MixedGallery() {
-  return (
-    <Layout
-      height="fill"
-      contentWidth={1400}
-      content={
-        <LayoutContent padding={6}>
-          <VStack gap={8}>
-            {/* Header */}
-            <VStack gap={2} hAlign="center">
-              <Heading level={1} justify="center">
-                Every corner of the castle, caught after dark.
-              </Heading>
-              <Text type="body" color="secondary" justify="center">
-                Relics, sketches, and moonlit views from the coven archives,
-                collected over one long Transylvanian night.
-              </Text>
-            </VStack>
+	return (
+		<Layout
+			height="fill"
+			contentWidth={1400}
+			content={
+				<LayoutContent padding={6}>
+					<VStack gap={8}>
+						{/* Header */}
+						<VStack gap={2} hAlign="center">
+							<Heading level={1} justify="center">
+								Every corner of the castle, caught after dark.
+							</Heading>
+							<Text type="body" color="secondary" justify="center">
+								Relics, sketches, and moonlit views from the coven archives, collected over one long
+								Transylvanian night.
+							</Text>
+						</VStack>
 
-            {/* Featured layout: the wide 3:1 hero heads the page, then the rest
+						{/* Featured layout: the wide 3:1 hero heads the page, then the rest
                 of the set reflows as a grid (4 → 2 → 1 columns). Every tile
                 keeps its own ratio, so no tile's height depends on another's
                 caption wrapping. */}
-            <VStack gap={3}>
-              <GalleryCard image={IMAGES[0]} ratio={3 / 1} />
-              <Grid columns={{minWidth: 280}} gap={4}>
-                {IMAGES.slice(1).map(image => (
-                  <GalleryCard key={image.title} image={image} ratio={3 / 2} />
-                ))}
-              </Grid>
-            </VStack>
-          </VStack>
-        </LayoutContent>
-      }
-    />
-  );
+						<VStack gap={3}>
+							<GalleryCard image={IMAGES[0]} ratio={3 / 1} />
+							<Grid columns={{ minWidth: 280 }} gap={4}>
+								{IMAGES.slice(1).map((image) => (
+									<GalleryCard key={image.title} image={image} ratio={3 / 2} />
+								))}
+							</Grid>
+						</VStack>
+					</VStack>
+				</LayoutContent>
+			}
+		/>
+	);
 }

package/templates/payment-form.template.mjs

@@ -1,6 +1,7 @@
 export default {
-  type: 'page',
-  name: 'Checkout Form',
-  description: 'Billing info, card details, and order summary',
-  category: 'commerce',
+	type: "page",
+	name: "Checkout Form",
+	description: "Billing info, card details, and order summary",
+	keywords: ["checkout", "payment", "billing", "cart", "buyer", "purchase", "order"],
+	category: "commerce",
 };