astryx-dracula 0.5.0 → 0.6.2

package/shared/scene-hues.ts

@@ -7,7 +7,7 @@
 // which the chart vocabulary already uses, so the kit has one shape rather than
 // one precedent and one exception.
 
-export type SceneTileSize = 'lg' | 'sm';
+export type SceneTileSize = "lg" | "sm";
 
 /**
  * Art-treatment hues for scene tiles. Purple-free by this module's remit.
@@ -15,13 +15,13 @@ export type SceneTileSize = 'lg' | 'sm';
  * 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)',
+	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];
@@ -29,13 +29,13 @@ export type SceneHue = (typeof SCENE_HUES)[keyof typeof 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',
+	"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

@@ -21,100 +21,96 @@
 // 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 type {SceneHue, SceneTileSize} from 'astryx-dracula/shared/scene-hues';
-
+import { galleryImage } from "astryx-dracula/shared/gallery-image";
+import type { SceneHue, 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;
-  /** Positional seed so repeated sm tiles vary moon, hills, and star field.
-   *  Ignored by the lg fork (one centered glyph, no variance). */
-  index?: number;
+	/**
+	 * 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;
+	/** 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',
-  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: 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} />
-            <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>
-  );
+export function SceneTile({ hue, label, size = "lg", 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: 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} />
+						<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>
+	);
 }

package/shared/settings-data.ts

@@ -5,41 +5,36 @@
 // row instead of hot-updating. `react-doctor/only-export-components` catches it.
 // Three templates (settings, settings-sidebar, settings-dialog) read from here,
 // so this data is genuinely shared rather than co-located by accident.
-import type {CSSProperties} from 'react';
-import type {LucideIcon} from 'lucide-react';
+
+import type { LucideIcon } from "lucide-react";
 import {
-  Bell,
-  Briefcase,
-  CreditCard,
-  FileText,
-  Fingerprint,
-  Globe,
-  KeyRound,
-  Laptop,
-  Lock,
-  Share2,
-  ShieldCheck,
-  Smartphone,
-  SquarePen,
-  Tablet,
-  User,
-  UserCog,
-} from 'lucide-react';
+	Bell,
+	Briefcase,
+	CreditCard,
+	FileText,
+	Globe,
+	Lock,
+	Share2,
+	ShieldCheck,
+	SquarePen,
+	User,
+} from "lucide-react";
+import type { CSSProperties } from "react";
 
 export interface SettingsNavItem {
-  label: string;
-  icon: LucideIcon;
+	label: string;
+	icon: LucideIcon;
 }
 
 export const NAV_ITEMS: SettingsNavItem[] = [
-  {label: 'Personal information', icon: User},
-  {label: 'Login & security', icon: Lock},
-  {label: 'Privacy', icon: ShieldCheck},
-  {label: 'Notifications', icon: Bell},
-  {label: 'Taxes', icon: FileText},
-  {label: 'Payments', icon: CreditCard},
-  {label: 'Languages & currency', icon: Globe},
-  {label: 'Travel for work', icon: Briefcase},
+	{ label: "Personal information", icon: User },
+	{ label: "Login & security", icon: Lock },
+	{ label: "Privacy", icon: ShieldCheck },
+	{ label: "Notifications", icon: Bell },
+	{ label: "Taxes", icon: FileText },
+	{ label: "Payments", icon: CreditCard },
+	{ label: "Languages & currency", icon: Globe },
+	{ label: "Travel for work", icon: Briefcase },
 ];
 
 /**
@@ -49,45 +44,45 @@ export const NAV_ITEMS: SettingsNavItem[] = [
  * 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 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;
+	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'},
+	{ label: "Password", value: "Not created", action: "Create" },
 ];
 
 // Disconnecting ends an account link the user set up on purpose, so it is the
@@ -95,101 +90,100 @@ export const LOGIN_ROWS: InfoRow[] = [
 // 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', variant: 'destructive'},
+	{ label: "Google", value: "Connected", action: "Disconnect", variant: "destructive" },
 ];
 
 export interface DeviceRow {
-  label: string;
-  isCurrent?: boolean;
-  location: string;
-  action?: string;
+	label: string;
+	isCurrent?: boolean;
+	location: string;
+	action?: string;
 }
 
 export const DEVICE_ROWS: DeviceRow[] = [
-  {
-    label: 'OS X 10.15.7 · Chrome',
-    isCurrent: true,
-    location: 'Brașov, Transylvania · March 30, 2026 at 19:31',
-  },
-  {label: 'Session', location: 'August 9, 2023 at 04:19', action: 'Log out'},
-  {
-    label: 'OS X 10.15.7 · unknown',
-    location: 'Whitby, England · April 14, 2023 at 17:47',
-    action: 'Log out',
-  },
+	{
+		label: "OS X 10.15.7 · Chrome",
+		isCurrent: true,
+		location: "Brașov, Transylvania · March 30, 2026 at 19:31",
+	},
+	{ label: "Session", location: "August 9, 2023 at 04:19", action: "Log out" },
+	{
+		label: "OS X 10.15.7 · unknown",
+		location: "Whitby, England · April 14, 2023 at 17:47",
+		action: "Log out",
+	},
 ];
 
 export interface InfoTileData {
-  icon: LucideIcon;
-  title: string;
-  body: string;
+	icon: LucideIcon;
+	title: string;
+	body: string;
 }
 
 export const INFO_TILES: InfoTileData[] = [
-  {
-    icon: Lock,
-    title: "Why isn't my info shown here?",
-    body: "We're veiling some crypt details to protect your identity.",
-  },
-  {
-    icon: SquarePen,
-    title: 'Which details can be edited?',
-    body: "Contact runes and personal details can be edited. If these were used to verify your identity, you'll need to be verified anew before your next stay, or to keep hosting your crypt.",
-  },
-  {
-    icon: Share2,
-    title: 'What info is shared with others?',
-    body: 'We only release contact runes after a booking is sealed.',
-  },
+	{
+		icon: Lock,
+		title: "Why isn't my info shown here?",
+		body: "We're veiling some crypt details to protect your identity.",
+	},
+	{
+		icon: SquarePen,
+		title: "Which details can be edited?",
+		body: "Contact runes and personal details can be edited. If these were used to verify your identity, you'll need to be verified anew before your next stay, or to keep hosting your crypt.",
+	},
+	{
+		icon: Share2,
+		title: "What info is shared with others?",
+		body: "We only release contact runes after a booking is sealed.",
+	},
 ];
 
 // Shared row chrome: the icon chip, nowrap action column, and sidebar heading
 // offset duplicated across settings-dialog and settings-sidebar. Tokens only,
 // no layout opinions — templates keep their own padding/dividers.
 export const iconBox: CSSProperties = {
-  borderRadius: 'var(--radius-container)',
-  backgroundColor: 'var(--color-background-surface)',
-  flexShrink: 0,
+	borderRadius: "var(--radius-container)",
+	backgroundColor: "var(--color-background-surface)",
+	flexShrink: 0,
 };
 
 // Keeps row actions ("Log out", "Deactivate") on one line: without this the
 // action column wraps mid-phrase at tablet widths while the info column still
 // has room to wrap instead.
 export const actionNoWrap: CSSProperties = {
-  flexShrink: 0,
-  whiteSpace: 'nowrap',
+	flexShrink: 0,
+	whiteSpace: "nowrap",
 };
 
 // Aligns the sidebar heading with list-item label text. No heading margin prop.
 export const sideNavHeading: CSSProperties = {
-  marginInline: 'var(--spacing-4)',
+	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 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 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'},
+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" },
 ];
-