astryx-dracula 0.5.0 → 0.6.2

package/templates/gallery-hero.tsx

@@ -1,16 +1,18 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
-// XLE (canonical structure, validated with `bunx astryx layout check`):
-//   L > LC[p=6] > V[g=10] > (V[g=6 a=center] > (V[g=3 a=center] > Hd"Little haunts, everywhere you roam"[level=1 t=display-2] + Tx"Sometimes all it takes"[t=body]) + (H[j=center g=3] > B.primary"Enter the gallery" + B.secondary"Read the lore")) + (G[c={min:200} g=4] > AR*3)
+// 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=auto] > LC[p=6] > V[g=10] > (V[g=6 a=center] > (V[g=3 a=center] > Hd"Little haunts, everywhere you roam"[level=1 t=display-2] + Tx"Sometimes all it takes"[t=body]) + (H[j=center g=3] > B.primary"Enter the gallery" + B.secondary"Read the lore")) + (G[c={min:200} g=4] > AR[ratio=4/5] > Scene{SceneCastle}*3)
 
-import {VStack, HStack, Layout, LayoutContent} from '@astryxdesign/core/Layout';
-import {Text, Heading} from '@astryxdesign/core/Text';
-import {Button} from '@astryxdesign/core/Button';
-import {Icon} from '@astryxdesign/core/Icon';
-import {Grid} from '@astryxdesign/core/Grid';
-import {AspectRatio} from '@astryxdesign/core/AspectRatio';
-import {ArrowRight} from 'lucide-react';
-import {galleryImage, galleryImageClip} from 'astryx-dracula/shared/gallery-image';
-import {SceneCastle} from 'astryx-dracula/shared/scene-castle';
+import { AspectRatio } from "@astryxdesign/core/AspectRatio";
+import { Button } from "@astryxdesign/core/Button";
+import { Grid } from "@astryxdesign/core/Grid";
+import { Icon } from "@astryxdesign/core/Icon";
+import { HStack, Layout, LayoutContent, VStack } from "@astryxdesign/core/Layout";
+import { Heading, Text } from "@astryxdesign/core/Text";
+import { galleryImage, galleryImageClip } from "astryx-dracula/shared/gallery-image";
+import { SceneCastle } from "astryx-dracula/shared/scene-castle";
+import { ArrowRight } from "lucide-react";
 
 // Castle + pines banners live in shared/scene-castle (`card`/`tall` variants:
 // harvest-yellow moon, fg-stroke bats, per-scene hill constants). Fill +
@@ -21,113 +23,90 @@ import {SceneCastle} from 'astryx-dracula/shared/scene-castle';
 // tile instead.
 
 function BatFlightScene() {
-  return (
-    <svg
-      style={galleryImage}
-      viewBox="0 0 400 500"
-      role="img"
-      aria-label="Bats crossing a moonless night sky">
-      <rect width="400" height="500" fill="var(--dracula-bg-dark)" />
-      <circle cx="200" cy="140" r="60" fill="var(--dracula-comment)" />
-      <circle
-        cx="200"
-        cy="140"
-        r="60"
-        fill="none"
-        stroke="var(--dracula-pink)"
-        strokeWidth={3}
-        opacity={0.6}
-      />
-      <g fill="var(--dracula-cyan)">
-        <circle cx="60" cy="70" r="2" />
-        <circle cx="150" cy="40" r="2.5" />
-        <circle cx="260" cy="60" r="2" />
-        <circle cx="340" cy="110" r="2.5" />
-        <circle cx="100" cy="160" r="2" />
-      </g>
-      <g
-        fill="none"
-        stroke="var(--dracula-fg)"
-        strokeWidth={4}
-        strokeLinecap="round">
-        <path d="M110 220 q12 -12 24 0 q12 -12 24 0" />
-        <path d="M200 180 q12 -12 24 0 q12 -12 24 0" />
-        <path d="M250 260 q9 -9 18 0 q9 -9 18 0" />
-        <path d="M140 300 q9 -9 18 0 q9 -9 18 0" />
-        <path d="M290 320 q9 -9 18 0 q9 -9 18 0" />
-      </g>
-      <path
-        d="M0 370 Q140 310 270 355 T400 345 V500 H0 Z"
-        fill="var(--dracula-bg-lighter)"
-      />
-      <path
-        d="M0 430 Q180 375 400 415 V500 H0 Z"
-        fill="var(--dracula-selection)"
-      />
-      <g fill="var(--dracula-green)">
-        <circle cx="80" cy="440" r="6" />
-        <circle cx="200" cy="455" r="6" />
-        <circle cx="320" cy="445" r="6" />
-      </g>
-    </svg>
-  );
+	return (
+		<svg
+			style={galleryImage}
+			viewBox="0 0 400 500"
+			role="img"
+			aria-label="Bats crossing a moonless night sky"
+		>
+			<rect width="400" height="500" fill="var(--dracula-bg-dark)" />
+			<circle cx="200" cy="140" r="60" fill="var(--dracula-comment)" />
+			<circle
+				cx="200"
+				cy="140"
+				r="60"
+				fill="none"
+				stroke="var(--dracula-pink)"
+				strokeWidth={3}
+				opacity={0.6}
+			/>
+			<g fill="var(--dracula-cyan)">
+				<circle cx="60" cy="70" r="2" />
+				<circle cx="150" cy="40" r="2.5" />
+				<circle cx="260" cy="60" r="2" />
+				<circle cx="340" cy="110" r="2.5" />
+				<circle cx="100" cy="160" r="2" />
+			</g>
+			<g fill="none" stroke="var(--dracula-fg)" strokeWidth={4} strokeLinecap="round">
+				<path d="M110 220 q12 -12 24 0 q12 -12 24 0" />
+				<path d="M200 180 q12 -12 24 0 q12 -12 24 0" />
+				<path d="M250 260 q9 -9 18 0 q9 -9 18 0" />
+				<path d="M140 300 q9 -9 18 0 q9 -9 18 0" />
+				<path d="M290 320 q9 -9 18 0 q9 -9 18 0" />
+			</g>
+			<path d="M0 370 Q140 310 270 355 T400 345 V500 H0 Z" fill="var(--dracula-bg-lighter)" />
+			<path d="M0 430 Q180 375 400 415 V500 H0 Z" fill="var(--dracula-selection)" />
+			<g fill="var(--dracula-green)">
+				<circle cx="80" cy="440" r="6" />
+				<circle cx="200" cy="455" r="6" />
+				<circle cx="320" cy="445" r="6" />
+			</g>
+		</svg>
+	);
 }
 
 const SCENES = [
-  {alt: 'Moonlit castle on midnight hills', scene: <SceneCastle variant="card" />},
-  {alt: 'Harvest moon over midnight pines', scene: <SceneCastle variant="tall" />},
-  {alt: 'Bats crossing a moonless night sky', scene: <BatFlightScene />},
+	{ alt: "Moonlit castle on midnight hills", scene: <SceneCastle variant="card" /> },
+	{ alt: "Harvest moon over midnight pines", scene: <SceneCastle variant="tall" /> },
+	{ alt: "Bats crossing a moonless night sky", scene: <BatFlightScene /> },
 ];
 
 export default function GalleryHero() {
-  return (
-    <Layout
-      height="auto"
-      content={
-        <LayoutContent padding={6}>
-          <VStack gap={10}>
-            <VStack gap={6} hAlign="center">
-              <VStack gap={3} hAlign="center">
-                <Heading
-                  level={1}
-                  type="display-2"
-                  justify="center"
-                  textWrap="balance">
-                  Little haunts, everywhere you roam
-                </Heading>
-                <Text
-                  type="body"
-                  color="secondary"
-                  justify="center"
-                  textWrap="balance">
-                  Sometimes all it takes is one small shadow to turn the whole
-                  night around.
-                </Text>
-              </VStack>
-              <HStack gap={3} wrap="wrap" justify="center">
-                <Button
-                  label="Enter the gallery"
-                  variant="primary"
-                  endContent={
-                    <Icon icon={ArrowRight} size="sm" color="inherit" />
-                  }
-                />
-                <Button label="Read the lore" variant="secondary" />
-              </HStack>
-            </VStack>
-            <Grid columns={{minWidth: 200, repeat: 'fit'}} gap={4}>
-              {SCENES.map(item => (
-                <AspectRatio
-                  key={item.alt}
-                  ratio={4 / 5}
-                  style={galleryImageClip}>
-                  {item.scene}
-                </AspectRatio>
-              ))}
-            </Grid>
-          </VStack>
-        </LayoutContent>
-      }
-    />
-  );
+	return (
+		<Layout
+			height="auto"
+			content={
+				<LayoutContent padding={6}>
+					<VStack gap={10}>
+						<VStack gap={6} hAlign="center">
+							<VStack gap={3} hAlign="center">
+								<Heading level={1} type="display-2" justify="center" textWrap="balance">
+									Little haunts, everywhere you roam
+								</Heading>
+								<Text type="body" color="secondary" justify="center" textWrap="balance">
+									Sometimes all it takes is one small shadow to turn the whole night around.
+								</Text>
+							</VStack>
+							<HStack gap={3} wrap="wrap" justify="center">
+								<Button
+									label="Enter the gallery"
+									variant="primary"
+									endContent={<Icon icon={ArrowRight} size="sm" color="inherit" />}
+								/>
+								<Button label="Read the lore" variant="secondary" />
+							</HStack>
+						</VStack>
+						<Grid columns={{ minWidth: 200, repeat: "fit" }} gap={4}>
+							{SCENES.map((item) => (
+								<AspectRatio key={item.alt} ratio={4 / 5} style={galleryImageClip}>
+									{item.scene}
+								</AspectRatio>
+							))}
+						</Grid>
+					</VStack>
+				</LayoutContent>
+			}
+		/>
+	);
 }

package/templates/ide.template.mjs

@@ -1,6 +1,7 @@
 export default {
-  type: 'page',
-  name: 'IDE Workspace',
-  description: 'Tabbed editor with terminal and properties',
-  category: 'tooling',
+	type: "page",
+	name: "IDE Workspace",
+	description: "Tabbed editor with terminal and properties",
+	keywords: ["ide", "editor", "terminal", "workspace", "code", "developer"],
+	category: "tooling",
 };