astryx-dracula 0.2.0 → 0.3.0

package/templates/kanban-board.tsx

@@ -1,12 +1,14 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   S > L > (LH[divider] > Tbar > (Hd"Sprint Board"[level=1] + Bd.neutral"8") + (H[g=2] > SE + D.strong + IB"Sort" + IB"Filter" + IB"Search" + B.primary"Add task")) + (LC[p=0] > G[c={min:280,max:4} g=4] > (C.muted[p=0] > L > (LH[divider] > H[j=between a=center] > (H[g=2 a=center] > SD + Hd"To-do"[level=2] + IB) + Tx) + (LC[p=3] > V[g=2] > (C[p=3] > V[g=2] > (H[j=between] > (H[g=2] > Tk + Bd) + MM) + (V[g=1] > Hd[level=3] + Tx) + Tx)*2))*4)
 
 import {
   useEffect,
-  useMemo,
   useRef,
   useState,
   type CSSProperties,
   type PointerEvent as ReactPointerEvent,
+  type KeyboardEvent as ReactKeyboardEvent,
   type ReactNode,
 } from 'react';
 
@@ -20,6 +22,7 @@ import {
 import {Text, Heading} from '@astryxdesign/core/Text';
 import {Card} from '@astryxdesign/core/Card';
 import {Badge} from '@astryxdesign/core/Badge';
+import {Token} from '@astryxdesign/core/Token';
 import {Button} from '@astryxdesign/core/Button';
 import {IconButton} from '@astryxdesign/core/IconButton';
 import {Icon} from '@astryxdesign/core/Icon';
@@ -27,7 +30,7 @@ import {StatusDot} from '@astryxdesign/core/StatusDot';
 import {EmptyState} from '@astryxdesign/core/EmptyState';
 import {MoreMenu} from '@astryxdesign/core/MoreMenu';
 import {Selector} from '@astryxdesign/core/Selector';
-import {Tooltip} from '@astryxdesign/core/Tooltip';
+import {Popover} from '@astryxdesign/core/Popover';
 import {Divider} from '@astryxdesign/core/Divider';
 import {Toolbar} from '@astryxdesign/core/Toolbar';
 import {Section} from '@astryxdesign/core/Section';
@@ -64,7 +67,7 @@ interface WorkItem {
 interface ColumnMeta {
   id: ColumnId;
   title: string;
-  variant: 'neutral' | 'accent' | 'warning' | 'success';
+  variant: 'neutral' | 'info' | 'warning' | 'success';
   tooltip: string;
   emptyTitle: string;
   emptyDescription: string;
@@ -105,7 +108,7 @@ const COLUMNS: ColumnMeta[] = [
   {
     id: 'in-progress',
     title: 'In progress',
-    variant: 'accent',
+    variant: 'info',
     tooltip: 'Theme work currently on the easel.',
     emptyTitle: 'Nothing in progress',
     emptyDescription: 'Tasks being worked on appear here.',
@@ -114,7 +117,7 @@ const COLUMNS: ColumnMeta[] = [
   {
     id: 'in-review',
     title: 'In review',
-    variant: 'warning',
+    variant: 'info',
     tooltip: 'Shades waiting for your contrast review.',
     emptyTitle: 'Nothing in review',
     emptyDescription: 'Tasks awaiting your review appear here.',
@@ -133,13 +136,26 @@ const COLUMNS: ColumnMeta[] = [
 
 const PRIORITY_META: Record<
   Priority,
-  {label: string; variant: 'red' | 'yellow' | 'cyan'}
+  {label: string; variant: 'red' | 'yellow' | 'neutral'}
 > = {
   high: {label: 'High', variant: 'red'},
   medium: {label: 'Medium', variant: 'yellow'},
-  low: {label: 'Low', variant: 'cyan'},
+  low: {label: 'Low', variant: 'neutral'}, // neutral: low priority is not info
 };
 
+function groupByColumn(items: WorkItem[]): Record<ColumnId, WorkItem[]> {
+  const map: Record<ColumnId, WorkItem[]> = {
+    todo: [],
+    'in-progress': [],
+    'in-review': [],
+    done: [],
+  };
+  for (const item of items) {
+    map[item.column].push(item);
+  }
+  return map;
+}
+
 const INITIAL_ITEMS: WorkItem[] = [
   {
     id: 't1',
@@ -244,7 +260,7 @@ const boardColumnsStyle: CSSProperties = {
   overflowX: 'auto',
   overflowY: 'auto',
   height: '100%',
-  padding: 'var(--space-gap)',
+  padding: 'var(--spacing-6)',
 };
 const columnShellStyle: CSSProperties = {
   minWidth: 0,
@@ -258,14 +274,17 @@ const cardStyle: CSSProperties = {
   touchAction: 'none',
 };
 // The dragged card is lifted out of flow and follows the pointer. It ignores
-// pointer events so hit-testing reads the columns underneath it.
+// pointer events so hit-testing reads the columns underneath it. The clone
+// rides above shell chrome (layered 0-3) but stays under overlay surfaces
+// (menus, dialogs layer at 500+ plus the top layer), so an open menu wins.
+const DRAG_CLONE_LAYER = 100;
 const floatingStyle: CSSProperties = {
   position: 'fixed',
   insetBlockStart: 0,
   insetInlineStart: 0,
   pointerEvents: 'none',
   cursor: 'grabbing',
-  zIndex: 1000,
+  zIndex: DRAG_CLONE_LAYER,
 };
 // Placeholder marking the landing slot; matches the dragged card's height.
 const ghostStyle = (height: number): CSSProperties => ({
@@ -277,7 +296,13 @@ const toolbarDividerStyle: CSSProperties = {
   alignSelf: 'stretch',
 };
 const columnEmptyStateStyle: CSSProperties = {
-  paddingBlock: 'var(--space-gap)',
+  // 12px, not 24. This applies to an EmptyState inside a LayoutContent
+  // padding={3} (12px), so 24 rendered as 36px of block air on the empty
+  // branch against 12px on the populated one -- a 3x difference between two
+  // states of the same column, and the only nested inset in the kit that
+  // exceeded its container. The block padding is the CONTAINER's job; this
+  // one is the placeholder's room to breathe inside it.
+  paddingBlock: 'var(--spacing-3)',
 };
 
 // ============= CARD BODY =============
@@ -300,8 +325,8 @@ function BoardCardBody({
   return (
     <VStack gap={2}>
       <HStack hAlign="between" vAlign="start">
-        <HStack gap={1} vAlign="center" wrap="wrap">
-          <Badge label={item.ref} variant="neutral" />
+        <HStack gap={2} vAlign="center" wrap="wrap">
+          <Token label={item.ref} size="sm" />
           <Badge label={priority.label} variant={priority.variant} />
         </HStack>
         <MoreMenu
@@ -317,7 +342,7 @@ function BoardCardBody({
       </HStack>
 
       <VStack gap={1}>
-        <Heading level={4}>{item.title}</Heading>
+        <Heading level={3}>{item.title}</Heading>
         <Text type="body" color="secondary" maxLines={2}>
           {item.description}
         </Text>
@@ -343,12 +368,33 @@ function BoardCard({
   onPointerDown: (e: ReactPointerEvent, id: string) => void;
   onMove: (id: string, to: ColumnId) => void;
 }) {
+  // Keyboard-move path for the core drag interaction: arrow keys move the
+  // focused card across columns. The pointer DnD below stays quarantined and
+  // untouched; this only reuses its moveItem commit.
+  const onKeyDown = (e: ReactKeyboardEvent) => {
+    const at = COLUMNS.findIndex(c => c.id === item.column);
+    const to =
+      e.key === 'ArrowRight'
+        ? COLUMNS[Math.min(COLUMNS.length - 1, at + 1)]
+        : e.key === 'ArrowLeft'
+          ? COLUMNS[Math.max(0, at - 1)]
+          : undefined;
+    if (!to || to.id === item.column) {
+      return;
+    }
+    e.preventDefault();
+    onMove(item.id, to.id);
+  };
   return (
     <Card
       ref={cardRef}
       padding={3}
       style={cardStyle}
-      onPointerDown={e => onPointerDown(e, item.id)}>
+      tabIndex={0}
+      role="button"
+      aria-label={`${item.title}. In ${COLUMNS.find(c => c.id === item.column)?.title}. Press left or right arrow to move across columns.`}
+      onPointerDown={e => onPointerDown(e, item.id)}
+      onKeyDown={onKeyDown}>
       <BoardCardBody item={item} onMove={onMove} />
     </Card>
   );
@@ -374,15 +420,29 @@ function BoardColumn({
         header={
           <LayoutHeader hasDivider padding={3}>
             <HStack hAlign="between" vAlign="center">
-              <HStack gap={2} vAlign="center">
+              <HStack gap={1} vAlign="center">
                 <StatusDot
                   variant={meta.variant}
                   label={`${meta.title} status`}
+                  isPulsing={meta.id === 'in-progress' || meta.id === 'in-review'}
                 />
-                <Heading level={4}>{meta.title}</Heading>
-                <Tooltip content={meta.tooltip}>
-                  <Icon icon={Info} size="sm" color="secondary" />
-                </Tooltip>
+                <Heading level={2}>{meta.title}</Heading>
+                <Popover
+                  placement="below"
+                  width="min(20rem, calc(100vw - 2 * var(--space-viewport)))"
+                  label={`${meta.title} column help`}
+                  content={
+                    <Text type="body" color="secondary">
+                      {meta.tooltip}
+                    </Text>
+                  }>
+                  <IconButton
+                    label={`About the ${meta.title} column`}
+                    icon={<Icon icon={Info} size="sm" />}
+                    variant="ghost"
+                    size="sm"
+                  />
+                </Popover>
               </HStack>
               <Text type="supporting" color="secondary" hasTabularNumbers>
                 {count}
@@ -391,7 +451,7 @@ function BoardColumn({
           </LayoutHeader>
         }
         content={
-          <LayoutContent ref={contentRef} padding={2}>
+          <LayoutContent ref={contentRef} padding={3}>
             {children ?? (
               <EmptyState
                 isCompact
@@ -459,18 +519,7 @@ export default function KanbanBoard() {
     return cb;
   };
 
-  const itemsByColumn = useMemo(() => {
-    const map: Record<ColumnId, WorkItem[]> = {
-      todo: [],
-      'in-progress': [],
-      'in-review': [],
-      done: [],
-    };
-    for (const item of items) {
-      map[item.column].push(item);
-    }
-    return map;
-  }, [items]);
+  const itemsByColumn = groupByColumn(items);
 
   const moveItem = (id: string, to: ColumnId) => {
     setItems(prev =>
@@ -491,9 +540,12 @@ export default function KanbanBoard() {
         continue;
       }
 
-      const ids = itemsByColumn[colId]
-        .filter(it => it.id !== draggedId)
-        .map(it => it.id);
+      const ids: string[] = [];
+      for (const it of itemsByColumn[colId]) {
+        if (it.id !== draggedId) {
+          ids.push(it.id);
+        }
+      }
 
       let index = ids.length;
       for (let i = 0; i < ids.length; i++) {
@@ -659,13 +711,13 @@ export default function KanbanBoard() {
       <Layout
         height="fill"
         header={
-          <LayoutHeader hasDivider padding={4}>
+          <LayoutHeader hasDivider padding={6}>
             <Toolbar
               label="Board actions"
               gap={2}
               startContent={
                 <>
-                  <Heading level={3}>Sprint Board</Heading>
+                  <Heading level={1} type="display-2">Sprint Board</Heading>
                   <Badge label={items.length} variant="neutral" />
                 </>
               }
@@ -714,8 +766,14 @@ export default function KanbanBoard() {
           </LayoutHeader>
         }
         content={
-          <LayoutContent padding={0}>
-            <Grid columns={{ minWidth: 280, max: 4 }} gap={4} style={boardColumnsStyle}>
+          <LayoutContent padding={0} isScrollable={false}>
+            <Grid
+              columns={{ minWidth: 280, max: 4 }}
+              gap={4}
+              style={boardColumnsStyle}
+              tabIndex={0}
+              role="region"
+              aria-label="Sprint board columns">
               {COLUMNS.map(meta => (
                 <BoardColumn
                   key={meta.id}
@@ -732,10 +790,11 @@ export default function KanbanBoard() {
       {drag && draggedItem ? (
         <Card
           padding={3}
-          elevation="high"
+          elevation="none"
           style={{
             ...floatingStyle,
             width: drag.width,
+            borderColor: 'var(--color-border-emphasized)',
             transform: `translate(${drag.pointerX - drag.offsetX}px, ${drag.pointerY - drag.offsetY}px)`,
           }}>
           <BoardCardBody item={draggedItem} onMove={() => {}} />

package/templates/library.template.mjs

@@ -1,6 +1,6 @@
 export default {
   type: 'page',
-  name: 'Card Grid',
+  name: 'Library',
   description: 'Browsable grid with tabs and filters',
-  category: 'marketing',
+  category: 'docs',
 };

package/templates/library.tsx

@@ -1,6 +1,12 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   L > (LH[divider] > (V[g=1] > Hd"Library"[level=1] + Tx"30 components across 5 categories"[t=body])) + (LC[p=6] > V[g=8] > (V[g=4] > TI"Search the stacks…" + (H[a=center g=3] > (SI[fill] > TgG"Filter" > OFL > Tg"All"! + Tg"Layout" + Tg"Forms" + Tg"Navigation" + Tg"Feedback" + Tg"Data") + DM"Sort")) + D + (V[g=8] > (H[j=between a=center] > Hd"Layout"[level=2] + Tx"6 items"[t=body]) + (G[c={min:280} g=4] > (C[p=0] > AR + (S.transparent[p=4] > V[g=1] > Hd"Card"[level=3] + Tx"Description"[t=supporting]))*4)))
 
-import {useState, useMemo, type CSSProperties} from 'react';
+/**
+ * Library — a browsable grid of design-system entries grouped by category.  Frame: page header (title) | content column (search, filter row, s (Frame/responsive/container: see XLE header above.)
+ */
+
+import {useState, useMemo} from 'react';
 import {Layout, LayoutHeader, LayoutContent} from '@astryxdesign/core/Layout';
 import {Text, Heading} from '@astryxdesign/core/Text';
 import {Card} from '@astryxdesign/core/Card';
@@ -17,6 +23,8 @@ import {Button} from '@astryxdesign/core/Button';
 import {EmptyState} from '@astryxdesign/core/EmptyState';
 import {Icon} from '@astryxdesign/core/Icon';
 import {Search} from 'lucide-react';
+import {SceneTile} from 'astryx-dracula/shared/scene-tile';
+import type {SceneHue} from 'astryx-dracula/shared/scene-hues';
 
 interface LibraryItem {
   id: string;
@@ -26,9 +34,11 @@ interface LibraryItem {
   type: 'Component' | 'Pattern' | 'Utility';
 }
 
-// Dracula accent per category shelf, drawn from the fixed badge vocabulary.
-const CATEGORY_HUES: Record<string, string> = {
-  Layout: 'var(--dracula-purple)',
+// One Dracula accent per category shelf. Purple stays out of the map: it is
+// reserved for interactive elements, and these hues only tint the thumbnail
+// dot, so each shelf takes a non-purple accent instead.
+const CATEGORY_HUES: Record<string, SceneHue> = {
+  Layout: 'var(--dracula-orange)',
   Forms: 'var(--dracula-cyan)',
   Navigation: 'var(--dracula-pink)',
   Feedback: 'var(--dracula-yellow)',
@@ -268,40 +278,16 @@ const ITEMS: LibraryItem[] = [
   },
 ];
 
-const thumbnailImage: CSSProperties = {
-  width: '100%',
-  height: '100%',
-  display: 'block',
-};
-
 // =============================================================================
 // Side Nav
 // =============================================================================
 
 function LibraryCard({item}: {item: LibraryItem}) {
-  const hue = CATEGORY_HUES[item.category] ?? 'var(--dracula-purple)';
+  const hue = CATEGORY_HUES[item.category] ?? 'var(--dracula-comment)';
   return (
     <Card padding={0}>
       <AspectRatio ratio={16 / 9}>
-        <svg
-          viewBox="0 0 400 300"
-          preserveAspectRatio="xMidYMid slice"
-          style={thumbnailImage}
-          role="img"
-          aria-label={`${item.name} thumbnail`}>
-          <rect width="400" height="300" fill="var(--dracula-bg-light)" />
-          <g
-            transform="translate(200 150)"
-            fill="none"
-            stroke="var(--dracula-comment)"
-            strokeWidth="5"
-            strokeLinecap="round"
-            strokeLinejoin="round">
-            <rect x="-44" y="-44" width="88" height="88" rx="5" />
-            <circle cx="18" cy="-18" r="2.5" fill={hue} stroke="none" />
-            <path d="M-34 30 L-8 0 L10 18 L20 8 L34 24" />
-          </g>
-        </svg>
+        <SceneTile label={`${item.name} thumbnail`} hue={hue} size="lg" />
       </AspectRatio>
       <Section variant="transparent" padding={4}>
         <VStack gap={1}>
@@ -323,14 +309,14 @@ function LibrarySection({
   items: LibraryItem[];
 }) {
   return (
-    <VStack gap={6}>
+    <VStack gap={8}>
       <HStack justify="between" vAlign="center">
         <Heading level={2}>{category}</Heading>
-        <Text type="supporting" color="secondary" hasTabularNumbers>
+        <Text type="body" color="secondary" hasTabularNumbers>
           {items.length} {items.length === 1 ? 'item' : 'items'}
         </Text>
       </HStack>
-      <Grid columns={{minWidth: 320}} gap={4}>
+      <Grid columns={{minWidth: 280}} gap={4}>
         {items.map(item => (
           <LibraryCard key={item.id} item={item} />
         ))}
@@ -380,32 +366,43 @@ export default function LibraryGrid() {
       }
       group.push(item);
     }
-    return order
-      .filter(cat => map.has(cat))
-      .map(cat => ({category: cat, items: map.get(cat) ?? []}));
+    const result: Array<{category: string; items: LibraryItem[]}> = [];
+    for (const cat of order) {
+      const items = map.get(cat);
+      if (items) {
+        result.push({category: cat, items});
+      }
+    }
+    return result;
   }, [activeTab, filtered]);
 
   return (
     <Layout
+      height="fill"
       header={
         <LayoutHeader hasDivider padding={6}>
-          <Heading level={1}>Library</Heading>
+          <VStack gap={1}>
+            <Heading level={1}>Library</Heading>
+            <Text type="body" color="secondary">
+              30 components across 5 categories
+            </Text>
+          </VStack>
         </LayoutHeader>
       }
       content={
         <LayoutContent padding={6}>
-          <VStack gap={6}>
+          <VStack gap={8}>
             <VStack gap={4}>
               <TextInput
                 label="Search"
                 isLabelHidden
-                placeholder="Search the stacks..."
+                placeholder="Search the stacks…"
                 value={search}
                 onChange={setSearch}
                 startIcon={Search}
                 size="lg"
               />
-              <HStack vAlign="center" gap={4}>
+              <HStack vAlign="center" gap={3}>
                 <StackItem size="fill">
                   <VStack>
                     <ToggleButtonGroup
@@ -468,7 +465,7 @@ export default function LibraryGrid() {
                 }
               />
             ) : (
-              <VStack gap={6}>
+              <VStack gap={8}>
                 {(
                   groupedSections ?? [{category: activeTab, items: filtered}]
                 ).flatMap(section => [