astryx-dracula 0.1.3 → 0.2.0

package/templates/shell-side-nav.tsx

@@ -0,0 +1,238 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {useState} from 'react';
+import {AppShell} from '@astryxdesign/core/AppShell';
+import {Divider} from '@astryxdesign/core/Divider';
+import {Layout, LayoutContent, LayoutFooter} from '@astryxdesign/core/Layout';
+import {
+  SideNav,
+  SideNavHeading,
+  SideNavItem,
+  SideNavSection,
+} from '@astryxdesign/core/SideNav';
+import {NavIcon} from '@astryxdesign/core/NavIcon';
+import {Icon} from '@astryxdesign/core/Icon';
+import type {IconType} from '@astryxdesign/core/Icon';
+import {StatusDot} from '@astryxdesign/core/StatusDot';
+import type {StatusDotVariant} from '@astryxdesign/core/StatusDot';
+import {Card} from '@astryxdesign/core/Card';
+import {TextInput} from '@astryxdesign/core/TextInput';
+import {VStack, HStack} from '@astryxdesign/core/Stack';
+import {
+  Sparkles,
+  Plus,
+  Search,
+  BookOpen,
+  Settings,
+  CircleUserRound,
+  User,
+  Building2,
+  CodeXml,
+} from 'lucide-react';
+
+type Conversation = {
+  label: string;
+  status: StatusDotVariant;
+  statusLabel: string;
+};
+
+type Workspace = {
+  name: string;
+  icon: IconType;
+  chats: Conversation[];
+};
+
+const WORKSPACES: Workspace[] = [
+  {
+    name: 'Personal',
+    icon: User,
+    chats: [
+      {
+        label: 'Weekend trip planning',
+        status: 'success',
+        statusLabel: 'Active',
+      },
+      {
+        label: 'Recipe ideas for the week',
+        status: 'neutral',
+        statusLabel: 'Idle',
+      },
+      {
+        label: 'Book recommendations',
+        status: 'warning',
+        statusLabel: 'Needs review',
+      },
+      {label: 'Home workout plan', status: 'neutral', statusLabel: 'Idle'},
+    ],
+  },
+  {
+    name: 'Acme Corp',
+    icon: Building2,
+    chats: [
+      {label: 'Q3 roadmap draft', status: 'accent', statusLabel: 'In progress'},
+      {
+        label: 'Customer onboarding flow',
+        status: 'success',
+        statusLabel: 'Active',
+      },
+      {
+        label: 'Pricing strategy review',
+        status: 'warning',
+        statusLabel: 'Needs review',
+      },
+      {label: 'Standup summary', status: 'neutral', statusLabel: 'Idle'},
+    ],
+  },
+  {
+    name: 'Open Source',
+    icon: CodeXml,
+    chats: [
+      {
+        label: 'StyleX migration notes',
+        status: 'accent',
+        statusLabel: 'In progress',
+      },
+      {
+        label: 'Skeleton loading states',
+        status: 'success',
+        statusLabel: 'Active',
+      },
+      {label: 'Accessibility audit', status: 'error', statusLabel: 'Blocked'},
+      {label: 'Release notes v4.0', status: 'neutral', statusLabel: 'Idle'},
+    ],
+  },
+];
+
+const SELECTED_CHAT = 'StyleX migration notes';
+// Same-route hash: demo links stay focusable anchors without escaping the
+// template through the hash router (bare "#" would drop back to the home page).
+const SELF_HASH = '#/templates/shell-side-nav';
+
+const MESSAGES = [
+  {role: 'assistant', width: '78%', height: 104},
+  {role: 'user', width: '48%', height: 48},
+  {role: 'assistant', width: '64%', height: 132},
+  {role: 'user', width: '38%', height: 40},
+];
+
+function ConversationItem({
+  label,
+  status,
+  statusLabel,
+  isSelected,
+  onSelect,
+}: {
+  label: string;
+  status: StatusDotVariant;
+  statusLabel: string;
+  isSelected?: boolean;
+  onSelect: () => void;
+}) {
+  // The hover-only MoreMenu was four dead actions unreachable by keyboard and
+  // touch, so it goes: the status dot is always visible (its label doubles as
+  // the tooltip), and selecting a conversation actually switches selection.
+  return (
+    <SideNavItem
+      label={label}
+      href={SELF_HASH}
+      isSelected={isSelected}
+      onClick={onSelect}
+      endContent={<StatusDot variant={status} label={statusLabel} />}
+    />
+  );
+}
+
+export default function ShellSideNav() {
+  const [selectedChat, setSelectedChat] = useState(SELECTED_CHAT);
+  const [draft, setDraft] = useState('');
+  return (
+    <AppShell
+      contentPadding={0}
+      sideNav={
+        <SideNav
+          collapsible
+          resizable={{defaultWidth: 300, minWidth: 220, maxWidth: 420}}
+          header={
+            <SideNavHeading
+              heading="Night Owl"
+              icon={<NavIcon icon={<Icon icon={Sparkles} size="sm" />} />}
+              headingHref={SELF_HASH}
+            />
+          }
+          footer={
+            <SideNavSection title="Account" isHeaderHidden>
+              <SideNavItem label="Settings" icon={Settings} href={SELF_HASH} />
+              <SideNavItem
+                label="Sarah Chen"
+                icon={CircleUserRound}
+                href={SELF_HASH}
+              />
+            </SideNavSection>
+          }>
+          <SideNavSection title="Menu" isHeaderHidden>
+            <SideNavItem label="New chat" icon={Plus} href={SELF_HASH} />
+            <SideNavItem label="Search" icon={Search} href={SELF_HASH} />
+            <SideNavItem label="Library" icon={BookOpen} href={SELF_HASH} />
+          </SideNavSection>
+          <Divider />
+          <SideNavSection title="Workspaces" isHeaderHidden>
+            {WORKSPACES.map(workspace => (
+              <SideNavItem
+                key={workspace.name}
+                label={workspace.name}
+                icon={workspace.icon}
+                collapsible={{defaultIsCollapsed: false}}>
+                <VStack gap={0.5}>
+                  {workspace.chats.map(chat => (
+                    <ConversationItem
+                      key={chat.label}
+                      label={chat.label}
+                      status={chat.status}
+                      statusLabel={chat.statusLabel}
+                      isSelected={chat.label === selectedChat}
+                      onSelect={() => setSelectedChat(chat.label)}
+                    />
+                  ))}
+                </VStack>
+              </SideNavItem>
+            ))}
+          </SideNavSection>
+        </SideNav>
+      }>
+      <Layout
+        height="fill"
+        contentWidth={768}
+        content={
+          <LayoutContent padding={6}>
+            <VStack gap={5}>
+              {MESSAGES.map((message, mi) => (
+                <HStack
+                  key={mi}
+                  hAlign={message.role === 'assistant' ? 'start' : 'end'}>
+                  <Card
+                    variant="muted"
+                    padding={0}
+                    width={message.width}
+                    height={message.height}
+                  />
+                </HStack>
+              ))}
+            </VStack>
+          </LayoutContent>
+        }
+        footer={
+          <LayoutFooter>
+            <TextInput
+              label="Message Night Owl"
+              isLabelHidden
+              placeholder="Message Night Owl…"
+              value={draft}
+              onChange={setDraft}
+              width="100%"
+            />
+          </LayoutFooter>
+        }
+      />
+    </AppShell>
+  );
+}

package/templates/shell-top-nav.template.mjs

@@ -0,0 +1,6 @@
+export default {
+  type: 'page',
+  name: 'Storefront Shell',
+  description: 'Mega-menu top nav with product grid',
+  category: 'tooling',
+};

package/templates/shell-top-nav.tsx

@@ -0,0 +1,243 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import type {CSSProperties} from 'react';
+import {AppShell} from '@astryxdesign/core/AppShell';
+import {useMediaQuery} from '@astryxdesign/core/hooks';
+import {
+  TopNav,
+  TopNavHeading,
+  TopNavItem,
+  TopNavMegaMenu,
+  TopNavMegaMenuItem,
+  TopNavMegaMenuFeaturedCard,
+  useTopNavRenderMode,
+} from '@astryxdesign/core/TopNav';
+import {NavIcon} from '@astryxdesign/core/NavIcon';
+import {Icon} from '@astryxdesign/core/Icon';
+import type {IconType} from '@astryxdesign/core/Icon';
+import {IconButton} from '@astryxdesign/core/IconButton';
+import {Button} from '@astryxdesign/core/Button';
+import {Badge} from '@astryxdesign/core/Badge';
+import {Card} from '@astryxdesign/core/Card';
+import {Grid} from '@astryxdesign/core/Grid';
+import {Stack, VStack} from '@astryxdesign/core/Stack';
+import {
+  ShoppingBag,
+  ShoppingCart,
+  Search,
+  Sparkles,
+  SwatchBook,
+  Tag,
+  House,
+  Smile,
+  BadgePercent,
+  Gift,
+  Cloud,
+  Zap,
+  Sun,
+  Star,
+  Flame,
+  Globe,
+  Moon,
+} from 'lucide-react';
+
+// Cap + center the page body so wide screens show whitespace gutters.
+const contentMax: CSSProperties = {maxWidth: 1100, marginInline: 'auto'};
+// Same-route hash: demo links stay focusable anchors without escaping the
+// template through the hash router (bare "#" would drop back to the home page).
+const SELF_HASH = '#/templates/shell-top-nav';
+// Lock both mega-menu panels to an identical size. Without this, Shop and
+// Brands size to their own content (different widths); since both anchor to
+// the centered nav, switching between them resizes the panel — which reads
+// as flashing/jumping. Fixed item + featured widths make the panels
+// pixel-identical so the transition is seamless.
+const megaItems: CSSProperties = {gridColumn: '1 / -1', width: 520};
+const megaFeatured: CSSProperties = {width: 240};
+
+type MegaItem = {name: string; tagline: string; icon: IconType};
+
+// Shop and Brands each render 8 items — the mega menu's built-in 2-column grid
+// lays them out as 2 columns × 4 rows, alongside a featured card.
+const SHOP_ITEMS: MegaItem[] = [
+  {name: 'New Arrivals', tagline: 'The latest drops', icon: Sparkles},
+  {name: 'Womenswear', tagline: 'Dresses, knitwear & more', icon: SwatchBook},
+  {name: 'Menswear', tagline: 'Shirts, tailoring & more', icon: Tag},
+  {name: 'Home', tagline: 'Bedding, lighting & décor', icon: House},
+  {
+    name: 'Beauty',
+    tagline: 'Skincare, fragrance & makeup',
+    icon: Smile,
+  },
+  {
+    name: 'Accessories',
+    tagline: 'Bags, hats & sunglasses',
+    icon: ShoppingBag,
+  },
+  {name: 'Sale', tagline: 'Up to 50% off', icon: BadgePercent},
+  {name: 'Gift Cards', tagline: 'The perfect present', icon: Gift},
+];
+
+const BRAND_ITEMS: MegaItem[] = [
+  {name: 'Aether', tagline: 'Performance essentials', icon: Sparkles},
+  {name: 'Northwind', tagline: 'Outdoor & technical', icon: Cloud},
+  {name: 'Loomwell', tagline: 'Everyday knitwear', icon: Zap},
+  {name: 'Verdant', tagline: 'Sustainable basics', icon: Sun},
+  {name: 'Studio Mara', tagline: 'Modern tailoring', icon: Star},
+  {name: 'Atelier Kos', tagline: 'Limited ateliers', icon: Flame},
+  {name: 'Rue & Co', tagline: 'City streetwear', icon: Globe},
+  {name: 'Halden', tagline: 'Minimal staples', icon: Moon},
+];
+
+const CATEGORY_TILES = [
+  'New Arrivals',
+  'Womenswear',
+  'Menswear',
+  'Home & Living',
+  'Beauty',
+  'Accessories',
+];
+
+// Wraps the 8 items in a fixed-width 2-column grid so every mega menu's item
+// area is exactly the same width regardless of its content.
+function MegaItems({items}: {items: MegaItem[]}) {
+  // In the mobile drawer the fixed 520px panel would overflow the ~350px
+  // drawer, and the 2-column grid overlaps item text there — so the drawer
+  // gets a natural-width single column. Desktop keeps the lock.
+  const isDrawer = useTopNavRenderMode() === 'drawer';
+  if (isDrawer) {
+    return (
+      <VStack gap={1}>
+        {items.map(item => (
+          <TopNavMegaMenuItem
+            key={item.name}
+            title={item.name}
+            description={item.tagline}
+            icon={<Icon icon={item.icon} size="md" color="secondary" />}
+            href={SELF_HASH}
+          />
+        ))}
+      </VStack>
+    );
+  }
+  return (
+    <Stack style={megaItems}>
+      <Grid columns={2} gap={2}>
+        {items.map(item => (
+          <TopNavMegaMenuItem
+            key={item.name}
+            title={item.name}
+            description={item.tagline}
+            icon={<Icon icon={item.icon} size="md" color="secondary" />}
+            href={SELF_HASH}
+          />
+        ))}
+      </Grid>
+    </Stack>
+  );
+}
+
+// Pins the featured card to a fixed width so both panels match exactly.
+function MegaFeatured(props: {
+  title: string;
+  description: string;
+  linkLabel: string;
+  linkHref: string;
+}) {
+  const isDrawer = useTopNavRenderMode() === 'drawer';
+  return (
+    <Stack style={isDrawer ? undefined : megaFeatured}>
+      <TopNavMegaMenuFeaturedCard {...props} />
+    </Stack>
+  );
+}
+
+export default function ShellTopNav() {
+  // Below ~640px the mobile bar (heading + actions + toggle) overflows 390px
+  // viewports, pushing the nav toggle off-screen. Dropping the text Sign in
+  // button there restores room for search, checkout, and the toggle.
+  const isCompact = useMediaQuery('(max-width: 640px)');
+  return (
+    <AppShell
+      variant="surface"
+      contentPadding={6}
+      topNav={
+        <TopNav
+          label="Nocturne storefront navigation"
+          heading={
+            <TopNavHeading
+              heading="Nocturne"
+              logo={
+                <NavIcon icon={<Icon icon={ShoppingBag} size="sm" />} />
+              }
+            />
+          }
+          centerContent={
+            <>
+              <TopNavMegaMenu
+                label="Shop"
+                items={<MegaItems items={SHOP_ITEMS} />}
+                featured={
+                  <MegaFeatured
+                    title="The Midnight Edit"
+                    description="Layered staples in moonlit purples."
+                    linkLabel="Shop the edit"
+                    linkHref={SELF_HASH}
+                  />
+                }
+              />
+              <TopNavMegaMenu
+                label="Brands"
+                items={<MegaItems items={BRAND_ITEMS} />}
+                featured={
+                  <MegaFeatured
+                    title="Meet Studio Mara"
+                    description="Modern tailoring, made to last."
+                    linkLabel="Discover the label"
+                    linkHref={SELF_HASH}
+                  />
+                }
+              />
+              <TopNavItem label="Sale" href={SELF_HASH} />
+              <TopNavItem label="Service" href={SELF_HASH} />
+            </>
+          }
+          endContent={
+            <>
+              <IconButton
+                label="Search products"
+                tooltip="Search"
+                variant="ghost"
+                icon={<Icon icon={Search} size="sm" />}
+              />
+              {!isCompact && <Button label="Sign in" variant="ghost" />}
+              <Button
+                label="Checkout"
+                variant="primary"
+                tooltip="Cart, 3 items"
+                icon={<Icon icon={ShoppingCart} size="sm" />}
+                endContent={<Badge label={3} />}
+              />
+            </>
+          }
+        />
+      }>
+      <VStack gap={10} style={contentMax}>
+        <Card variant="muted" padding={0} width="100%" height={360} />
+
+        {[0, 1, 2].map(section => (
+          <VStack key={section} gap={4}>
+            <Card variant="muted" padding={0} width={200} height={24} />
+            <Grid columns={{minWidth: 160, repeat: 'fit'}} gap={4}>
+              {CATEGORY_TILES.map(tile => (
+                <VStack key={tile} gap={2}>
+                  <Card variant="muted" padding={0} width="100%" height={120} />
+                  <Card variant="muted" padding={0} width="60%" height={14} />
+                </VStack>
+              ))}
+            </Grid>
+          </VStack>
+        ))}
+      </VStack>
+    </AppShell>
+  );
+}

package/templates/side-gallery.template.mjs

@@ -0,0 +1,6 @@
+export default {
+  type: 'page',
+  name: 'Side Gallery',
+  description: 'Headline, CTA, and image collage side by side',
+  category: 'marketing',
+};

package/templates/side-gallery.tsx

@@ -0,0 +1,179 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import type {CSSProperties} from 'react';
+import {VStack, HStack, Layout, LayoutContent} from '@astryxdesign/core/Layout';
+import {Text, Heading} from '@astryxdesign/core/Text';
+import {Button} from '@astryxdesign/core/Button';
+import {AspectRatio} from '@astryxdesign/core/AspectRatio';
+import {Grid} from '@astryxdesign/core/Grid';
+import {Divider} from '@astryxdesign/core/Divider';
+
+// NOTE: The only custom styling here is gallery fill + corner radius. It
+// exists because Astryx has no image primitive — AspectRatio exposes no
+// objectFit or radius props and there's no Image. Tracked in issue #2582;
+// replace these with component props once it lands.
+// Fills the AspectRatio box. No objectFit prop on AspectRatio (#2582).
+const galleryImage: CSSProperties = {
+  width: '100%',
+  height: '100%',
+  display: 'block',
+};
+// Rounds the gallery corners. No radius prop on AspectRatio (#2582);
+// overflow clip masks the SVG scene to the rounded corners.
+const galleryImageClip: CSSProperties = {
+  borderRadius: 'var(--radius-container)',
+  overflow: 'clip',
+};
+
+// ─── Gallery Data ─────────────────────────────────────────────────────────────
+
+// One Dracula accent per tile from the fixed categorical vocabulary.
+const GALLERY_SCENES = [
+  {alt: 'Moonlit ridge trail under a harvest moon', hue: 'var(--dracula-cyan)'},
+  {alt: 'Late portrait in violet lamplight', hue: 'var(--dracula-pink)'},
+  {
+    alt: 'Lamplit reading nook after midnight',
+    hue: 'var(--dracula-yellow)',
+  },
+  {alt: 'Fog rolling over the night pines', hue: 'var(--dracula-purple)'},
+  {alt: 'Dancer caught mid-step in stage pink', hue: 'var(--dracula-pink)'},
+  {
+    alt: 'Kitchen table set for a midnight feast',
+    hue: 'var(--dracula-orange)',
+  },
+  {alt: 'Castle silhouette over sleeping hills', hue: 'var(--dracula-cyan)'},
+  {alt: 'Attic window glowing amber at 2am', hue: 'var(--dracula-yellow)'},
+  {alt: 'Cellar shelves lined with bottled dusk', hue: 'var(--dracula-green)'},
+];
+
+// ─── Gallery Art ────────────────────────────────────────────────────────────
+
+function NightScene({alt, hue, index}: {alt: string; hue: string; index: number}) {
+  const moonX = 90 + ((index * 53) % 220);
+  const moonY = 62 + ((index * 29) % 60);
+  const hillA = 190 + ((index * 13) % 40);
+  const hillB = 215 + ((index * 17) % 40);
+  return (
+    <svg
+      viewBox="0 0 400 300"
+      preserveAspectRatio="xMidYMid slice"
+      style={galleryImage}
+      role="img"
+      aria-label={alt}>
+      <rect width="400" height="300" fill="var(--dracula-bg-light)" />
+      <g fill="var(--dracula-purple)" opacity={0.55}>
+        <circle cx={40 + ((index * 37) % 320)} cy={30} r={2} />
+        <circle cx={120 + ((index * 23) % 200)} cy={52} r={1.6} />
+        <circle cx={260 + ((index * 11) % 110)} cy={26} r={2.2} />
+        <circle cx={330} cy={70 + ((index * 7) % 30)} r={1.6} />
+      </g>
+      <circle cx={moonX} cy={moonY} r={34} fill={hue} opacity={0.9} />
+      <circle
+        cx={moonX - 12}
+        cy={moonY - 8}
+        r={28}
+        fill="var(--dracula-bg-light)"
+        opacity={0.55}
+      />
+      <path
+        d={`M0 ${hillA} Q100 ${hillA - 50} 200 ${hillA - 10} T400 ${hillA - 30} V300 H0 Z`}
+        fill="var(--dracula-current-line)"
+      />
+      <path
+        d={`M0 ${hillB} Q120 ${hillB - 40} 240 ${hillB} T400 ${hillB - 20} V300 H0 Z`}
+        fill="var(--dracula-bg)"
+      />
+      <g
+        transform={`translate(${60 + ((index * 41) % 280)} ${hillB - 34})`}
+        fill="none"
+        stroke={hue}
+        strokeWidth="4"
+        strokeLinecap="round"
+        strokeLinejoin="round">
+        <rect x="-22" y="-22" width="44" height="44" rx={4} />
+        <circle cx="9" cy="-9" r="2" fill={hue} stroke="none" />
+        <path d="M-17 15 L-4 0 L5 9 L10 4 L17 12" />
+      </g>
+    </svg>
+  );
+}
+
+// ─── Stat Block ─────────────────────────────────────────────────────────────
+
+function StatBlock({value, label}: {value: string; label: string}) {
+  return (
+    <VStack gap={0}>
+      <Text type="large" weight="bold" hasTabularNumbers>
+        {value}
+      </Text>
+      <Text type="supporting" color="secondary">
+        {label}
+      </Text>
+    </VStack>
+  );
+}
+
+// ─── Image Grid ─────────────────────────────────────────────────────────────
+
+function ImageGrid() {
+  return (
+    <Grid columns={3} gap={3}>
+      {GALLERY_SCENES.map((scene, index) => (
+        <AspectRatio key={scene.alt} ratio={1} style={galleryImageClip}>
+          <NightScene alt={scene.alt} hue={scene.hue} index={index} />
+        </AspectRatio>
+      ))}
+    </Grid>
+  );
+}
+
+// ─── Main Page ──────────────────────────────────────────────────────────────
+
+export default function SideGallery() {
+  return (
+    <Layout
+      height="fill"
+      contentWidth={1400}
+      content={
+        <LayoutContent padding={6}>
+          <Grid columns={{minWidth: 360, repeat: 'fit'}} gap={8} align="center">
+            {/* Left side: Text + CTA */}
+            <VStack gap={6} vAlign="center">
+              <VStack gap={3}>
+                <Text type="supporting" color="secondary" weight="semibold">
+                  AFTER DARK
+                </Text>
+                <Heading level={1}>
+                  Make every night a little more spellbinding, one small ritual
+                  at a time.
+                </Heading>
+                <Text type="body" color="secondary">
+                  The smallest rituals are the ones that matter most. A little
+                  lamplight that catches your eye and makes you pause;
+                  that&apos;s what turns an ordinary evening into something
+                  worth remembering.
+                </Text>
+              </VStack>
+
+              <HStack gap={3} vAlign="center">
+                <Button label="Explore the night" variant="primary" />
+              </HStack>
+
+              <VStack gap={4}>
+                <Divider />
+                <HStack gap={6}>
+                  <StatBlock value="12k+" label="Night shots" />
+                  <StatBlock value="350+" label="Dark builds" />
+                  <StatBlock value="8yrs" label="Years prowling" />
+                </HStack>
+              </VStack>
+            </VStack>
+
+            {/* Right side: Image Grid */}
+            <ImageGrid />
+          </Grid>
+        </LayoutContent>
+      }
+    />
+  );
+}

package/templates/table-grouped.template.mjs

@@ -0,0 +1,6 @@
+export default {
+  type: 'page',
+  name: 'Grouped Table',
+  description: 'Collapsible status sections with detail panel',
+  category: 'data',
+};