astryx-dracula 0.2.0 → 0.3.0

package/templates/editor.tsx

@@ -1,9 +1,19 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   L > (LP[w=320] > V[g=4] > (S[p=4] > V[g=4] > Hd"Page Editor"[level=1] + Tbar) + (V[g=4] > (TL > Tab"Blocks"! + Tab"Properties") + D + (S[p=4] > V[g=2] > Hd"Add Block"[level=3] + UL + Hd"Layers"[level=3] + UL))) + (LC > V[g=4] > C*3)
 
-import {useState, useCallback, type CSSProperties} from 'react';
+import {
+  useState,
+  useCallback,
+  type ComponentType,
+  type CSSProperties,
+  type KeyboardEvent,
+  type MouseEvent,
+  type SVGProps,
+} from 'react';
 import {useMediaQuery} from '@astryxdesign/core/hooks';
 import {Button} from '@astryxdesign/core/Button';
-import {Card} from '@astryxdesign/core/Card';
+import {SelectableCard} from '@astryxdesign/core/SelectableCard';
 import {Center} from '@astryxdesign/core/Center';
 import {Dialog} from '@astryxdesign/core/Dialog';
 import {Divider} from '@astryxdesign/core/Divider';
@@ -18,7 +28,7 @@ import {
 } from '@astryxdesign/core/Layout';
 import {Icon} from '@astryxdesign/core/Icon';
 import {List, ListItem} from '@astryxdesign/core/List';
-import {Table, proportional, pixel} from '@astryxdesign/core/Table';
+import {Table, proportional} from '@astryxdesign/core/Table';
 import type {TableColumn} from '@astryxdesign/core/Table';
 import {Section} from '@astryxdesign/core/Section';
 import {
@@ -54,10 +64,8 @@ import {
   Banknote,
   CarFront,
   CirclePlay,
-  Ellipsis,
   Lock,
 } from 'lucide-react';
-import {Spinner} from '@astryxdesign/core/Spinner';
 
 type BlockType =
   'hero' | 'text' | 'image' | 'button' | 'cards' | 'features' | 'cta';
@@ -71,7 +79,7 @@ interface Block {
 
 type ViewportSize = 'desktop' | 'tablet' | 'phone';
 type SidebarTab = 'blocks' | 'properties';
-type IconComponent = React.ComponentType<React.SVGProps<SVGSVGElement>>;
+type IconComponent = ComponentType<SVGProps<SVGSVGElement>>;
 
 const BLOCK_META: Record<BlockType, {label: string; icon: IconComponent}> = {
   hero: {label: 'Hero', icon: LayoutGrid},
@@ -100,16 +108,19 @@ const CATEGORY_ICONS: Record<string, IconComponent> = {
   Entertainment: CirclePlay,
 };
 
+// The minimums clear the 375px phone canvas once the preview card's 24px
+// padding is taken out; the widest column carries the slack and every cell
+// truncates rather than pushing the table past the card.
 const TRANSACTION_COLUMNS: TableColumn<Transaction>[] = [
   {
     key: 'name',
     header: 'Transaction',
-    width: proportional(2, {minWidth: 170}),
+    width: proportional(2, {minWidth: 104}),
     renderCell: (item: Transaction) => (
       <HStack gap={3} vAlign="center">
         <Icon icon={CATEGORY_ICONS[item.category] || Sparkles} />
         <VStack gap={0}>
-          <Text type="label" weight="semibold">
+          <Text type="body" weight="semibold">
             {item.name}
           </Text>
           <Text type="supporting" color="secondary">
@@ -122,7 +133,7 @@ const TRANSACTION_COLUMNS: TableColumn<Transaction>[] = [
   {
     key: 'date',
     header: 'Date',
-    width: proportional(1, {minWidth: 100}),
+    width: proportional(1, {minWidth: 64}),
     renderCell: (item: Transaction) => (
       <Text type="body" color="secondary" hasTabularNumbers>
         {item.date}
@@ -132,27 +143,13 @@ const TRANSACTION_COLUMNS: TableColumn<Transaction>[] = [
   {
     key: 'amount',
     header: 'Amount',
-    width: proportional(1, {minWidth: 90}),
+    width: proportional(1, {minWidth: 88}),
     renderCell: (item: Transaction) => (
-      <Text type="label" weight="semibold" hasTabularNumbers>
+      <Text type="body" weight="semibold" hasTabularNumbers>
         {item.amount}
       </Text>
     ),
   },
-  {
-    key: 'actions',
-    header: '',
-    width: pixel(44),
-    renderCell: () => (
-      <Button
-        label="More"
-        icon={<Icon icon={Ellipsis} size="sm" />}
-        variant="ghost"
-        size="sm"
-        isIconOnly
-      />
-    ),
-  },
 ];
 
 const VIEWPORT_MAX: Record<ViewportSize, number> = {
@@ -241,9 +238,9 @@ function defaultProps(type: BlockType): Record<string, unknown> {
   switch (type) {
     case 'hero':
       return {
-        heading: 'New Hero',
-        subheading: 'Subtitle goes here',
-        buttonLabel: 'Click Me',
+        heading: 'Midnight at the Castle Gates',
+        subheading: 'Gather the coven — the night is young and the candles are lit.',
+        buttonLabel: 'Enter the night',
         alignment: 'center',
       };
     case 'text':
@@ -281,10 +278,11 @@ function defaultProps(type: BlockType): Record<string, unknown> {
       };
     case 'cta':
       return {
-        heading: 'Call to Action',
-        description: 'Description text',
-        primaryLabel: 'Primary',
-        secondaryLabel: 'Secondary',
+        heading: 'Join the Midnight Coven',
+        description:
+          'Claim your seat at the table — letters from the crypt, once a moon.',
+        primaryLabel: 'Join the coven',
+        secondaryLabel: 'Read the lore',
       };
   }
 }
@@ -308,20 +306,22 @@ const canvasStyle = (maxWidth: number): CSSProperties => ({
   width: '100%',
   marginInline: 'auto',
 });
-const clickable: CSSProperties = {
-  cursor: 'pointer',
-};
-// Selection ring on the active block — Card has no `isSelected` state.
-const selectedCard: CSSProperties = {
-  outline: '2px solid',
-  outlineColor: 'var(--color-border-blue)',
-  outlineOffset: -2,
-};
-// Circular muted chip behind the CTA icon — Center handles the centering
+// `clickable` and `selectedCard` are gone: the eight block cards are core's
+// `SelectableCard` now, which supplies the cursor, the hover overlay
+// (`SelectableCard.tsx:90` reads `--color-overlay-hover`) and the selected ring
+// from the same tokens this file was hand-rolling. Worth recording why the old
+// pair was wrong twice over: it was reachable only as an inline `style` spread,
+// and a spread of a lookup is not a measurement — those values were never
+// checked against what `Card` actually renders. The 1.4.11 non-claim on the
+// ring colour is unchanged and still stands: Comment #6272A4 cannot reach
+// 3:1 on #343746 at any alpha, and core's own selected ring has that ceiling.
+// The sidebar keeps its width when the canvas is wider than the window.
+const panelShrink: CSSProperties = {flexShrink: 0};
+// Square muted chip behind the CTA icon — Center handles the centering
 // and sizing; only the surface (radius + fill) needs custom CSS.
 const iconCircle: CSSProperties = {
-  borderRadius: '50%',
-  backgroundColor: 'var(--color-background-muted)',
+  borderRadius: 'var(--radius-element)',
+  backgroundColor: 'var(--color-selection)',
 };
 
 // ---------------------------------------------------------------------------
@@ -457,37 +457,41 @@ function BlockPreview({
   onSelect: () => void;
 }) {
   const {type, props} = block;
-  const cardStyle: CSSProperties = {
-    ...clickable,
-    ...(isSelected ? selectedCard : null),
-  };
 
   switch (type) {
     case 'hero':
       return (
-        <Card padding={6} style={cardStyle} onClick={onSelect}>
+        <SelectableCard
+          padding={4}
+          label={block.label}
+          isSelected={isSelected}
+          onChange={onSelect}>
           <VStack gap={4}>
-            <Heading level={2}>
+            <Heading level={3}>
               {(props.heading as string) || 'Hero Heading'}
             </Heading>
-            <Text type="supporting" color="secondary">
-              {(props.subheading as string) || 'Subtitle text goes here'}
+            <Text type="body" color="secondary">
+              {(props.subheading as string) || 'A whisper from the crypt…'}
             </Text>
             {(props.buttonLabel as string) && (
               <Button label={props.buttonLabel as string} />
             )}
           </VStack>
-        </Card>
+          </SelectableCard>
       );
 
     case 'text':
       if (props.heading) {
         return (
-          <Card padding={6} style={cardStyle} onClick={onSelect}>
+          <SelectableCard
+          padding={4}
+          label={block.label}
+          isSelected={isSelected}
+          onChange={onSelect}>
             <EmptyState
               title={props.heading as string}
               description={props.description as string}
-              icon={<Spinner />}
+              icon={<Icon icon={FileText} color="secondary" />}
               actions={
                 (props.buttonLabel as string) ? (
                   <Button
@@ -497,32 +501,44 @@ function BlockPreview({
                 ) : undefined
               }
             />
-          </Card>
+          </SelectableCard>
         );
       }
       return (
-        <Card style={cardStyle} onClick={onSelect}>
+        <SelectableCard
+          padding={4}
+          label={block.label}
+          isSelected={isSelected}
+          onChange={onSelect}>
           <Text type="body">
-            {(props.content as string) || 'Text content goes here'}
+            {(props.content as string) || 'Ink your midnight thoughts here…'}
           </Text>
-        </Card>
+          </SelectableCard>
       );
 
     case 'image':
       return (
-        <Card style={cardStyle} onClick={onSelect}>
+        <SelectableCard
+          padding={4}
+          label={block.label}
+          isSelected={isSelected}
+          onChange={onSelect}>
           <EmptyState
             title="Image Block"
             description="Drop an image or enter a URL"
-            icon={<Icon icon={Image} />}
+            icon={<Icon icon={Image} color="secondary" />}
             isCompact
           />
-        </Card>
+          </SelectableCard>
       );
 
     case 'button':
       return (
-        <Card padding={6} style={cardStyle} onClick={onSelect}>
+        <SelectableCard
+          padding={4}
+          label={block.label}
+          isSelected={isSelected}
+          onChange={onSelect}>
           <Center>
             <Button
               label={(props.label as string) || 'Button'}
@@ -533,13 +549,17 @@ function BlockPreview({
               size={(props.size as 'sm' | 'md' | 'lg') || 'md'}
             />
           </Center>
-        </Card>
+          </SelectableCard>
       );
 
     case 'features': {
       const items = (props.items as Transaction[]) || [];
       return (
-        <Card padding={6} style={cardStyle} onClick={onSelect}>
+        <SelectableCard
+          padding={4}
+          label={block.label}
+          isSelected={isSelected}
+          onChange={onSelect}>
           <VStack gap={4}>
             <HStack gap={3} vAlign="start" hAlign="between">
               <VStack gap={1}>
@@ -547,12 +567,12 @@ function BlockPreview({
                   {(props.heading as string) || 'Features'}
                 </Heading>
                 {(props.description as string) && (
-                  <Text type="supporting" color="secondary">
+                  <Text type="body" color="secondary">
                     {props.description as string}
                   </Text>
                 )}
               </VStack>
-              <Button label="View All" variant="secondary" size="sm" />
+              <Button label="View All" variant="secondary" />
             </HStack>
             <Table
               data={items}
@@ -562,7 +582,7 @@ function BlockPreview({
               textOverflow="truncate"
             />
           </VStack>
-        </Card>
+          </SelectableCard>
       );
     }
 
@@ -570,41 +590,50 @@ function BlockPreview({
       const cardItems =
         (props.cards as Array<{title: string; description: string}>) || [];
       return (
-        <Card style={cardStyle} onClick={onSelect}>
+        <SelectableCard
+          padding={4}
+          label={block.label}
+          isSelected={isSelected}
+          onChange={onSelect}>
           <VStack gap={4}>
             <Heading level={3}>Cards</Heading>
             <Divider />
             <List density="balanced" hasDividers={false}>
-              {cardItems.map((card, i) => (
+              {cardItems.map((card) => (
                 <ListItem
-                  key={i}
+                  key={card.title}
                   label={card.title}
                   description={card.description}
                 />
               ))}
             </List>
           </VStack>
-        </Card>
+          </SelectableCard>
       );
     }
 
     case 'cta':
       return (
-        <Card padding={6} style={cardStyle} onClick={onSelect}>
+        <SelectableCard
+          padding={4}
+          label={block.label}
+          isSelected={isSelected}
+          onChange={onSelect}>
           <HStack gap={4} vAlign="start">
             <Center width={40} height={40} style={iconCircle}>
               <Icon icon={Lock} color="secondary" />
             </Center>
             <VStack gap={1}>
-              <Text type="label" weight="semibold">
+              <Heading level={3}>
                 {(props.heading as string) || 'Notice'}
-              </Text>
-              <Text type="supporting" color="secondary">
-                {(props.description as string) || 'Description text'}
+              </Heading>
+              <Text type="body" color="secondary">
+                {(props.description as string) ||
+                  'Words from the crypt gather here…'}
               </Text>
             </VStack>
           </HStack>
-        </Card>
+          </SelectableCard>
       );
 
     default:
@@ -701,7 +730,7 @@ export default function PageEditor() {
   const blocksTabContent = (
     <VStack gap={2}>
       <VStack gap={1}>
-        <Heading level={4}>Add Block</Heading>
+        <Heading level={3}>Add Block</Heading>
         <List density="balanced" hasDividers={false}>
           {(Object.keys(BLOCK_META) as BlockType[]).map(type => (
             <ListItem
@@ -717,7 +746,7 @@ export default function PageEditor() {
       </VStack>
 
       <VStack gap={1}>
-        <Heading level={4}>Layers</Heading>
+        <Heading level={3}>Layers</Heading>
         <List density="balanced" hasDividers={false}>
           {blocks.map(block => (
             <ListItem
@@ -735,7 +764,7 @@ export default function PageEditor() {
                     icon={<Icon icon={ChevronUp} size="sm" />}
                     variant="ghost"
                     size="sm"
-                    onClick={(e: React.MouseEvent) => {
+                    onClick={(e: MouseEvent) => {
                       e.stopPropagation();
                       moveBlock(block.id, -1);
                     }}
@@ -746,7 +775,7 @@ export default function PageEditor() {
                     icon={<Icon icon={ChevronDown} size="sm" />}
                     variant="ghost"
                     size="sm"
-                    onClick={(e: React.MouseEvent) => {
+                    onClick={(e: MouseEvent) => {
                       e.stopPropagation();
                       moveBlock(block.id, 1);
                     }}
@@ -757,7 +786,7 @@ export default function PageEditor() {
                     icon={<Icon icon={Trash2} size="sm" />}
                     variant="ghost"
                     size="sm"
-                    onClick={(e: React.MouseEvent) => {
+                    onClick={(e: MouseEvent) => {
                       e.stopPropagation();
                       deleteBlock(block.id);
                     }}
@@ -809,15 +838,16 @@ export default function PageEditor() {
     <LayoutPanel
       hasDivider={!isMobile}
       padding={0}
-      style={{width: isMobile ? '100%' : 320, flexShrink: 0}}>
+      width={isMobile ? '100%' : 320}
+      style={panelShrink}>
       <VStack gap={4}>
-        {/* Panel Header */}
+        {/* Panel Header — mobile/desktop branches are exclusive: exactly one h1. */}
         <Section variant="transparent" padding={4}>
           {isMobile ? (
             // Mobile: the title, an Edit button that opens the customizations
             // dialog, and the primary action.
             <HStack gap={3} vAlign="center" hAlign="between">
-              <Heading level={2}>{pageTitle}</Heading>
+              <Heading level={1} type="display-2">{pageTitle}</Heading>
               <HStack gap={2} vAlign="center">
                 <Button
                   label="Edit"
@@ -837,7 +867,7 @@ export default function PageEditor() {
                   isLabelHidden
                   value={pageTitle}
                   onChange={setPageTitle}
-                  onKeyDown={(e: React.KeyboardEvent) => {
+                  onKeyDown={(e: KeyboardEvent) => {
                     if (e.key === 'Enter') {
                       setIsEditingTitle(false);
                     }
@@ -846,7 +876,7 @@ export default function PageEditor() {
                   onBlur={() => setIsEditingTitle(false)}
                 />
               ) : (
-                <Heading level={2}>{pageTitle}</Heading>
+                <Heading level={1} type="display-2">{pageTitle}</Heading>
               )}
 
               <Toolbar
@@ -920,7 +950,7 @@ export default function PageEditor() {
                 <EmptyState
                   title="No blocks yet"
                   description="Add blocks from the sidebar to start building your page"
-                  icon={<Icon icon={CirclePlus} />}
+                  icon={<Icon icon={CirclePlus} color="secondary" />}
                 />
               )}
             </VStack>