astryx-dracula 0.2.0 → 0.3.0

package/templates/table-page-shoe-store-heatmap.tsx

@@ -1,74 +1,20 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   L > (LH[divider] > H[g2 a=center] > Hd"Midnight Kicks"[level=1] + IB"Filter"[variant=ghost] + IB"Export"[variant=ghost] + B.primary"New order") + (LC[p3] > V[g4] > (V[g3] > C[p=4] + Tx"Daily revenue"[t=supporting] + (H[g2 a=center] > Ic + Tx"Revenue"[t=supporting])) + (T[hover] > (TR > THC"Order" + THC"Product" + THC"Amount" + THC"Customer" + THC"Email" + THC"Status" + THC"Date") + (TR > TC"ORD-1001" + TC"Air Max 90" + TC"$130" + TC"Sarah Chen" + TC"sarah.chen@acme.co" + (TC > Tk.green"Completed") + TC"2025-01-12")*5))
 
-import type {CSSProperties} from 'react';
-import {
-  VStack,
-  HStack,
-  StackItem,
-  Layout,
-  LayoutContent,
-  LayoutHeader,
-} from '@astryxdesign/core/Layout';
-import {Text, Heading} from '@astryxdesign/core/Text';
-import {Button} from '@astryxdesign/core/Button';
-import {IconButton} from '@astryxdesign/core/IconButton';
-import {Icon} from '@astryxdesign/core/Icon';
-import {Badge} from '@astryxdesign/core/Badge';
-import {Card} from '@astryxdesign/core/Card';
-import {Link} from '@astryxdesign/core/Link';
-import {Table, proportional, pixel} from '@astryxdesign/core/Table';
-import type {TableColumn} from '@astryxdesign/core/Table';
-import {Filter, Download, Plus, Square} from 'lucide-react';
+/**
+ * Midnight Kicks — sneaker order desk: a daily revenue line over the order log.  Frame: page header (title + icon actions) | content column (c (Frame/responsive/container: see XLE header above.)
+ */
 
-// ============= ICONS (verified lucide-react exports) =============
-// Filter ← FunnelIcon, Download ← ArrowDownTrayIcon, Plus ← PlusIcon.
-// Square marks the chart legend swatch.
-
-const swatchStyle: CSSProperties = {flexShrink: 0};
-
-// Rounded product swatch: Dracula surface with a per-product accent glyph.
-function ProductSwatch({accent, label}: {accent: string; label: string}) {
-  return (
-    <svg
-      viewBox="0 0 36 36"
-      width={36}
-      height={36}
-      style={swatchStyle}
-      role="img"
-      aria-label={`${label} swatch`}>
-      <rect width={36} height={36} rx={5} fill="var(--dracula-bg-light)" />
-      <rect
-        x={1}
-        y={1}
-        width={34}
-        height={34}
-        rx={4}
-        fill="none"
-        stroke="var(--color-widget-content-border)"
-      />
-      <circle cx={18} cy={18} r={7} fill="none" stroke={accent} strokeWidth={3} />
-    </svg>
-  );
-}
+import {OrderDesk, type OrderDeskRow} from 'astryx-dracula/shared/order-desk';
+import type {SceneHue} from 'astryx-dracula/shared/scene-hues';
 
 // ============= DATA =============
 
 type ProductCategory =
   'Running' | 'Lifestyle' | 'Basketball' | 'Training' | 'Skateboarding';
 
-interface OrderRow extends Record<string, unknown> {
-  id: string;
-  customer: string;
-  email: string;
-  product: string;
-  category: ProductCategory;
-  imageIndex: number;
-  amount: number;
-  status: 'completed' | 'processing' | 'shipped' | 'refunded';
-  date: string;
-}
-
-const PRODUCTS = [
+const PRODUCTS: Array<{name: string; category: string; accent: SceneHue; price: number}> = [
   {
     name: 'Air Max 90',
     category: 'Lifestyle' as ProductCategory,
@@ -90,7 +36,7 @@ const PRODUCTS = [
   {
     name: 'Jordan 1 Retro',
     category: 'Basketball' as ProductCategory,
-    accent: 'var(--dracula-purple)',
+    accent: 'var(--dracula-red)',
     price: 180,
   },
   {
@@ -107,7 +53,7 @@ const PRODUCTS = [
   },
 ];
 
-const orders: OrderRow[] = [
+const orders: OrderDeskRow[] = [
   // Sun (0) — spread across 9am–5pm, very hot
   {
     id: 'ORD-1001',
@@ -806,233 +752,18 @@ const revenueData = [
   {date: 'Jan 15', revenue: 7100},
 ];
 
-const statusColor: Record<string, 'green' | 'blue' | 'orange' | 'red'> = {
-  completed: 'green',
-  shipped: 'blue',
-  processing: 'orange',
-  refunded: 'red',
-};
-
-const columns: TableColumn<OrderRow>[] = [
-  {
-    key: 'id',
-    header: 'Order',
-    width: pixel(110),
-    renderCell: (item: OrderRow) => (
-      <Link href="#/templates/table-page-shoe-store-heatmap" isStandalone>
-        {item.id}
-      </Link>
-    ),
-  },
-  {
-    key: 'product',
-    header: 'Product',
-    width: proportional(3),
-    renderCell: (item: OrderRow) => (
-      <HStack gap={3} vAlign="center">
-        <ProductSwatch
-          accent={PRODUCTS[item.imageIndex].accent}
-          label={item.product}
-        />
-        <VStack gap={0}>
-          <Text type="body">{item.product}</Text>
-          <Text type="supporting" color="secondary">
-            {item.category}
-          </Text>
-        </VStack>
-      </HStack>
-    ),
-  },
-  {
-    key: 'amount',
-    header: 'Amount',
-    width: pixel(90),
-    renderCell: (item: OrderRow) => (
-      <Text type="body" hasTabularNumbers>
-        ${item.amount}
-      </Text>
-    ),
-  },
-  {
-    key: 'customer',
-    header: 'Customer',
-    width: proportional(2),
-    renderCell: (item: OrderRow) => <Text type="body">{item.customer}</Text>,
-  },
-  {
-    key: 'email',
-    header: 'Email',
-    width: proportional(2),
-    renderCell: (item: OrderRow) => <Text type="body">{item.email}</Text>,
-  },
-  {
-    key: 'status',
-    header: 'Status',
-    width: pixel(120),
-    renderCell: (item: OrderRow) => (
-      <Badge
-        label={item.status.charAt(0).toUpperCase() + item.status.slice(1)}
-        variant={statusColor[item.status]}
-      />
-    ),
-  },
-  {
-    key: 'date',
-    header: 'Date',
-    width: pixel(110),
-    renderCell: (item: OrderRow) => (
-      <Text type="body" hasTabularNumbers>
-        {item.date}
-      </Text>
-    ),
-  },
-];
-
-// ============= REVENUE CHART (hand SVG, Dracula ramp) =============
-
-const revenueLine = 'var(--dracula-cyan)';
-
-function RevenueChart() {
-  const W = 540;
-  const H = 200;
-  const padLeft = 44;
-  const padRight = 12;
-  const padTop = 12;
-  const baseline = 164;
-  const max = 10000;
-  const plotW = W - padLeft - padRight;
-  const plotH = baseline - padTop;
-  const points = revenueData.map((d, i) => ({
-    ...d,
-    x: padLeft + (i / (revenueData.length - 1)) * plotW,
-    y: baseline - (d.revenue / max) * plotH,
-  }));
-  const linePath = points
-    .map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x.toFixed(1)},${p.y.toFixed(1)}`)
-    .join(' ');
-  const areaPath = `${linePath} L${points[points.length - 1].x.toFixed(1)},${baseline} L${points[0].x.toFixed(1)},${baseline} Z`;
-  const gridTicks = [0, 2000, 4000, 6000, 8000, 10000];
-  return (
-    <VStack gap={3}>
-      <Card
-        padding={3}
-        style={{
-          backgroundColor: 'var(--color-background)',
-          border: 'var(--border-width) solid var(--color-separator)',
-        }}>
-        <svg
-          viewBox={`0 0 ${W} ${H}`}
-          width="100%"
-          role="img"
-          aria-label="Daily revenue, January 1 to 15">
-          {gridTicks.map(tick => {
-            const y = baseline - (tick / max) * plotH;
-            return (
-              <g key={tick}>
-                <line
-                  x1={padLeft}
-                  y1={y}
-                  x2={W - padRight}
-                  y2={y}
-                  stroke="var(--color-separator)"
-                  strokeDasharray={tick === 0 ? undefined : '3 3'}
-                  opacity={tick === 0 ? 1 : 0.5}
-                />
-                <text
-                  x={padLeft - 6}
-                  y={y + 3}
-                  textAnchor="end"
-                  fontSize={9}
-                  fill="var(--color-text-paragraph)"
-                  fontFamily="var(--font-family-mono)">
-                  {tick === 0 ? '$0' : `$${tick / 1000}k`}
-                </text>
-              </g>
-            );
-          })}
-          <path d={areaPath} fill={revenueLine} opacity={0.25} />
-          <path
-            d={linePath}
-            fill="none"
-            stroke={revenueLine}
-            strokeWidth={2}
-            strokeLinejoin="round"
-            strokeLinecap="round"
-          />
-          {points.map(
-            (p, i) =>
-              (i % 3 === 0 || i === points.length - 1) && (
-                <text
-                  key={p.date}
-                  x={i === points.length - 1 ? W - padRight - 2 : p.x}
-                  y={H - 8}
-                  textAnchor={i === points.length - 1 ? 'end' : 'middle'}
-                  fontSize={9}
-                  fill="var(--color-text-paragraph)"
-                  fontFamily="var(--font-family-mono)">
-                  {p.date}
-                </text>
-              ),
-          )}
-        </svg>
-      </Card>
-      <Text type="supporting" color="secondary">
-        Daily revenue · Jan 1–15
-      </Text>
-      <HStack gap={2} vAlign="center">
-        <Icon icon={Square} size="xsm" style={{color: revenueLine}} />
-        <Text type="supporting" color="secondary">
-          Revenue
-        </Text>
-      </HStack>
-    </VStack>
-  );
-}
-
-// ============= PAGE =============
+// ============= PAGE (parametric OrderDesk; catalogue + rows + scale only) =============
 
 export default function ShoeStoreTable() {
   return (
-    <Layout
-      height="fill"
-      header={
-        <LayoutHeader hasDivider>
-          <HStack gap={2} vAlign="center">
-            <StackItem size="fill">
-              <Heading level={1}>Midnight Kicks</Heading>
-            </StackItem>
-            <IconButton
-              label="Filter"
-              icon={<Icon icon={Filter} size="sm" />}
-              variant="ghost"
-              tooltip="Filter"
-            />
-            <IconButton
-              label="Export"
-              icon={<Icon icon={Download} size="sm" />}
-              variant="ghost"
-              tooltip="Export"
-            />
-            <Button label="New order" icon={<Icon icon={Plus} size="sm" />} />
-          </HStack>
-        </LayoutHeader>
-      }
-      content={
-        <LayoutContent padding={3}>
-          <VStack gap={4}>
-            <RevenueChart />
-
-            <Table<OrderRow>
-              data={orders}
-              columns={columns}
-              idKey="id"
-              density="balanced"
-              dividers="rows"
-              hasHover
-            />
-          </VStack>
-        </LayoutContent>
-      }
+    <OrderDesk
+      title="Midnight Kicks"
+      selfHash="#/templates/table-page-shoe-store-heatmap"
+      products={PRODUCTS}
+      orders={orders}
+      revenueData={revenueData}
+      chartMax={10000}
+      gridTicks={[0, 2000, 4000, 6000, 8000, 10000]}
     />
   );
 }

package/templates/table-page.tsx

@@ -1,4 +1,10 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   L > (LH[divider] > H[g=2 a=center] > (SI[fill] > Hd"Familiars"[level=1]) + IB"Filter"[variant=ghost] + IB"Download"[variant=ghost] + B.primary"Add") + (LC[p=3] > V[g=4] > PS + (T[hover] > (TR > THC*3) + (TR > TC*3)*3))
+
+/**
+ * Familiars — the full roster of the crypt's companions, with a PowerSearch field filter bar above one dense table. (Frame/responsive/container: see XLE header above.)
+ */
 
 import {useState, useMemo} from 'react';
 import {
@@ -41,7 +47,7 @@ const allFamiliars: FamiliarRow[] = [
     name: 'Vlad',
     kind: 'Vampire Bat',
     biography:
-      'I love brooding in the belfry and hate garlic bread — you might wonder how well those things mix and the answer is "not that well."',
+      'I love brooding in the belfry and hate garlic bread, and you might wonder how well those things mix. The answer is "not that well."',
     age: 17,
   },
   {
@@ -121,7 +127,7 @@ const allFamiliars: FamiliarRow[] = [
     name: 'Bruno',
     kind: 'Gargoyle',
     biography:
-      "Bruno is a gargoyle. He's a stony fellow — I never needed more than a day to teach him to scowl.",
+      "Bruno is a gargoyle. He's a stony fellow. I never needed more than a day to teach him to scowl.",
     age: 5,
   },
   {
@@ -398,22 +404,34 @@ export default function TablePage() {
     <Layout
       height="fill"
       header={
-        <LayoutHeader hasDivider>
+        <LayoutHeader hasDivider padding={6}>
           <HStack gap={2} vAlign="center">
             <StackItem size="fill">
-              <Heading level={1}>Familiars</Heading>
+              {/* maxLines={1} for symmetry with the other order-desk headers.
+                  "Familiars" measures 189px at 35px and fits on one line today,
+                  so this is a floor against a longer title rather than a fix
+                  for a visible break — but the row has 129.2px of controls and
+                  24px of gaps against a 342px content box, so it has ~0px of
+                  slack. Tooltip keeps the full value reachable (SC 1.4.10). */}
+              <Heading level={1} type="display-2" maxLines={1}>Familiars</Heading>
             </StackItem>
             <IconButton
               label="Filter"
               icon={<Icon icon={Filter} size="sm" />}
               variant="ghost"
+              tooltip="Filter"
             />
             <IconButton
               label="Download"
               icon={<Icon icon={Download} size="sm" />}
               variant="ghost"
+              tooltip="Export"
+            />
+            <Button
+              label="Add"
+              variant="primary"
+              icon={<Icon icon={Plus} size="sm" />}
             />
-            <Button label="Add" icon={<Icon icon={Plus} size="sm" />} />
           </HStack>
         </LayoutHeader>
       }
@@ -426,7 +444,7 @@ export default function TablePage() {
               onChange={newFilters => {
                 setFilters([...newFilters]);
               }}
-              placeholder="Search familiars..."
+              placeholder="Search familiars…"
               resultCount={filtered.length}
             />
             <Table<FamiliarRow>

package/templates/table.tsx

@@ -1,11 +1,12 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   L > (LH[divider] > H[a=center j=between] > Hd"Artifacts"[level=1] + B.primary"Add artifact") + (LC > T[hover] > (TR > THC"Name" + THC"Status" + THC"Updated" + THC"Actions") + (TR > TC"Blood Vial" + (TC > SD.success + Tx"Active") + TC"2025-01-15" + (TC > B.secondary"Edit"))*3)
 
-import {useState} from 'react';
 import {Layout, LayoutHeader, LayoutContent, HStack} from '@astryxdesign/core/Layout';
 import {Text, Heading} from '@astryxdesign/core/Text';
 import {Button} from '@astryxdesign/core/Button';
 import {Table} from '@astryxdesign/core/Table';
-import {Badge} from '@astryxdesign/core/Badge';
+import {StatusDot} from '@astryxdesign/core/StatusDot';
 import type {TableColumn} from '@astryxdesign/core/Table';
 
 type Relic = {
@@ -15,6 +16,16 @@ type Relic = {
   updatedAt: string;
 };
 
+const STATUS_LABEL: Record<Relic['status'], string> = {
+  active: 'Active',
+  inactive: 'Inactive',
+};
+
+const STATUS_VARIANT: Record<Relic['status'], 'success' | 'neutral'> = {
+  active: 'success',
+  inactive: 'neutral',
+};
+
 const SAMPLE_DATA: Relic[] = [
   {id: '1', name: 'Blood Vial', status: 'active', updatedAt: '2025-01-15'},
   {id: '2', name: 'Garlic Charm', status: 'inactive', updatedAt: '2025-01-14'},
@@ -35,10 +46,15 @@ const columns: TableColumn<Relic>[] = [
     key: 'status',
     header: 'Status',
     renderCell: (item: Relic) => (
-      <Badge
-        variant={item.status === 'active' ? 'success' : 'neutral'}
-        label={item.status.charAt(0).toUpperCase() + item.status.slice(1)}
-      />
+      <HStack gap={1} vAlign="center">
+        <StatusDot
+          variant={STATUS_VARIANT[item.status]}
+          label={STATUS_LABEL[item.status]}
+        />
+        <Text type="body" color="secondary">
+          {STATUS_LABEL[item.status]}
+        </Text>
+      </HStack>
     ),
   },
   {
@@ -62,10 +78,11 @@ const columns: TableColumn<Relic>[] = [
 ];
 
 export default function SimpleTable() {
-  const [data] = useState<Relic[]>(SAMPLE_DATA);
+  const data = SAMPLE_DATA;
 
   return (
     <Layout
+      height="auto"
       header={
         <LayoutHeader hasDivider>
           <HStack vAlign="center" hAlign="between">

package/templates/tech-report.template.mjs

@@ -0,0 +1,6 @@
+export default {
+  type: 'page',
+  name: 'Technical Report',
+  description: 'Chapter rail, paper walkthrough, and outline',
+  category: 'docs',
+};