astryx-dracula 0.3.1 → 0.4.0

package/shared/revenue-chart.tsx

@@ -12,7 +12,7 @@ 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 =============
@@ -80,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;
@@ -90,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,
@@ -109,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(' ');
@@ -151,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/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.1"[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.1
+                  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}
               />

package/templates/detail-page.tsx

@@ -216,7 +216,9 @@ function PageHeader({
       <VStack gap={3}>
         <HStack gap={4} vAlign="start">
           <StackItem size="fill">
-            <VStack gap={0}>
+            {/* gap={2}: the breadcrumb is a control, not a text-baseline
+                pairing, so it needs separation from the H1 rather than 0. */}
+            <VStack gap={2}>
               <Link href="#/templates/detail-page">
                 <HStack gap={1} vAlign="center">
                   <Icon icon={ArrowLeft} size="sm" color="inherit" />
@@ -502,8 +504,8 @@ function TimelineSection() {
   return (
     <Section>
       <VStack gap={4}>
-        {/* gap={2}, matching the byte-identical header rows at :338 and
-            :407. Core's Stack has no default gap (Stack.tsx:211, pass-through
+        {/* gap={2}, matching the byte-identical header rows at :340 and
+            :408. Core's Stack has no default gap (Stack.tsx:211, pass-through
             at :255/:285), so this rendered 0px -- the heading and the Filters
             button touched -- while both siblings render 8px. */}
         <HStack gap={2} vAlign="center">
@@ -582,11 +584,16 @@ function PanelContent() {
   return (
     <VStack gap={4}>
       <Collapsible trigger={<Heading level={3}>Notes</Heading>}>
+        {/* "Show more" closes the sentence inside the Text below, so it is
+            prose and asks for `hasUnderline` — colour alone is not a
+            sufficient cue inline (1.4.1 / F73). `type="inherit"` adopts the
+            paragraph's size and leading. The two links in the header are
+            navigation, so they pass neither. */}
         <Text type="body">
           Customer is a repeat buyer, 3rd order this quarter. Prefers
           moonlight and sage glazes. Requested gift wrapping for the mug set.
           Ships to a residential address in CA.{' '}
-          <Link href="#/templates/detail-page">
+          <Link href="#/templates/detail-page" hasUnderline type="inherit">
             Show more
           </Link>
         </Text>

package/templates/documentation-design.tsx

@@ -29,7 +29,7 @@ import {useMediaQuery} from '@astryxdesign/core/hooks';
 import {Dialog, DialogHeader} from '@astryxdesign/core/Dialog';
 import {Divider} from '@astryxdesign/core/Divider';
 import {Tooltip} from '@astryxdesign/core/Tooltip';
-import {Table, pixel} from '@astryxdesign/core/Table';
+import {Table, pixel, proportional} from '@astryxdesign/core/Table';
 import {Icon} from '@astryxdesign/core/Icon';
 import {Section} from '@astryxdesign/core/Section';
 import {Center} from '@astryxdesign/core/Center';
@@ -42,6 +42,17 @@ const tabListFlush: CSSProperties = {
   marginInlineStart: 'calc(var(--spacing-3) * -1)',
 };
 
+// The best-practices table lives in the prose column, where the eye tracks a
+// single measure. Table's scroll wrapper bleeds edge-to-edge by reading the
+// container padding vars LayoutContent publishes (32px here), which pushes
+// its dividers 32px past the measure on both sides at every width. This table
+// never overflows, so the bleed buys nothing — zero the vars for this subtree
+// so it sits on the measure with the headings above it.
+const practicesOnMeasure: CSSProperties = ({
+  '--container-padding-inline-start': '0px',
+  '--container-padding-inline-end': '0px',
+}) as CSSProperties;
+
 const COMPONENT_OUTLINE_ITEMS: OutlineItem[] = [
   {id: 'usage', label: 'Usage', level: 2},
   {id: 'best-practices', label: 'Best practices', level: 3},
@@ -635,34 +646,37 @@ function ComponentDetailView({activeNav}: {activeNav: string}) {
               <Heading id="best-practices" level={3}>
                 Best practices
               </Heading>
-              <Table
-                data={docs.bestPractices as Record<string, unknown>[]}
-                dividers="none"
-                hasHover
-                columns={[
-                  {
-                    key: 'type',
-                    header: 'Guidance',
-                    width: pixel(125),
-                    renderCell: (item: Record<string, unknown>) => (
-                      <Badge
-                        label={item.type === 'do' ? 'Do' : "Don't"}
-                        variant={item.type === 'do' ? 'green' : 'red'}
-                      />
-                    ),
-                  },
-                  {
-                    key: 'text',
-                    header: 'Practices',
-                    renderCell: (item: Record<string, unknown>) => (
-                      <Text type="body" textWrap="wrap">
-                        {item.text as string}
-                      </Text>
-                    ),
-                  },
-                ]}
-                density="spacious"
-              />
+              <div style={practicesOnMeasure}>
+                <Table
+                  data={docs.bestPractices as Record<string, unknown>[]}
+                  dividers="none"
+                  hasHover
+                  columns={[
+                    {
+                      key: 'type',
+                      header: 'Guidance',
+                      width: pixel(125),
+                      renderCell: (item: Record<string, unknown>) => (
+                        <Badge
+                          label={item.type === 'do' ? 'Do' : "Don't"}
+                          variant={item.type === 'do' ? 'green' : 'red'}
+                        />
+                      ),
+                    },
+                    {
+                      key: 'text',
+                      header: 'Practices',
+                      width: proportional(1),
+                      renderCell: (item: Record<string, unknown>) => (
+                        <Text type="body" textWrap="wrap">
+                          {item.text as string}
+                        </Text>
+                      ),
+                    },
+                  ]}
+                  density="spacious"
+                />
+              </div>
             </VStack>
 
             <Divider />