@@ -276,21 +313,20 @@ export function SearchPill({ value, onChange, placeholder, color = BRAND, inputR
// ── Card shells & table head cell ────────────────────────────────────────────────
export function Card({ children, className = '', flush }: { children: React.ReactNode; className?: string; flush?: 'top' }) {
return (
-
+
);
}
/** Filter/tab bar paper that visually joins the table below it (flat bottom). */
export function FilterBar({ children, className = '' }: { children: React.ReactNode; className?: string }) {
return (
-
+
);
}
@@ -306,24 +342,31 @@ export const TH_STYLE: React.CSSProperties = {
};
export function TableShell({ head, children, minWidth, footer }: { head: string[]; children: React.ReactNode; minWidth?: number; footer?: React.ReactNode }) {
+ // `children` is a stream of caller-authored
/, so the body stays a
+ // plain TableBody passthrough — swapping every row in ten screens is Phase 6's
+ // job, not this one. Head cells move to Astryx now because they are owned
+ // here and nobody outside supplies them.
return (
-
+
-
-
-
+
+
+
{head.map((h, i) => (
- 1 ? 'text-right' : ''}`}>{h}
+ // TableHeaderCell has no `align` prop, so the right-alignment
+ // from column three onwards is kept on an inner span rather
+ // than lost.
+
+ 1 ? 'block text-right' : 'block'}>{h}
+
))}
-
-
-
- {children}
-
-
+
+
+
{children}
+
+
);
}
@@ -347,16 +392,14 @@ export function Skeleton({ className = '', style }: { className?: string; style?
* Wraps children and shows a sleek dark explanation box on hover.
*/
export function Tooltip({ children, content, position = 'top' }: { children: React.ReactNode; content: React.ReactNode; position?: 'top' | 'bottom' }) {
+ // Straight swap. Astryx's version also opens on keyboard focus, which the
+ // hover-only original never did — a real accessibility gain for free.
return (
-
+ // Astryx names placements by flow direction, not by physical edge — so
+ // top/bottom become above/below. The public prop keeps its old names.
+
+ {children}
+
);
}
@@ -376,20 +419,37 @@ export function SlideDrawer({
children: React.ReactNode;
}) {
- // Prevent body scroll when open
+ // Kept rather than delegated to Astryx's Dialog. Dialog is a centred modal
+ // built on ; this is an edge-anchored drawer, and forcing one into
+ // the other would change the shape of six screens in a phase whose whole
+ // premise is that call sites do not change. What it does gain is Dialog's
+ // two behaviours that were missing here: Escape closes it, and focus is
+ // restored to whatever opened it. Phase 5 is where the overlay family gets
+ // unified properly.
useEffect(() => {
if (isOpen) document.body.style.overflow = 'hidden';
else document.body.style.overflow = '';
return () => { document.body.style.overflow = ''; };
}, [isOpen]);
+ useEffect(() => {
+ if (!isOpen) return;
+ const opener = document.activeElement as HTMLElement | null;
+ const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+ document.addEventListener('keydown', onKey);
+ return () => {
+ document.removeEventListener('keydown', onKey);
+ opener?.focus?.();
+ };
+ }, [isOpen, onClose]);
+
if (!isOpen) return null;
return (
{/* Muted Backdrop */}
-
diff --git a/src/components/spike/ConsoleUiProbe.tsx b/src/components/spike/ConsoleUiProbe.tsx
new file mode 100644
index 0000000..3dc8f35
--- /dev/null
+++ b/src/components/spike/ConsoleUiProbe.tsx
@@ -0,0 +1,121 @@
+/**
+ * PHASE 3 verification harness — THROWAWAY, delete with the spike folder.
+ *
+ * The ten screens that consume consoleUi sit behind a login, so this renders
+ * the seven rewritten primitives directly with stand-in data. It imports them
+ * by their original names through the original module path, which is the point:
+ * if these render, the adapters are signature-compatible.
+ */
+
+import React, { useState } from 'react';
+import {
+ Card,
+ FilterBar,
+ TableShell,
+ Skeleton,
+ Tooltip,
+ LiveStatus,
+ SlideDrawer,
+ Pill,
+ StatusChip,
+ MetricPill,
+ StampCell,
+ SearchPill,
+ KpiStrip,
+ ORDER_STATUS,
+ DELIVERY_STATUS,
+ statusColor,
+ BRAND,
+} from '../consoleUi';
+import { Package } from 'lucide-react';
+import { ConfirmModal } from '../ConfirmModal';
+import { useNotify } from '../Toasts';
+
+export default function ConsoleUiProbe() {
+ const { notifyOk, notifyFail } = useNotify();
+ const [confirm, setConfirm] = useState(false);
+ const [drawer, setDrawer] = useState(false);
+ const [q, setQ] = useState('');
+ const [tab, setTab] = useState('pending');
+
+ return (
+
+
consoleUi — Phase 3 adapters
+
+
},
+ { label: 'Delivered', value: '1,102', color: '#10b981', icon:
, badge: '88%' },
+ { label: 'Pending', value: '94', color: '#f59e0b', icon:
},
+ { label: 'Cancelled', value: '52', color: '#ef4444', icon:
},
+ ]}
+ />
+
+
+
+
+
+
+
+ {['pending', 'confirmed', 'delivered', 'cancelled'].map((s) => (
+
setTab(s)} count={12}>
+ {s}
+
+ ))}
+
+ hover me
+
+
setDrawer(true)}>open drawer
+
+
+
+ {[
+ { id: '#1043', s: 'delivered', km: '4.2', amt: '₹248' },
+ { id: '#1041', s: 'cancelled', km: '1.1', amt: '₹89' },
+ { id: '#1040', s: 'pending', km: '7.8', amt: '₹156' },
+ ].map((r) => (
+
+ {r.id}
+ {r.km} km {r.amt}
+
+ ))}
+
+
+
+ Skeletons
+
+
+
+
+
+ Phase 5 — overlays & toasts
+
+ setConfirm(true)}>open confirm dialog
+ notifyOk('Published to all outlets')}>toast: ok
+ notifyFail(new Error('Set a price before publishing.'))}>toast: error
+
+
+
+
{ setConfirm(false); notifyOk('Unpublished from 3 outlets'); }}
+ onCancel={() => setConfirm(false)}
+ />
+
+ setDrawer(false)} title="Order #1043">
+ Escape should close this, and focus should return to the button that opened it.
+
+
+ );
+}
diff --git a/src/components/spike/PosStaffPanelAstryx.tsx b/src/components/spike/PosStaffPanelAstryx.tsx
new file mode 100644
index 0000000..741de86
--- /dev/null
+++ b/src/components/spike/PosStaffPanelAstryx.tsx
@@ -0,0 +1,207 @@
+/**
+ * PHASE 1 SPIKE — THROWAWAY. Delete this whole folder to revert.
+ *
+ * A rebuild of the create-staff form and roster table from PosStaffPanel.tsx
+ * on Astryx, to answer three questions before committing to the migration:
+ *
+ * 1. Does the cascade hold? Specifically, do our unlayered `.max-w-*`
+ * overrides in index.css bleed into Astryx components — they beat every
+ * cascade layer, including `astryx-base`.
+ * 2. What does it cost in bundle size?
+ * 3. Do Field / TextInput / Selector actually cover our validation patterns?
+ *
+ * The validation rules below are copied verbatim in behaviour from
+ * PosStaffPanel.submit() — same order, same messages, same PIN and phone
+ * normalisation — so the comparison is like-for-like. This component is wired
+ * to no mutation: it is a rendering and typing probe, not a working screen.
+ */
+
+import React, { useState } from 'react';
+import { Button } from '@astryxdesign/core/Button';
+import { TextInput } from '@astryxdesign/core/TextInput';
+import { Selector } from '@astryxdesign/core/Selector';
+import { Card } from '@astryxdesign/core/Card';
+import { Badge } from '@astryxdesign/core/Badge';
+import { Banner } from '@astryxdesign/core/Banner';
+import { Text } from '@astryxdesign/core/Text';
+import { Heading } from '@astryxdesign/core/Heading';
+import {
+ Table,
+ TableHeader,
+ TableHeaderCell,
+ TableRow,
+ TableCell,
+ TableBody,
+} from '@astryxdesign/core/Table';
+
+type Row = {
+ pos_user_id: number;
+ full_name: string;
+ role: string;
+ pin: string;
+ contactno: string;
+ status: string;
+};
+
+/** Stand-in roster. The real panel reads this from usePosStaff(). */
+const SAMPLE: Row[] = [
+ { pos_user_id: 1, full_name: 'Anitha R', role: 'Supervisor', pin: '4417', contactno: '9840012345', status: 'active' },
+ { pos_user_id: 2, full_name: 'Karthik S', role: 'Cashier', pin: '2280', contactno: '9840067890', status: 'active' },
+ { pos_user_id: 3, full_name: 'Meena V', role: 'Cashier', pin: '9032', contactno: '9840055512', status: 'inactive' },
+];
+
+const ROLE_OPTIONS = [
+ { value: 'Supervisor', label: 'Supervisor' },
+ { value: 'Cashier', label: 'Cashier' },
+];
+
+/** Per-field errors — the shape Astryx's `status` prop wants. */
+type Errs = Partial
>;
+
+export default function PosStaffPanelAstryx() {
+ const [fullName, setFullName] = useState('');
+ const [role, setRole] = useState('');
+ const [pin, setPin] = useState('');
+ const [phone, setPhone] = useState('');
+ const [errs, setErrs] = useState({});
+ const [banner, setBanner] = useState('');
+
+ const staff = SAMPLE;
+
+ /**
+ * Same rules and same wording as PosStaffPanel.submit(), but each failure is
+ * attached to the field that caused it instead of being funnelled into one
+ * `formError` string above the form. That is the substantive difference the
+ * spike is measuring: today the second error only appears after the first is
+ * fixed, because there is one slot to show it in.
+ */
+ const submit = () => {
+ const next: Errs = {};
+ const name = fullName.trim();
+
+ if (!name) next.name = 'Enter the person’s name.';
+ if (!role) next.role = 'Choose a role.';
+ if (!/^\d{4}$/.test(pin)) {
+ next.pin = 'The PIN must be exactly 4 digits.';
+ } else if (staff.some((s) => s.pin === pin && (s.status || '').toLowerCase() !== 'inactive')) {
+ next.pin = 'Another active person at this outlet already uses that PIN.';
+ }
+
+ const digits = phone.replace(/\D/g, '').replace(/^91(?=\d{10}$)/, '').replace(/^0(?=\d{10}$)/, '');
+ if (digits.length !== 10) {
+ next.phone = 'Enter a 10-digit mobile number.';
+ } else if (staff.some((s) => (s.contactno || '') === digits && (s.status || '').toLowerCase() !== 'inactive')) {
+ next.phone = 'Another active person here already signs in with that number.';
+ }
+
+ setErrs(next);
+ setBanner(Object.keys(next).length ? '' : `Would create ${name} as ${role}. (Spike — no mutation is wired.)`);
+ };
+
+ return (
+
+
+ POS staff — Astryx spike
+
+ Throwaway rebuild of the create-staff form and roster. Compare against the live panel
+ at Settings › POS staff.
+
+
+
+ {/* Banner takes `title`, not children — one of several components here
+ that are label-prop driven rather than composition driven. */}
+ {banner &&
}
+
+ {/* Q1 probe: max-w-sm is one of the five utilities our unlayered repair
+ restates. If the repair bleeds past the layer boundary it will squeeze
+ this card, exactly as it squeezed the modals before the repair. */}
+
+
+
Add a person
+
+
setFullName(v)}
+ placeholder="e.g. Anitha R"
+ status={errs.name ? { type: 'error', message: errs.name } : undefined}
+ />
+
+ setRole(String(v ?? ''))}
+ placeholder="Choose a role"
+ status={errs.role ? { type: 'error', message: errs.role } : undefined}
+ />
+
+ setPin(v)}
+ placeholder="4 digits"
+ description="Used to sign in at the till."
+ status={errs.pin ? { type: 'error', message: errs.pin } : undefined}
+ />
+
+ setPhone(v)}
+ placeholder="10 digits"
+ status={errs.phone ? { type: 'error', message: errs.phone } : undefined}
+ />
+
+
+ {
+ setFullName('');
+ setRole('');
+ setPin('');
+ setPhone('');
+ setErrs({});
+ setBanner('');
+ }}
+ />
+
+
+
+
+
Roster
+
+
+
+ Name
+ Role
+ PIN
+ Mobile
+ Status
+
+
+
+ {staff.map((s) => (
+
+ {s.full_name}
+ {s.role}
+ {s.pin}
+ {s.contactno}
+
+
+
+ ))}
+
+
+
+
= {
+ card: {
+ backgroundColor: 'var(--color-background-body)',
+ color: 'var(--color-text-primary)',
+ minWidth: 0,
+ borderColor: 'transparent',
+ },
+ checkoutStack: {
+ minWidth: 0,
+ width: '100%',
+ },
+ paymentCardContent: {
+ minWidth: 0,
+ width: '100%',
+ textAlign: 'center',
+ wordBreak: 'break-word',
+ },
+ inventoryCard: {
+ backgroundColor: 'var(--color-background-surface)',
+ color: 'var(--color-text-primary)',
+ overflow: 'hidden',
+ },
+ inventoryHeader: {
+ paddingBlock: 'var(--spacing-6)',
+ paddingInline: 'var(--spacing-6)',
+ },
+ inventoryFilterRow: {
+ paddingBlock: 'var(--spacing-4)',
+ paddingInline: 'var(--spacing-6)',
+ width: '100%',
+ overflowX: 'auto' as const,
+ },
+ // Inset the table by --spacing-6 (the card is padding={0}) so its edge lines
+ // up with the header/filter row in every theme's spacing scale.
+ inventoryTableWrap: {
+ paddingInline: 'var(--spacing-6)',
+ paddingBlockEnd: 'var(--spacing-2)',
+ },
+ searchInput: {
+ flex: 1,
+ minWidth: 0,
+ maxWidth: 240,
+ },
+ activityCard: {
+ backgroundColor: 'var(--color-background-surface)',
+ color: 'var(--color-text-primary)',
+ minWidth: 0,
+ height: '100%',
+ },
+ chatCard: {
+ backgroundColor: 'var(--color-background-surface)',
+ color: 'var(--color-text-primary)',
+ minWidth: 0,
+ overflow: 'hidden',
+ display: 'flex',
+ flexDirection: 'column' as const,
+ },
+ chatHeader: {
+ paddingBlock: 'var(--spacing-4)',
+ paddingInline: 'var(--spacing-4)',
+ },
+ activityCardStack: {
+ height: '100%',
+ },
+ activityListFade: {
+ flex: 1,
+ minHeight: 0,
+ overflow: 'hidden',
+ maskImage:
+ 'linear-gradient(to bottom, black calc(100% - 48px), transparent)',
+ WebkitMaskImage:
+ 'linear-gradient(to bottom, black calc(100% - 48px), transparent)',
+ marginInline: 'calc(var(--spacing-2) * -1)',
+ },
+ content: {
+ maxWidth: 960,
+ marginInline: 'auto',
+ minWidth: 0,
+ },
+ contentFluid: {
+ maxWidth: 880,
+ },
+ heroText: {
+ textAlign: 'center' as const,
+ maxWidth: 560,
+ },
+ centerText: {
+ textAlign: 'center',
+ },
+ cardStack: {
+ height: '100%',
+ },
+ cardDescription: {
+ flex: 1,
+ },
+ quantityInput: {
+ // minWidth (not a hard width) so the field grows to fit the digit + the
+ // theme's input padding. A fixed 40px was too tight on themes with larger
+ // padding / bigger type scale (e.g. Matcha, Y2K), clipping the value.
+ minWidth: 64,
+ flexShrink: 0,
+ },
+ cartButton: {
+ flex: 1,
+ },
+};
+
+// Styles applied directly to plain DOM elements via the `style` prop.
+// Plain inline styles so they render with no CSS compiler. All are static
+// (no media/pseudo variants), so inline styles reproduce them exactly.
+const inlineStyles: Record = {
+ inventoryBannerWrap: {
+ paddingInline: 'var(--spacing-6)',
+ paddingBottom: 'var(--spacing-4)',
+ },
+ thumbnail: {
+ width: 40,
+ height: 40,
+ borderRadius: 'var(--radius-element)',
+ objectFit: 'cover',
+ display: 'block',
+ flexShrink: 0,
+ },
+ thumbnailFallback: {
+ width: 40,
+ height: 40,
+ borderRadius: 'var(--radius-element)',
+ backgroundColor: 'var(--color-background-muted)',
+ color: 'var(--color-text-secondary)',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ fontSize: 'var(--font-size-sm)',
+ fontWeight: 600,
+ flexShrink: 0,
+ },
+ kpiValue: {
+ fontSize: 24,
+ fontWeight: 700,
+ lineHeight: 1.1,
+ color: 'var(--color-text-primary)',
+ fontFamily: 'var(--font-family-heading)',
+ letterSpacing: '-0.01em',
+ },
+ chatBody: {
+ flex: 1,
+ minHeight: 0,
+ overflow: 'hidden',
+ },
+ chatSuggestions: {
+ paddingInline: 'var(--spacing-4)',
+ paddingBottom: 'var(--spacing-2)',
+ },
+ chatComposer: {
+ paddingInline: 'var(--spacing-4)',
+ paddingBottom: 'var(--spacing-4)',
+ },
+ activityIcon: {
+ width: 32,
+ height: 32,
+ borderRadius: 'var(--radius-full)',
+ backgroundColor: 'var(--color-background-muted)',
+ color: 'var(--color-text-secondary)',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ flexShrink: 0,
+ },
+ productImage: {
+ width: '100%',
+ height: '100%',
+ objectFit: 'cover',
+ },
+ cardBody: {
+ padding: 'var(--spacing-4)',
+ flex: 1,
+ display: 'flex',
+ flexDirection: 'column',
+ },
+};
+
+const PRODUCT_IMAGE_KEYS = ['watch', 'headphones', 'backpack'];
+
+/** Categorical badge variants usable for showcase product/inventory tags. */
+export type ShowcaseBadgeVariant =
+ | 'blue'
+ | 'cyan'
+ | 'green'
+ | 'orange'
+ | 'pink'
+ | 'purple'
+ | 'red'
+ | 'teal'
+ | 'yellow';
+
+export interface ProductSpec {
+ name: string;
+ description: string;
+ badge: string;
+ badgeVariant: ShowcaseBadgeVariant;
+}
+
+const DEFAULT_PRODUCTS: ProductSpec[] = [
+ {
+ name: 'Minimalist Watch',
+ description: 'Clean design meets everyday durability.',
+ badge: 'New',
+ badgeVariant: 'blue',
+ },
+ {
+ name: 'Wireless Headphones',
+ description: 'Immersive sound, all-day comfort.',
+ badge: 'Popular',
+ badgeVariant: 'green',
+ },
+ {
+ name: 'Canvas Backpack',
+ description: 'Water-resistant canvas with a quiet, modern profile.',
+ badge: 'Limited',
+ badgeVariant: 'yellow',
+ },
+];
+
+// Neutral product photos, served from the shared astryx asset CDN so the
+// scaffolded template renders real imagery without needing local public assets.
+const DEFAULT_IMAGES: Record = {
+ watch: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20300%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22%23f5f6f8%22%2F%3E%3Cg%20transform%3D%22translate%28200%20150%29%22%20fill%3D%22none%22%20stroke%3D%22%23c2cad6%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%22-44%22%20y%3D%22-44%22%20width%3D%2288%22%20height%3D%2288%22%20rx%3D%2216%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%22-18%22%20r%3D%222.5%22%20fill%3D%22%23c2cad6%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M-34%2030%20L-8%200%20L10%2018%20L20%208%20L34%2024%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E',
+ headphones:
+ 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20300%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22%23f5f6f8%22%2F%3E%3Cg%20transform%3D%22translate%28200%20150%29%22%20fill%3D%22none%22%20stroke%3D%22%23c2cad6%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%22-44%22%20y%3D%22-44%22%20width%3D%2288%22%20height%3D%2288%22%20rx%3D%2216%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%22-18%22%20r%3D%222.5%22%20fill%3D%22%23c2cad6%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M-34%2030%20L-8%200%20L10%2018%20L20%208%20L34%2024%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E',
+ backpack: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20300%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22%23f5f6f8%22%2F%3E%3Cg%20transform%3D%22translate%28200%20150%29%22%20fill%3D%22none%22%20stroke%3D%22%23c2cad6%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%22-44%22%20y%3D%22-44%22%20width%3D%2288%22%20height%3D%2288%22%20rx%3D%2216%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%22-18%22%20r%3D%222.5%22%20fill%3D%22%23c2cad6%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M-34%2030%20L-8%200%20L10%2018%20L20%208%20L34%2024%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E',
+ wallet: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20300%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22%23f5f6f8%22%2F%3E%3Cg%20transform%3D%22translate%28200%20150%29%22%20fill%3D%22none%22%20stroke%3D%22%23c2cad6%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%22-44%22%20y%3D%22-44%22%20width%3D%2288%22%20height%3D%2288%22%20rx%3D%2216%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%22-18%22%20r%3D%222.5%22%20fill%3D%22%23c2cad6%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M-34%2030%20L-8%200%20L10%2018%20L20%208%20L34%2024%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E',
+ tumbler: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20300%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22%23f5f6f8%22%2F%3E%3Cg%20transform%3D%22translate%28200%20150%29%22%20fill%3D%22none%22%20stroke%3D%22%23c2cad6%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%22-44%22%20y%3D%22-44%22%20width%3D%2288%22%20height%3D%2288%22%20rx%3D%2216%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%22-18%22%20r%3D%222.5%22%20fill%3D%22%23c2cad6%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M-34%2030%20L-8%200%20L10%2018%20L20%208%20L34%2024%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E',
+ throw_: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20300%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22%23f5f6f8%22%2F%3E%3Cg%20transform%3D%22translate%28200%20150%29%22%20fill%3D%22none%22%20stroke%3D%22%23c2cad6%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%22-44%22%20y%3D%22-44%22%20width%3D%2288%22%20height%3D%2288%22%20rx%3D%2216%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%22-18%22%20r%3D%222.5%22%20fill%3D%22%23c2cad6%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M-34%2030%20L-8%200%20L10%2018%20L20%208%20L34%2024%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E',
+};
+
+export interface ThemeShowcaseProps {
+ /** Product card images keyed by slot (watch/headphones/backpack/…). */
+ images?: Record;
+ /** The three hero product cards. Defaults to the neutral store products. */
+ products?: ProductSpec[];
+ /** Inventory table rows. Defaults to the neutral store inventory. */
+ inventory?: InventoryRow[];
+}
+
+// Default export is the route page (sandbox renders this as a Next.js page, so
+// it must take no props / satisfy PageProps). It renders the store with the
+// neutral defaults. Consumers that need per-theme content import the named
+// `ThemeShowcaseStore` below and pass images/products/inventory.
+export default function ThemeShowcase() {
+ return ;
+ inventory: InventoryRow[];
+ isMobile: boolean;
+}) {
+ const columns = isMobile ? 1 : ({minWidth: 200, repeat: 'fit'} as const);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+function StorePreview({
+ images,
+ products,
+ isMobile,
+}: {
+ images: Record;
+ products: ProductSpec[];
+ isMobile: boolean;
+}) {
+ return (
+
+
+
+
+
+
+ }
+ />
+
+
+
+
+
+
+ Little joys,
+
+
+ We believe the smallest details are the ones that matter most.
+ Turn an ordinary day into something worth remembering.
+
+
+
+
+
+ {products.map((p, i) => (
+
+
+
+
+
+
+
+
+
+ {p.name}
+
+
+ {p.description}
+
+
+ {}}
+ min={1}
+ max={99}
+ size="sm"
+ style={styles.quantityInput}
+ />
+
+
+
+
+
+ ))}
+
+
+
+
+
+
+ Checkout
+
+
+ {}}
+ size="lg"
+ />
+
+ {}}>
+
+ $12.00
+
+ }
+ />
+
+ $16.00
+
+ }
+ />
+
+ $24.00
+
+ }
+ />
+
+
+
+
+ Payment method
+
+
+ {}}
+ padding={3}>
+
+
+ Card
+
+
+
+ {}}
+ padding={3}>
+
+
+ Apple Pay
+
+
+
+ {}}
+ padding={3}>
+
+
+ Google Pay
+
+
+
+
+
+
+ {}}
+ startIcon={
+ {}}
+ size="lg"
+ />
+ {}}
+ size="lg"
+ />
+
+
+ {}}
+ size="lg"
+ options={[
+ {value: 'us', label: 'United States'},
+ {value: 'ca', label: 'Canada'},
+ {value: 'uk', label: 'United Kingdom'},
+ {value: 'de', label: 'Germany'},
+ {value: 'jp', label: 'Japan'},
+ {value: 'au', label: 'Australia'},
+ ]}
+ />
+
+
+ {}}
+ />
+
+
+
+ );
+}
+
+const SUGGESTED_QUESTIONS = [
+ 'Reschedule delivery',
+ 'Update shipping address',
+ 'Start a return',
+];
+
+function ChatCard() {
+ return (
+
+
+ Studio AI
+
+
+
+
+
+
+
+ Today
+
+
+
+ Where’s my order?
+
+
+
+
+
+
+ Your order #1043 — the Minimalist Watch and Linen Throw —
+ shipped this morning from the Aisle 3 warehouse and is currently
+ in transit with UPS. It’s on track to arrive at your address by
+ end of day tomorrow.
+
+
+ Let me know if you’d like to reschedule the delivery, redirect
+ it to a pickup point, or start a return once it arrives.
+
+
+
+
+
+
+ Can you show me the full details?
+
+
+
+
+
+ Here’s everything I have on order #1043:
+
+
+ -
+ $248
+
+ }
+ />
+
-
+ $12
+
+ }
+ />
+
- Track →}
+ />
+
+
+
+
+
+
+
+
+
+ {SUGGESTED_QUESTIONS.map(question => (
+
+
+
+
+ {}}
+ onSubmit={() => {}}
+ placeholder="Ask Studio AI…"
+ footerActions={
+
+
+ );
+}
+
+interface ActivityRow {
+ id: string;
+ icon: ReactNode;
+ label: string;
+ detail: string;
+ time: string;
+ amount: number;
+}
+
+const ACTIVITY: ActivityRow[] = [
+ {
+ id: '1',
+ icon:
+
+ Revenue
+
+
+
+ 18K
+
+ Monthly revenue
+
+
+
+ +12%
+
+ Order growth
+
+
+
+
+
+ Activity
+
+
+
+ {ACTIVITY.map(item => (
+ -
+ {item.icon}
+
+ {formatAmount(item.amount)}
+
+ }
+ href="#"
+ />
+ ))}
+
+
+
+ );
+}
+
+type TagSpec = {label: string; variant: ShowcaseBadgeVariant};
+
+export interface InventoryRow extends Record {
+ id: string;
+ name: string;
+ meta: string;
+ available: number;
+ location: string;
+ tags: TagSpec[];
+ imageKey?: string;
+ thumbnailFallback: string;
+ selected: boolean;
+}
+
+const DEFAULT_INVENTORY: InventoryRow[] = [
+ {
+ id: 'a',
+ name: 'Minimalist Watch',
+ meta: 'Stainless steel, sapphire crystal',
+ available: 42,
+ location: 'Aisle 3',
+ tags: [{label: 'New', variant: 'blue'}],
+ imageKey: 'watch',
+ thumbnailFallback: 'M',
+ selected: false,
+ },
+ {
+ id: 'b',
+ name: 'Wireless Headphones',
+ meta: 'ANC, 30hr battery',
+ available: 128,
+ location: 'Aisle 1',
+ tags: [{label: 'Popular', variant: 'green'}],
+ imageKey: 'headphones',
+ thumbnailFallback: 'W',
+ selected: true,
+ },
+ {
+ id: 'c',
+ name: 'Canvas Backpack',
+ meta: 'Water-resistant, 25L',
+ available: 63,
+ location: 'Aisle 2',
+ tags: [{label: 'Limited', variant: 'yellow'}],
+ imageKey: 'backpack',
+ thumbnailFallback: 'C',
+ selected: false,
+ },
+ {
+ id: 'd',
+ name: 'Leather Wallet',
+ meta: 'Full-grain, RFID blocking',
+ available: 15,
+ location: 'Aisle 4',
+ tags: [{label: 'Leather', variant: 'yellow'}],
+ imageKey: 'wallet',
+ thumbnailFallback: 'L',
+ selected: true,
+ },
+ {
+ id: 'e',
+ name: 'Travel Tumbler',
+ meta: 'Vacuum insulated, 16oz',
+ available: 87,
+ location: 'Aisle 5',
+ tags: [{label: 'Drinkware', variant: 'green'}],
+ imageKey: 'tumbler',
+ thumbnailFallback: 'T',
+ selected: false,
+ },
+ {
+ id: 'f',
+ name: 'Linen Throw',
+ meta: 'Heavyweight, oat',
+ available: 24,
+ location: 'Aisle 6',
+ tags: [{label: 'Home', variant: 'orange'}],
+ imageKey: 'throw_',
+ thumbnailFallback: 'L',
+ selected: true,
+ },
+];
+
+const LOW_STOCK_THRESHOLD = 25;
+
+function SelectCell({row}: {row: InventoryRow}) {
+ return (
+ {}}
+ />
+ );
+}
+
+function ItemCell({
+ row,
+ images,
+}: {
+ row: InventoryRow;
+ images: Record;
+}) {
+ const thumbnailSrc = row.imageKey ? images[row.imageKey] : undefined;
+ return (
+
+ {thumbnailSrc ? (
+
+ {row.thumbnailFallback}
+
+ )}
+
+
+ {row.name}
+
+
+ {row.meta}
+
+
+
+ );
+}
+
+function TagsCell({row}: {row: InventoryRow}) {
+ return (
+
+ {row.tags.map(tag => (
+
+ );
+}
+
+function ActionsCell() {
+ return (
+ ;
+ inventory: InventoryRow[];
+}) {
+ const lowStockCount = inventory.filter(
+ row => row.available < LOW_STOCK_THRESHOLD,
+ ).length;
+ return (
+
+
+ Inventory
+
+
+
+
+ {}}
+ startIcon={ (
+
+
+
+
+
+
+ {lowStockCount > 0 && (
+
+
+ )}
+
+
+
+ data={inventory}
+ columns={[
+ {
+ key: 'select',
+ header: '',
+ // Wide enough that the control + the theme's cell padding (up to
+ // --spacing-4 = 16px/side on spacious density) fit inside the cell,
+ // so the control's hover background doesn't overflow toward the
+ // card's clipped (rounded) edge on larger-padding themes.
+ width: pixel(64),
+ renderCell: row => {row.available} ,
+ },
+ {
+ key: 'location',
+ header: 'Location',
+ width: pixel(100),
+ renderCell: row => {row.location} ,
+ },
+ {
+ key: 'tags',
+ header: 'Tags',
+ width: proportional(2, {minWidth: 80}),
+ align: 'end',
+ renderCell: row =>
+ );
+}
diff --git a/src/index.css b/src/index.css
index ac82ccb..f96c4db 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,30 @@
+/* ── PHASE 1 SPIKE — Astryx ─────────────────────────────────────────────────
+ Experimental. Revert by restoring `@import "tailwindcss";` in place of the
+ block below and dropping the three @astryxdesign/@stylexjs dependencies.
+
+ The layer order and the split of `@import "tailwindcss"` into its three
+ parts are both prescribed verbatim by the Usage block at the top of
+ @astryxdesign/core/src/tailwind-theme.css — this is not our invention. The
+ ordering matters: `utilities` sits last, so Tailwind utilities keep winning
+ over `astryx-base`, which is what makes a half-migrated file behave.
+
+ Note `astryx.css` loads BEFORE the theme package: the theme supplies the
+ token values that the component CSS references. */
+@layer reset, theme, base, astryx-base, astryx-theme, components, utilities;
+
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');
-@import "tailwindcss";
+
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/preflight.css" layer(base);
+@import "@astryxdesign/core/reset.css";
+@import "@astryxdesign/core/astryx.css";
+/* Our own theme, compiled by `astryx theme build ./src/theme/nearle.ts`.
+ Regenerate with that command after editing nearle.ts — nearle.css is
+ generated and must not be hand-edited. theme-neutral was scaffolding for
+ the Phase 1 spike and is no longer imported. */
+@import "./theme/nearle.css";
+@import "@astryxdesign/core/tailwind-theme.css";
+@import "tailwindcss/utilities.css" layer(utilities);
@theme {
--font-sans: "Public Sans", ui-sans-serif, system-ui, sans-serif;
diff --git a/src/main.tsx b/src/main.tsx
index e66cc21..0ca5718 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -34,15 +34,47 @@ const queryClient = new QueryClient({
});
import { BrowserRouter } from 'react-router-dom';
+import { Theme } from '@astryxdesign/core';
+import { ToastViewport } from '@astryxdesign/core/Toast';
+import { nearleTheme } from './theme/nearle';
createRoot(document.getElementById('root')!).render(
-
-
-
-
-
-
+ {/*
+ Theme has to wrap the app, not sit beside it: it stamps the
+ `data-astryx-theme` / `data-theme` attributes that every token in
+ nearle.css is scoped to. Without it the stylesheet loads and applies to
+ nothing.
+
+ mode is deliberately "light", NOT "system", and it must stay that way
+ until the migration finishes.
+
+ The theme carries a full dark palette and `mode="system"` does work — but
+ only Astryx-backed components respond to it. Everything still on raw
+ Tailwind is pinned to the light scheme by hardcoded classes: KpiStrip
+ renders `bg-white text-slate-900`, SearchPill sets `color: TEXT`
+ (#0f172a). Switching to "system" today means any user whose OS is dark
+ gets white cards on a dark page and a search box with black text on a
+ black field. Verified in the browser, not assumed.
+
+ Flip this to "system" once Phase 6 has removed the hardcoded colours.
+ That single word is the dark-mode launch switch.
+
+ Outermost so nothing above it renders unthemed, but inside StrictMode so
+ it gets the same double-render checks as everything else.
+ */}
+
+ {/* One viewport for the whole app. useToast() anywhere below this renders
+ into it — see components/Toasts.tsx. */}
+
+
+
+
+
+
+
+
+
,
);
diff --git a/src/services/fiestaApi.ts b/src/services/fiestaApi.ts
index daa004b..e79c12b 100644
--- a/src/services/fiestaApi.ts
+++ b/src/services/fiestaApi.ts
@@ -42,7 +42,10 @@ export function buildStoreQrPayload(opts: { tenantid: number; locationid: number
return JSON.stringify({ tenantid: opts.tenantid, locationid: opts.locationid });
}
-async function fiestaGet(endpoint: string, params: QueryParams = {}): Promise {
+// Exported so ad-hoc probes (test-api.ts) can hit an endpoint that has no
+// wrapper yet. Every function below is the supported way in; reach for this
+// only when checking something against the live API.
+export async function fiestaGet(endpoint: string, params: QueryParams = {}): Promise {
const qs = new URLSearchParams();
Object.entries(params).forEach(([k, v]) => {
// Fiesta requires some params to be present-but-empty (e.g. keyword=), so we
diff --git a/src/theme/nearle.css b/src/theme/nearle.css
new file mode 100644
index 0000000..d924e33
--- /dev/null
+++ b/src/theme/nearle.css
@@ -0,0 +1,132 @@
+/*
+ * @generated by `astryx theme build` — do not edit manually.
+ * Source: src\theme\nearle.ts
+ * Command: astryx theme build src\theme\nearle.ts
+ * CLI: @astryxdesign/cli@0.3.0
+ * Core: @astryxdesign/core@0.3.0
+ */
+
+@layer reset {
+@scope ([data-astryx-theme="nearle"]) to ([data-astryx-theme]) {
+ :where(h1, h2, h3, h4, h5, h6) {
+ font-family: var(--font-family-heading);
+ color: var(--color-text-primary);
+ }
+
+ :where(h1) {
+ font-size: var(--text-heading-1-size);
+ font-weight: var(--text-heading-1-weight);
+ line-height: var(--text-heading-1-leading);
+ }
+
+ :where(h2) {
+ font-size: var(--text-heading-2-size);
+ font-weight: var(--text-heading-2-weight);
+ line-height: var(--text-heading-2-leading);
+ }
+
+ :where(h3) {
+ font-size: var(--text-heading-3-size);
+ font-weight: var(--text-heading-3-weight);
+ line-height: var(--text-heading-3-leading);
+ }
+
+ :where(h4) {
+ font-size: var(--text-heading-4-size);
+ font-weight: var(--text-heading-4-weight);
+ line-height: var(--text-heading-4-leading);
+ }
+
+ :where(h5) {
+ font-size: var(--text-heading-5-size);
+ font-weight: var(--text-heading-5-weight);
+ line-height: var(--text-heading-5-leading);
+ }
+
+ :where(h6) {
+ font-size: var(--text-heading-6-size);
+ font-weight: var(--text-heading-6-weight);
+ line-height: var(--text-heading-6-leading);
+ }
+
+ :where(p) {
+ font-family: var(--font-family-body);
+ font-size: var(--text-body-size);
+ font-weight: var(--text-body-weight);
+ line-height: var(--text-body-leading);
+ color: var(--color-text-primary);
+ }
+
+ :where(small) {
+ font-size: var(--text-supporting-size);
+ font-weight: var(--text-supporting-weight);
+ line-height: var(--text-supporting-leading);
+ color: var(--color-text-secondary);
+ }
+
+ :where(code, pre) {
+ font-family: var(--font-family-code);
+ font-size: var(--text-code-size);
+ line-height: var(--text-code-leading);
+ }
+
+ :where(hr) {
+ border: none;
+ border-top: 1px solid var(--color-border);
+ }
+}
+}
+
+@layer astryx-theme {
+ :root { color-scheme: light dark; }
+ html[data-theme="light"] { color-scheme: light; }
+ html[data-theme="dark"] { color-scheme: dark; }
+
+@scope ([data-astryx-theme="nearle"]) to ([data-astryx-theme]) {
+ :scope {
+ --font-family-body: "Public Sans", ui-sans-serif, system-ui, sans-serif;
+ --font-family-heading: "Public Sans", ui-sans-serif, system-ui, sans-serif;
+ --font-family-code: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
+ --color-accent: light-dark(#662582, #B57FD0);
+ --color-on-accent: light-dark(#FFFFFF, #1B1420);
+ --color-accent-muted: light-dark(#66258218, #B57FD024);
+ --color-text-accent: light-dark(#662582, #B57FD0);
+ --color-icon-accent: light-dark(#662582, #B57FD0);
+ --color-text-primary: light-dark(#0f172a, #ECE6F1);
+ --color-text-secondary: light-dark(#64748b, #B3A8BD);
+ --color-text-disabled: light-dark(#94a3b8, #85798F);
+ --color-background-surface: light-dark(#FFFFFF, #1C1724);
+ --color-background-body: light-dark(#f8fafc, #14101A);
+ --color-background-card: light-dark(#FFFFFF, #1C1724);
+ --color-background-popover: light-dark(#FFFFFF, #241D2E);
+ --color-background-muted: light-dark(#f1f5f9, #241D2E);
+ --color-border: light-dark(#e2e8f0, #352C40);
+ --color-border-emphasized: light-dark(#cbd5e1, #4A3E58);
+ --color-skeleton: light-dark(#f1f5f9, #241D2E);
+ --color-success: light-dark(#10b981, #34D399);
+ --color-error: light-dark(#ef4444, #F87171);
+ --color-warning: light-dark(#f59e0b, #FBBF24);
+ --shadow-low: light-dark(0 8px 24px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(0, 0, 0, 0.45));
+ --shadow-med: light-dark(0 14px 40px rgba(15, 23, 42, 0.10), 0 14px 40px rgba(0, 0, 0, 0.55));
+ --shadow-high: light-dark(0 18px 50px rgba(15, 23, 42, 0.18), 0 18px 50px rgba(0, 0, 0, 0.65));
+ }
+}
+}
+
+@layer astryx-theme {
+@scope ([data-astryx-theme="nearle"]) to ([data-astryx-theme]) {
+ [data-astryx-media="dark"] {
+ color-scheme: dark;
+ --color-text-primary: var(--color-on-dark);
+ --color-icon-primary: var(--color-on-dark);
+ --color-accent: var(--color-on-dark);
+ }
+
+ [data-astryx-media="light"] {
+ color-scheme: light;
+ --color-text-primary: var(--color-on-light);
+ --color-icon-primary: var(--color-on-light);
+ --color-accent: var(--color-on-light);
+ }
+}
+}
diff --git a/src/theme/nearle.d.ts b/src/theme/nearle.d.ts
new file mode 100644
index 0000000..4087815
--- /dev/null
+++ b/src/theme/nearle.d.ts
@@ -0,0 +1,10 @@
+/**
+ * @generated by `astryx theme build` — do not edit manually.
+ * Source: src\theme\nearle.ts
+ * Command: astryx theme build src\theme\nearle.ts
+ * CLI: @astryxdesign/cli@0.3.0
+ * Core: @astryxdesign/core@0.3.0
+ */
+
+import type { DefinedTheme } from '@astryxdesign/core/theme';
+export declare const nearleTheme: DefinedTheme;
diff --git a/src/theme/nearle.js b/src/theme/nearle.js
new file mode 100644
index 0000000..b624a8d
--- /dev/null
+++ b/src/theme/nearle.js
@@ -0,0 +1,47 @@
+/**
+ * @generated by `astryx theme build` — do not edit manually.
+ * Source: src\theme\nearle.ts
+ * Command: astryx theme build src\theme\nearle.ts
+ * CLI: @astryxdesign/cli@0.3.0
+ * Core: @astryxdesign/core@0.3.0
+ */
+
+/**
+ * nearle theme — built by `npx astryx theme build`
+ * Import the CSS file alongside this module:
+ *
+ * import { nearleTheme } from './nearle';
+ * import './nearle.css';
+ */
+export const nearleTheme = {
+ name: 'nearle',
+ __built: true,
+ tokens: {
+ "--font-family-body": "\"Public Sans\", ui-sans-serif, system-ui, sans-serif",
+ "--font-family-heading": "\"Public Sans\", ui-sans-serif, system-ui, sans-serif",
+ "--font-family-code": "\"JetBrains Mono\", ui-monospace, SFMono-Regular, monospace",
+ "--color-accent": "light-dark(#662582, #B57FD0)",
+ "--color-on-accent": "light-dark(#FFFFFF, #1B1420)",
+ "--color-accent-muted": "light-dark(#66258218, #B57FD024)",
+ "--color-text-accent": "light-dark(#662582, #B57FD0)",
+ "--color-icon-accent": "light-dark(#662582, #B57FD0)",
+ "--color-text-primary": "light-dark(#0f172a, #ECE6F1)",
+ "--color-text-secondary": "light-dark(#64748b, #B3A8BD)",
+ "--color-text-disabled": "light-dark(#94a3b8, #85798F)",
+ "--color-background-surface": "light-dark(#FFFFFF, #1C1724)",
+ "--color-background-body": "light-dark(#f8fafc, #14101A)",
+ "--color-background-card": "light-dark(#FFFFFF, #1C1724)",
+ "--color-background-popover": "light-dark(#FFFFFF, #241D2E)",
+ "--color-background-muted": "light-dark(#f1f5f9, #241D2E)",
+ "--color-border": "light-dark(#e2e8f0, #352C40)",
+ "--color-border-emphasized": "light-dark(#cbd5e1, #4A3E58)",
+ "--color-skeleton": "light-dark(#f1f5f9, #241D2E)",
+ "--color-success": "light-dark(#10b981, #34D399)",
+ "--color-error": "light-dark(#ef4444, #F87171)",
+ "--color-warning": "light-dark(#f59e0b, #FBBF24)",
+ "--shadow-low": "light-dark(0 8px 24px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(0, 0, 0, 0.45))",
+ "--shadow-med": "light-dark(0 14px 40px rgba(15, 23, 42, 0.10), 0 14px 40px rgba(0, 0, 0, 0.55))",
+ "--shadow-high": "light-dark(0 18px 50px rgba(15, 23, 42, 0.18), 0 18px 50px rgba(0, 0, 0, 0.65))"
+ },
+
+};
diff --git a/src/theme/nearle.ts b/src/theme/nearle.ts
new file mode 100644
index 0000000..542a9b2
--- /dev/null
+++ b/src/theme/nearle.ts
@@ -0,0 +1,102 @@
+/**
+ * The Nearle theme for Astryx — PHASE 2.
+ *
+ * Every value here already existed in the codebase; nothing was invented for
+ * aesthetics. The light column is lifted verbatim from the eleven hardcoded
+ * constants at the top of `components/consoleUi.tsx` and from the two status
+ * colour maps beneath them. The dark column is new, because the console has
+ * never had a dark mode and there was nothing to lift.
+ *
+ * Written by hand rather than by `astryx theme`: that CLI command is an
+ * interactive wizard, and a generated file would still have needed every value
+ * below typed into it.
+ *
+ * TOKEN VALUES take one of two forms (see defineTheme's contract):
+ * 'string' — same in both modes
+ * ['light', 'dark'] — compiled to CSS light-dark()
+ *
+ * HOW MODE IS CHOSEN. `theme-neutral` ships no `prefers-color-scheme` block at
+ * all; Astryx switches on a `data-theme` attribute that the `` provider
+ * stamps. So `mode="system"` on the provider is what connects this to the OS
+ * setting — the stylesheet alone will not do it.
+ */
+
+import { defineTheme } from '@astryxdesign/core';
+
+/**
+ * The dark accent is the one value in this file that is not simply lifted, and
+ * it is the one that needs a human's approval.
+ *
+ * `BRAND` #662582 scores 9.76:1 on white — comfortably AA. On Astryx's dark
+ * surface #1F1F22 it is unreadable, and `BRAND_LIGHT` #9255AB only reaches
+ * **3.22:1**, which is below the 4.5:1 threshold. Measured candidates:
+ *
+ * #9255AB 3.22:1 BRAND_LIGHT as-is fails AA
+ * #A96FC4 4.51:1 passes by 0.01 no headroom
+ * #B57FD0 5.41:1 passes with room ← chosen
+ * #C48FDD 6.51:1 passes, drifts pastel
+ *
+ * #B57FD0 is the lightest value that still reads as the Nearle purple rather
+ * than as lilac. **Brand owner to confirm before dark mode ships.**
+ */
+const BRAND_DARK = '#B57FD0';
+
+export const nearleTheme = defineTheme({
+ name: 'nearle',
+
+ typography: {
+ // Both families are already pulled in by the Google Fonts @import at the
+ // top of index.css, so this re-points Astryx at them rather than adding a
+ // request. Astryx does not load fonts itself — the consumer must.
+ body: { family: 'Public Sans', fallbacks: 'ui-sans-serif, system-ui, sans-serif' },
+ heading: { family: 'Public Sans', fallbacks: 'ui-sans-serif, system-ui, sans-serif' },
+ code: { family: 'JetBrains Mono', fallbacks: 'ui-monospace, SFMono-Regular, monospace' },
+ },
+
+ tokens: {
+ // ── Brand ───────────────────────────────────────────────────────────────
+ '--color-accent': ['#662582', BRAND_DARK],
+ '--color-on-accent': ['#FFFFFF', '#1B1420'],
+ // The alpha suffixes mirror consoleUi's `soft()` helper (18 ≈ 9%), which is
+ // what every tinted brand surface in the app is currently built from.
+ '--color-accent-muted': ['#66258218', `${BRAND_DARK}24`],
+ '--color-text-accent': ['#662582', BRAND_DARK],
+ '--color-icon-accent': ['#662582', BRAND_DARK],
+
+ // ── Text ── TEXT / TEXT_2 / TEXT_3 ──────────────────────────────────────
+ '--color-text-primary': ['#0f172a', '#ECE6F1'],
+ '--color-text-secondary': ['#64748b', '#B3A8BD'],
+ '--color-text-disabled': ['#94a3b8', '#85798F'],
+
+ // ── Surfaces ── SURFACE_ALT / DIVIDER ───────────────────────────────────
+ // The dark greys carry a slight violet bias so they sit under the accent
+ // as a chosen neutral rather than a stock grey.
+ '--color-background-surface': ['#FFFFFF', '#1C1724'],
+ '--color-background-body': ['#f8fafc', '#14101A'],
+ '--color-background-card': ['#FFFFFF', '#1C1724'],
+ '--color-background-popover': ['#FFFFFF', '#241D2E'],
+ '--color-background-muted': ['#f1f5f9', '#241D2E'],
+
+ // ── Lines ── BORDER / DIVIDER ───────────────────────────────────────────
+ '--color-border': ['#e2e8f0', '#352C40'],
+ '--color-border-emphasized': ['#cbd5e1', '#4A3E58'],
+ '--color-skeleton': ['#f1f5f9', '#241D2E'],
+
+ // ── Semantic ────────────────────────────────────────────────────────────
+ // Taken from ORDER_STATUS / DELIVERY_STATUS so a Badge and a status pill
+ // agree. Dark variants are lightened for the same contrast reason as the
+ // accent — the source values are tuned for white.
+ '--color-success': ['#10b981', '#34D399'],
+ '--color-error': ['#ef4444', '#F87171'],
+ '--color-warning': ['#f59e0b', '#FBBF24'],
+
+ // ── Elevation ── SHADOW_MD / SOFT / POP ─────────────────────────────────
+ // Dark mode gets its own shadows rather than the same rgba: a shadow tuned
+ // for a white ground is invisible on a dark one, so the alpha is raised.
+ '--shadow-low': ['0 8px 24px rgba(15, 23, 42, 0.08)', '0 8px 24px rgba(0, 0, 0, 0.45)'],
+ '--shadow-med': ['0 14px 40px rgba(15, 23, 42, 0.10)', '0 14px 40px rgba(0, 0, 0, 0.55)'],
+ '--shadow-high': ['0 18px 50px rgba(15, 23, 42, 0.18)', '0 18px 50px rgba(0, 0, 0, 0.65)'],
+ },
+});
+
+export default nearleTheme;