astryx-dracula 0.4.0 → 0.5.0

package/package.json

@@ -41,6 +41,9 @@
     "./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",
     ".": {
       "types": "./astryx-dracula.d.ts",
@@ -92,7 +95,8 @@
     "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",
@@ -111,7 +115,7 @@
     "@astryxdesign/cli"
   ],
   "type": "module",
-  "version": "0.4.0",
+  "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/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} />

package/shared/settings-data.ts

@@ -165,3 +165,31 @@ export const sideNavHeading: CSSProperties = {
   marginInline: 'var(--spacing-4)',
 };
 
+// Locale pickers shared by the sidebar and dialog templates. The two copies
+// were byte-identical walls; a single source keeps them in sync.
+export const LANGUAGES: {label: string; value: string}[] = [
+  {label: 'English (Canada)', value: 'en-CA'},
+  {label: 'English (US)', value: 'en-US'},
+  {label: 'French', value: 'fr'},
+  {label: 'Spanish', value: 'es'},
+  {label: 'German', value: 'de'},
+  {label: 'Japanese', value: 'ja'},
+];
+
+export const CURRENCIES: {label: string; value: string}[] = [
+  {label: 'Canadian dollar (CAD)', value: 'CAD'},
+  {label: 'US dollar (USD)', value: 'USD'},
+  {label: 'Euro (EUR)', value: 'EUR'},
+  {label: 'British pound (GBP)', value: 'GBP'},
+  {label: 'Japanese yen (JPY)', value: 'JPY'},
+];
+
+export const TIMEZONES: {label: string; value: string}[] = [
+  {label: '(GMT-05:00) Eastern Time (US & Canada)', value: 'ET'},
+  {label: '(GMT-06:00) Central Time (US & Canada)', value: 'CT'},
+  {label: '(GMT-07:00) Mountain Time (US & Canada)', value: 'MT'},
+  {label: '(GMT-08:00) Pacific Time (US & Canada)', value: 'PT'},
+  {label: '(GMT+00:00) UTC', value: 'UTC'},
+  {label: '(GMT+01:00) London', value: 'GMT+1'},
+];
+

package/shared/settings-rows.tsx

@@ -72,10 +72,7 @@ import {Divider} from '@astryxdesign/core/Divider';
 //    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.
+// read only when `actionKind` says the row navigates.
 
 export function InfoRowItem({
   label,
@@ -200,8 +197,6 @@ export function ExpandableRow({
   onEdit: () => void;
   onCancel: () => void;
   onSave: () => void;
-  /** 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;

package/shared/stars.tsx

@@ -0,0 +1,28 @@
+import {HStack} from '@astryxdesign/core/Stack';
+import {Text} from '@astryxdesign/core/Text';
+import {Icon} from '@astryxdesign/core/Icon';
+import {Star} from 'lucide-react';
+
+export function StarRating({rating, count}: {rating: number; count: number}) {
+  const filled = Math.round(rating);
+  const empty = 5 - filled;
+
+  return (
+    <HStack gap={1} vAlign="center">
+      {Array.from({length: filled}, (_, i) => (
+        <Icon key={`full-${i}`} icon={Star} size="sm" color="yellow" />
+      ))}
+      {/* secondary, not disabled: --color-icon-disabled #6272A4 is 2.51:1 on
+          the card #343746, under the 3:1 non-text floor, and reads as "this
+          control is unavailable" — but a star is a data mark, not a control.
+          --color-icon-secondary #9AA1BC is 4.60:1, one step under the filled
+          yellow (7.4:1), so the two halves still read as one rating. */}
+      {Array.from({length: empty}, (_, i) => (
+        <Icon key={`empty-${i}`} icon={Star} size="sm" color="secondary" />
+      ))}
+      <Text type="body" color="secondary" hasTabularNumbers>
+        {rating} ({count})
+      </Text>
+    </HStack>
+  );
+}