astryx-dracula 0.2.1 → 0.3.1

package/shared/settings-data.ts

@@ -0,0 +1,125 @@
+// Settings row DATA, split from the row renderers in settings-rows.tsx.
+//
+// WHY: settings-rows.tsx exports components, and a .tsx exporting non-components
+// breaks React Fast Refresh -- editing NAV_ITEMS would remount every settings
+// 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 {
+  Bell,
+  Briefcase,
+  CreditCard,
+  FileText,
+  Fingerprint,
+  Globe,
+  KeyRound,
+  Laptop,
+  Lock,
+  Share2,
+  ShieldCheck,
+  Smartphone,
+  SquarePen,
+  Tablet,
+  User,
+  UserCog,
+} from 'lucide-react';
+
+export interface SettingsNavItem {
+  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},
+];
+
+export interface InfoRow {
+  label: string;
+  value: string;
+  action: string;
+}
+
+export const LOGIN_ROWS: InfoRow[] = [
+  {label: 'Password', value: 'Not created', action: 'Create'},
+];
+
+export const SOCIAL_ROWS: InfoRow[] = [
+  {label: 'Google', value: 'Connected', action: 'Disconnect'},
+];
+
+export interface DeviceRow {
+  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',
+  },
+];
+
+export interface InfoTileData {
+  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.',
+  },
+];
+
+// 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,
+};
+
+// 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',
+};
+
+// Aligns the sidebar heading with list-item label text. No heading margin prop.
+export const sideNavHeading: CSSProperties = {
+  marginInline: 'var(--spacing-4)',
+};
+

package/shared/settings-rows.tsx

@@ -0,0 +1,179 @@
+// Row RENDERERS for the settings dialog and settings sidebar templates.
+// The data they render lives in shared/settings-data.ts, split out so this file
+// exports only components -- a .tsx exporting non-components breaks React Fast
+// Refresh, and three templates read that data, so it was never private to here.
+
+import {
+  DEVICE_ROWS,
+  INFO_TILES,
+  LOGIN_ROWS,
+  SOCIAL_ROWS,
+  actionNoWrap,
+  iconBox,
+  type DeviceRow,
+  type InfoRow,
+  type InfoTileData,
+  type SettingsNavItem,
+} from 'astryx-dracula/shared/settings-data';
+import {
+  Lock,
+  ShieldCheck,
+  Bell,
+  FileText,
+  CreditCard,
+  Globe,
+  Briefcase,
+  SquarePen,
+  Share2,
+} from 'lucide-react';
+import type {CSSProperties, MouseEvent, 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 {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.
+
+export function InfoRowItem({
+  label,
+  value,
+  action,
+  href,
+  style,
+}: InfoRow & {href: string; style?: CSSProperties}) {
+  return (
+    <>
+      <HStack hAlign="between" vAlign="start" style={style}>
+        <VStack gap={0}>
+          <Text type="body" weight="semibold" display="block">
+            {label}
+          </Text>
+          <Text type="body" color="secondary" display="block">
+            {value}
+          </Text>
+        </VStack>
+        {action && (
+          <Link href={href} style={actionNoWrap}>
+            {action}
+          </Link>
+        )}
+      </HStack>
+      <Divider />
+    </>
+  );
+}
+
+function ExpandableRowEditing({
+  label,
+  children,
+  onCancel,
+  onSave,
+  style,
+}: {
+  label: string;
+  children: ReactNode;
+  onCancel: () => void;
+  onSave: () => void;
+  style?: CSSProperties;
+}) {
+  return (
+    <VStack gap={4} style={style}>
+      <Text type="body" weight="semibold" display="block">
+        {label}
+      </Text>
+      {children}
+      <HStack gap={2}>
+        <Button label="Save" variant="primary" onClick={onSave} />
+        <Button label="Cancel" variant="ghost" onClick={onCancel} />
+      </HStack>
+    </VStack>
+  );
+}
+
+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}>
+        <Text type="body" weight="semibold" display="block">
+          {label}
+        </Text>
+        <Text type="body" color="secondary" display="block">
+          {value}
+        </Text>
+      </VStack>
+      <Link
+        href={href}
+        style={actionNoWrap}
+        onClick={(e: MouseEvent) => {
+          e.preventDefault();
+          onEdit();
+        }}>
+        Edit
+      </Link>
+    </HStack>
+  );
+}
+
+export function ExpandableRow({
+  label,
+  value,
+  children,
+  isExpanded,
+  onEdit,
+  onCancel,
+  onSave,
+  href,
+  style,
+}: {
+  label: string;
+  value: string;
+  children: ReactNode;
+  isExpanded: boolean;
+  onEdit: () => void;
+  onCancel: () => void;
+  onSave: () => void;
+  href: string;
+  style?: CSSProperties;
+}) {
+  return (
+    <>
+      {isExpanded ? (
+        <ExpandableRowEditing
+          label={label}
+          onCancel={onCancel}
+          onSave={onSave}
+          style={style}>
+          {children}
+        </ExpandableRowEditing>
+      ) : (
+        <ExpandableRowViewing
+          label={label}
+          value={value}
+          onEdit={onEdit}
+          href={href}
+          style={style}
+        />
+      )}
+      <Divider />
+    </>
+  );
+}

package/shared/sparkline.tsx

@@ -0,0 +1,102 @@
+// Merged trend-bar sparkline: absorbs the dashboard max-normalized fixed
+// geometry and the portfolio range-normalized step geometry behind one mode
+// switch. Purple stays out of the chart so it keeps meaning "interactive".
+
+import {CHART_HUES} from 'astryx-dracula/shared/chart-hues';
+
+export interface SparkPoint {
+  id: string;
+  value: number;
+}
+
+interface SparklineProps {
+  data: SparkPoint[];
+  /** REQUIRED and unique per instance: 4+ sparklines sharing one name is an
+   *  a11y defect (the portfolio bug this module fixes). */
+  label: string;
+  positive: boolean;
+  /** max: fixed geometry normalized against the series max (dashboard tiles).
+   *  range: step geometry normalized against the series range (market rows).
+   *  @default 'max' */
+  mode?: 'max' | 'range';
+  /** @default false */
+  isCompact?: boolean;
+}
+
+export function Sparkline({
+  data,
+  label,
+  positive,
+  mode = 'max',
+  isCompact = false,
+}: SparklineProps) {
+  // Role tokens, not --dracula-* primitives. Byte-identical values
+  // (--color-data-categorical-green IS #50FA7B), so this is a vocabulary
+  // change with no visual delta -- it just means the sparkline agrees with
+  // chart-hues.ts instead of being the one chart module that decided alone.
+  // Reported by a consumer whose test asserted their sparkline fill equalled
+  // their CHART_HUES.green and stopped agreeing across a version bump.
+  const fill = positive ? CHART_HUES.green : CHART_HUES.red;
+  if (mode === 'range') {
+    const values = data.map(point => point.value);
+    const max = Math.max(...values);
+    const min = Math.min(...values);
+    const range = Math.max(1, max - min);
+    const step = 300 / data.length;
+    const height = isCompact ? 24 : 40;
+    const baseline = isCompact ? 21 : 36;
+    const plot = isCompact ? 18 : 32;
+    const floor = isCompact ? 2 : 3;
+    const barWidth = Math.max(1.5, step - 1);
+    return (
+      <svg
+        viewBox={`0 0 300 ${height}`}
+        width="100%"
+        height={height}
+        role="img"
+        aria-label={label}>
+        {data.map((point, slot) => {
+          const barHeight = Math.max(
+            floor,
+            ((point.value - min) / range) * plot,
+          );
+          return (
+            <rect
+              key={point.id}
+              x={slot * step}
+              y={baseline - barHeight}
+              width={barWidth}
+              height={barHeight}
+              rx={Math.min(2, barWidth / 2)}
+              fill={fill}
+            />
+          );
+        })}
+      </svg>
+    );
+  }
+  const max = Math.max(...data.map(point => point.value));
+  return (
+    <svg
+      viewBox="0 0 300 40"
+      width="100%"
+      height={40}
+      role="img"
+      aria-label={label}>
+      {data.map((point, day) => {
+        const barHeight = Math.max(3, (point.value / max) * 32);
+        return (
+          <rect
+            key={point.id}
+            x={day * 10}
+            y={36 - barHeight}
+            width={7}
+            height={barHeight}
+            rx={3.5}
+            fill={fill}
+          />
+        );
+      })}
+    </svg>
+  );
+}

package/shared/sso-icons.tsx

@@ -0,0 +1,30 @@
+// Brand sign-in marks shared by login-card and login-split (byte-identical
+// Apple/Google SVGs). Bespoke inline glyphs, no icon-library equivalent.
+import type {SVGProps} from 'react';
+
+export const AppleIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    width={16}
+    height={16}
+    aria-hidden="true"
+    {...props}>
+    <path d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" />
+  </svg>
+);
+
+export const GoogleIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    width={16}
+    height={16}
+    aria-hidden="true"
+    {...props}>
+    <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" />
+    <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
+    <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" />
+    <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
+  </svg>
+);

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.lg"Hi, Vlad") + Hd"Where should we start?"[level=1 type=display-2]) + ChC"Ask anything" + (V[g=6] > (TgG"Category" > Tg"Writing"*4) + (G[c={min:280} g=3] > (CC[p=4] > V[g=0.5] > Hd"Draft"[level=4] + 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" > 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';
 
@@ -22,6 +22,7 @@ import {
 } from '@astryxdesign/core/Typeahead';
 import {ToggleButton, ToggleButtonGroup} from '@astryxdesign/core/ToggleButton';
 import {Token} from '@astryxdesign/core/Token';
+import {VisuallyHidden} from '@astryxdesign/core/VisuallyHidden';
 import {ClickableCard} from '@astryxdesign/core/ClickableCard';
 import {Grid} from '@astryxdesign/core/Grid';
 import {Icon} from '@astryxdesign/core/Icon';
@@ -39,9 +40,17 @@ import {
 } from 'lucide-react';
 
 // Fill the content area so the greeting and composer stay vertically centered.
-const pageStyle: CSSProperties = {minHeight: '100%'};
-const composerInput: CSSProperties = {minHeight: 84};
-const categories: CSSProperties = {paddingInline: 'var(--space-viewport)'};
+// `height`, not `minHeight`. A percentage min-height resolves against the
+// containing block's DEFINITE height and computes to 0 when that is indefinite
+// (CSS 2.1 10.5), so against a content-sized host it contributes nothing and
+// the Layout's `height: 100%` still resolves to auto -- the edit is a no-op.
+// Viewport units are absolute and need no ancestor, which is why every working
+// instance in this repo uses them (editor.tsx:302, file-explorer.tsx:265,
+// messaging-shell.tsx:67, ai-chat.tsx:64, kanban-board.tsx:704).
+const pageStyle: CSSProperties = {height: '100dvh'};
+// Five --spacing-4 steps: the box opens at ~80px so the empty composer reads
+// as a writing surface, not a single-line field. No single token is 80px.
+const composerInput: CSSProperties = {minHeight: 'calc(var(--spacing-4) * 5)'};
 
 // Suggestion cards shown once a category is selected.
 const CATEGORY_SUGGESTIONS: Record<
@@ -78,7 +87,7 @@ const CATEGORY_SUGGESTIONS: Record<
     },
     {
       heading: 'Write a function',
-      body: 'Generate a well-typed function with error handling',
+      body: 'Conjure a well-typed function warded against the dark',
       prompt: 'Write a function that',
     },
     {
@@ -88,7 +97,7 @@ const CATEGORY_SUGGESTIONS: Record<
     },
     {
       heading: 'Review my pull request',
-      body: 'Check for bugs, contrast, and best practices',
+      body: 'Hunt bugs by moonlight, weigh contrast, bless the rite',
       prompt: 'Review this code for bugs and improvements:',
     },
   ],
@@ -100,7 +109,7 @@ const CATEGORY_SUGGESTIONS: Record<
     },
     {
       heading: 'Explain a concept',
-      body: 'Break down a complex topic in simple terms',
+      body: 'Unravel a tangled grimoire into plain night-tongue',
       prompt: 'Explain the concept of',
     },
     {
@@ -122,12 +131,12 @@ const CATEGORY_SUGGESTIONS: Record<
     },
     {
       heading: 'Write a dark tale',
-      body: 'Create an engaging narrative with creatures',
+      body: 'Spin a moonlit tale crawling with night creatures',
       prompt: 'Write a short story about',
     },
     {
       heading: 'Design a concept',
-      body: 'Explore product or visual design ideas',
+      body: 'Conjure nocturnal rites for product or visual haunts',
       prompt: 'Help me design a concept for',
     },
     {
@@ -232,32 +241,45 @@ const commandTrigger: ChatComposerTrigger = {
 
 const composerTriggers = [mentionTrigger, commandTrigger];
 
+/** Composer attachment. The name is user-facing; the id is the React key, since
+ * two dropped files can share a name. */
+interface Attachment {
+  id: string;
+  name: string;
+}
+
+const INITIAL_ATTACHMENTS: Attachment[] = [
+  'palette_brief.pdf',
+  'nocturne_v2.fig',
+  'api_spec.yaml',
+  'contrast_audit.csv',
+  'dracula_spec.pdf',
+].map((name, index) => ({id: `file-${index + 1}`, name}));
+
+// The composer's imperative insert methods mutate the DOM without emitting a
+// change, so dispatch an input event to sync its value and clear the placeholder.
+const syncComposerValue = () => {
+  document.activeElement?.dispatchEvent(new Event('input', {bubbles: true}));
+};
+
 // Main component
 
 export default function AiChatLanding() {
   const [mode, setMode] = useState<string | null>('auto');
   const [category, setCategory] = useState<string | null>(null);
-  const [attachments, setAttachments] = useState<string[]>([
-    'palette_brief.pdf',
-    'nocturne_v2.fig',
-    'api_spec.yaml',
-    'contrast_audit.csv',
-    'dracula_spec.pdf',
-  ]);
+  const [attachments, setAttachments] = useState<Attachment[]>(
+    INITIAL_ATTACHMENTS,
+  );
   const [isModeMenuOpen, setIsModeMenuOpen] = useState(false);
   const composerInputRef = useRef<ChatComposerInputHandle>(null);
   const shouldFocusComposerRef = useRef(false);
+  // Two dropped files can share a name, so attachments carry their own id.
+  const nextAttachmentId = useRef(INITIAL_ATTACHMENTS.length);
   const dictation = useChatDictation({inputRef: composerInputRef});
 
   const activeMode = MODE_OPTIONS.find(m => m.key === mode) ?? MODE_OPTIONS[0];
   const suggestions = category ? CATEGORY_SUGGESTIONS[category] : null;
 
-  // The composer's imperative insert methods mutate the DOM without emitting a
-  // change, so dispatch an input event to sync its value and clear the placeholder.
-  const syncComposerValue = () => {
-    document.activeElement?.dispatchEvent(new Event('input', {bubbles: true}));
-  };
-
   const applySuggestion = (prompt: string) => {
     const input = composerInputRef.current;
     if (!input) {
@@ -311,8 +333,8 @@ export default function AiChatLanding() {
             {/* Greeting */}
             <VStack gap={1}>
               <HStack gap={2} vAlign="center">
-                <Icon icon={Sparkles} size="md" color="accent" />
-                <Text type="large">
+                <Icon icon={Sparkles} size="md" color="secondary" />
+                <Text type="body">
                   Hi, Vlad
                 </Text>
               </HStack>
@@ -331,19 +353,27 @@ export default function AiChatLanding() {
                   triggers={composerTriggers}
                   style={composerInput}
                   onFiles={files =>
-                    setAttachments(prev => [...prev, ...files.map(f => f.name)])
+                    setAttachments(prev => [
+                      ...prev,
+                      ...files.map(file => ({
+                        id: `file-${++nextAttachmentId.current}`,
+                        name: file.name,
+                      })),
+                    ])
                   }
                 />
               }
               drawer={
                 attachments.length > 0 ? (
                   <ChatComposerDrawer count={attachments.length}>
-                    {attachments.map(name => (
+                    {attachments.map(attachment => (
                       <Token
-                        key={name}
-                        label={name}
+                        key={attachment.id}
+                        label={attachment.name}
                         onRemove={() =>
-                          setAttachments(prev => prev.filter(n => n !== name))
+                          setAttachments(prev =>
+                            prev.filter(item => item.id !== attachment.id),
+                          )
                         }
                       />
                     ))}
@@ -431,7 +461,7 @@ export default function AiChatLanding() {
             />
 
             {/* Category filters + suggestion cards */}
-            <VStack gap={6} style={categories}>
+            <VStack gap={6}>
               <ToggleButtonGroup
                 label="Category"
                 value={category}
@@ -448,7 +478,9 @@ export default function AiChatLanding() {
               </ToggleButtonGroup>
 
               {suggestions && (
-                <Grid columns={{minWidth: 280}} gap={3}>
+                <>
+                  <VisuallyHidden as="h2">Suggested prompts</VisuallyHidden>
+                  <Grid columns={{minWidth: 280}} gap={3}>
                   {suggestions.map(suggestion => (
                     <ClickableCard
                       key={suggestion.heading}
@@ -460,14 +492,15 @@ export default function AiChatLanding() {
                         setMode(category);
                       }}>
                       <VStack gap={0.5}>
-                        <Heading level={4}>{suggestion.heading}</Heading>
+                        <Heading level={3}>{suggestion.heading}</Heading>
                         <Text type="body" color="secondary">
                           {suggestion.body}
                         </Text>
                       </VStack>
                     </ClickableCard>
                   ))}
-                </Grid>
+                  </Grid>
+                </>
               )}
             </VStack>
           </VStack>