astro-component-kit 0.3.1 → 0.4.1

package/src/components/lib/templates/saas-hotel/SettingsPage.astro

@@ -0,0 +1,115 @@
+---
+/**
+ * SettingsPage — Account & workspace settings: profile, property details, notification switches,
+ * team management with roles and invites, and plan usage / billing.
+ *
+ * Usage (src/pages/app/settings.astro):
+ *   import { SettingsPage } from 'astro-component-kit/templates/saas-hotel';
+ *   <SettingsPage />
+ *
+ * @param {LobbyData} data - Workspace data.
+ * @param {SaasRoutes} routes - Page URLs.
+ * @param {string} theme - Initial theme (light|dark|auto). Default 'light'.
+ */
+import AppLayout from './AppLayout.astro';
+import PageHeader from '../../app/PageHeader.astro';
+import SettingsSection from '../../app/SettingsSection.astro';
+import SwitchRow from '../../app/SwitchRow.astro';
+import TeamMembers from '../../app/TeamMembers.astro';
+import PlanUsageCard from '../../app/PlanUsageCard.astro';
+import AnimatedInput from '../../forms/AnimatedInput.astro';
+import ModernSelect from '../../forms/ModernSelect.astro';
+import { lobbyData, saasRoutes, type LobbyData, type SaasRoutes } from './data';
+
+interface Props {
+  data?: LobbyData;
+  routes?: SaasRoutes;
+  theme?: 'light' | 'dark' | 'auto';
+}
+
+const { data = lobbyData, routes = saasRoutes, theme = 'light' } = Astro.props;
+---
+
+<AppLayout title="Settings" current="settings" data={data} routes={routes} theme={theme}>
+  <PageHeader
+    title="Settings"
+    description="Manage your profile, property, team and billing."
+    breadcrumb={[{ label: data.workspace.name, href: routes.dashboard }, { label: 'Settings' }]}
+    actions={[]}
+    periods={[]}
+    tabs={[
+      { label: 'Profile', href: '#profile' },
+      { label: 'Property', href: '#property' },
+      { label: 'Notifications', href: '#notifications' },
+      { label: 'Team', href: '#team', count: data.team.length },
+      { label: 'Billing', href: '#billing' },
+    ]}
+    currentTab="#profile"
+  />
+
+  <div class="settings">
+    <div id="profile">
+      <SettingsSection id="set-profile" title="Your profile" description="How you appear to your team and in guest messages.">
+        <div class="settings__row">
+          <AnimatedInput label="Full name" id="set-name" name="name" required autocomplete="name" placeholder=" " />
+          <AnimatedInput label="Email" id="set-email" name="email" type="email" required autocomplete="email" />
+        </div>
+        <div class="settings__row">
+          <AnimatedInput label="Job title" id="set-role" name="role" autocomplete="organization-title" />
+          <ModernSelect label="Language" id="set-lang" name="lang" options={[{ label: 'English', value: 'en' }, { label: 'Español', value: 'es' }, { label: 'Русский', value: 'ru' }]} />
+        </div>
+      </SettingsSection>
+    </div>
+
+    <div id="property">
+      <SettingsSection id="set-property" title="Property" description="Details used on invoices, confirmations and your booking engine.">
+        <div class="settings__row">
+          <AnimatedInput label="Property name" id="set-prop" name="property" required />
+          <ModernSelect label="Currency" id="set-cur" name="currency" options={[{ label: 'Euro (€)', value: 'EUR' }, { label: 'US dollar ($)', value: 'USD' }, { label: 'Pound (£)', value: 'GBP' }]} />
+        </div>
+        <div class="settings__row">
+          <ModernSelect label="Check-in time" id="set-in" name="checkin" options={[{ label: '14:00', value: '14' }, { label: '15:00', value: '15' }, { label: '16:00', value: '16' }]} />
+          <ModernSelect label="Check-out time" id="set-out" name="checkout" options={[{ label: '11:00', value: '11' }, { label: '12:00', value: '12' }]} />
+        </div>
+      </SettingsSection>
+    </div>
+
+    <div id="notifications">
+      <SettingsSection id="set-notes" title="Notifications" description="Choose what reaches your inbox and phone.">
+        <SwitchRow name="n-bookings" label="New bookings & cancellations" description="Instant email for every change from any channel." checked />
+        <SwitchRow name="n-house" label="Housekeeping alerts" description="Push notification when a room is out of order." checked />
+        <SwitchRow name="n-reviews" label="New guest reviews" description="Daily digest at 9:00." checked={false} />
+        <SwitchRow name="n-report" label="Weekly performance report" description="Occupancy, ADR and RevPAR every Monday." checked />
+      </SettingsSection>
+    </div>
+
+    <div id="team" class="settings__block">
+      <div class="settings__intro">
+        <h2>Team</h2>
+        <p>Invite colleagues and choose what each role can see and do.</p>
+      </div>
+      <TeamMembers members={data.team} seats={10} />
+    </div>
+
+    <div id="billing" class="settings__block">
+      <div class="settings__intro">
+        <h2>Plan & billing</h2>
+        <p>Your subscription renews automatically. Change or cancel any time.</p>
+      </div>
+      <PlanUsageCard variant="accent" upgrade={{ label: 'Upgrade to Business', href: routes.landing + '#pricing' }} />
+    </div>
+  </div>
+</AppLayout>
+
+<style>
+  .settings { display: grid; max-width: 1040px; }
+  .settings > div { scroll-margin-top: 84px; }
+  .settings__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
+  .settings__block { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: var(--sp-6); padding-block: var(--sp-6); border-bottom: 1px solid var(--c-border); }
+  .settings__intro h2 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--c-text-1); }
+  .settings__intro p { margin: 4px 0 0; font-size: 0.85rem; line-height: 1.55; }
+  @media (max-width: 900px) {
+    .settings__block { grid-template-columns: 1fr; }
+    .settings__row { grid-template-columns: 1fr; }
+  }
+</style>

package/src/components/lib/templates/saas-hotel/SignInPage.astro

@@ -0,0 +1,50 @@
+---
+/**
+ * SignInPage — Split-screen sign-in (or sign-up) for the hotel SaaS using AuthCard.
+ *
+ * Usage (src/pages/sign-in.astro):
+ *   import { SignInPage } from 'astro-component-kit/templates/saas-hotel';
+ *   <SignInPage />
+ *
+ * @param {string} mode - 'signin' or 'signup'. Default 'signin'.
+ * @param {SaasRoutes} routes - Page URLs (demo sign-in goes to `routes.dashboard`).
+ * @param {string} theme - Initial theme (light|dark|auto). Default 'light'.
+ * @param {boolean} noindex - Add robots noindex. Default true.
+ */
+import '../../../../styles/global.css';
+import './lobby-theme.css';
+import AuthCard from '../../app/AuthCard.astro';
+import { saasRoutes, type SaasRoutes } from './data';
+
+interface Props {
+  mode?: 'signin' | 'signup';
+  routes?: SaasRoutes;
+  theme?: 'light' | 'dark' | 'auto';
+  noindex?: boolean;
+}
+
+const { mode = 'signin', routes = saasRoutes, theme = 'light', noindex = true } = Astro.props;
+---
+
+<!doctype html>
+<html lang="en" class="theme-lobby" data-theme={theme === 'auto' ? 'light' : theme}>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{mode === 'signin' ? 'Sign in' : 'Start your free trial'} — Lobby</title>
+    {noindex && <meta name="robots" content="noindex, follow" />}
+    <script is:inline define:vars={{ initial: theme }}>
+      (function () {
+        var t = initial;
+        try { t = localStorage.getItem('ack-theme') || t; } catch (e) {}
+        if (t === 'auto') t = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        document.documentElement.dataset.theme = t;
+      })();
+    </script>
+  </head>
+  <body class="lobby">
+    <main>
+      <AuthCard mode={mode} brand="Lobby" successHref={routes.dashboard} switchHref={routes.landing} />
+    </main>
+  </body>
+</html>

package/src/components/lib/templates/saas-hotel/data.ts

@@ -0,0 +1,229 @@
+// src/components/lib/templates/saas-hotel/data.ts
+// Demo data for the hotel SaaS template ("Lobby · Hotel OS" with the Hotel Mirador workspace).
+// Replace with your API data; every page reads from this shape.
+
+export interface SaasRoutes {
+  landing: string;
+  signIn: string;
+  dashboard: string;
+  reservations: string;
+  rooms: string;
+  guests: string;
+  reports: string;
+  settings: string;
+}
+
+export const saasRoutes: SaasRoutes = {
+  landing: '/',
+  signIn: '/sign-in/',
+  dashboard: '/app/',
+  reservations: '/app/reservations/',
+  rooms: '/app/rooms/',
+  guests: '/app/guests/',
+  reports: '/app/reports/',
+  settings: '/app/settings/',
+};
+
+type Status = 'Confirmed' | 'Checked in' | 'Checked out' | 'Pending' | 'Cancelled';
+type RoomStatus = 'clean' | 'dirty' | 'inspecting' | 'occupied' | 'ooo';
+
+const GUESTS = [
+  ['Elena Duarte', 'Spain'], ['James Whitfield', 'UK'], ['Aiko Tanaka', 'Japan'], ['Marco Bellini', 'Italy'],
+  ['Sofía Ramos', 'Mexico'], ['Hans Müller', 'Germany'], ['Priya Nair', 'India'], ['The Okafor family', 'Nigeria'],
+  ['Chloé Martin', 'France'], ['Tom Becker', 'Austria'], ['Ana Costa', 'Portugal'], ['Liam O’Connor', 'Ireland'],
+  ['Mei Chen', 'Singapore'], ['Lucas Silva', 'Brazil'], ['Nora Lindqvist', 'Sweden'], ['David Cohen', 'USA'],
+] as const;
+const CHANNELS = ['Direct', 'Booking.com', 'Expedia', 'Airbnb', 'Direct', 'Booking.com'];
+const PRICES: Record<string, number> = { Standard: 118, Deluxe: 176, Suite: 312 };
+
+const rooms = [
+  ...['101', '102', '103', '104', '105', '106'].map((n) => ({ id: n, name: n, type: 'Standard', floor: 'Floor 1' })),
+  ...['201', '202', '203', '204', '205', '206'].map((n) => ({ id: n, name: n, type: 'Deluxe', floor: 'Floor 2' })),
+  ...['301', '302', '303', '304'].map((n) => ({ id: n, name: n, type: 'Suite', floor: 'Floor 3' })),
+];
+
+/** Day labels starting yesterday (built at build time; demo data only). */
+function buildDays(count: number, locale: string): { labels: string[]; iso: string[] } {
+  const start = new Date();
+  start.setUTCHours(0, 0, 0, 0);
+  start.setUTCDate(start.getUTCDate() - 1);
+  const fmt = new Intl.DateTimeFormat(locale, { weekday: 'short', day: 'numeric', timeZone: 'UTC' });
+  const labels: string[] = [];
+  const iso: string[] = [];
+  for (let i = 0; i < count; i++) {
+    const d = new Date(start);
+    d.setUTCDate(start.getUTCDate() + i);
+    labels.push(fmt.format(d).replace(',', ''));
+    iso.push(d.toISOString().slice(0, 10));
+  }
+  return { labels, iso };
+}
+
+const locale = 'en-GB';
+const days = buildDays(14, locale);
+
+// Deterministic bookings across the rack.
+const rackBookings = [
+  ['101', 0, 3, 'checked-in'], ['101', 4, 2, 'confirmed'], ['101', 8, 4, 'pending'],
+  ['102', 1, 5, 'confirmed'], ['102', 7, 3, 'confirmed'],
+  ['103', 0, 2, 'checked-in'], ['103', 3, 6, 'confirmed'],
+  ['104', 2, 2, 'blocked'], ['104', 5, 4, 'confirmed'],
+  ['105', 0, 4, 'checked-in'], ['105', 6, 3, 'pending'], ['105', 10, 3, 'confirmed'],
+  ['106', 1, 2, 'confirmed'], ['106', 4, 5, 'confirmed'],
+  ['201', 0, 6, 'checked-in'], ['201', 7, 2, 'confirmed'],
+  ['202', 2, 3, 'confirmed'], ['202', 6, 5, 'pending'],
+  ['203', 0, 1, 'checked-in'], ['203', 3, 4, 'confirmed'], ['203', 9, 3, 'confirmed'],
+  ['204', 1, 3, 'confirmed'], ['204', 5, 2, 'blocked'],
+  ['205', 0, 3, 'checked-in'], ['205', 4, 4, 'confirmed'],
+  ['206', 2, 6, 'confirmed'],
+  ['301', 1, 6, 'confirmed'], ['301', 9, 3, 'pending'],
+  ['302', 0, 2, 'checked-in'], ['302', 4, 4, 'confirmed'],
+  ['303', 3, 3, 'confirmed'],
+  ['304', 0, 5, 'checked-in'], ['304', 8, 4, 'confirmed'],
+] as const;
+
+const bookings = rackBookings.map(([room, start, nights, status], i) => {
+  const [guest] = GUESTS[i % GUESTS.length];
+  return { room, guest: status === 'blocked' ? 'Maintenance' : guest, start, nights, status, ref: status === 'blocked' ? undefined : `MR-${2810 + i}`, channel: status === 'blocked' ? undefined : CHANNELS[i % CHANNELS.length] };
+});
+
+const tableStatus = (s: string, i: number): Status =>
+  s === 'checked-in' ? 'Checked in' : s === 'pending' ? 'Pending' : i % 9 === 4 ? 'Cancelled' : 'Confirmed';
+
+const reservations = bookings
+  .filter((b) => b.status !== 'blocked')
+  .map((b, i) => {
+    const room = rooms.find((r) => r.id === b.room)!;
+    const st = tableStatus(b.status, i);
+    return {
+      ref: b.ref!,
+      guest: { name: b.guest, sub: b.channel },
+      room: `${room.name} · ${room.type}`,
+      checkIn: days.iso[b.start],
+      nights: b.nights,
+      status: st,
+      total: st === 'Cancelled' ? 0 : b.nights * PRICES[room.type],
+    };
+  });
+
+const housekeeping: Array<{ number: string; floor: string; type: string; status: RoomStatus; guest?: string; note?: string; assignee?: string }> = rooms.map((r, i) => {
+  const occ = bookings.find((b) => b.room === r.id && b.status === 'checked-in');
+  const cycle: RoomStatus[] = ['clean', 'dirty', 'inspecting', 'clean', 'dirty'];
+  if (r.id === '104') return { number: r.name, floor: r.floor, type: r.type, status: 'ooo', note: 'Plumbing repair' };
+  if (occ) return { number: r.name, floor: r.floor, type: r.type, status: 'occupied', guest: occ.guest.split(' ').slice(-1)[0] };
+  const status = cycle[i % cycle.length];
+  return { number: r.name, floor: r.floor, type: r.type, status, assignee: status !== 'clean' ? ['Rosa', 'Luis', 'Inés'][i % 3] : undefined };
+});
+
+const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+export const lobbyData = {
+  product: 'Lobby',
+  workspace: { name: 'Hotel Mirador', plan: 'Pro plan', initials: 'HM' },
+  user: { name: 'Lucía Ortega', role: 'General manager', email: 'lucia@mirador.com' },
+  currency: 'EUR',
+  locale,
+  days: days.labels,
+  rooms,
+  bookings,
+  reservations,
+  housekeeping,
+  kpis: [
+    { label: 'Occupancy', value: '84%', change: 6.2, trend: [62, 66, 70, 68, 74, 78, 80, 84] },
+    { label: 'ADR', value: '€168', change: 3.4, trend: [150, 152, 158, 155, 160, 162, 165, 168] },
+    { label: 'RevPAR', value: '€141', change: 9.1, trend: [98, 104, 110, 106, 118, 124, 132, 141] },
+    { label: 'Cancellations', value: '3.1%', change: -1.2, invert: true, trend: [5, 4.6, 4.8, 4.1, 3.9, 3.6, 3.4, 3.1] },
+  ],
+  revenue: {
+    categories: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10', 'W11', 'W12'],
+    series: [
+      { name: 'Rooms', data: [38, 41, 39, 44, 47, 52, 49, 55, 58, 61, 57, 64] },
+      { name: 'F&B', data: [9, 10, 9, 11, 12, 13, 12, 14, 15, 16, 15, 17] },
+      { name: 'Spa & extras', data: [4, 4, 5, 5, 6, 6, 6, 7, 7, 8, 8, 9] },
+    ],
+  },
+  occupancyByType: {
+    categories: months.slice(4, 11),
+    series: [
+      { name: 'Standard', data: [72, 78, 88, 91, 84, 76, 81] },
+      { name: 'Deluxe', data: [64, 71, 85, 89, 79, 70, 77] },
+      { name: 'Suite', data: [48, 55, 74, 80, 66, 58, 63] },
+    ],
+  },
+  channels: [
+    { label: 'Direct', value: 38 },
+    { label: 'Booking.com', value: 31 },
+    { label: 'Expedia', value: 17 },
+    { label: 'Airbnb', value: 9 },
+    { label: 'Corporate', value: 5 },
+  ],
+  forecast: {
+    categories: ['Oct 28', 'Oct 31', 'Nov 3', 'Nov 6', 'Nov 9', 'Nov 12', 'Nov 15', 'Nov 18', 'Nov 21', 'Nov 24'],
+    actual: [71, 74, 80, 84],
+    forecast: [84, 82, 79, 86, 91, 88, 76, 72],
+  },
+  pace: {
+    rows: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    columns: ['0–7d', '8–14d', '15–30d', '31–60d', '61–90d', '90d+'],
+    values: [
+      [12, 9, 14, 8, 4, 2], [10, 8, 12, 7, 3, 2], [11, 10, 13, 9, 4, 3], [14, 12, 15, 10, 6, 3],
+      [22, 18, 20, 14, 9, 5], [26, 21, 22, 16, 10, 6], [15, 11, 12, 8, 5, 3],
+    ],
+  },
+  funnel: [
+    { label: 'Website visits', value: 18400 },
+    { label: 'Searched dates', value: 7350 },
+    { label: 'Viewed rooms', value: 3920 },
+    { label: 'Started booking', value: 1180 },
+    { label: 'Booked', value: 612 },
+  ],
+  segments: [
+    { label: 'Leisure', value: 46 },
+    { label: 'Business', value: 28 },
+    { label: 'Groups', value: 14 },
+    { label: 'Long stay', value: 12 },
+  ],
+  arrivals: [
+    { guest: 'Elena Duarte', room: '204', time: '14:00', nights: 3, vip: true, note: 'Anniversary, late arrival' },
+    { guest: 'Aiko Tanaka', room: '102', time: '15:30', nights: 5 },
+    { guest: 'The Okafor family', room: '301', time: '16:00', nights: 6, note: 'Baby cot', done: true },
+    { guest: 'David Cohen', room: '106', time: '18:45', nights: 2 },
+  ],
+  departures: [
+    { guest: 'Hans Müller', room: '203', time: '11:00', balance: '€0', done: true },
+    { guest: 'Priya Nair', room: '302', time: '12:00', balance: '€48' },
+    { guest: 'Lucas Silva', room: '105', time: '12:00', balance: '€0' },
+  ],
+  inHouse: [
+    { guest: 'James Whitfield', room: '201', until: days.labels[6] },
+    { guest: 'Mei Chen', room: '304', until: days.labels[5] },
+    { guest: 'Nora Lindqvist', room: '205', until: days.labels[3] },
+  ],
+  activity: [
+    { title: 'Check-in completed', desc: 'The Okafor family · Suite 301', time: '09:42', status: 'done' as const },
+    { title: 'Payment captured', desc: 'MR-2840 · €890 · Visa', time: '09:15', status: 'done' as const },
+    { title: 'Room 104 out of order', desc: 'Plumbing — technician on site', time: '08:50', status: 'active' as const },
+    { title: 'Rate update pushed', desc: 'Weekend +8% on all channels', time: '08:05', status: 'pending' as const },
+  ],
+  notifications: [
+    { title: 'New booking from Booking.com', text: 'Deluxe King · 3 nights · €528', time: '2 min ago', unread: true, tone: 'success' as const },
+    { title: 'Room 104 out of order', text: 'Plumbing repair scheduled', time: '1 h ago', unread: true, tone: 'warning' as const },
+    { title: 'Weekly report ready', text: 'Occupancy up 6.2% vs last week', time: 'Yesterday', tone: 'info' as const },
+  ],
+  guests: GUESTS.slice(0, 12).map(([name, country], i) => ({
+    guest: { name, sub: `${name.toLowerCase().replace(/[^a-z]+/g, '.').replace(/^\.|\.$/g, '')}@mail.com` },
+    country,
+    stays: [7, 3, 1, 2, 4, 9, 1, 2, 5, 1, 3, 6][i],
+    spend: [4820, 2140, 476, 980, 1730, 6120, 290, 1880, 2410, 340, 1290, 3980][i],
+    tier: ['Gold', 'Silver', 'Member', 'Member', 'Silver', 'Platinum', 'Member', 'Silver', 'Gold', 'Member', 'Silver', 'Gold'][i],
+    tags: [['VIP', 'Anniversary'], ['Business'], ['First stay'], ['Repeat'], ['Spa'], ['VIP', 'Long stay'], [], ['Family'], ['Business'], [], ['Repeat'], ['VIP']][i],
+  })),
+  team: [
+    { name: 'Lucía Ortega', email: 'lucia@mirador.com', role: 'Owner', status: 'active' as const, you: true },
+    { name: 'Daniel Kim', email: 'daniel@mirador.com', role: 'Manager', status: 'active' as const },
+    { name: 'Rosa Jiménez', email: 'rosa@mirador.com', role: 'Housekeeping', status: 'active' as const },
+    { name: 'Omar Haddad', email: 'omar@mirador.com', role: 'Front desk', status: 'invited' as const },
+  ],
+};
+
+export type LobbyData = typeof lobbyData;

package/src/components/lib/templates/saas-hotel/index.ts

@@ -0,0 +1,19 @@
+// src/components/lib/templates/saas-hotel/index.ts
+// Hotel SaaS template ("Lobby · Hotel OS"): marketing landing, sign-in and a complete app
+// (dashboard, reservations, rooms, guests, reports, settings) built from library components.
+//
+//   import { DashboardPage } from 'astro-component-kit/templates/saas-hotel';
+//   <DashboardPage theme="light" />
+
+export { default as AppLayout } from './AppLayout.astro';
+export { default as LandingPage } from './LandingPage.astro';
+export { default as SignInPage } from './SignInPage.astro';
+export { default as DashboardPage } from './DashboardPage.astro';
+export { default as ReservationsPage } from './ReservationsPage.astro';
+export { default as RoomsPage } from './RoomsPage.astro';
+export { default as GuestsPage } from './GuestsPage.astro';
+export { default as ReportsPage } from './ReportsPage.astro';
+export { default as SettingsPage } from './SettingsPage.astro';
+
+export { lobbyData, saasRoutes } from './data';
+export type { LobbyData, SaasRoutes } from './data';

package/src/components/lib/templates/saas-hotel/lobby-theme.css

@@ -0,0 +1,90 @@
+/* Lobby · Hotel OS — theme tokens shared by the landing, sign-in and app pages. */
+  .theme-lobby {
+    --r-sm: 8px;
+    --r-md: 10px;
+    --r-lg: 14px;
+    --r-xl: 18px;
+  }
+  .theme-lobby[data-theme='light'] {
+    --c-bg: #f4f6fa;
+    --c-bg-1: #ffffff;
+    --c-bg-2: #eef1f6;
+    --c-surface: rgba(15, 23, 42, 0.025);
+    --c-border: rgba(15, 23, 42, 0.1);
+    --c-text-1: #0f172a;
+    --c-text-2: #475569;
+    --c-text-3: #64748b;
+    --c-primary: #2557d6;
+    --c-primary-light: #2557d6;
+    --c-primary-glow: rgba(37, 87, 214, 0.14);
+    --c-accent: #1e40af;
+    --app-accent: #2557d6;
+    --c-on-primary: #ffffff;
+    --ink-rgb: 15 23 42;
+    --paper-rgb: 255 255 255;
+    --c-success: #047857;
+    --c-warning: #a16207;
+    --c-danger: #b91c1c;
+    --chart-surface: #ffffff;
+    --chart-grid: rgba(15, 23, 42, 0.08);
+    --chart-axis: rgba(15, 23, 42, 0.22);
+    color-scheme: light;
+  }
+  .theme-lobby[data-theme='dark'] {
+    --c-bg: #0b0f17;
+    --c-bg-1: #111827;
+    --c-bg-2: #1a2232;
+    --c-surface: rgba(148, 163, 184, 0.04);
+    --c-border: rgba(148, 163, 184, 0.16);
+    --c-text-1: #f1f5f9;
+    --c-text-2: #a9b3c4;
+    --c-text-3: #8a96aa;
+    --c-primary: #7aa2ff;
+    --c-primary-light: #7aa2ff;
+    --c-primary-glow: rgba(122, 162, 255, 0.16);
+    --c-accent: #c7d7ff;
+    --app-accent: #7aa2ff;
+    --c-on-primary: #0b1020;
+    --ink-rgb: 241 245 249;
+    --paper-rgb: 11 15 23;
+    --c-success: #4ade80;
+    --c-warning: #fbbf24;
+    --c-danger: #f87171;
+    --chart-surface: #111827;
+    --chart-grid: rgba(148, 163, 184, 0.12);
+    --chart-axis: rgba(148, 163, 184, 0.3);
+    color-scheme: dark;
+  }
+  body.lobby { background: var(--c-bg); color: var(--c-text-2); }
+body.lobby--site { overflow-x: clip; }
+  body.lobby::before { display: none; }
+  .lobby__skip { position: fixed; top: -60px; left: 12px; z-index: 2000; padding: 0.6rem 1rem; border-radius: 10px; background: var(--app-accent); color: var(--c-on-primary); font-weight: 700; }
+  .lobby__skip:focus { top: 12px; color: var(--c-on-primary); }
+  .lobby__shell { display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 100dvh; }
+  .lobby__main { min-width: 0; display: flex; flex-direction: column; }
+  .lobby__content { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--sp-5); padding: var(--sp-6) clamp(1rem, 3vw, 2rem) var(--sp-12); outline: none; min-width: 0; }
+  .lobby-grid { display: grid; gap: var(--sp-5); min-width: 0; }
+  .lobby-grid--kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+  .lobby-grid--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
+  .lobby-grid--1-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .lobby-grid--1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
+  .lobby-grid > * { min-width: 0; }
+  /* Charts sit on solid app cards */
+  .lobby .cf--glass { backdrop-filter: none; background: var(--c-bg-1); }
+  .lobby .cf, .lobby .kpi { border-radius: var(--r-lg); }
+  @media (max-width: 1200px) {
+    .lobby-grid--kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .lobby-grid--2-1, .lobby-grid--1-2 { grid-template-columns: 1fr; }
+  }
+  @media (max-width: 720px) {
+    .lobby-grid--kpis, .lobby-grid--1-1 { grid-template-columns: 1fr; }
+  }
+
+/* App cards used by template pages */
+.lobby-card { padding: var(--sp-5); border-radius: var(--r-lg); border: 1px solid var(--c-border); background: var(--c-bg-1); min-width: 0; }
+.lobby-card__title { margin: 0 0 var(--sp-4); font-size: 1rem; font-weight: 700; color: var(--c-text-1); }
+.lobby .status-feed { max-width: none; }
+.lobby .status-feed__line { background: var(--c-border); }
+.lobby .anim-input, .lobby .custom-select { background: var(--c-bg); border-color: var(--c-border); border-radius: var(--r-md); }
+.lobby .anim-input:focus, .lobby .custom-select:focus { border-color: var(--app-accent); box-shadow: 0 0 0 3px var(--c-primary-glow); background: var(--c-bg); }
+.lobby .anim-input:focus ~ .anim-input-label, .lobby .anim-input:not(:placeholder-shown) ~ .anim-input-label { color: var(--app-accent); }

package/src/components/lib/typography/AnimatedCounterText.astro

@@ -0,0 +1,102 @@
+---
+/**
+ * AnimatedCounterText — Kinetic statistic counter display with animated number progression and unit suffixes.
+ * 
+ * @param {number} target - Numerical target value (e.g. 99, 120, 2400). Default is 120.
+ * @param {string} prefix - Optional string prefix (e.g. '$', '+').
+ * @param {string} suffix - Optional string suffix (e.g. '%', 'k', '+'). Default is '+'.
+ * @param {string} label - Descriptive text below the counter.
+ * @param {string} color - Text accent color. Default is '#d4a017'.
+ */
+interface Props {
+  target?: number;
+  prefix?: string;
+  suffix?: string;
+  label?: string;
+  color?: string;
+}
+
+const {
+  target = 120,
+  prefix = '',
+  suffix = '+',
+  label = 'Components Ready to Ship',
+  color = '#d4a017',
+} = Astro.props;
+---
+
+<div class="stat-counter" data-counter-wrap style={`--counter-color: ${color};`}>
+  <div class="stat-counter__number">
+    {prefix && <span class="affix">{prefix}</span>}
+    <span class="value" data-counter-target={target}>0</span>
+    {suffix && <span class="affix">{suffix}</span>}
+  </div>
+  {label && <p class="stat-counter__label">{label}</p>}
+</div>
+
+<style>
+  .stat-counter {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    font-family: var(--font-sans, system-ui, sans-serif);
+    user-select: none;
+  }
+
+  .stat-counter__number {
+    display: inline-flex;
+    align-items: baseline;
+    font-size: clamp(2.5rem, 6vw, 4.2rem);
+    font-weight: 900;
+    line-height: 1;
+    letter-spacing: -0.04em;
+    color: var(--counter-color);
+    text-shadow: 0 0 24px rgba(212, 160, 23, 0.35);
+  }
+
+  .stat-counter__label {
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--c-text-2, #a3a3a3);
+    margin-top: 6px;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+</style>
+
+<script>
+  function setupCounters() {
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (!entry.isIntersecting) return;
+        const targetEl = entry.target.querySelector('[data-counter-target]') as HTMLElement;
+        if (!targetEl || targetEl.getAttribute('data-counted')) return;
+
+        targetEl.setAttribute('data-counted', 'true');
+        const finalVal = parseInt(targetEl.getAttribute('data-counter-target') || '0', 10);
+        const duration = 1500;
+        const start = performance.now();
+
+        function step(now: number) {
+          const progress = Math.min((now - start) / duration, 1);
+          // Ease out cubic
+          const eased = 1 - Math.pow(1 - progress, 3);
+          targetEl.textContent = Math.floor(eased * finalVal).toLocaleString();
+
+          if (progress < 1) {
+            requestAnimationFrame(step);
+          } else {
+            targetEl.textContent = finalVal.toLocaleString();
+          }
+        }
+
+        requestAnimationFrame(step);
+      });
+    }, { threshold: 0.2 });
+
+    document.querySelectorAll('[data-counter-wrap]').forEach((el) => observer.observe(el));
+  }
+
+  setupCounters();
+  document.addEventListener('astro:page-load', setupCounters);
+</script>