rastack 0.0.56 → 0.0.58

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.58](https://github.com/theserverkid/reactapistack/compare/v0.0.57...v0.0.58) (2026-07-18)
+
+### [0.0.57](https://github.com/theserverkid/reactapistack/compare/v0.0.56...v0.0.57) (2026-07-18)
+
 ### [0.0.56](https://github.com/theserverkid/reactapistack/compare/v0.0.55...v0.0.56) (2026-07-18)
 
 

package/admin/index.tsx

@@ -17,12 +17,12 @@ import React, { useEffect, useMemo, useState } from "react";
 import { createRoot } from "react-dom/client";
 import { RAStackProvider, useRastackClient } from "../provider";
 import type { RastackWasmModule } from "../provider/types";
-import { Spinner } from "../components";
 import { ThemeProvider } from "../theme";
 import { defineTheme } from "../tokens";
 import { AdminApp } from "./AdminApp";
 import { parseManifest, type AdminResource } from "./adapters";
 import { createHttpEngine } from "./httpEngine";
+import { BootScreen } from "./ui/BootScreen";
 
 interface AdminConfig {
   mode: "local" | "remote";
@@ -55,22 +55,19 @@ const loadEngine = async (): Promise<RastackWasmModule> => {
   return mod;
 };
 
-function Loading({ label }: { label: string }): React.JSX.Element {
-  return (
-    <div className="ras-boot">
-      <Spinner /> {label}
-    </div>
-  );
-}
-
 /** Local (WASM) admin: wait for the provider's engine, then render. */
 function LocalAdmin({ resources }: { resources: AdminResource[] }): React.JSX.Element {
   const client = useRastackClient();
   if (client.status === "error")
-    return <Loading label="The WASM engine failed to start — check the console." />;
+    return (
+      <BootScreen
+        error
+        label="The WASM engine failed to start — check the console."
+      />
+    );
   if (!client.engine || client.status !== "ready")
     return (
-      <Loading
+      <BootScreen
         label={
           client.status === "seeding"
             ? "Seeding the local warehouse…"
@@ -108,8 +105,17 @@ function Boot(): React.JSX.Element {
   }, []);
 
   if (error)
-    return <div className="ras-boot">Failed to load the schema: {error}</div>;
-  if (!resources || !manifest) return <Loading label="Loading the schema…" />;
+    return (
+      <ThemeProvider tokens={theme}>
+        <BootScreen error label={`Failed to load the schema: ${error}`} />
+      </ThemeProvider>
+    );
+  if (!resources || !manifest)
+    return (
+      <ThemeProvider tokens={theme}>
+        <BootScreen label="Loading the schema…" />
+      </ThemeProvider>
+    );
 
   if (cfg.mode === "remote") {
     return (

package/admin/ui/BootScreen.tsx

@@ -0,0 +1,201 @@
+/**
+ * The admin's boot / loading screen — what you see while the schema loads and
+ * the WASM engine spins up. It is deliberately **self-contained**: the main
+ * `AdminStyles` sheet is only injected once `<AdminApp>` mounts, so this screen
+ * ships its own scoped `<style>` (guarded against double-injection) and leans on
+ * the design-token CSS variables with graceful fallbacks, so it looks right in
+ * every phase — before the `<ThemeProvider>` is even in the tree, and in both
+ * light and dark. It reuses the product `<BrandMark>` and honours
+ * `prefers-reduced-motion`.
+ */
+import React from "react";
+import { BrandMark } from "./icons";
+
+const STYLE_ID = "ras-boot-style";
+
+const BOOT_CSS = String.raw`
+.ras-loader {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background:
+    radial-gradient(120% 90% at 50% -10%,
+      color-mix(in srgb, var(--color-accent, #4F6BFF) 12%, transparent) 0%,
+      transparent 60%),
+    var(--color-bg, transparent);
+}
+.ras-loader-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 22px;
+  animation: ras-boot-in 0.5s cubic-bezier(0.22, 0.7, 0.24, 1) both;
+}
+.ras-loader-mark {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 76px;
+  height: 76px;
+}
+/* Soft pulsing halo behind the logo. */
+.ras-loader-mark::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 22px;
+  background: color-mix(in srgb, var(--color-accent, #4F6BFF) 45%, transparent);
+  filter: blur(16px);
+  animation: ras-boot-glow 1.8s var(--ras-ease, cubic-bezier(0.22, 0.7, 0.24, 1)) infinite;
+}
+/* Rotating conic ring that frames the mark. */
+.ras-loader-mark::after {
+  content: "";
+  position: absolute;
+  inset: -7px;
+  border-radius: 26px;
+  padding: 2px;
+  background: conic-gradient(from 0deg,
+    transparent 0deg,
+    var(--color-accent, #4F6BFF) 90deg,
+    transparent 200deg);
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+          mask-composite: exclude;
+  animation: ras-boot-spin 1.4s linear infinite;
+}
+.ras-loader-logo {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 62px;
+  height: 62px;
+  border-radius: 18px;
+  background: var(--color-surface, var(--color-bg, #fff));
+  box-shadow:
+    0 8px 24px color-mix(in srgb, var(--color-accent, #4F6BFF) 22%, transparent),
+    0 1px 0 color-mix(in srgb, var(--color-text, #0B1020) 6%, transparent) inset;
+  animation: ras-boot-bob 3s ease-in-out infinite;
+}
+.ras-loader-title {
+  font-size: 17px;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+  color: var(--color-text, #0B1020);
+  font-family: var(--font-family-sans, "Inter", system-ui, sans-serif);
+}
+.ras-loader-title .ras-loader-admin {
+  color: var(--color-accent, #4F6BFF);
+  font-weight: 600;
+}
+/* Indeterminate track. */
+.ras-loader-track {
+  position: relative;
+  width: 172px;
+  height: 4px;
+  border-radius: 999px;
+  overflow: hidden;
+  background: color-mix(in srgb, var(--color-text, #0B1020) 10%, transparent);
+}
+.ras-loader-track::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 40%;
+  border-radius: inherit;
+  background: linear-gradient(90deg,
+    transparent,
+    var(--color-accent, #4F6BFF),
+    color-mix(in srgb, var(--color-accent, #4F6BFF) 40%, transparent));
+  animation: ras-boot-slide 1.25s cubic-bezier(0.5, 0.1, 0.3, 1) infinite;
+}
+.ras-loader-label {
+  margin: -6px 0 0;
+  font-size: 13.5px;
+  color: var(--color-text-muted, #6b7590);
+  font-family: var(--font-family-sans, "Inter", system-ui, sans-serif);
+  text-align: center;
+  max-width: 320px;
+}
+.ras-loader.is-error .ras-loader-mark::before,
+.ras-loader.is-error .ras-loader-mark::after { animation-play-state: paused; opacity: 0.35; }
+.ras-loader.is-error .ras-loader-label { color: var(--color-danger, #d64550); }
+
+@keyframes ras-boot-in {
+  from { opacity: 0; transform: translateY(8px) scale(0.985); }
+  to   { opacity: 1; transform: none; }
+}
+@keyframes ras-boot-spin { to { transform: rotate(360deg); } }
+@keyframes ras-boot-glow {
+  0%, 100% { opacity: 0.45; transform: scale(0.9); }
+  50%      { opacity: 0.85; transform: scale(1.08); }
+}
+@keyframes ras-boot-bob {
+  0%, 100% { transform: translateY(0); }
+  50%      { transform: translateY(-3px); }
+}
+@keyframes ras-boot-slide {
+  0%   { left: -42%; }
+  100% { left: 100%; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ras-loader-inner,
+  .ras-loader-mark::before,
+  .ras-loader-mark::after,
+  .ras-loader-logo,
+  .ras-loader-track::after { animation: none; }
+  .ras-loader-track::after { left: 0; width: 100%; opacity: 0.7; }
+}
+`;
+
+/** Inject the scoped stylesheet exactly once. */
+function useBootStyles(): void {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ID)) return;
+  const el = document.createElement("style");
+  el.id = STYLE_ID;
+  el.textContent = BOOT_CSS;
+  document.head.appendChild(el);
+}
+
+export interface BootScreenProps {
+  /** The status line shown beneath the mark. */
+  label: string;
+  /** Render in the error palette (paused halo, danger-coloured label). */
+  error?: boolean;
+}
+
+/**
+ * A branded, animated boot screen — the product logo in a floating tile with a
+ * pulsing halo and a rotating ring, the wordmark, an indeterminate progress
+ * track, and the current status. Matches the polish of the rest of the admin.
+ */
+export function BootScreen({ label, error }: BootScreenProps): React.JSX.Element {
+  useBootStyles();
+  return (
+    <div
+      className={`ras-loader${error ? " is-error" : ""}`}
+      role="status"
+      aria-live="polite"
+      aria-busy={!error}
+    >
+      <div className="ras-loader-inner">
+        <div className="ras-loader-mark">
+          <div className="ras-loader-logo">
+            <BrandMark size={34} />
+          </div>
+        </div>
+        <div className="ras-loader-title">
+          React API Stack <span className="ras-loader-admin">Admin</span>
+        </div>
+        {!error ? <div className="ras-loader-track" aria-hidden="true" /> : null}
+        <p className="ras-loader-label">{label}</p>
+      </div>
+    </div>
+  );
+}