astryx-dracula 0.3.1 → 0.5.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",
@@ -40,10 +41,13 @@
     "./shared/settings-data": "./shared/settings-data.ts",
     "./shared/settings-rows": "./shared/settings-rows.tsx",
     "./shared/sparkline": "./shared/sparkline.tsx",
+    "./shared/format-money": "./shared/format-money.ts",
+    "./shared/metric-card": "./shared/metric-card.tsx",
+    "./shared/stars": "./shared/stars.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 +64,7 @@
     "astryx-dracula.js",
     "astryx-dracula.variants.d.ts",
     "fonts/",
+    "icons.mjs",
     "icons.tsx",
     "shared/",
     "theme.css",
@@ -80,7 +85,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"
@@ -90,13 +95,17 @@
     "url": "git+https://github.com/yuzu-octopus/astryx-dracula.git"
   },
   "scripts": {
-    "audit": "bun scripts/check.ts",
+    "audit": "bun run fonts:sync && bun scripts/check.ts",
+    "fonts:sync": "mkdir -p public/fonts && cp fonts/*.woff2 public/fonts/",
     "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 +115,8 @@
     "@astryxdesign/cli"
   ],
   "type": "module",
-  "version": "0.3.1"
+  "version": "0.5.0",
+  "patchedDependencies": {
+    "@astryxdesign/core@0.6.3": "patches/@astryxdesign%2Fcore@0.6.3.patch"
+  }
 }

package/shared/auth-chrome.tsx

@@ -1,16 +1,30 @@
 // Shared login chrome: page wash + 400px column + Moon brand row + the
 // autocomplete widen-record TextInput needs (prop type omits input attrs).
-import type {CSSProperties} from 'react';
+import type {ReactNode} from 'react';
 import {Moon} from 'lucide-react';
 import {VStack} from '@astryxdesign/core/Layout';
 import {Text} from '@astryxdesign/core/Text';
 import {Icon} from '@astryxdesign/core/Icon';
-import {AUTH_BRAND_NAME} from 'astryx-dracula/shared/auth-copy';
+import {Card} from '@astryxdesign/core/Card';
+import {Link} from '@astryxdesign/core/Link';
+import {TextInput} from '@astryxdesign/core/TextInput';
+import {Button} from '@astryxdesign/core/Button';
+import {Heading} from '@astryxdesign/core/Text';
 import {
-  authContentStyle,
-  authPageStyle,
-  inputAutoComplete,
-} from 'astryx-dracula/shared/auth-chrome-config';
+  AUTH_BRAND_NAME,
+  AUTH_HEADING,
+  AUTH_SUBTITLE,
+  AUTH_PRIMARY_CTA,
+  AUTH_SIGNUP_PROMPT,
+  AUTH_SIGNUP_LINK,
+  AUTH_FORGOT_PASSWORD,
+  AUTH_EMAIL_PLACEHOLDER,
+  AUTH_PASSWORD_PLACEHOLDER,
+  AUTH_TERMS_PREFIX,
+  AUTH_TERMS_SERVICE,
+  AUTH_TERMS_PRIVACY,
+} from 'astryx-dracula/shared/auth-copy';
+import {inputAutoComplete} from 'astryx-dracula/shared/auth-chrome-config';
 
 
 export function LoginBrand() {
@@ -23,3 +37,139 @@ export function LoginBrand() {
     </VStack>
   );
 }
+
+// Shared password-login core: the centered header, credential fields, primary
+// CTA, signup line and terms line every password page in the family carries.
+// The three pages differed only in what sits between the CTA and the signup
+// line (nothing, or the SSO divider + provider buttons) and in their outer
+// shell — login-split's two-column grid and login-sso's step machine keep
+// their own markup and take the pieces below instead of this whole card.
+export function AuthCard({
+  selfHash,
+  signupLink = AUTH_SIGNUP_LINK,
+  children,
+}: {
+  selfHash: string;
+  signupLink?: string;
+  children: ReactNode;
+}) {
+  return (
+    <>
+      <Card padding={4} width="100%">
+        <VStack gap={4} hAlign="stretch">
+          <VStack gap={1} hAlign="center">
+            <Heading level={1} type="display-2" justify="center">
+              {AUTH_HEADING}
+            </Heading>
+            <Text type="body" color="secondary">
+              {AUTH_SUBTITLE}
+            </Text>
+          </VStack>
+          {children}
+          {/* Prose link: colour alone is not a cue inside a sentence
+              (WCAG 1.4.1 / F73), so it asks for the underline the kit
+              only gives on hover. */}
+          <VStack hAlign="center">
+            <Text type="supporting" color="secondary">
+              {AUTH_SIGNUP_PROMPT}{' '}
+              <Link href={selfHash} type="supporting" hasUnderline>
+                {signupLink}
+              </Link>
+            </Text>
+          </VStack>
+        </VStack>
+      </Card>
+      <AuthTerms selfHash={selfHash} />
+    </>
+  );
+}
+
+// Email + password fields with the shared error/forgot-password rhythm, plus
+// the primary CTA that always follows them. The field gap is 8px (gap={2}),
+// not the outer 16px: without the group the two inputs sat twice as far
+// apart as the fields below them.
+export function AuthLoginFields({
+  email,
+  password,
+  error,
+  selfHash,
+  isLoading,
+  onEmailChange,
+  onPasswordChange,
+  onSubmit,
+}: {
+  email: string;
+  password: string;
+  error: string | null;
+  selfHash: string;
+  isLoading: boolean;
+  onEmailChange: (value: string) => void;
+  onPasswordChange: (value: string) => void;
+  onSubmit: () => void;
+}) {
+  return (
+    <>
+      <VStack gap={2}>
+        <TextInput
+          label="Email"
+          isLabelHidden
+          value={email}
+          onChange={onEmailChange}
+          placeholder={AUTH_EMAIL_PLACEHOLDER}
+          type="email"
+          {...inputAutoComplete('email')}
+          size="lg"
+          onEnter={onSubmit}
+          status={error ? {type: 'error', message: error} : undefined}
+        />
+        <VStack gap={1}>
+          <TextInput
+            label="Password"
+            isLabelHidden
+            value={password}
+            onChange={onPasswordChange}
+            placeholder={AUTH_PASSWORD_PLACEHOLDER}
+            type="password"
+            {...inputAutoComplete('current-password')}
+            size="lg"
+            onEnter={onSubmit}
+            status={error ? {type: 'error', message: error} : undefined}
+          />
+          {error && (
+            <VStack hAlign="end">
+              <Link href={selfHash} color="secondary" isStandalone>
+                {AUTH_FORGOT_PASSWORD}
+              </Link>
+            </VStack>
+          )}
+        </VStack>
+      </VStack>
+      <Button
+        label={AUTH_PRIMARY_CTA}
+        variant="primary"
+        size="lg"
+        isLoading={isLoading}
+        onClick={onSubmit}
+      />
+    </>
+  );
+}
+
+// The family terms line, rendered below the card in the page column.
+export function AuthTerms({selfHash}: {selfHash: string}) {
+  return (
+    <VStack hAlign="center" width="100%">
+      <Text type="supporting" color="secondary" justify="center">
+        {AUTH_TERMS_PREFIX}{' '}
+        <Link href={selfHash} type="supporting" hasUnderline>
+          {AUTH_TERMS_SERVICE}
+        </Link>{' '}
+        and{' '}
+        <Link href={selfHash} type="supporting" hasUnderline>
+          {AUTH_TERMS_PRIVACY}
+        </Link>
+        .
+      </Text>
+    </VStack>
+  );
+}

package/shared/chaptered-doc.tsx

@@ -9,7 +9,6 @@ import {
   buildOutlineByChapter,
   outlinePanel,
   sceneClip,
-  sceneFill,
   scrollToSection,
   sectionId,
   type ChapterGroup,
@@ -49,7 +48,7 @@ import {useMediaQuery} from '@astryxdesign/core/hooks';
 
 import {ChevronLeft, ChevronRight} from 'lucide-react';
 
-export function ChapterRail({
+function ChapterRail({
   groups,
   activeId,
   onSelect,
@@ -100,7 +99,7 @@ export function ChapterRail({
 
 // ─── Chapter body ────────────────────────────────────────────────────────────
 
-export function SectionBlock({
+function SectionBlock({
   chapterId,
   section,
 }: {
@@ -134,7 +133,7 @@ export function SectionBlock({
   );
 }
 
-export function ChapterNav({
+function ChapterNav({
   chapters,
   chapter,
   onSelect,

package/shared/chart-hues.ts

@@ -20,8 +20,3 @@ export const CHART_HUES = {
 } as const;
 
 export type ChartHue = (typeof CHART_HUES)[keyof typeof CHART_HUES];
-
-// The value list exists for the gate: it reads the object's VALUES, never a
-// grep across shared/. A text-level filter cannot separate the sanctioned rows
-// from a drifting neighbour, which is why the check is here and not in a lint.
-export const CHART_HUE_VALUES: readonly ChartHue[] = Object.values(CHART_HUES);

package/shared/chart-legend.tsx

@@ -24,7 +24,7 @@
 import type {ReactNode} from 'react';
 import {HStack, StackItem, VStack} from '@astryxdesign/core/Stack';
 import {Text} from '@astryxdesign/core/Text';
-import {CHART_HUES, type ChartHue} from 'astryx-dracula/shared/chart-hues';
+import type {ChartHue} from 'astryx-dracula/shared/chart-hues';
 
 export interface ChartLegendEntry {
   /** REQUIRED. The hue never travels alone — this is the 1.4.1 contract. */
@@ -45,7 +45,6 @@ export interface ChartLegendEntry {
 // would render `background: undefined` at every call site, compile clean, and
 // break at runtime. The old comment here claimed call sites may pass a KEY;
 // none does. The behaviour is correct; only the comment was wrong.
-const HUE_LOOKUP: Record<string, string> = CHART_HUES;
 
 export interface ChartLegendProps {
   entries: readonly ChartLegendEntry[];
@@ -81,7 +80,7 @@ export function ChartLegend({
                 width: `${swatchSize}px`,
                 height: `${swatchSize}px`,
                 flexShrink: 0,
-                background: HUE_LOOKUP[entry.color] ?? entry.color,
+                background: entry.color,
                 borderRadius: 'var(--radius-inner)',
               }}
             />

package/shared/data-bar.tsx

@@ -66,9 +66,6 @@ export interface DataBarProps {
   formatValue?: (total: number) => string;
   /** Gap between segments as a spacing-scale step. @default 0 */
   gap?: 0 | 0.5 | 1 | 1.5 | 2 | 3;
-  /** Neutral fill shown when every segment is zero. Deliberately
-   *  --color-progress-value, NOT a text token — see the header. */
-  trackColor?: string;
 }
 
 const segmentStyle: CSSProperties = {
@@ -82,7 +79,6 @@ export function DataBar({
   hasValueLabel = false,
   formatValue = total => total.toLocaleString(),
   gap = 0,
-  trackColor = 'var(--color-progress-value)',
 }: DataBarProps) {
   // Negative values are not a magnitude and are clamped out before the ratio is
   // taken: summing a negative into `total` inflates every other segment's
@@ -136,7 +132,11 @@ export function DataBar({
       style={
         total > 0
           ? undefined
-          : {background: trackColor, borderRadius: 'var(--radius-inner)'}
+          : {
+              // Deliberately --color-progress-value, NOT a text token — see the header.
+              background: 'var(--color-progress-value)',
+              borderRadius: 'var(--radius-inner)',
+            }
       }>
       {drawn.map(segment => (
         <StackItem

package/shared/format-money.ts

@@ -0,0 +1,3 @@
+export function formatMoney(n: number): string {
+  return `$${n.toFixed(2)}`;
+}

package/shared/metric-card.tsx

@@ -0,0 +1,127 @@
+// Shared dashboard cards: the KPI tile (MetricCard), the linked table panel
+// (TableCard), and the two table-cell renderers the engagement tables share
+// (BarCell = magnitude bar + formatted count, CountCell = plain tabular
+// count). One home so the analytics and portfolio templates can't drift into
+// a second KPI/table vocabulary.
+
+import type {ReactNode} from 'react';
+import {VStack, HStack} from '@astryxdesign/core/Stack';
+import {Text, Heading} from '@astryxdesign/core/Text';
+import {Card} from '@astryxdesign/core/Card';
+import {Link} from '@astryxdesign/core/Link';
+import {Table} from '@astryxdesign/core/Table';
+import type {TableColumn} from '@astryxdesign/core/Table';
+import {ProgressBar} from '@astryxdesign/core/ProgressBar';
+import {MetricDelta} from 'astryx-dracula/shared/metric-delta';
+import {Sparkline, type SparkPoint} from 'astryx-dracula/shared/sparkline';
+
+export function MetricCard({
+  label,
+  value,
+  change,
+  positive,
+  caption = 'Last 30 days vs. Previous',
+  sparkline,
+}: {
+  label: string;
+  value: string;
+  change: string;
+  /** Defaults to "no leading minus means positive". */
+  positive?: boolean;
+  caption?: string;
+  /** Rendered as a thirty-day trend sparkline when provided. */
+  sparkline?: SparkPoint[];
+}) {
+  const isPositive = positive ?? !change.startsWith('-');
+  return (
+    <Card>
+      <VStack gap={2}>
+        <Text type="supporting" color="secondary">
+          {label}
+        </Text>
+        <HStack gap={2} vAlign="center">
+          <Text type="display-3" weight="semibold" hasTabularNumbers>
+            {value}
+          </Text>
+          <MetricDelta value={change} positive={isPositive} />
+        </HStack>
+        <Text type="supporting" color="secondary">
+          {caption}
+        </Text>
+        {sparkline && (
+          <Sparkline
+            data={sparkline}
+            label={`${label} thirty-day trend`}
+            positive={isPositive}
+          />
+        )}
+      </VStack>
+    </Card>
+  );
+}
+
+export function TableCard<T extends {id: string}>({
+  title,
+  linkLabel,
+  linkHref,
+  data,
+  columns,
+}: {
+  title: string;
+  /** Omit both for a linkless panel (e.g. portfolio trending stocks). */
+  linkLabel?: string;
+  linkHref?: string;
+  data: T[];
+  columns: TableColumn<T>[];
+}) {
+  return (
+    <Card>
+      <VStack gap={6}>
+        <HStack hAlign="between" vAlign="center">
+          <Heading level={3}>{title}</Heading>
+          {linkLabel && linkHref && <Link href={linkHref}>{linkLabel}</Link>}
+        </HStack>
+        <Table<T>
+          data={data}
+          columns={columns}
+          idKey="id"
+          density="compact"
+          dividers="rows"
+          textOverflow="truncate"
+          hasHover
+        />
+      </VStack>
+    </Card>
+  );
+}
+
+export function BarCell({
+  label,
+  value,
+  max,
+  children,
+}: {
+  /** Accessible bar label, e.g. "/home views". */
+  label: string;
+  value: number;
+  max: number;
+  /** Formatted count rendered under the bar. */
+  children: ReactNode;
+}) {
+  return (
+    <VStack gap={1}>
+      <ProgressBar value={value} max={max} label={label} isLabelHidden />
+      <Text type="body" hasTabularNumbers maxLines={1}>
+        {children}
+      </Text>
+    </VStack>
+  );
+}
+
+export function CountCell({children}: {children: ReactNode}) {
+  return (
+    <Text hasTabularNumbers maxLines={1}>
+      {children}
+    </Text>
+  );
+}

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/scene-hues.ts

@@ -26,14 +26,6 @@ export const SCENE_HUES = {
 
 export type SceneHue = (typeof SCENE_HUES)[keyof typeof SCENE_HUES];
 
-/**
- * The union above constrains the KEY, not the value it resolves to. An entry
- * rewritten to `var(--dracula-purple)` still typechecks. `scripts/check.ts`
- * gates the values of this object; add the gate there if it is ever removed.
- * A prose rule does not stop a caller — see the remit note above.
- */
-export const SCENE_HUE_VALUES: readonly SceneHue[] = Object.values(SCENE_HUES);
-
 // Shared alt list for the nine-tile side/classic wall (folded into one
 // module so the two surfaces cannot drift apart again).
 export const SCENE_TILE_ALTS = [

package/shared/scene-tile.tsx

@@ -22,11 +22,7 @@
 // site with the exact offending value named.
 
 import {galleryImage} from 'astryx-dracula/shared/gallery-image';
-import {
-  SCENE_HUES,
-  type SceneHue,
-  type SceneTileSize,
-} from 'astryx-dracula/shared/scene-hues';
+import type {SceneHue, SceneTileSize} from 'astryx-dracula/shared/scene-hues';
 
 
 interface SceneTileProps {
@@ -43,9 +39,6 @@ interface SceneTileProps {
   label: string;
   /** `lg` for grid thumbs, `sm` for the classic/side landscape tiles. */
   size?: SceneTileSize;
-  /** Star wash for the sm landscape. Decorative, and purple-free by the same
-   *  remit as `hue`, so it takes the same union. */
-  stars?: SceneHue;
   /** Positional seed so repeated sm tiles vary moon, hills, and star field.
    *  Ignored by the lg fork (one centered glyph, no variance). */
   index?: number;
@@ -56,7 +49,6 @@ export function SceneTile({
   hue,
   label,
   size = 'lg',
-  stars = 'var(--dracula-comment)',
   index = 0,
 }: SceneTileProps) {
   const moonX = 90 + ((index * 53) % 220);
@@ -73,8 +65,8 @@ export function SceneTile({
       <rect width="400" height="300" fill="var(--dracula-bg-light)" />
       {size === 'sm' && (
         <>
-          {/* Stars */}
-          <g fill={stars} opacity={0.55}>
+          {/* Stars: decorative wash, comment so purple stays reserved for tappables. */}
+          <g fill="var(--dracula-comment)" opacity={0.55}>
             <circle cx={40 + ((index * 37) % 320)} cy={30} r={2} />
             <circle cx={120 + ((index * 23) % 200)} cy={52} r={1.6} />
             <circle cx={260 + ((index * 11) % 110)} cy={26} r={2.2} />