astryx-dracula 0.2.1 → 0.3.1

package/shared/scene-castle.tsx

@@ -0,0 +1,322 @@
+// Shared castle scenes for owned hero/gallery/form/auth surfaces.
+// `wide` is the centered-hero banner (800x450); `card` and `tall` are the
+// gallery-hero castle and pines tiles (400x500); `rooftops` is the
+// login-split cover (400x300, crescent-overlay moon, rooftop skyline).
+// Chevron bats stay foreground stroke (w4 wide, w3 card/rooftops); stars
+// carry a `comment` label so the decorative-purple rule survives refactors.
+// Moons are harvest yellow in every scene. Hills live in per-scene
+// constants below.
+
+import {galleryImage} from 'astryx-dracula/shared/gallery-image';
+
+export type SceneCastleVariant = 'wide' | 'card' | 'tall' | 'rooftops';
+
+const WIDE_HILLS = {
+  back: 'M0 330 Q200 260 400 320 T800 300 V450 H0 Z',
+  front: 'M0 385 Q240 320 480 375 T800 360 V450 H0 Z',
+} as const;
+
+const CARD_HILLS = {
+  back: 'M0 360 Q140 300 260 350 T400 335 V500 H0 Z',
+  front: 'M0 420 Q160 365 300 410 T400 400 V500 H0 Z',
+} as const;
+
+const TALL_HILL = 'M0 380 Q200 320 400 370 V500 H0 Z' as const;
+
+function WideCastle() {
+  return (
+    <svg
+      style={galleryImage}
+      viewBox="0 0 800 450"
+      role="img"
+      aria-label="Moonlit castle on a hill in Dracula theme colors">
+      <rect width="800" height="450" fill="var(--dracula-bg-dark)" />
+      {/* Stars */}
+      <g fill="var(--dracula-comment)">
+        <circle cx="60" cy="60" r="2.5" />
+        <circle cx="180" cy="120" r="2" />
+        <circle cx="330" cy="50" r="2.5" />
+        <circle cx="470" cy="90" r="2" />
+        <circle cx="700" cy="200" r="2.5" />
+        <circle cx="750" cy="80" r="2" />
+      </g>
+      <g fill="var(--dracula-cyan)">
+        <circle cx="120" cy="90" r="2" />
+        <circle cx="270" cy="70" r="2.5" />
+        <circle cx="540" cy="50" r="2" />
+        <circle cx="660" cy="160" r="2" />
+      </g>
+      <g fill="var(--dracula-pink)">
+        <circle cx="90" cy="170" r="2" />
+        <circle cx="400" cy="130" r="2.5" />
+        <circle cx="590" cy="200" r="2" />
+        <circle cx="730" cy="260" r="2" />
+      </g>
+      {/* Harvest moon */}
+      <circle cx="620" cy="110" r="56" fill="var(--dracula-yellow)" />
+      <circle
+        cx="600"
+        cy="95"
+        r="10"
+        fill="var(--dracula-orange)"
+        opacity={0.5}
+      />
+      <circle
+        cx="638"
+        cy="125"
+        r="7"
+        fill="var(--dracula-orange)"
+        opacity={0.5}
+      />
+      {/* Bats */}
+      <g
+        fill="none"
+        stroke="var(--dracula-fg)"
+        strokeWidth={4}
+        strokeLinecap="round">
+        <path d="M120 130 q12 -12 24 0 q12 -12 24 0" />
+        <path d="M210 90 q9 -9 18 0 q9 -9 18 0" />
+        <path d="M470 160 q9 -9 18 0 q9 -9 18 0" />
+      </g>
+      {/* Hills */}
+      <path d={WIDE_HILLS.back} fill="var(--dracula-selection)" />
+      <path d={WIDE_HILLS.front} fill="var(--dracula-bg-light)" />
+      {/* Castle */}
+      <g>
+        <rect
+          x="150"
+          y="225"
+          width="120"
+          height="120"
+          rx={4}
+          fill="var(--dracula-bg-lighter)"
+        />
+        <rect
+          x="130"
+          y="185"
+          width="44"
+          height="160"
+          rx={4}
+          fill="var(--dracula-bg-lighter)"
+        />
+        <rect
+          x="246"
+          y="185"
+          width="44"
+          height="160"
+          rx={4}
+          fill="var(--dracula-bg-lighter)"
+        />
+        <g fill="var(--dracula-bg-lighter)">
+          <rect x="130" y="175" width="12" height="14" rx={2} />
+          <rect x="149" y="175" width="12" height="14" rx={2} />
+          <rect x="246" y="175" width="12" height="14" rx={2} />
+          <rect x="265" y="175" width="12" height="14" rx={2} />
+          <rect x="150" y="215" width="14" height="16" rx={2} />
+          <rect x="173" y="215" width="14" height="16" rx={2} />
+          <rect x="196" y="215" width="14" height="16" rx={2} />
+          <rect x="219" y="215" width="14" height="16" rx={2} />
+          <rect x="242" y="215" width="14" height="16" rx={2} />
+        </g>
+        <g fill="var(--dracula-yellow)">
+          <rect x="168" y="255" width="14" height="20" rx={2} />
+          <rect x="203" y="255" width="14" height="20" rx={2} />
+          <rect x="238" y="255" width="14" height="20" rx={2} />
+          <rect x="143" y="215" width="10" height="14" rx={2} />
+          <rect x="259" y="215" width="10" height="14" rx={2} />
+        </g>
+        <path
+          d="M195 345 v-30 a15 15 0 0 1 30 0 v30 Z"
+          fill="var(--dracula-bg-dark)"
+        />
+      </g>
+    </svg>
+  );
+}
+
+function CardCastle() {
+  return (
+    <svg
+      style={galleryImage}
+      viewBox="0 0 400 500"
+      role="img"
+      aria-label="Moonlit castle on midnight hills">
+      <rect width="400" height="500" fill="var(--dracula-bg-dark)" />
+      {/* Stars */}
+      <g fill="var(--dracula-comment)">
+        <circle cx="50" cy="60" r="2.5" />
+        <circle cx="140" cy="130" r="2" />
+        <circle cx="240" cy="50" r="2.5" />
+        <circle cx="330" cy="110" r="2" />
+        <circle cx="300" cy="200" r="2.5" />
+      </g>
+      <g fill="var(--dracula-cyan)">
+        <circle cx="95" cy="90" r="2" />
+        <circle cx="200" cy="100" r="2.5" />
+        <circle cx="360" cy="60" r="2" />
+      </g>
+      <circle cx="290" cy="120" r="52" fill="var(--dracula-yellow)" />
+      <circle
+        cx="272"
+        cy="106"
+        r="9"
+        fill="var(--dracula-orange)"
+        opacity={0.5}
+      />
+      <g
+        fill="none"
+        stroke="var(--dracula-fg)"
+        strokeWidth={3}
+        strokeLinecap="round">
+        <path d="M70 170 q12 -12 24 0 q12 -12 24 0" />
+        <path d="M150 130 q9 -9 18 0 q9 -9 18 0" />
+      </g>
+      <path d={CARD_HILLS.back} fill="var(--dracula-selection)" />
+      <path d={CARD_HILLS.front} fill="var(--dracula-bg-light)" />
+      <g>
+        <rect
+          x="140"
+          y="270"
+          width="120"
+          height="110"
+          rx={4}
+          fill="var(--dracula-bg-lighter)"
+        />
+        <rect
+          x="118"
+          y="235"
+          width="44"
+          height="145"
+          rx={4}
+          fill="var(--dracula-bg-lighter)"
+        />
+        <rect
+          x="238"
+          y="235"
+          width="44"
+          height="145"
+          rx={4}
+          fill="var(--dracula-bg-lighter)"
+        />
+        <g fill="var(--dracula-yellow)">
+          <rect x="160" y="300" width="14" height="20" rx={2} />
+          <rect x="196" y="300" width="14" height="20" rx={2} />
+          <rect x="232" y="300" width="14" height="20" rx={2} />
+          <rect x="131" y="262" width="10" height="14" rx={2} />
+          <rect x="253" y="262" width="10" height="14" rx={2} />
+        </g>
+        <path
+          d="M185 380 v-28 a15 15 0 0 1 30 0 v28 Z"
+          fill="var(--dracula-bg-dark)"
+        />
+      </g>
+    </svg>
+  );
+}
+
+function TallPines() {
+  return (
+    <svg
+      style={galleryImage}
+      viewBox="0 0 400 500"
+      role="img"
+      aria-label="Harvest moon over midnight pines">
+      <rect width="400" height="500" fill="var(--dracula-bg-dark)" />
+      {/* Stars */}
+      <g fill="var(--dracula-pink)">
+        <circle cx="60" cy="80" r="2" />
+        <circle cx="160" cy="50" r="2.5" />
+        <circle cx="320" cy="70" r="2" />
+        <circle cx="90" cy="190" r="2.5" />
+        <circle cx="250" cy="160" r="2" />
+      </g>
+      <g fill="var(--dracula-cyan)">
+        <circle cx="110" cy="120" r="2" />
+        <circle cx="220" cy="90" r="2" />
+        <circle cx="350" cy="150" r="2.5" />
+      </g>
+      <circle cx="200" cy="190" r="72" fill="var(--dracula-yellow)" />
+      <circle
+        cx="176"
+        cy="170"
+        r="12"
+        fill="var(--dracula-orange)"
+        opacity={0.5}
+      />
+      <circle
+        cx="222"
+        cy="210"
+        r="8"
+        fill="var(--dracula-orange)"
+        opacity={0.5}
+      />
+      <g
+        fill="none"
+        stroke="var(--dracula-fg)"
+        strokeWidth={3}
+        strokeLinecap="round">
+        <path d="M90 260 q12 -12 24 0 q12 -12 24 0" />
+        <path d="M260 250 q9 -9 18 0 q9 -9 18 0" />
+      </g>
+      <path d={TALL_HILL} fill="var(--dracula-selection)" />
+      <g fill="var(--dracula-bg-light)">
+        <path d="M70 500 V400 l28 -44 28 44 v100 Z" />
+        <path d="M170 500 V420 l28 -44 28 44 v80 Z" />
+        <path d="M270 500 V410 l28 -44 28 44 v90 Z" />
+      </g>
+      <g fill="var(--dracula-yellow)">
+        <rect x="81" y="442" width="8" height="12" rx={2} />
+        <rect x="181" y="458" width="8" height="12" rx={2} />
+        <rect x="281" y="450" width="8" height="12" rx={2} />
+      </g>
+    </svg>
+  );
+}
+
+function Rooftops() {
+  return (
+    <svg
+      style={galleryImage}
+      viewBox="0 0 400 300"
+      preserveAspectRatio="xMidYMid slice"
+      role="img"
+      aria-label="Harvest moon over the castle rooftops">
+      <rect width="400" height="300" fill="var(--dracula-bg)" />
+      <g fill="var(--dracula-fg)">
+        <circle cx="68" cy="52" r="2" />
+        <circle cx="330" cy="70" r="2" />
+      </g>
+      <g fill="var(--dracula-comment)">
+        <circle cx="140" cy="36" r="1.5" />
+        <circle cx="292" cy="34" r="1.5" />
+        <circle cx="360" cy="140" r="1.5" />
+      </g>
+      <circle cx="200" cy="118" r="52" fill="var(--dracula-yellow)" />
+      <circle cx="182" cy="104" r="44" fill="var(--dracula-bg)" />
+      <g
+        fill="var(--dracula-current-line)"
+        stroke="var(--dracula-comment)"
+        strokeWidth="3"
+        strokeLinejoin="round">
+        <rect x="20" y="220" width="110" height="80" />
+        <path d="M20 220 L75 178 L130 220 Z" />
+        <rect x="150" y="200" width="100" height="100" />
+        <path d="M150 200 L200 162 L250 200 Z" />
+        <rect x="270" y="228" width="110" height="72" />
+        <path d="M270 228 L325 190 L380 228 Z" />
+      </g>
+      <g fill="var(--dracula-yellow)">
+        <rect x="58" y="244" width="14" height="18" />
+        <rect x="188" y="224" width="14" height="18" />
+        <rect x="312" y="250" width="14" height="18" />
+      </g>
+    </svg>
+  );
+}
+
+export function SceneCastle({variant}: {variant: SceneCastleVariant}) {
+  if (variant === 'wide') return <WideCastle />;
+  if (variant === 'card') return <CardCastle />;
+  if (variant === 'rooftops') return <Rooftops />;
+  return <TallPines />;
+}

package/shared/scene-frame.tsx

@@ -0,0 +1,88 @@
+// Shared scene frame: the accessible, colour-correct wrapper every hand-drawn
+// scene SVG in the kit sits inside.
+//
+// WHY THIS EXISTS: twelve scene components across tech-report (795 lines) and
+// product-tour (504 lines) each open with the same seven lines — viewBox,
+// preserveAspectRatio, a fill style, role="img", aria-label, and a backdrop
+// rect — and shared/scene-tile.tsx and shared/scene-castle.tsx carry the same
+// frame a third and fourth time. Beyond the duplication, those scenes painted
+// 45 values with --dracula-comment, which is a BORDER colour, not a text or
+// data colour. This module exists so that mistake has exactly one place to
+// happen.
+//
+// COLOUR CONTRACT (UIAuditColorMotion, measured against --dracula-bg-dark
+// #21222C, the tier every scene paints on — a tier darker than the page #282A36,
+// which is why the old ratios were worse than they looked):
+//   value  #F8F8F2  14.81:1   --color-text-highlight
+//   para   #B0B3C4   7.59:1   --color-text-paragraph (axes, ticks, captions)
+//   sec    #9AA1BC   6.16:1   --color-text-secondary
+//   cyan   #8BE9FD  11.41:1   --color-data-categorical-cyan (accent marks)
+//   COMMENT #6272A4  3.36:1   clears the 3:1 GRAPHICAL floor, FAILS the 4.5:1
+//                             TEXT floor, and any fillOpacity below 0.9 makes
+//                             it worse: 0.85 -> 2.81, 0.60 -> 2.06. The two
+//                             floors are different rules and Comment sits
+//                             between them, so its correctness depends entirely
+//                             on what it paints:
+//                               TEXT  -> never Comment. It is disabled text.
+//                                        Use paragraph (7.59:1) or highlight
+//                                        (14.81:1) for values. This is the
+//                                        45-instance defect.
+//                               EMPTY CELL / subtle grid line -> Comment is
+//                                        CORRECT at full opacity (3.36:1).
+//                                        An empty cell is a graphical object
+//                                        carrying data — a reader must see
+//                                        that a position exists and was not
+//                                        kept — so the 3:1 floor applies, and
+//                                        3.36:1 clears it.
+// Do NOT "improve" an empty cell to --color-separator #44475A. Measured on
+// #21222C: separator's CEILING is 1.73:1 at full opacity, and at 0.55 it is
+// 1.32:1. No alpha fixes it, and a grid whose empty cells have vanished is not
+// a grid. Subtle is not the same as invisible.
+//
+// CORRECTNESS CONSTRAINT, not a style note: this module MUST NOT own a <defs>
+// id namespace. product-tour hardcodes gradient ids pt-night-glow and
+// pt-night-pool, and twelve scenes can render on one page. If this file ever
+// generates ids, those scenes collide and the second scene's gradients resolve
+// to the first's. Callers pass their own gradient ids in via children.
+//
+// Not interactive. A scene is artwork, not a control: no hover, no focus ring.
+
+import type {CSSProperties, ReactNode} from 'react';
+
+export interface SceneFrameProps {
+  /** Accessible name for the art. Required and unique per instance: four or
+   *  more scenes sharing one name is the a11y defect the Sparkline `label` prop
+   *  was extracted to fix. */
+  label: string;
+  /** Scene contents. Any <defs> and gradient ids belong to the caller. */
+  children: ReactNode;
+  /** @default '0 0 400 225' */
+  viewBox?: string;
+  /** Backdrop fill painted behind the scene. @default 'var(--dracula-bg-dark)' */
+  fill?: string;
+  /** Paints the backdrop rect. Set false when the scene draws its own. @default true */
+  hasBackdrop?: boolean;
+  /** Forwarded to the root svg. */
+  style?: CSSProperties;
+}
+
+export function SceneFrame({
+  label,
+  children,
+  viewBox = '0 0 400 225',
+  fill = 'var(--dracula-bg-dark)',
+  hasBackdrop = true,
+  style,
+}: SceneFrameProps) {
+  return (
+    <svg
+      viewBox={viewBox}
+      preserveAspectRatio="xMidYMid slice"
+      style={{width: '100%', height: '100%', display: 'block', ...style}}
+      role="img"
+      aria-label={label}>
+      {hasBackdrop ? <rect width="100%" height="100%" fill={fill} /> : null}
+      {children}
+    </svg>
+  );
+}

package/shared/scene-hues.ts

@@ -0,0 +1,49 @@
+// Scene art-treatment vocabulary, split from the component that renders it.
+//
+// WHY A SEPARATE MODULE: a .tsx that exports both components and
+// non-components breaks React Fast Refresh -- editing a constant forces a
+// full remount instead of a hot update. `react-doctor/only-export-components`
+// catches it; this is the fix it asks for. It also matches shared/chart-hues.ts,
+// which the chart vocabulary already uses, so the kit has one shape rather than
+// one precedent and one exception.
+
+export type SceneTileSize = 'lg' | 'sm';
+
+/**
+ * Art-treatment hues for scene tiles. Purple-free by this module's remit.
+ * Membership is not a contrast decision — every candidate clears WCAG 1.4.11
+ * on both dark surfaces at the disc's 0.9 opacity, including purple.
+ */
+export const SCENE_HUES = {
+  muted: 'var(--dracula-comment)',
+  cyan: 'var(--dracula-cyan)',
+  green: 'var(--dracula-green)',
+  yellow: 'var(--dracula-yellow)',
+  orange: 'var(--dracula-orange)',
+  pink: 'var(--dracula-pink)',
+  red: 'var(--dracula-red)',
+} as const;
+
+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 = [
+  'Moonlit ridge trail under a harvest moon',
+  'Late portrait in violet lamplight',
+  'Lamplit reading nook after midnight',
+  'Fog rolling over the night pines',
+  'Dancer caught mid-step in stage pink',
+  'Kitchen table set for a midnight feast',
+  'Castle silhouette over sleeping hills',
+  'Attic window glowing amber at 2am',
+  'Cellar shelves lined with bottled dusk',
+] as const;

package/shared/scene-tile.tsx

@@ -0,0 +1,128 @@
+// Shared mountain-glyph scene tile for owned gallery surfaces.
+// Large fork: documentation/library/mixed/payment/product-detail/
+// product-gallery — centered glyph on a flat field. Small fork:
+// classic/side — full night landscape (stars, moon, hills) with a tighter
+// glyph frame. The glyph stroke stays comment so tiles stay on-brand in the
+// dark-only theme.
+// Wave 2 owns the documentation + payment-form migration — those templates
+// keep their local glyphs until then.
+//
+// REMIT (art treatment, not data): this module's scenes take a `SceneHue` from
+// `SCENE_HUES` below. Purple is excluded because this module reserves it for
+// tappables — NOT because of contrast, which it passes (4.27:1 on the surface
+// tier at the disc's 0.9 opacity). This is a separate vocabulary from
+// `CHART_HUES` on purpose: that set is purple-free because purple must never
+// encode DATA, this one is purple-free because this module says so. Two sets,
+// two stated reasons. Reusing `CHART_HUES` here would make it purple-free for
+// a reason that has nothing to do with this rule.
+//
+// The type is the enforcement, not this comment. `hue: string` accepted any
+// `var(--dracula-*)` and every caller decided alone, which is how purple
+// reached a 34px disc. The union turns that into a compile error at the call
+// 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';
+
+
+interface SceneTileProps {
+  /**
+   * Per-tile accent: the sm fork paints it as the moon disc (`:70`, a 34px
+   * radius at 0.9 opacity) and as glyph dots; the lg fork paints the glyph.
+   * One prop, three areas of very different size — the split by role is a
+   * deliberate follow-up, not an oversight. Both areas clear 1.4.11 at the
+   * same `SceneHue`, so the split is about which role may take which subset,
+   * not about a second contrast axis.
+   */
+  hue: SceneHue;
+  /** Accessible name for the tile art. */
+  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;
+}
+
+
+export function SceneTile({
+  hue,
+  label,
+  size = 'lg',
+  stars = 'var(--dracula-comment)',
+  index = 0,
+}: SceneTileProps) {
+  const moonX = 90 + ((index * 53) % 220);
+  const moonY = 62 + ((index * 29) % 60);
+  const hillA = 190 + ((index * 13) % 40);
+  const hillB = 215 + ((index * 17) % 40);
+  return (
+    <svg
+      viewBox="0 0 400 300"
+      preserveAspectRatio="xMidYMid slice"
+      style={galleryImage}
+      role="img"
+      aria-label={label}>
+      <rect width="400" height="300" fill="var(--dracula-bg-light)" />
+      {size === 'sm' && (
+        <>
+          {/* Stars */}
+          <g fill={stars} 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} />
+            <circle cx={330} cy={70 + ((index * 7) % 30)} r={1.6} />
+          </g>
+          <circle cx={moonX} cy={moonY} r={34} fill={hue} opacity={0.9} />
+          <circle
+            cx={moonX - 12}
+            cy={moonY - 8}
+            r={28}
+            fill="var(--dracula-bg-light)"
+            opacity={0.55}
+          />
+          <path
+            d={`M0 ${hillA} Q100 ${hillA - 50} 200 ${hillA - 10} T400 ${hillA - 30} V300 H0 Z`}
+            fill="var(--dracula-current-line)"
+          />
+          <path
+            d={`M0 ${hillB} Q120 ${hillB - 40} 240 ${hillB} T400 ${hillB - 20} V300 H0 Z`}
+            fill="var(--dracula-bg)"
+          />
+        </>
+      )}
+      {size === 'sm' ? (
+        <g
+          transform={`translate(${60 + ((index * 41) % 280)} ${hillB - 34})`}
+          fill="none"
+          stroke={hue}
+          strokeWidth="4"
+          strokeLinecap="round"
+          strokeLinejoin="round">
+          <rect x="-22" y="-22" width="44" height="44" rx={4} />
+          <circle cx="9" cy="-9" r="2" fill={hue} stroke="none" />
+          <path d="M-17 15 L-4 0 L5 9 L10 4 L17 12" />
+        </g>
+      ) : (
+        <g
+          transform="translate(200 150)"
+          fill="none"
+          stroke="var(--dracula-comment)"
+          strokeWidth="5"
+          strokeLinecap="round"
+          strokeLinejoin="round">
+          <rect x="-44" y="-44" width="88" height="88" rx="5" />
+          <circle cx="18" cy="-18" r="2.5" fill={hue} stroke="none" />
+          <path d="M-34 30 L-8 0 L10 18 L20 8 L34 24" />
+        </g>
+      )}
+    </svg>
+  );
+}