astryx-dracula 0.4.0 → 0.5.0

package/templates/incident-console.tsx

@@ -269,17 +269,16 @@ const INCIDENTS: Incident[] = [
 
 const STATUS_ORDER: Status[] = ['investigating', 'mitigated', 'resolved'];
 
-const STATUS_LABEL: Record<Status, string> = {
-  investigating: 'Investigating',
-  mitigated: 'Mitigated',
-  resolved: 'Resolved',
-};
-
-const STATUS_TOKEN_COLOR: Record<Status, 'cyan' | 'yellow' | 'green'> = {
-  // Info vocab: an open investigation pulses cyan, never red.
-  investigating: 'cyan',
-  mitigated: 'yellow',
-  resolved: 'green',
+// One union: label for group headings + row tokens, color for row tokens.
+// SEVERITY_DOT stays separate — it keys on severity (sev1/2/3), a different
+// axis than status, so merging would conflate two domains in one map.
+const STATUS: Record<
+  Status,
+  {label: string; tokenColor: 'cyan' | 'yellow' | 'green'}
+> = {
+  investigating: {label: 'Investigating', tokenColor: 'cyan'},
+  mitigated: {label: 'Mitigated', tokenColor: 'yellow'},
+  resolved: {label: 'Resolved', tokenColor: 'green'},
 };
 
 const SEVERITY_DOT: Record<Severity, 'error' | 'warning' | 'neutral'> = {
@@ -288,6 +287,30 @@ const SEVERITY_DOT: Record<Severity, 'error' | 'warning' | 'neutral'> = {
   sev3: 'neutral',
 };
 
+// SEV badge shared by rows and the inspector: dot + uppercase word travel
+// together (a bare dot leaves SEV1/2/3 as hue alone; StatusDot's label is
+// aria-only on a role="img" span and paints nothing).
+function SeverityBadge({
+  severity,
+  isPulsing = false,
+}: {
+  severity: Severity;
+  isPulsing?: boolean;
+}) {
+  return (
+    <HStack gap={1} vAlign="center">
+      <StatusDot
+        variant={SEVERITY_DOT[severity]}
+        label={severity.toUpperCase()}
+        isPulsing={isPulsing}
+      />
+      <Text type="supporting" color="secondary">
+        {severity.toUpperCase()}
+      </Text>
+    </HStack>
+  );
+}
+
 const SERVICE_VALUES = [
   {value: 'checkout-api', label: 'checkout-api'},
   {value: 'search-indexer', label: 'search-indexer'},
@@ -350,7 +373,7 @@ function IncidentRows({
                 floor. The group heading is the string this sidebar is scanned
                 for. Hierarchy comes from the two type roles (principle 6),
                 not from dimming the count. */}
-            <Text type="label">{STATUS_LABEL[group.status]}</Text>
+            <Text type="label">{STATUS[group.status].label}</Text>
             <Text type="supporting" hasTabularNumbers>
               {group.items.length}
             </Text>
@@ -362,27 +385,17 @@ function IncidentRows({
                 label={incident.title}
                 description={`${incident.id} · ${incident.service} · ${incident.impact}`}
                 startContent={
-                  // StatusDot's label is aria-label on a role="img" span
-                  // (core StatusDot.js:107-120), so it reaches assistive tech
-                  // and paints nothing. A bare dot leaves SEV1/2/3 as hue
-                  // alone. Dot and word travel together, as at :751-757.
-                  <HStack gap={1} vAlign="center">
-                    <StatusDot
-                      variant={SEVERITY_DOT[incident.severity]}
-                      label={incident.severity.toUpperCase()}
-                      isPulsing={incident.status === 'investigating'}
-                    />
-                    <Text type="supporting" color="secondary">
-                      {incident.severity.toUpperCase()}
-                    </Text>
-                  </HStack>
+                  <SeverityBadge
+                    severity={incident.severity}
+                    isPulsing={incident.status === 'investigating'}
+                  />
                 }
                 endContent={
                   <HStack gap={3} vAlign="center">
                     <Token
                       size="sm"
-                      color={STATUS_TOKEN_COLOR[incident.status]}
-                      label={STATUS_LABEL[incident.status]}
+                      color={STATUS[incident.status].tokenColor}
+                      label={STATUS[incident.status].label}
                     />
                     <Timestamp
                       value={incident.startedAt}
@@ -414,27 +427,23 @@ function IncidentInspector({incident}: {incident: Incident}) {
     <VStack gap={4} style={styles.inspector}>
       <VStack gap={2}>
         <HStack gap={1} vAlign="center">
-          <StatusDot
-            variant={SEVERITY_DOT[incident.severity]}
-            label={incident.severity.toUpperCase()}
+          <SeverityBadge
+            severity={incident.severity}
             isPulsing={incident.status === 'investigating'}
           />
-          <Text type="supporting" color="secondary">
-            {incident.severity.toUpperCase()}
-          </Text>
           <Text type="supporting" color="secondary">
             {incident.id}
           </Text>
           <Token
             size="sm"
-            color={STATUS_TOKEN_COLOR[incident.status]}
-            label={STATUS_LABEL[incident.status]}
+            color={STATUS[incident.status].tokenColor}
+            label={STATUS[incident.status].label}
           />
         </HStack>
         <Heading level={2}>{incident.title}</Heading>
       </VStack>
 
-      <HStack gap={2}>
+      <HStack gap={2} wrap="wrap">
         <Button label={nextAction} variant="primary" />
         <Button label="Escalate" variant="secondary" />
       </HStack>
@@ -535,21 +544,14 @@ export default function IncidentConsole() {
   // phone, and the counter beside it then wraps too and detaches into the
   // corner. Stacking keeps the counter on the title's own line at any width
   // the title needs more than one, and costs nothing at desktop.
-  const titleGroup = isNarrow ? (
-    <VStack gap={1}>
+  const titleGroup = (
+    <HStack gap={2} vAlign="center" wrap="wrap">
       <Heading level={1} type="display-2">
         Night watch
       </Heading>
       <Text type="supporting" color="secondary" hasTabularNumbers>
         {openCount} investigating
       </Text>
-    </VStack>
-  ) : (
-    <HStack gap={2} vAlign="center">
-      <Heading level={1} type="display-2">Night watch</Heading>
-      <Text type="supporting" color="secondary" hasTabularNumbers>
-        {openCount} investigating
-      </Text>
     </HStack>
   );
 

package/templates/kanban-board.tsx

@@ -6,7 +6,6 @@ import {
   useEffect,
   useRef,
   useState,
-  type CSSProperties,
   type PointerEvent as ReactPointerEvent,
   type KeyboardEvent as ReactKeyboardEvent,
   type ReactNode,
@@ -253,58 +252,11 @@ const DRAG_THRESHOLD = 5;
 
 // ============= STYLES =============
 
-// Responsive board grid: columns collapse to fewer tracks, then a single
-// stack. The board keeps its own internal scroll as the only scroller;
-// grid children get room to shrink so nothing forces page-level scroll.
-const boardColumnsStyle: CSSProperties = {
-  overflowX: 'auto',
-  overflowY: 'auto',
-  height: '100%',
-  padding: 'var(--spacing-6)',
-};
-const columnShellStyle: CSSProperties = {
-  minWidth: 0,
-  height: '100%',
-};
-// Cards stay static per the Dracula brand (no hover lift); the floating drag
-// clone floats above the board with the high shadow token instead.
-const cardStyle: CSSProperties = {
-  cursor: 'grab',
-  userSelect: 'none',
-  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. 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: DRAG_CLONE_LAYER,
-};
-// Placeholder marking the landing slot; matches the dragged card's height.
-const ghostStyle = (height: number): CSSProperties => ({
-  height,
-  borderRadius: 'var(--radius-element)',
-  backgroundColor: 'var(--color-background-muted)',
-});
-const toolbarDividerStyle: CSSProperties = {
-  alignSelf: 'stretch',
-};
-const columnEmptyStateStyle: CSSProperties = {
-  // 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 =============
 
 // Shared card contents, rendered both in the column list and inside the
@@ -332,12 +284,7 @@ function BoardCardBody({
         <MoreMenu
           label="Work item actions"
           size="sm"
-          items={[
-            {label: 'Open', onClick: () => {}},
-            {label: 'Assign to me', onClick: () => {}},
-            {type: 'divider'},
-            ...moveTargets,
-          ]}
+          items={[{label: 'Open'}, {label: 'Assign to me'}, {type: 'divider'}, ...moveTargets]}
         />
       </HStack>
 
@@ -389,7 +336,9 @@ function BoardCard({
     <Card
       ref={cardRef}
       padding={3}
-      style={cardStyle}
+      // Cards stay static per the Dracula brand (no hover lift); the floating
+      // drag clone floats above the board with the high shadow token instead.
+      style={{cursor: 'grab', userSelect: 'none', touchAction: 'none'}}
       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.`}
@@ -414,7 +363,7 @@ function BoardColumn({
   children: ReactNode;
 }) {
   return (
-    <Card variant="muted" padding={0} style={columnShellStyle}>
+    <Card variant="muted" padding={0} style={{minWidth: 0, height: '100%'}}>
       <Layout
         height="fill"
         header={
@@ -455,7 +404,10 @@ function BoardColumn({
             {children ?? (
               <EmptyState
                 isCompact
-                style={columnEmptyStateStyle}
+                // 12px, not 24: this EmptyState sits inside a LayoutContent
+                // padding={3} (12px), so 24 would render as 36px of block air
+                // on the empty branch against 12px on the populated one.
+                style={{paddingBlock: 'var(--spacing-3)'}}
                 icon={
                   <Icon icon={meta.emptyIcon} size="lg" color="secondary" />
                 }
@@ -488,36 +440,22 @@ export default function KanbanBoard() {
   );
   const teardownRef = useRef<(() => void) | null>(null);
 
-  // Stable ref callbacks so registering an element never churns across renders.
-  const getColumnRef = (id: ColumnId) => {
-    let cb = columnRefCbs.current.get(id);
-    if (!cb) {
-      cb = el => {
-        if (el) {
-          columnEls.current.set(id, el);
-        } else {
-          columnEls.current.delete(id);
-        }
-      };
-      columnRefCbs.current.set(id, cb);
-    }
-    return cb;
-  };
-
-  const getCardRef = (id: string) => {
-    let cb = cardRefCbs.current.get(id);
+  // One helper for both registries: stable per-key ref callbacks so
+  // registering an element never churns across renders.
+  function refCallback<K>(cbs: Map<K, (el: HTMLDivElement | null) => void>, els: Map<K, HTMLElement>, key: K) {
+    let cb = cbs.get(key);
     if (!cb) {
       cb = el => {
         if (el) {
-          cardEls.current.set(id, el);
+          els.set(key, el);
         } else {
-          cardEls.current.delete(id);
+          els.delete(key);
         }
       };
-      cardRefCbs.current.set(id, cb);
+      cbs.set(key, cb);
     }
     return cb;
-  };
+  }
 
   const itemsByColumn = groupByColumn(items);
 
@@ -688,7 +626,7 @@ export default function KanbanBoard() {
       <BoardCard
         key={it.id}
         item={it}
-        cardRef={getCardRef(it.id)}
+        cardRef={refCallback(cardRefCbs.current, cardEls.current, it.id)}
         onPointerDown={onCardPointerDown}
         onMove={moveItem}
       />
@@ -699,7 +637,15 @@ export default function KanbanBoard() {
       nodes.splice(
         index,
         0,
-        <VStack key="drag-ghost" style={ghostStyle(ghostTarget.height)} />,
+        <VStack
+          key="drag-ghost"
+          // Placeholder marking the landing slot; matches the dragged card's height.
+          style={{
+            height: ghostTarget.height,
+            borderRadius: 'var(--radius-element)',
+            backgroundColor: 'var(--color-background-muted)',
+          }}
+        />,
       );
     }
 
@@ -739,7 +685,7 @@ export default function KanbanBoard() {
                   <Divider
                     variant="strong"
                     orientation="vertical"
-                    style={toolbarDividerStyle}
+                    style={{alignSelf: 'stretch'}}
                   />
                   <HStack gap={1} vAlign="center" wrap="wrap">
                     <IconButton
@@ -770,7 +716,7 @@ export default function KanbanBoard() {
             <Grid
               columns={{ minWidth: 280, max: 4 }}
               gap={4}
-              style={boardColumnsStyle}
+              style={{overflowX: 'auto', overflowY: 'auto', height: '100%', padding: 'var(--spacing-6)'}}
               tabIndex={0}
               role="region"
               aria-label="Sprint board columns">
@@ -779,7 +725,7 @@ export default function KanbanBoard() {
                   key={meta.id}
                   meta={meta}
                   count={itemsByColumn[meta.id].length}
-                  contentRef={getColumnRef(meta.id)}>
+                  contentRef={refCallback(columnRefCbs.current, columnEls.current, meta.id)}>
                   {renderColumnCards(meta.id)}
                 </BoardColumn>
               ))}
@@ -792,7 +738,12 @@ export default function KanbanBoard() {
           padding={3}
           elevation="none"
           style={{
-            ...floatingStyle,
+            position: 'fixed',
+            insetBlockStart: 0,
+            insetInlineStart: 0,
+            pointerEvents: 'none',
+            cursor: 'grabbing',
+            zIndex: DRAG_CLONE_LAYER,
             width: drag.width,
             borderColor: 'var(--color-border-emphasized)',
             transform: `translate(${drag.pointerX - drag.offsetX}px, ${drag.pointerY - drag.offsetY}px)`,

package/templates/library.tsx

@@ -6,7 +6,7 @@
  * 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 {useState} from 'react';
 import {Layout, LayoutHeader, LayoutContent} from '@astryxdesign/core/Layout';
 import {Text, Heading} from '@astryxdesign/core/Text';
 import {Card} from '@astryxdesign/core/Card';
@@ -301,80 +301,48 @@ function LibraryCard({item}: {item: LibraryItem}) {
   );
 }
 
-function LibrarySection({
-  category,
-  items,
-}: {
-  category: string;
-  items: LibraryItem[];
-}) {
-  return (
-    <VStack gap={8}>
-      <HStack justify="between" vAlign="center">
-        <Heading level={2}>{category}</Heading>
-        <Text type="body" color="secondary" hasTabularNumbers>
-          {items.length} {items.length === 1 ? 'item' : 'items'}
-        </Text>
-      </HStack>
-      <Grid columns={{minWidth: 280}} gap={4}>
-        {items.map(item => (
-          <LibraryCard key={item.id} item={item} />
-        ))}
-      </Grid>
-    </VStack>
-  );
-}
-
 export default function LibraryGrid() {
   const [activeTab, setActiveTab] = useState('All');
   const [search, setSearch] = useState('');
   const [sortOrder, setSortOrder] = useState('A-Z');
 
-  const filtered = useMemo(() => {
-    let items =
-      activeTab === 'All' ? ITEMS : ITEMS.filter(i => i.category === activeTab);
-    if (search.trim()) {
-      const q = search.toLowerCase();
-      items = items.filter(
+  // ITEMS is module-static (only .filter over it and .sort over copies below),
+  // so plain consts recompute cheaply per render with no memo needed.
+  const query = search.trim().toLowerCase();
+  const visible =
+    activeTab === 'All' ? ITEMS : ITEMS.filter(i => i.category === activeTab);
+  const searched = query
+    ? visible.filter(
         i =>
-          i.name.toLowerCase().includes(q) ||
-          i.description.toLowerCase().includes(q),
-      );
-    }
-    const sorted = [...items];
-    if (sortOrder === 'A-Z') {
-      sorted.sort((a, b) => a.name.localeCompare(b.name));
-    } else if (sortOrder === 'Z-A') {
-      sorted.sort((a, b) => b.name.localeCompare(a.name));
-    } else if (sortOrder === 'Newest') {
-      sorted.sort((a, b) => Number(b.id) - Number(a.id));
-    }
-    return sorted;
-  }, [activeTab, search, sortOrder]);
+          i.name.toLowerCase().includes(query) ||
+          i.description.toLowerCase().includes(query),
+      )
+    : visible;
+  const filtered = [...searched];
+  if (sortOrder === 'A-Z') {
+    filtered.sort((a, b) => a.name.localeCompare(b.name));
+  } else if (sortOrder === 'Z-A') {
+    filtered.sort((a, b) => b.name.localeCompare(a.name));
+  } else if (sortOrder === 'Newest') {
+    filtered.sort((a, b) => Number(b.id) - Number(a.id));
+  }
 
-  const groupedSections = useMemo(() => {
-    if (activeTab !== 'All') {
-      return null;
-    }
+  let groupedSections: Array<{category: string; items: LibraryItem[]}> | null =
+    null;
+  if (activeTab === 'All') {
     const order = CATEGORIES.filter(c => c !== 'All');
-    const map = new Map<string, LibraryItem[]>();
+    const byCategory: Record<string, LibraryItem[]> = {};
     for (const item of filtered) {
-      let group = map.get(item.category);
-      if (!group) {
-        group = [];
-        map.set(item.category, group);
-      }
-      group.push(item);
+      (byCategory[item.category] ??= []).push(item);
     }
-    const result: Array<{category: string; items: LibraryItem[]}> = [];
+    groupedSections = [];
     for (const cat of order) {
-      const items = map.get(cat);
+      const items = byCategory[cat];
       if (items) {
-        result.push({category: cat, items});
+        groupedSections.push({category: cat, items});
       }
     }
-    return result;
-  }, [activeTab, filtered]);
+  }
 
   return (
     <Layout
@@ -470,11 +438,19 @@ export default function LibraryGrid() {
                   groupedSections ?? [{category: activeTab, items: filtered}]
                 ).flatMap(section => [
                   <Divider key={`d-${section.category}`} />,
-                  <LibrarySection
-                    key={section.category}
-                    category={section.category}
-                    items={section.items}
-                  />,
+                  <VStack key={section.category} gap={8}>
+                    <HStack justify="between" vAlign="center">
+                      <Heading level={2}>{section.category}</Heading>
+                      <Text type="body" color="secondary" hasTabularNumbers>
+                        {section.items.length} {section.items.length === 1 ? 'item' : 'items'}
+                      </Text>
+                    </HStack>
+                    <Grid columns={{minWidth: 280}} gap={4}>
+                      {section.items.map(item => (
+                        <LibraryCard key={item.id} item={item} />
+                      ))}
+                    </Grid>
+                  </VStack>,
                 ])}
               </VStack>
             )}