astryx-dracula 0.2.0 → 0.3.0

package/templates/side-gallery.tsx

@@ -1,4 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+// AR*10 is the live count: GALLERY_SCENES has 10 entries and a bare .map renders
+// all 10, with no slice. The header said 9 while 10 rendered.
+//   L > LC[p=6] > G[c={min:280} g8 a=center] > (V[g6] > (V[g3] > Tx"AFTER DARK"[t=supporting] + Hd"Make every night"[level=1] + Tx"The smallest rituals"[t=body]) + B.primary"Explore the night" + (V[g4] > D + (H[g6] > (V > Tx"12k+"[t=display-3] + Tx"Night shots"[t=supporting])*3))) + (G[c3 g3] > AR*10)
 
 import type {CSSProperties} from 'react';
 import {VStack, HStack, Layout, LayoutContent} from '@astryxdesign/core/Layout';
@@ -7,103 +11,33 @@ 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',
-};
+import {galleryImageClip} from 'astryx-dracula/shared/gallery-image';
+import {SceneTile} from 'astryx-dracula/shared/scene-tile';
+import {SCENE_TILE_ALTS} from 'astryx-dracula/shared/scene-hues';
+import type {SceneHue} from 'astryx-dracula/shared/scene-hues';
 
 // ─── 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)'},
+// One Dracula accent per tile from the fixed categorical vocabulary; alts are
+// shared with classic-gallery via SCENE_TILE_ALTS.
+const GALLERY_SCENES: Array<{alt: string; hue: SceneHue}> = [
+  {alt: SCENE_TILE_ALTS[0], hue: 'var(--dracula-cyan)'},
+  {alt: SCENE_TILE_ALTS[1], hue: 'var(--dracula-pink)'},
+  {alt: SCENE_TILE_ALTS[2], hue: 'var(--dracula-yellow)'},
+  {alt: SCENE_TILE_ALTS[3], hue: 'var(--dracula-green)'},
+  {alt: SCENE_TILE_ALTS[4], hue: 'var(--dracula-pink)'},
+  {alt: SCENE_TILE_ALTS[5], hue: 'var(--dracula-orange)'},
+  {alt: SCENE_TILE_ALTS[6], hue: 'var(--dracula-cyan)'},
+  {alt: SCENE_TILE_ALTS[7], hue: 'var(--dracula-yellow)'},
+  {alt: SCENE_TILE_ALTS[8], 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>
+      <Text type="display-3" weight="semibold" hasTabularNumbers>
         {value}
       </Text>
       <Text type="supporting" color="secondary">
@@ -120,7 +54,12 @@ function ImageGrid() {
     <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} />
+          <SceneTile
+            label={scene.alt}
+            hue={scene.hue}
+            size="sm"
+            index={index}
+          />
         </AspectRatio>
       ))}
     </Grid>
@@ -129,18 +68,27 @@ function ImageGrid() {
 
 // ─── Main Page ──────────────────────────────────────────────────────────────
 
+// A definite ancestor for `Layout height="fill"`. 100dvh, not minHeight: '100%':
+// a percentage min-height against an indefinite containing block computes to 0
+// (CSS 2.1 10.5), so the soft failure would survive and the document would keep
+// the scroll. LayoutContent is overflow:auto, so the definite height lands as a
+// content-pane scroller rather than a clip. Same shape as dashboard.tsx and
+// editor.tsx:302.
+const pageStyle: CSSProperties = {height: '100dvh'};
+
 export default function SideGallery() {
   return (
     <Layout
+      style={pageStyle}
       height="fill"
       contentWidth={1400}
       content={
         <LayoutContent padding={6}>
-          <Grid columns={{minWidth: 360, repeat: 'fit'}} gap={8} align="center">
+          <Grid columns={{minWidth: 280, 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">
+                <Text type="supporting" color="secondary">
                   AFTER DARK
                 </Text>
                 <Heading level={1}>
@@ -155,9 +103,7 @@ export default function SideGallery() {
                 </Text>
               </VStack>
 
-              <HStack gap={3} vAlign="center">
-                <Button label="Explore the night" variant="primary" />
-              </HStack>
+              <Button label="Explore the night" variant="primary" />
 
               <VStack gap={4}>
                 <Divider />

package/templates/table-grouped.tsx

@@ -1,4 +1,10 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   L > (LH[divider] > V[g=4] > (H[j=between a=center] > Hd"Night-shift issues"[level=1] + B.primary"Raise issue"[opens=#raise-issue]) + (H[g=2 a=center] > PS + Po > B.secondary"View options")) + (LC[p=0] > T[hover] > (TR > THC*7) + (TR > TC*7)*4) + (LP > V[g=4] > (H > Tx[t=supporting] + IB"Close panel") + (V[g=1] > Hd[level=2] + Tx[t=body]) + ML + (D + (V[g=2] > Tx"Labels"[t=label] + (H[g=2] > Tk*2)))) ;; Dlg#raise-issue > (DH"Raise issue" + (LC[p=4] > V[g=4] > TI*4) + (LF > H[j=end g=2] > B.secondary"Cancel" + B.primary"Raise issue"))
+
+/**
+ * Table Grouped — the night-shift issue tracker: a grouped, collapsible issue table with a PowerSearch bar and a resizable detail inspector. (Frame/responsive/container: see XLE header above.)
+ */
 
 import React, {useState, useMemo} from 'react';
 import {useResizable, ResizeHandle} from '@astryxdesign/core/Resizable';
@@ -25,11 +31,12 @@ import {Dialog, DialogHeader} from '@astryxdesign/core/Dialog';
 import {Popover} from '@astryxdesign/core/Popover';
 import {RadioList, RadioListItem} from '@astryxdesign/core/RadioList';
 import {DropdownMenu} from '@astryxdesign/core/DropdownMenu';
-import {Center} from '@astryxdesign/core/Center';
 import {Icon} from '@astryxdesign/core/Icon';
 import {StatusDot} from '@astryxdesign/core/StatusDot';
 import {Divider} from '@astryxdesign/core/Divider';
 import {MetadataList, MetadataListItem} from '@astryxdesign/core/MetadataList';
+import {Token} from '@astryxdesign/core/Token';
+import {useMediaQuery} from '@astryxdesign/core/hooks';
 import {
   Table,
   TableRow,
@@ -85,9 +92,9 @@ interface TaskRow extends Record<string, unknown> {
 
 const STATUS_DOT_VARIANT: Record<
   TaskStatus,
-  'success' | 'accent' | 'neutral' | 'warning'
+  'success' | 'neutral' | 'warning' | 'info'
 > = {
-  in_progress: 'accent',
+  in_progress: 'info',
   todo: 'warning',
   backlog: 'neutral',
   done: 'success',
@@ -95,10 +102,10 @@ const STATUS_DOT_VARIANT: Record<
 
 const PRIORITY_COLOR: Record<
   TaskPriority,
-  'primary' | 'secondary' | 'disabled'
+  'error' | 'warning' | 'secondary' | 'disabled'
 > = {
-  urgent: 'primary',
-  high: 'primary',
+  urgent: 'error',
+  high: 'warning',
   medium: 'secondary',
   low: 'disabled',
   none: 'disabled',
@@ -124,7 +131,7 @@ const allTasks: TaskRow[] = [
   {
     id: '2',
     taskId: 'T235040470',
-    title: 'Use Projects to organize work for features or releases',
+    title: 'Chart the crypt to organize haunts for rituals or releases',
     subtitle: '',
     status: 'in_progress',
     priority: 'medium',
@@ -139,7 +146,7 @@ const allTasks: TaskRow[] = [
   {
     id: '3',
     taskId: 'T235040471',
-    title: 'Use Cycles to focus work over n-weeks',
+    title: 'Follow moon cycles to focus haunts over n-weeks',
     subtitle: '',
     status: 'in_progress',
     priority: 'medium',
@@ -154,7 +161,7 @@ const allTasks: TaskRow[] = [
   {
     id: '4',
     taskId: 'T235040472',
-    title: 'Testing code',
+    title: 'Test the gate wards before moonrise',
     subtitle: 'Update castle gate integration',
     status: 'todo',
     priority: 'medium',
@@ -229,7 +236,7 @@ const allTasks: TaskRow[] = [
   {
     id: '9',
     taskId: 'T235040477',
-    title: 'Invite your teammates',
+    title: 'Invite your fellow familiars to the crypt',
     subtitle: '',
     status: 'todo',
     priority: 'low',
@@ -244,7 +251,7 @@ const allTasks: TaskRow[] = [
   {
     id: '10',
     taskId: 'T235040478',
-    title: 'Next steps',
+    title: 'Next rites after moonrise',
     subtitle: '',
     status: 'todo',
     priority: 'none',
@@ -454,7 +461,7 @@ const allTasks: TaskRow[] = [
   {
     id: '24',
     taskId: 'T235040492',
-    title: 'Add dark mode support to dashboard',
+    title: 'Audit dashboard contrast against the Dracula ramp',
     subtitle: '',
     status: 'backlog',
     priority: 'low',
@@ -586,7 +593,7 @@ function groupTasks(
   }
   const map = new Map<string, TaskRow[]>();
   for (const task of tasks) {
-    const key = String(task[groupBy]) || '—';
+    const key = String(task[groupBy]) || 'None';
     let group = map.get(key);
     if (!group) {
       group = [];
@@ -628,7 +635,7 @@ const columns: TableColumn<TaskRow>[] = [
   {
     key: 'project',
     header: 'Project',
-    width: pixel(144),
+    width: proportional(1),
   },
   {
     key: 'created',
@@ -729,7 +736,7 @@ function TaskDetailPanel({
         </HStack>
 
         <VStack gap={1}>
-          <Heading level={3}>{task.title}</Heading>
+          <Heading level={2}>{task.title}</Heading>
           {task.subtitle && (
             <Text type="body" color="secondary">
               {task.subtitle}
@@ -739,10 +746,11 @@ function TaskDetailPanel({
 
         <MetadataList label={{position: 'start'}}>
           <MetadataListItem label="Status">
-            <HStack gap={2} vAlign="center">
+            <HStack gap={1} vAlign="center">
               <StatusDot
                 variant={STATUS_DOT_VARIANT[task.status]}
                 label={STATUS_LABEL[task.status]}
+                isPulsing={task.status === 'in_progress'}
               />
               <Text type="body">{STATUS_LABEL[task.status]}</Text>
             </HStack>
@@ -768,7 +776,7 @@ function TaskDetailPanel({
               <Text type="body">{task.project}</Text>
             ) : (
               <Text type="supporting" color="secondary">
-                —
+                None
               </Text>
             )}
           </MetadataListItem>
@@ -787,7 +795,7 @@ function TaskDetailPanel({
               <Text type="label">Labels</Text>
               <HStack gap={2}>
                 {task.tags.map(tag => (
-                  <Badge key={tag} variant="neutral" label={tag} />
+                  <Token key={tag} color="yellow" label={tag} />
                 ))}
               </HStack>
             </VStack>
@@ -813,6 +821,10 @@ export default function TableGrouped() {
     () => new Set(GROUP_ORDER as string[]),
   );
 
+  // Responsive contract (see file header): below 1024px the inspector would
+  // squeeze the grouped table, so it steps aside entirely.
+  const isNarrow = useMediaQuery('(max-width: 1024px)');
+
   const filtered = useMemo(() => {
     return applyFilters(powerSearchFilters, allTasks);
   }, [powerSearchFilters, applyFilters]);
@@ -822,11 +834,13 @@ export default function TableGrouped() {
     [filtered, groupBy],
   );
 
-  const groupKeys = useMemo(() => Array.from(grouped.keys()), [grouped]);
+  const groupKeys = Array.from(grouped.keys());
 
+  // Expand every group whenever the grouping itself changes. Keyed on the
+  // memoized Map, not on groupKeys, which is a fresh array each render.
   React.useEffect(() => {
-    setExpandedGroups(new Set(groupKeys));
-  }, [groupKeys]);
+    setExpandedGroups(new Set(grouped.keys()));
+  }, [grouped]);
 
   const toggleGroup = (key: string) => {
     setExpandedGroups(prev => {
@@ -854,16 +868,21 @@ export default function TableGrouped() {
       <Layout
         height="fill"
         header={
-          <LayoutHeader hasDivider padding={4}>
+          <LayoutHeader hasDivider padding={6}>
             <VStack gap={4}>
               <HStack gap={3} vAlign="center">
                 <StackItem size="fill">
-                  <Heading level={1}>Night-shift issues</Heading>
+                  {/* maxLines={1}: this is the worst case in the set — 18
+                      characters at 35px is 378px of a 342px header column, so
+                      it wraps to THREE lines and the header measures 180px
+                      (21.3% of a 390x844 viewport). Core wires maxLines to
+                      useTruncation, so the full title stays reachable in a
+                      Tooltip (SC 1.4.10). */}
+                  <Heading level={1} type="display-2" maxLines={1}>Night-shift issues</Heading>
                 </StackItem>
                 <Button
                   label="Raise issue"
                   variant="primary"
-                  size="lg"
                   onClick={() => setDialogOpen(true)}
                 />
               </HStack>
@@ -873,14 +892,14 @@ export default function TableGrouped() {
                     config={powerSearchConfig}
                     filters={powerSearchFilters}
                     onChange={newFilters => setPowerSearchFilters(newFilters)}
-                    placeholder="Filter issues..."
+                    placeholder="Filter issues…"
                     resultCount={`${filtered.length} issue${filtered.length !== 1 ? 's' : ''}`}
                   />
                 </StackItem>
                 <Popover
                   placement="below"
                   alignment="end"
-                  width={320}
+                  width="min(20rem, calc(100vw - 2 * var(--space-viewport)))"
                   label="Grouping options"
                   content={
                     <VStack gap={4}>
@@ -898,7 +917,7 @@ export default function TableGrouped() {
                       </RadioList>
                     </VStack>
                   }>
-                  <Button label="View Options" variant="secondary" size="md" />
+                  <Button label="View options" variant="secondary" size="md" />
                 </Popover>
               </HStack>
             </VStack>
@@ -949,7 +968,7 @@ export default function TableGrouped() {
                               size="sm"
                               color="secondary"
                             />
-                            <Text type="body" weight="bold">
+                            <Text type="body" weight="semibold">
                               {getGroupLabel(groupBy, key)}
                             </Text>
                             <Badge
@@ -966,12 +985,21 @@ export default function TableGrouped() {
                           key={task.id}
                           onClick={() => setSelectedTask(task)}>
                           <TableCell>
-                            <Center axis="horizontal">
+                            {/* StatusDot paints nothing but an 8px dot — its
+                                label is aria-label on a role="img" span — so
+                                four states here read as hue alone. Same
+                                dot-plus-word pairing as the summary row at
+                                :751-757. */}
+                            <HStack gap={1} vAlign="center">
                               <StatusDot
                                 variant={STATUS_DOT_VARIANT[task.status]}
                                 label={STATUS_LABEL[task.status]}
+                                isPulsing={task.status === 'in_progress'}
                               />
-                            </Center>
+                              <Text type="supporting" color="secondary">
+                                {STATUS_LABEL[task.status]}
+                              </Text>
+                            </HStack>
                           </TableCell>
                           <TableCell>
                             <HStack gap={3} vAlign="center" wrap="wrap">
@@ -1003,7 +1031,7 @@ export default function TableGrouped() {
                               </Text>
                             ) : (
                               <Text type="supporting" color="secondary">
-                                —
+                                None
                               </Text>
                             )}
                           </TableCell>
@@ -1085,6 +1113,7 @@ export default function TableGrouped() {
           </LayoutContent>
         }
         end={
+          !isNarrow &&
           selectedTask && (
             <>
               <ResizeHandle
@@ -1103,9 +1132,10 @@ export default function TableGrouped() {
       />
       <Dialog isOpen={dialogOpen} onOpenChange={open => setDialogOpen(open)}>
         <Layout
+          height="auto"
           header={
             <DialogHeader
-              title="Raise an issue"
+              title="Raise issue"
               onOpenChange={open => setDialogOpen(open)}
             />
           }
@@ -1159,7 +1189,7 @@ export default function TableGrouped() {
                   onClick={() => setDialogOpen(false)}
                 />
                 <Button
-                  label="Raise"
+                  label="Raise issue"
                   variant="primary"
                   size="md"
                   onClick={() => setDialogOpen(false)}