astryx-dracula 0.3.1 → 0.5.0

package/shared/settings-data.ts

@@ -42,18 +42,60 @@ export const NAV_ITEMS: SettingsNavItem[] = [
   {label: 'Travel for work', icon: Briefcase},
 ];
 
+/**
+ * How a row's trailing Button reads. Deliberately narrower than core's
+ * `ButtonVariant`: a trailing row control is not a place to choose freely, and
+ * two of core's four options can never be right here — `primary` would
+ * 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 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;
 }
 
 export const LOGIN_ROWS: InfoRow[] = [
   {label: 'Password', value: 'Not created', action: 'Create'},
 ];
 
+// Disconnecting ends an account link the user set up on purpose, so it is the
+// one destructive row in this file — marked here, from the verb, not by
+// 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'},
+  {label: 'Google', value: 'Connected', action: 'Disconnect', variant: 'destructive'},
 ];
 
 export interface DeviceRow {
@@ -123,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

@@ -26,32 +26,73 @@ import {
   SquarePen,
   Share2,
 } from 'lucide-react';
-import type {CSSProperties, MouseEvent, ReactNode} from 'react';
+import type {CSSProperties, 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 {Link} from '@astryxdesign/core/Link';
 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.
+// were byte-identical apart from things that genuinely differ per template, so
+// those are props rather than forks: `style` (the sidebar pads its rows, the
+// dialog does not) and `hasDivider` (each template draws its own group
+// boundaries). Verified by hash before the move — the row BODIES matched
+// exactly; only these call-site differences remained.
+//
+// FOUR RULES these rows are built around, from USAGE.md "Rules":
+//  - A link is a destination, a button is an action. The trailing control is a
+//    `Button` when the row acts in place and a `Link` when it navigates, and
+//    the row data says which: `actionKind` is `'action'` (the default) for
+//    "Create"/"Disconnect", `'destination'` for "View" on a list of past
+//    records, with `href` carrying the destination. It is stated in the data
+//    rather than guessed from the label, because reading the English verb off
+//    the row is what made "View" a button. The Link takes the kit's
+//    hover-only underline — it jumps out of the panel, which is the
+//    navigation case, not prose — and never a hand-rolled `textDecoration`.
+//  - The Button is configured from the row data, never from a constant here.
+//    `variant` defaults to `secondary` and a row opts into `destructive` when
+//    its action ends or destroys something, so a trailing "Disconnect" reads
+//    like the panels' own inline Deactivate/Delete controls instead of like
+//    the "Create" sitting above it. It is never `primary`: a row action must
+//    not outrank the panel's own primary, and a filled accent button in a
+//    trailing column is what made these panels read as a form.
+//    `onAction` becomes the Button's `onClick` and is optional — with no
+//    handler the Button renders inert, which is the honest default for a
+//    showcase with no backend. A consumer with a real handler passes one and
+//    the row goes live; nothing here fabricates state to make it look live.
+//  - A divider is a section boundary, not a row background. Rows therefore
+//    render one ONLY when the caller marks `hasDivider` at a real group
+//    boundary; without it the row leaves the rhythm to the caller's own
+//    `Stack gap` / row padding rather than adding a rule of its own.
+//  - Spacing comes from the scale. The label/value pair is spaced with
+//    `Stack gap`, never a margin, and `gap={1}` matches the rows each template
+//    builds itself (device history, Deactivate, the info tiles) so no row on
+//    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.
 
 export function InfoRowItem({
   label,
   value,
   action,
+  actionKind,
   href,
+  variant = 'secondary',
+  onAction,
   style,
-}: InfoRow & {href: string; style?: CSSProperties}) {
+  hasDivider = true,
+}: InfoRow & {
+  style?: CSSProperties;
+  /** Draw a Divider after the row. True only at a group boundary. */
+  hasDivider?: boolean;
+}) {
   return (
     <>
       <HStack hAlign="between" vAlign="start" style={style}>
-        <VStack gap={0}>
+        <VStack gap={1}>
           <Text type="body" weight="semibold" display="block">
             {label}
           </Text>
@@ -59,13 +100,22 @@ export function InfoRowItem({
             {value}
           </Text>
         </VStack>
-        {action && (
-          <Link href={href} style={actionNoWrap}>
-            {action}
-          </Link>
-        )}
+        {action &&
+          (actionKind === 'destination' && href ? (
+            <Link href={href} style={actionNoWrap}>
+              {action}
+            </Link>
+          ) : (
+            <Button
+              label={action}
+              variant={variant}
+              size="sm"
+              style={actionNoWrap}
+              onClick={onAction}
+            />
+          ))}
       </HStack>
-      <Divider />
+      {hasDivider && <Divider />}
     </>
   );
 }
@@ -101,18 +151,16 @@ 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}>
+      <VStack gap={1}>
         <Text type="body" weight="semibold" display="block">
           {label}
         </Text>
@@ -120,15 +168,13 @@ function ExpandableRowViewing({
           {value}
         </Text>
       </VStack>
-      <Link
-        href={href}
+      <Button
+        label="Edit"
+        variant="secondary"
+        size="sm"
         style={actionNoWrap}
-        onClick={(e: MouseEvent) => {
-          e.preventDefault();
-          onEdit();
-        }}>
-        Edit
-      </Link>
+        onClick={onEdit}
+      />
     </HStack>
   );
 }
@@ -141,8 +187,8 @@ export function ExpandableRow({
   onEdit,
   onCancel,
   onSave,
-  href,
   style,
+  hasDivider = true,
 }: {
   label: string;
   value: string;
@@ -151,8 +197,9 @@ export function ExpandableRow({
   onEdit: () => void;
   onCancel: () => void;
   onSave: () => void;
-  href: string;
   style?: CSSProperties;
+  /** Draw a Divider after the row. True only at a group boundary. */
+  hasDivider?: boolean;
 }) {
   return (
     <>
@@ -169,11 +216,10 @@ export function ExpandableRow({
           label={label}
           value={value}
           onEdit={onEdit}
-          href={href}
           style={style}
         />
       )}
-      <Divider />
+      {hasDivider && <Divider />}
     </>
   );
 }

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>
+  );
+}

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"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))
+//   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" > H[g=1 wrap] > 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';
 
@@ -13,6 +13,7 @@ import {
   ChatDictationButton,
   useChatDictation,
   type ChatComposerInputHandle,
+  type ChatComposerToken,
   type ChatComposerTrigger,
 } from '@astryxdesign/core/Chat';
 import {
@@ -207,37 +208,54 @@ const COMMAND_ITEMS: SearchableItem<{description: string}>[] = [
   },
 ];
 
-const mentionTrigger: ChatComposerTrigger = {
+// One factory for both composer triggers. Render (TypeaheadItem + auxiliary
+// description) and select (token value/label/variant) differ per trigger;
+// the trigger shape doesn't.
+function makeTrigger<TAux>({
+  character,
+  items,
+  getDescription,
+  toToken,
+}: {
+  character: string;
+  items: SearchableItem<TAux>[];
+  getDescription: (aux: TAux | undefined) => string | undefined;
+  toToken: (item: SearchableItem<TAux>) => string | ChatComposerToken;
+}): ChatComposerTrigger {
+  return {
+    character,
+    searchSource: createStaticSource(items),
+    renderItem: item => (
+      <TypeaheadItem
+        item={item}
+        description={getDescription(item.auxiliaryData as TAux | undefined)}
+      />
+    ),
+    onSelect: item => toToken(item as SearchableItem<TAux>),
+  };
+}
+
+const mentionTrigger = makeTrigger({
   character: '@',
-  searchSource: createStaticSource(MENTION_ITEMS),
-  renderItem: item => (
-    <TypeaheadItem
-      item={item}
-      description={(item.auxiliaryData as {role: string})?.role}
-    />
-  ),
-  onSelect: item => ({
+  items: MENTION_ITEMS,
+  getDescription: aux => aux?.role,
+  toToken: item => ({
     value: `@${item.id}`,
     label: item.label,
     variant: 'cyan',
   }),
-};
+});
 
-const commandTrigger: ChatComposerTrigger = {
+const commandTrigger = makeTrigger({
   character: '/',
-  searchSource: createStaticSource(COMMAND_ITEMS),
-  renderItem: item => (
-    <TypeaheadItem
-      item={item}
-      description={(item.auxiliaryData as {description: string})?.description}
-    />
-  ),
-  onSelect: item => ({
+  items: COMMAND_ITEMS,
+  getDescription: aux => aux?.description,
+  toToken: item => ({
     value: `/${item.label}`,
     label: `/${item.label}`,
     variant: 'yellow',
   }),
-};
+});
 
 const composerTriggers = [mentionTrigger, commandTrigger];
 
@@ -254,7 +272,7 @@ const INITIAL_ATTACHMENTS: Attachment[] = [
   'api_spec.yaml',
   'contrast_audit.csv',
   'dracula_spec.pdf',
-].map((name, index) => ({id: `file-${index + 1}`, name}));
+].map(name => ({id: crypto.randomUUID(), 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.
@@ -262,6 +280,35 @@ const syncComposerValue = () => {
   document.activeElement?.dispatchEvent(new Event('input', {bubbles: true}));
 };
 
+// One inserter for every composer write. `insertText` replaces the selection
+// (suggestion prompts); `insertToken` inserts a chip at the cursor without
+// touching the selection (mentions, mode tokens).
+function insertIntoComposer(
+  input: ChatComposerInputHandle | null,
+  write: {text: string} | {token: ChatComposerToken},
+  collapseToEnd = false,
+) {
+  if (!input) {
+    return;
+  }
+  input.focus();
+  if (document.activeElement) {
+    if (collapseToEnd) {
+      const sel = window.getSelection();
+      sel?.selectAllChildren(document.activeElement);
+      sel?.collapseToEnd();
+    } else {
+      window.getSelection()?.selectAllChildren(document.activeElement);
+    }
+  }
+  if ('text' in write) {
+    input.insertText(write.text);
+  } else {
+    input.insertToken(write.token);
+  }
+  syncComposerValue();
+}
+
 // Main component
 
 export default function AiChatLanding() {
@@ -273,53 +320,36 @@ export default function AiChatLanding() {
   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);
+  // Dictation mic stays: the composer still renders ChatDictationButton below.
   const dictation = useChatDictation({inputRef: composerInputRef});
 
   const activeMode = MODE_OPTIONS.find(m => m.key === mode) ?? MODE_OPTIONS[0];
   const suggestions = category ? CATEGORY_SUGGESTIONS[category] : null;
 
   const applySuggestion = (prompt: string) => {
-    const input = composerInputRef.current;
-    if (!input) {
-      return;
-    }
-    input.focus();
-    if (document.activeElement) {
-      window.getSelection()?.selectAllChildren(document.activeElement);
-    }
-    input.insertText(prompt);
-    syncComposerValue();
+    insertIntoComposer(composerInputRef.current, {text: prompt});
   };
-
   const insertMention = (item: (typeof MENTION_ITEMS)[number]) => {
-    const input = composerInputRef.current;
-    if (!input) {
-      return;
-    }
-    input.focus();
-    if (document.activeElement) {
-      const sel = window.getSelection();
-      sel?.selectAllChildren(document.activeElement);
-      sel?.collapseToEnd();
-    }
-    input.insertToken({
-      value: `@${item.id}`,
-      label: item.label,
-      variant: 'cyan',
-    });
-    syncComposerValue();
+    insertIntoComposer(
+      composerInputRef.current,
+      {
+        token: {
+          value: `@${item.id}`,
+          label: item.label,
+          variant: 'cyan',
+        },
+      },
+      true,
+    );
   };
-
   const insertModeToken = (label: string) => {
-    composerInputRef.current?.focus();
-    composerInputRef.current?.insertToken({
-      value: label,
-      label,
-      variant: 'orange',
+    insertIntoComposer(composerInputRef.current, {
+      token: {
+        value: label,
+        label,
+        variant: 'orange',
+      },
     });
-    syncComposerValue();
   };
 
   return (
@@ -356,7 +386,7 @@ export default function AiChatLanding() {
                     setAttachments(prev => [
                       ...prev,
                       ...files.map(file => ({
-                        id: `file-${++nextAttachmentId.current}`,
+                        id: crypto.randomUUID(),
                         name: file.name,
                       })),
                     ])
@@ -467,14 +497,22 @@ export default function AiChatLanding() {
                 value={category}
                 onChange={setCategory}
                 size="lg">
-                {CATEGORIES.map(cat => (
-                  <ToggleButton
-                    key={cat.key}
-                    value={cat.key}
-                    label={cat.label}
-                    icon={<Icon icon={cat.icon} size="sm" />}
-                  />
-                ))}
+                {/* ToggleButtonGroup is a single nowrap flex row and the four
+                    chips measure 488px together. In a 390px pane the fourth
+                    chip was cut in half by the viewport edge, which reads as a
+                    rendering fault rather than as overflow. The wrapping
+                    HStack gives the row a second line instead; the group keeps
+                    its own selection semantics either way. */}
+                <HStack gap={1} wrap="wrap">
+                  {CATEGORIES.map(cat => (
+                    <ToggleButton
+                      key={cat.key}
+                      value={cat.key}
+                      label={cat.label}
+                      icon={<Icon icon={cat.icon} size="sm" />}
+                    />
+                  ))}
+                </HStack>
               </ToggleButtonGroup>
 
               {suggestions && (