astryx-dracula 0.3.0 → 0.4.0

package/package.json

@@ -8,7 +8,8 @@
   },
   "description": "Pure Dracula brand theme for Astryx React sites. Dark-only tokens, syntax highlighting, and chart colors with prebuilt CSS.",
   "devDependencies": {
-    "@astryxdesign/cli": "^0.3.0",
+    "@astryxdesign/cli": "0.6.3",
+    "@astryxdesign/core": "0.6.3",
     "@types/bun": "^1.4.2",
     "@types/node": "^26.5.1",
     "@types/react": "^19.3.0",
@@ -42,8 +43,8 @@
     "./shared/sparkline": "./shared/sparkline.tsx",
     "./shared/sso-icons": "./shared/sso-icons.tsx",
     ".": {
-      "default": "./astryx-dracula.js",
-      "types": "./astryx-dracula.d.ts"
+      "types": "./astryx-dracula.d.ts",
+      "default": "./astryx-dracula.js"
     },
     "./astryx.integration.mjs": "./astryx.integration.mjs",
     "./package.json": "./package.json",
@@ -60,6 +61,7 @@
     "astryx-dracula.js",
     "astryx-dracula.variants.d.ts",
     "fonts/",
+    "icons.mjs",
     "icons.tsx",
     "shared/",
     "theme.css",
@@ -80,7 +82,7 @@
   "license": "MIT",
   "name": "astryx-dracula",
   "peerDependencies": {
-    "@astryxdesign/core": "^0.3.0",
+    "@astryxdesign/core": "^0.6.3",
     "lucide-react": "^1.45.0",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
@@ -94,9 +96,12 @@
     "build": "tsc --noEmit && vite build",
     "dev": "vite",
     "preview": "vite preview",
-    "theme:build": "bunx astryx theme build astryx-theme.ts -o theme.css",
-    "theme:check": "bunx astryx theme build astryx-theme.ts -o theme.css --check --json | bun -e 'const r = JSON.parse(await Bun.stdin.text()); if (r.type !== \"theme.build.check\") { console.error(\"theme:check: unexpected CLI response \" + JSON.stringify(r).slice(0, 200)); process.exit(1); } const stale = r.data.stale.filter(s => s.path !== \"astryx-dracula.js\"); for (const s of stale) console.error(\"stale: \" + s.path + \" (\" + s.reason + \")\"); if (stale.length) process.exit(1); const entry = await import(\"./astryx-dracula.js\"); if (!entry.astryxDraculaTheme || !entry.draculaIconRegistry) { console.error(\"astryx-dracula.js is missing its theme or icon registry export\"); process.exit(1); } console.log(\"theme outputs up to date; astryx-dracula.js (hand-maintained) loads and exports\");'",
-    "prepublishOnly": "bun run theme:check && bun run audit && tsc --noEmit && bunx react-doctor@latest --score"
+    "theme:build": "bun run icons:build && bunx astryx theme build astryx-theme.ts -o theme.css --icons-specifier ./icons.mjs",
+    "icons:build": "bun build icons.tsx --outfile icons.mjs --format esm --external react --external lucide-react",
+    "theme:check": "bun run icons:check && bunx astryx theme build astryx-theme.ts -o theme.css --icons-specifier ./icons.mjs --check --json | bun -e 'const r = JSON.parse(await Bun.stdin.text()); if (r.type !== \"theme.build.check\") { console.error(\"theme:check: unexpected CLI response \" + JSON.stringify(r).slice(0, 200)); process.exit(1); } const stale = r.data.stale.filter(s => s.path !== \"astryx-dracula.js\"); for (const s of stale) console.error(\"stale: \" + s.path + \" (\" + s.reason + \")\"); if (stale.length) process.exit(1); const entry = await import(\"./astryx-dracula.js\"); if (!entry.astryxDraculaTheme || !entry.draculaIconRegistry) { console.error(\"astryx-dracula.js is missing its theme or icon registry export\"); process.exit(1); } console.log(\"theme outputs up to date; astryx-dracula.js (hand-maintained) loads and exports\");' && bun run entry:check",
+    "icons:check": "bun build icons.tsx --outfile .tmp-icons.mjs --format esm --external react --external lucide-react; s=$?; cmp -s .tmp-icons.mjs icons.mjs; c=$?; rm -f .tmp-icons.mjs; [ $s -eq 0 ] && [ $c -eq 0 ] || { echo 'stale: icons.mjs (rerun bun run icons:build)'; exit 1; }",
+    "entry:check": "node -e \"const{pathToFileURL}=require('url');const{resolve}=require('path');import(pathToFileURL(resolve('astryx-dracula.js')).href).then(m=>{if(!m.astryxDraculaTheme||!m.draculaIconRegistry){console.error('astryx-dracula.js is missing its theme or icon registry export');process.exit(1)}console.log('astryx-dracula.js loads under plain Node ESM')}).catch(e=>{console.error('astryx-dracula.js is not importable by Node ESM: '+e.message);process.exit(1)})\"",
+    "prepublishOnly": "bun run theme:check && bun run icons:check && bun run entry:check && bun run audit && tsc --noEmit && bunx react-doctor@latest --score"
   },
   "sideEffects": [
     "**/*.css"
@@ -106,5 +111,8 @@
     "@astryxdesign/cli"
   ],
   "type": "module",
-  "version": "0.3.0"
+  "version": "0.4.0",
+  "patchedDependencies": {
+    "@astryxdesign/core@0.6.3": "patches/@astryxdesign%2Fcore@0.6.3.patch"
+  }
 }

package/shared/revenue-chart.tsx

@@ -6,12 +6,13 @@
 
 import type {CSSProperties} from 'react';
 import {CHART_PANEL_STYLE} from 'astryx-dracula/shared/chart-panel-style';
+import {CHART_HUES} from 'astryx-dracula/shared/chart-hues';
 import {VStack, HStack} from '@astryxdesign/core/Layout';
 import {Text} from '@astryxdesign/core/Text';
 import {Card} from '@astryxdesign/core/Card';
 import {Icon} from '@astryxdesign/core/Icon';
 import {Square} from 'lucide-react';
-import {ChartLabel} from 'astryx-dracula/shared/chart-labels';
+import {ChartLabel, CHART_LABEL_SIZE} from 'astryx-dracula/shared/chart-labels';
 import type {SceneHue} from 'astryx-dracula/shared/scene-hues';
 
 // ============= SHARED CHART-PANEL CARD STYLE =============
@@ -40,7 +41,10 @@ export function ProductSwatch({
       style={swatchStyle}
       role="img"
       aria-label={`${label} swatch`}>
-      <rect width={36} height={36} rx={5} fill="var(--dracula-bg-light)" />
+      {/* A surface, not a data mark: the plate behind a product swatch wears the
+          card tier. --color-background-card is byte-identical to the old
+          --dracula-bg-light (#343746). */}
+      <rect width={36} height={36} rx={5} fill="var(--color-background-card)" />
       <rect
         x={1}
         y={1}
@@ -64,7 +68,10 @@ export function ProductSwatch({
 
 // ============= REVENUE CHART =============
 
-const REVENUE_LINE = 'var(--dracula-cyan)';
+// Role token, not a --dracula-* primitive. Byte-identical (--color-data-
+// categorical-cyan IS #8BE9FD) and routed through chart-hues.ts so the line
+// colour is the sanctioned vocabulary rather than a literal decided here.
+const REVENUE_LINE = CHART_HUES.cyan;
 const CHART_W = 540;
 const CHART_H = 200;
 const CHART_PAD_LEFT = 44;
@@ -73,6 +80,23 @@ const CHART_PAD_TOP = 12;
 const CHART_BASELINE = 164;
 const CHART_PLOT_W = CHART_W - CHART_PAD_LEFT - CHART_PAD_RIGHT;
 
+// X-axis label budget, counted in ticks rather than baked into a stride: five
+// intervals is the most the 484-unit plot carries with a tick-width of air
+// still between neighbours — a sixth drops the tightest pair to ~20px on a
+// 390px viewport, and the final pair needs room on top of that. Six ticks is
+// the ceiling, and the stride comes from the point count.
+const CHART_MAX_X_TICKS = 6;
+// A tick is as wide as its own text — the mono face advances 0.6em a glyph, so
+// `Jan 1` and `Jan 13` are different widths, and the last pair is decided by
+// that difference. Measured, not assumed.
+const CHART_TICK_ADVANCE = 0.6 * CHART_LABEL_SIZE;
+// The final tick is end-anchored here instead of centred on its own point,
+// which is what buys it room inside the right pad. The price is the
+// `CHART_TICK_PIN` it hangs back plus half a tick box of approach from the
+// left, and that is the air the grid below has to leave it.
+const CHART_LAST_TICK_X = CHART_W - CHART_PAD_RIGHT - 2;
+const CHART_TICK_PIN = CHART_PAD_LEFT + CHART_PLOT_W - CHART_LAST_TICK_X;
+
 interface RevenuePoint {
   date: string;
   revenue: number;
@@ -83,6 +107,48 @@ function formatRevenueTick(tick: number): string {
   return tick >= 1000 ? `$${tick / 1000}k` : `$${tick}`;
 }
 
+// Which points get a date tick. A fixed stride cannot answer this: `i % 3`
+// plus a forced final tick puts that final tick 0–1 slots from its neighbour
+// for two point counts in three, and one slot is `Jan 13` and `Jan 15` set
+// solid. So the stride comes from the point count, and the final point only
+// joins the axis once the pin has left it its air; when it has not, the
+// crowded grid tick gives way instead, so the axis ends on a gap wider than
+// every other one rather than on the narrowest one.
+function xTickIndices(dates: string[]): number[] {
+  const last = dates.length - 1;
+  if (last < 1) return [last];
+  const step = CHART_PLOT_W / last;
+  const width = (i: number) => dates[i].length * CHART_TICK_ADVANCE;
+  // Clear space between two ticks: `slots` apart, less the half-box each side
+  // shows. The final tick is the exception — it shows its whole box to the left
+  // of its anchor, so its pair is the one that has to clear the most.
+  const gap = (a: number, b: number) =>
+    (b - a) * step -
+    (width(a) + width(b)) / 2 -
+    (b === last ? CHART_TICK_PIN + width(b) / 2 : 0);
+  const stride = Math.max(1, Math.ceil(last / (CHART_MAX_X_TICKS - 1)));
+  // The grid, minus whatever the pinned final tick has crowded out. Every
+  // step of `end` down leaves the grid spacing even and gives the last pair
+  // one stride more room, so the first grid that clears is the one to keep.
+  let ticks = [0, last];
+  for (let end = Math.floor(last / stride) * stride; end >= 0; end -= stride) {
+    const grid: number[] = [];
+    for (let i = 0; i <= end; i += stride) grid.push(i);
+    if (grid[grid.length - 1] !== last) grid.push(last);
+    // Every pair, in order, so the last one can be held to the tightest of
+    // the rest instead of to the average.
+    const gaps = grid
+      .slice(0, -1)
+      .map((t, k) => gap(t, grid[k + 1]));
+    const interior = gaps.slice(0, -1);
+    if (interior.length === 0 || gaps[gaps.length - 1] >= Math.min(...interior)) {
+      ticks = grid;
+      break;
+    }
+  }
+  return ticks;
+}
+
 export function RevenueChart({
   data,
   chartMax,
@@ -102,6 +168,7 @@ export function RevenueChart({
     x: CHART_PAD_LEFT + (i / (data.length - 1)) * CHART_PLOT_W,
     y: CHART_BASELINE - (d.revenue / chartMax) * plotH,
   }));
+  const dateTicks = new Set(xTickIndices(data.map(d => d.date)));
   const linePath = points
     .map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x.toFixed(1)},${p.y.toFixed(1)}`)
     .join(' ');
@@ -144,14 +211,10 @@ export function RevenueChart({
           />
           {points.map(
             (p, i) =>
-              (i % 3 === 0 || i === points.length - 1) && (
+              dateTicks.has(i) && (
                 <ChartLabel
                   key={p.date}
-                  x={
-                    i === points.length - 1
-                      ? CHART_W - CHART_PAD_RIGHT - 2
-                      : p.x
-                  }
+                  x={i === points.length - 1 ? CHART_LAST_TICK_X : p.x}
                   y={CHART_H - 8}
                   textAnchor={i === points.length - 1 ? 'end' : 'middle'}>
                   {p.date}

package/shared/settings-data.ts

@@ -42,18 +42,60 @@ export const NAV_ITEMS: SettingsNavItem[] = [
   {label: 'Travel for work', icon: Briefcase},
 ];
 
+/**
+ * How a row's trailing Button reads. Deliberately narrower than core's
+ * `ButtonVariant`: a trailing row control is not a place to choose freely, and
+ * two of core's four options can never be right here — `primary` would
+ * outrank the panel's own primary, `ghost` would leave an action with no
+ * affordance at all. Only the two that can be are offered.
+ */
+export type RowActionVariant = 'secondary' | 'destructive';
 export interface InfoRow {
   label: string;
   value: string;
   action: string;
+  /**
+   * What `action` actually is. 'action' (the default) changes state in place
+   * and renders a Button; 'destination' navigates and renders a Link. Stated
+   * in the data rather than inferred from `href` or read off the label, so
+   * renaming "View" cannot silently turn a destination back into an action.
+   */
+  actionKind?: 'action' | 'destination';
+  /** Where a 'destination' action goes. Read only when actionKind is 'destination'. */
+  href?: string;
+  /**
+   * Visual weight of the trailing Button. `secondary` is the default and the
+   * right answer for almost every row. `destructive` is for a row whose action
+   * ends or destroys something — disconnecting an account, deleting data — so
+   * that control agrees with the templates' inline Deactivate/Delete buttons
+   * instead of rendering identically to "Create" sitting above it. Stated
+   * here for the same reason `actionKind` is: the renderer cannot recover it
+   * from the label without reading the English verb off the row, which is how
+   * "View" became a button in the first place. Ignored for a `'destination'`
+   * row, which renders a Link and takes no variant.
+   */
+  variant?: RowActionVariant;
+  /**
+   * What the Button does, when something wants it to. Optional on purpose: a
+   * row with no `onAction` renders an inert control, which is the honest
+   * default for a showcase with no backend — better than a toggle that flips
+   * "Connected" to "Disconnected" and pretends a call happened. A consumer
+   * that has a real handler passes one and the row goes live. Nothing here
+   * simulates a result or invents state to make the button look busy.
+   */
+  onAction?: () => void;
 }
 
 export const LOGIN_ROWS: InfoRow[] = [
   {label: 'Password', value: 'Not created', action: 'Create'},
 ];
 
+// Disconnecting ends an account link the user set up on purpose, so it is the
+// one destructive row in this file — marked here, from the verb, not by
+// position. LOGIN_ROWS' "Create" is the opposite (it adds a password) and
+// keeps the default `secondary`.
 export const SOCIAL_ROWS: InfoRow[] = [
-  {label: 'Google', value: 'Connected', action: 'Disconnect'},
+  {label: 'Google', value: 'Connected', action: 'Disconnect', variant: 'destructive'},
 ];
 
 export interface DeviceRow {

package/shared/settings-rows.tsx

@@ -26,32 +26,76 @@ import {
   SquarePen,
   Share2,
 } from 'lucide-react';
-import type {CSSProperties, MouseEvent, ReactNode} from 'react';
+import type {CSSProperties, ReactNode} from 'react';
 import {VStack, HStack} from '@astryxdesign/core/Layout';
 import {Text} from '@astryxdesign/core/Text';
-import {Link} from '@astryxdesign/core/Link';
 import {Button} from '@astryxdesign/core/Button';
+import {Link} from '@astryxdesign/core/Link';
 import {Divider} from '@astryxdesign/core/Divider';
 
 // ─── Row components ──────────────────────────────────────────────────────────
 // The row renderers themselves, moved here from both templates. The two copies
-// were byte-identical apart from two things that genuinely differ per
-// template, so those are props rather than forks: `href` (each template anchors
-// its Links to its own route) and `style` (the sidebar pads its rows, the
-// dialog does not). Verified by hash before the move — the row BODIES matched
-// exactly; only these two call-site differences remained.
+// were byte-identical apart from things that genuinely differ per template, so
+// those are props rather than forks: `style` (the sidebar pads its rows, the
+// dialog does not) and `hasDivider` (each template draws its own group
+// boundaries). Verified by hash before the move — the row BODIES matched
+// exactly; only these call-site differences remained.
+//
+// FOUR RULES these rows are built around, from USAGE.md "Rules":
+//  - A link is a destination, a button is an action. The trailing control is a
+//    `Button` when the row acts in place and a `Link` when it navigates, and
+//    the row data says which: `actionKind` is `'action'` (the default) for
+//    "Create"/"Disconnect", `'destination'` for "View" on a list of past
+//    records, with `href` carrying the destination. It is stated in the data
+//    rather than guessed from the label, because reading the English verb off
+//    the row is what made "View" a button. The Link takes the kit's
+//    hover-only underline — it jumps out of the panel, which is the
+//    navigation case, not prose — and never a hand-rolled `textDecoration`.
+//  - The Button is configured from the row data, never from a constant here.
+//    `variant` defaults to `secondary` and a row opts into `destructive` when
+//    its action ends or destroys something, so a trailing "Disconnect" reads
+//    like the panels' own inline Deactivate/Delete controls instead of like
+//    the "Create" sitting above it. It is never `primary`: a row action must
+//    not outrank the panel's own primary, and a filled accent button in a
+//    trailing column is what made these panels read as a form.
+//    `onAction` becomes the Button's `onClick` and is optional — with no
+//    handler the Button renders inert, which is the honest default for a
+//    showcase with no backend. A consumer with a real handler passes one and
+//    the row goes live; nothing here fabricates state to make it look live.
+//  - A divider is a section boundary, not a row background. Rows therefore
+//    render one ONLY when the caller marks `hasDivider` at a real group
+//    boundary; without it the row leaves the rhythm to the caller's own
+//    `Stack gap` / row padding rather than adding a rule of its own.
+//  - Spacing comes from the scale. The label/value pair is spaced with
+//    `Stack gap`, never a margin, and `gap={1}` matches the rows each template
+//    builds itself (device history, Deactivate, the info tiles) so no row on
+//    the page reads tighter than its neighbours.
+//
+// `href` is a real field on `InfoRow`: where a `'destination'` action goes,
+// read only when `actionKind` says the row navigates. The inert `href` prop on
+// `ExpandableRow` stays for call-site compatibility — it anchored Links this
+// file no longer renders, nothing reads it now, and removing it would break
+// any caller that still passes it.
 
 export function InfoRowItem({
   label,
   value,
   action,
+  actionKind,
   href,
+  variant = 'secondary',
+  onAction,
   style,
-}: InfoRow & {href: string; style?: CSSProperties}) {
+  hasDivider = true,
+}: InfoRow & {
+  style?: CSSProperties;
+  /** Draw a Divider after the row. True only at a group boundary. */
+  hasDivider?: boolean;
+}) {
   return (
     <>
       <HStack hAlign="between" vAlign="start" style={style}>
-        <VStack gap={0}>
+        <VStack gap={1}>
           <Text type="body" weight="semibold" display="block">
             {label}
           </Text>
@@ -59,13 +103,22 @@ export function InfoRowItem({
             {value}
           </Text>
         </VStack>
-        {action && (
-          <Link href={href} style={actionNoWrap}>
-            {action}
-          </Link>
-        )}
+        {action &&
+          (actionKind === 'destination' && href ? (
+            <Link href={href} style={actionNoWrap}>
+              {action}
+            </Link>
+          ) : (
+            <Button
+              label={action}
+              variant={variant}
+              size="sm"
+              style={actionNoWrap}
+              onClick={onAction}
+            />
+          ))}
       </HStack>
-      <Divider />
+      {hasDivider && <Divider />}
     </>
   );
 }
@@ -101,18 +154,16 @@ function ExpandableRowViewing({
   label,
   value,
   onEdit,
-  href,
   style,
 }: {
   label: string;
   value: string;
   onEdit: () => void;
-  href: string;
   style?: CSSProperties;
 }) {
   return (
     <HStack hAlign="between" vAlign="start" style={style}>
-      <VStack gap={0}>
+      <VStack gap={1}>
         <Text type="body" weight="semibold" display="block">
           {label}
         </Text>
@@ -120,15 +171,13 @@ function ExpandableRowViewing({
           {value}
         </Text>
       </VStack>
-      <Link
-        href={href}
+      <Button
+        label="Edit"
+        variant="secondary"
+        size="sm"
         style={actionNoWrap}
-        onClick={(e: MouseEvent) => {
-          e.preventDefault();
-          onEdit();
-        }}>
-        Edit
-      </Link>
+        onClick={onEdit}
+      />
     </HStack>
   );
 }
@@ -141,8 +190,8 @@ export function ExpandableRow({
   onEdit,
   onCancel,
   onSave,
-  href,
   style,
+  hasDivider = true,
 }: {
   label: string;
   value: string;
@@ -151,8 +200,11 @@ export function ExpandableRow({
   onEdit: () => void;
   onCancel: () => void;
   onSave: () => void;
-  href: string;
+  /** Accepted for call-site compatibility; unused — see the note above. */
+  href?: string;
   style?: CSSProperties;
+  /** Draw a Divider after the row. True only at a group boundary. */
+  hasDivider?: boolean;
 }) {
   return (
     <>
@@ -169,11 +221,10 @@ export function ExpandableRow({
           label={label}
           value={value}
           onEdit={onEdit}
-          href={href}
           style={style}
         />
       )}
-      <Divider />
+      {hasDivider && <Divider />}
     </>
   );
 }

package/shared/sparkline.tsx

@@ -2,6 +2,8 @@
 // geometry and the portfolio range-normalized step geometry behind one mode
 // switch. Purple stays out of the chart so it keeps meaning "interactive".
 
+import {CHART_HUES} from 'astryx-dracula/shared/chart-hues';
+
 export interface SparkPoint {
   id: string;
   value: number;
@@ -28,7 +30,13 @@ export function Sparkline({
   mode = 'max',
   isCompact = false,
 }: SparklineProps) {
-  const fill = positive ? 'var(--dracula-green)' : 'var(--dracula-red)';
+  // Role tokens, not --dracula-* primitives. Byte-identical values
+  // (--color-data-categorical-green IS #50FA7B), so this is a vocabulary
+  // change with no visual delta -- it just means the sparkline agrees with
+  // chart-hues.ts instead of being the one chart module that decided alone.
+  // Reported by a consumer whose test asserted their sparkline fill equalled
+  // their CHART_HUES.green and stopped agreeing across a version bump.
+  const fill = positive ? CHART_HUES.green : CHART_HUES.red;
   if (mode === 'range') {
     const values = data.map(point => point.value);
     const max = Math.max(...values);

package/templates/ai-chat-landing.tsx

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 // XLE (canonical structure, validated with `bunx astryx layout check`):
-//   L > LC > V[g=8 a=center] > (V[g=1] > (H[g=2 a=center] > Ic + Tx"Hi, Vlad"[t=body]) + Hd"Where should we start?"[level=1 type=display-2]) + ChC"Ask anything" + (V[g=6] > (TgG"Category" > Tg"Writing"*4) + Hd"Suggested prompts"[level=2] + (G[c={min:280} g=3] > (CC[p=4] > V[g=0.5] > Hd"Draft"[level=3] + Tx"Compose"[t=body])*4))
+//   L > LC > V[g=8 a=center] > (V[g=1] > (H[g=2 a=center] > Ic + Tx"Hi, Vlad"[t=body]) + Hd"Where should we start?"[level=1 type=display-2]) + ChC"Ask anything" + (V[g=6] > (TgG"Category" > H[g=1 wrap] > Tg"Writing"*4) + Hd"Suggested prompts"[level=2] + (G[c={min:280} g=3] > (CC[p=4] > V[g=0.5] > Hd"Draft"[level=3] + Tx"Compose"[t=body])*4))
 
 import {useRef, useState, type CSSProperties} from 'react';
 
@@ -467,14 +467,22 @@ export default function AiChatLanding() {
                 value={category}
                 onChange={setCategory}
                 size="lg">
-                {CATEGORIES.map(cat => (
-                  <ToggleButton
-                    key={cat.key}
-                    value={cat.key}
-                    label={cat.label}
-                    icon={<Icon icon={cat.icon} size="sm" />}
-                  />
-                ))}
+                {/* ToggleButtonGroup is a single nowrap flex row and the four
+                    chips measure 488px together. In a 390px pane the fourth
+                    chip was cut in half by the viewport edge, which reads as a
+                    rendering fault rather than as overflow. The wrapping
+                    HStack gives the row a second line instead; the group keeps
+                    its own selection semantics either way. */}
+                <HStack gap={1} wrap="wrap">
+                  {CATEGORIES.map(cat => (
+                    <ToggleButton
+                      key={cat.key}
+                      value={cat.key}
+                      label={cat.label}
+                      icon={<Icon icon={cat.icon} size="sm" />}
+                    />
+                  ))}
+                </HStack>
               </ToggleButtonGroup>
 
               {suggestions && (

package/templates/ai-chat.tsx

@@ -301,8 +301,8 @@ export default function AiChat() {
   const rootRef = useRef<HTMLElement>(null);
   const artifactResize = useResizable({
     defaultSize: 640,
-    minSizePx: 480,
-    maxSizePx: 960,
+    minSize: 480,
+    maxSize: 960,
     autoSaveId: 'ai-chat-artifact-panel',
   });
 

package/templates/centered-hero.tsx

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 // XLE (canonical structure, validated with `bunx astryx layout check`):
-//   L > LC[p=6] > V[g=10] > ((V[g=6 a=center] > (V[g=3 a=center] > Hd"Small joys for creatures of the night"[level=1 t=display-2] + Tx"Sometimes all it takes is one small ritual to turn the whole night around."[t=body] + Tx"astryx-dracula v0.3.0"[t=supporting]) + (H[j=center g=3] > B.primary"Embrace the night" + B.secondary"Read the lore")) + (S.transparent[p=0] > AR[ratio=16/9]))
+//   L > LC[p=6] > V[g=10] > ((V[g=6 a=center] > (V[g=3 a=center] > Hd"Small joys for creatures of the night"[level=1 t=display-2] + Tx"Sometimes all it takes is one small ritual to turn the whole night around."[t=body] + Tx"astryx-dracula v0.4.0"[t=supporting]) + (H[j=center g=3] > B.primary"Embrace the night" + B.secondary"Read the lore")) + (S.transparent[p=0] > AR[ratio=16/9]))
 
 import type {CSSProperties} from 'react';
 import {VStack, HStack, Layout, LayoutContent} from '@astryxdesign/core/Layout';
@@ -52,7 +52,7 @@ export default function CenteredHero() {
                   color="secondary"
                   justify="center"
                   hasTabularNumbers>
-                  astryx-dracula v0.3.0
+                  astryx-dracula v0.4.0
                 </Text>
               </VStack>
               <HStack gap={3} wrap="wrap" justify="center">

package/templates/contact-form.tsx

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 // XLE (canonical structure, validated with `bunx astryx layout check`):
-//   Ctr > V[a=center] > S.transparent[p=6] > V[g=6] > (V[g=2 a=center] > Hd"Let's brew after dark"[level=1] + Tx"Tell us a bit"[t=body]) + (V[g=4] > Hd"Why work with us"[level=2] + (G[c={min:200} g=4] > (C > V[g=3] > Ic + (V[g=1] > Hd"Title"[level=3] + Tx"Desc"[t=body]))*3)) + (V[g=4] > Hd"Your details"[level=2] + (G[c={min:260} g=4] > TI"Full name" + TI"Email") + (G[c={min:260} g=4] > TI"Company" + TI"Phone")) + D + (V[g=4] > Hd"Your project"[level=2] + (Fd"Goals"[req] > (H[g=2] > Tk"Goal"*10)) + SE"Timeline" + SE"Budget" + (RL"Source" > RLI*5) + TA"Notes" + CB"Decision maker") + (V[g=3] > B.primary"Send it into the night" + (H[j=center g=1] > Tx[t=supporting] > Lk"Privacy Policy"))
+//   Ctr > V[a=center] > S.transparent[p=6] > V[g=6] > (V[g=2 a=center] > Hd"Let's brew after dark"[level=1] + Tx"Tell us a bit"[t=body]) + (V[g=4] > Hd"Why work with us"[level=2] + (G[c={min:200} g=4] > (C > V[g=3] > Ic + (V[g=1] > Hd"Title"[level=3] + Tx"Desc"[t=body]))*3)) + (V[g=4] > Hd"Your details"[level=2] + (G[c={min:260} g=4] > TI"Full name" + TI"Email") + (G[c={min:260} g=4] > TI"Company" + TI"Phone")) + D + (V[g=4] > Hd"Your project"[level=2] + (Fd"Goals"[req] > (H[g=2] > Tk"Goal"*10)) + SE"Timeline" + SE"Budget" + (RL"Source" > RLI*5) + TA"Notes" + CB"Decision maker") + (V[g=3] > B.primary"Send it into the night" + (Tx[t=supporting] > Lk"Privacy Policy"))
 
 import {useState} from 'react';
 import {VStack, HStack} from '@astryxdesign/core/Layout';
@@ -296,15 +296,16 @@ export default function ContactForm() {
                 variant="primary"
                 onClick={() => setSubmitted(true)}
               />
-              <HStack gap={1} hAlign="center">
-                <Text type="supporting" color="secondary">
-                  By submitting you agree to our{' '}
-                  <Link href="#/templates/contact-form" type="supporting">
-                    Privacy Policy
-                  </Link>
-                  .
-                </Text>
-              </HStack>
+              <Text type="supporting" color="secondary">
+                By submitting you agree to our{' '}
+                <Link
+                  href="#/templates/contact-form"
+                  type="supporting"
+                  hasUnderline>
+                  Privacy Policy
+                </Link>
+                .
+              </Text>
             </VStack>
           </VStack>
         </Section>

package/templates/dashboard.tsx

@@ -19,6 +19,10 @@ import {Divider} from '@astryxdesign/core/Divider';
 import {Link} from '@astryxdesign/core/Link';
 import {Icon} from '@astryxdesign/core/Icon';
 
+// Same-route hash: demo links stay focusable anchors without escaping the
+// template through the hash router (bare "#" would drop back to the home page).
+const SELF_HASH = '#/templates/dashboard';
+
 // ============= ICONS =============
 
 import {RefreshCw, Square} from 'lucide-react';
@@ -632,7 +636,7 @@ function StackedBarCard({
         {/* Legend */}
         <HStack gap={4} wrap="wrap">
           {data.map(d => (
-            <VStack key={d.label} gap={0}>
+            <VStack key={d.label} gap={1}>
               <HStack gap={2} vAlign="center">
                 <Icon icon={Square} size="xsm" style={{color: d.color}} />
                 <Text type="supporting" color="secondary">{d.label}</Text>
@@ -756,14 +760,14 @@ export default function DashboardTemplate() {
               <TableCard
                 title="Top pages"
                 linkLabel="All pages"
-                linkHref="#"
+                linkHref={SELF_HASH}
                 data={topPagesData}
                 columns={topPagesColumns}
               />
               <TableCard
                 title="Top events"
                 linkLabel="All events"
-                linkHref="#"
+                linkHref={SELF_HASH}
                 data={topEventsData}
                 columns={topEventsColumns}
               />