fractostate 1.0.0

package/test/src/layout/Layout.tsx

@@ -0,0 +1,68 @@
+import { useFlow } from "fractostate";
+import { AuthFlow } from "../store/auth";
+import { CartFlow, UIFlow } from "../store/flows";
+import { Link } from "react-router-dom";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  const [auth, { ops: authOps }] = useFlow(AuthFlow);
+  const [cart] = useFlow(CartFlow);
+  const [, { ops: uiOps }] = useFlow(UIFlow);
+
+  const cartCount = cart.items.reduce((acc, item) => acc + item.quantity, 0);
+
+  return (
+    <div className="min-h-screen bg-[#050505] selection:bg-brand selection:text-white pb-20">
+      {/* Header Global */}
+      <nav className="fixed top-0 left-0 right-0 h-16 glass z-50 flex items-center justify-between px-6">
+        <Link to="/" className="flex items-center gap-2">
+          <div className="w-8 h-8 bg-brand rounded flex items-center justify-center font-bold text-lg select-none">
+            F
+          </div>
+          <span className="font-bold text-xl tracking-tight hidden sm:inline">
+            FractoShop
+          </span>
+        </Link>
+
+        {auth.isAuthenticated && (
+          <div className="flex items-center gap-4">
+            {/* Cart Button */}
+            <button
+              onClick={() => uiOps.self.cartOpen.set(true)}
+              className="relative p-2 hover:bg-white/5 rounded-full transition-colors cursor-pointer mr-2"
+            >
+              <span className="text-2xl">🛒</span>
+              {cartCount > 0 && (
+                <span className="absolute -top-1 -right-1 bg-brand text-white text-[10px] font-bold px-1.5 py-0.5 rounded-full ring-2 ring-black">
+                  {cartCount}
+                </span>
+              )}
+            </button>
+
+            <Link
+              to="/profile"
+              className="flex items-center gap-3 hover:bg-white/5 p-1.5 pr-4 rounded-full transition-colors"
+            >
+              <img
+                src={auth.user?.avatar}
+                className="w-8 h-8 rounded-full border border-white/10"
+                alt="Avatar"
+              />
+              <span className="text-sm font-medium text-white/80 hidden md:inline">
+                {auth.user?.username}
+              </span>
+            </Link>
+            <button
+              onClick={() => authOps.self.isAuthenticated.set(false)}
+              className="text-xs text-red-400 hover:text-red-300 font-bold tracking-wider px-3 py-1.5 border border-red-500/20 rounded-lg hover:bg-red-500/10 transition-all"
+            >
+              LOGOUT
+            </button>
+          </div>
+        )}
+      </nav>
+
+      {/* Main Content Injection */}
+      {children}
+    </div>
+  );
+}

package/test/src/layout/ProtectedRoute.tsx

@@ -0,0 +1,19 @@
+import { useFlow } from "fractostate";
+import { AuthFlow } from "../store/auth";
+import { Navigate, useLocation } from "react-router-dom";
+
+export default function ProtectedRoute({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [auth] = useFlow(AuthFlow);
+  const location = useLocation();
+
+
+  if (!auth.isAuthenticated) {
+    return <Navigate to="/login" state={{ from: location }} replace />;
+  }
+
+  return <>{children}</>;
+}

package/test/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/test/src/pages/LoginPage.tsx

@@ -0,0 +1,86 @@
+import { useFlow } from "fractostate";
+import { AuthFlow } from "../store/auth";
+import { useNavigate } from "react-router-dom";
+
+export default function LoginPage() {
+  const [auth, { ops: authOps }] = useFlow(AuthFlow);
+  const navigate = useNavigate();
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    // Simulation API
+    authOps.self.isLoading.set(true);
+
+    // Fake Server Delay
+    await new Promise((r) => setTimeout(r, 1000));
+
+    // Update State (Native-like mutation via Proxy)
+    authOps.self.merge({
+      isAuthenticated: true,
+      user: {
+        username: "FractoDev",
+        avatar: "https://api.dicebear.com/7.x/bottts/svg?seed=Fracto",
+        role: "admin",
+      },
+      token: "fra_abc123_secure_token",
+      isLoading: false,
+    });
+
+    navigate("/");
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-[#050505] p-4">
+      <div className="glass p-8 rounded-2xl w-full max-w-md border border-white/5 space-y-6">
+        <div className="text-center">
+          <div className="w-12 h-12 bg-brand rounded-lg mx-auto mb-4 flex items-center justify-center font-bold text-xl">
+            F
+          </div>
+          <h1 className="text-2xl font-bold">Welcome Back</h1>
+          <p className="text-white/40 text-sm">
+            Sign in to access the FractoState Demo
+          </p>
+        </div>
+
+        <form onSubmit={handleLogin} className="space-y-4">
+          <div className="space-y-2">
+            <label className="text-xs font-bold text-white/60 ml-1">
+              USERNAME
+            </label>
+            <input
+              type="text"
+              defaultValue="demo_user"
+              className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 outline-none focus:border-brand/50 transition-colors text-sm font-medium"
+            />
+          </div>
+          <div className="space-y-2">
+            <label className="text-xs font-bold text-white/60 ml-1">
+              PASSWORD
+            </label>
+            <input
+              type="password"
+              defaultValue="password"
+              className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 outline-none focus:border-brand/50 transition-colors text-sm font-medium"
+            />
+          </div>
+
+          <button
+            disabled={auth.isLoading}
+            className="w-full btn-primary py-3 font-bold mt-4 flex items-center justify-center gap-2"
+          >
+            {auth.isLoading ? (
+              <span className="animate-spin text-lg">⏳</span>
+            ) : (
+              "Sign In"
+            )}
+          </button>
+        </form>
+
+        <p className="text-center text-xs text-white/20">
+          Powered by FractoState Secure Vault
+        </p>
+      </div>
+    </div>
+  );
+}

package/test/src/pages/ProfilePage.tsx

@@ -0,0 +1,48 @@
+import { useFlow } from "fractostate";
+import { AuthFlow } from "../store/auth";
+
+export default function ProfilePage() {
+  const [auth] = useFlow(AuthFlow);
+
+  return (
+    <div className="pt-32 px-6 max-w-4xl mx-auto">
+      <div className="glass p-8 rounded-2xl border border-white/5 flex items-start gap-8">
+        <img
+          src={auth.user?.avatar}
+          className="w-32 h-32 rounded-2xl border-2 border-brand shadow-lg shadow-brand/20"
+          alt="Profile"
+        />
+        <div className="space-y-4 flex-1">
+          <div>
+            <h1 className="text-3xl font-bold">{auth.user?.username}</h1>
+            <span className="bg-brand/20 text-brand text-[10px] font-bold px-2 py-1 rounded uppercase tracking-widest border border-brand/20">
+              {auth.user?.role}
+            </span>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4 pt-4">
+            <div className="bg-white/5 p-4 rounded-xl">
+              <span className="text-xs text-white/40 font-bold block mb-1">
+                SESSION TOKEN
+              </span>
+              <code className="text-xs font-mono text-brand truncate block">
+                {auth.token}
+              </code>
+            </div>
+            <div className="bg-white/5 p-4 rounded-xl">
+              <span className="text-xs text-white/40 font-bold block mb-1">
+                AUTH STATUS
+              </span>
+              <div className="flex items-center gap-2">
+                <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
+                <span className="text-xs font-bold text-white/80">
+                  Active & Secure
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/test/src/pages/ShopPage.tsx

@@ -0,0 +1,54 @@
+import { useFlow } from "fractostate";
+import { ShopFlow } from "../store/flows";
+import ProductList from "../components/ProductList";
+import CartDrawer from "../components/CartDrawer";
+import Notifications from "../components/Notifications";
+
+export default function ShopPage() {
+  const [shop, { ops: shopOps }] = useFlow(ShopFlow);
+
+  return (
+    <>
+      <CartDrawer />
+      <Notifications />
+
+      <main className="max-w-7xl mx-auto">
+        <header className="px-6 pt-32 pb-4 text-center">
+          <h1 className="text-4xl md:text-6xl font-black mb-4 bg-gradient-to-r from-white to-white/40 bg-clip-text text-transparent italic tracking-tighter">
+            THE FUTURE OF STATE.
+          </h1>
+          <p className="text-white/40 font-medium max-w-xl mx-auto">
+            This entire application runs on{" "}
+            <span className="text-brand font-bold uppercase tracking-widest text-xs px-1">
+              FractoState
+            </span>
+            . Zero Prop-Drilling. Zero Context Providers. Ultra-fast surgical
+            updates.
+          </p>
+        </header>
+
+        <section className="mt-8">
+          <div className="px-6 flex items-center justify-between mb-8">
+            <h2 className="text-2xl font-bold flex items-center gap-2">
+              <span className="w-8 h-[2px] bg-brand inline-block" /> Latest
+              Drops
+            </h2>
+            <div className="flex gap-2">
+              {["All", "Electronics", "Apparel", "Accessories"].map((cat) => (
+                <button
+                  key={cat}
+                  onClick={() => shopOps.self.category.set(cat)}
+                  className={`text-xs font-bold px-4 py-1.5 rounded-full transition-all cursor-pointer ${shop.category === cat ? "bg-brand text-white shadow-lg shadow-brand/20" : "bg-white/5 hover:bg-white/10 text-white/60"}`}
+                >
+                  {cat}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <ProductList />
+        </section>
+      </main>
+    </>
+  );
+}

package/test/src/store/auth.ts

@@ -0,0 +1,39 @@
+import { defineFlow } from "fractostate";
+
+export interface User {
+  username: string;
+  avatar: string;
+  role: "admin" | "user";
+}
+
+export interface AuthState {
+  isAuthenticated: boolean;
+  user: User | null;
+  token: string | null;
+  isLoading: boolean;
+}
+
+// Simulons une persistance basique en lisant le localStorage au démarrage (si on le voulait vraiment)
+// Pour l'instant, on part de zéro pour la démo.
+
+export const AuthFlow = defineFlow<AuthState>(
+  "auth",
+  {
+    isAuthenticated: false,
+    user: null,
+    token: null,
+    isLoading: false,
+  },
+  {
+    // Middleware pour logger les actions d'auth (ex: sécu)
+    middleware: [
+      (state) => {
+        console.log(
+          "[Auth Audit]:",
+          state.isAuthenticated ? "User Logged In" : "User Guest",
+        );
+        return state;
+      },
+    ],
+  },
+);

package/test/src/store/flows.ts

@@ -0,0 +1,74 @@
+import { defineFlow } from "fractostate";
+
+export interface Product {
+  id: number;
+  name: string;
+  price: number;
+  image: string;
+  category: string;
+}
+
+export interface CartItem extends Product {
+  quantity: number;
+}
+
+// --- Cart Flow ---
+export const CartFlow = defineFlow<{ items: CartItem[] }>("cart", {
+  items: [],
+});
+
+// --- User Flow ---
+export const UserFlow = defineFlow<{
+  name: string;
+  isPremium: boolean;
+  avatar: string;
+}>("user", {
+  name: "Marc Ansene",
+  isPremium: true,
+  avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Marc",
+});
+
+// --- Shop Flow ---
+export const ShopProducts = [
+  {
+    id: 1,
+    name: "Fractal Watch",
+    price: 299,
+    category: "Accessories",
+    image: "⌚",
+  },
+  { id: 2, name: "Neon Hoodie", price: 89, category: "Apparel", image: "🧥" },
+  {
+    id: 3,
+    name: "Quantum Buds",
+    price: 159,
+    category: "Electronics",
+    image: "🎧",
+  },
+  {
+    id: 4,
+    name: "Void Keyboard",
+    price: 199,
+    category: "Electronics",
+    image: "⌨️",
+  },
+];
+
+export const ShopFlow = defineFlow<{
+  loading: boolean;
+  category: string;
+  search: string;
+}>("shop", {
+  loading: false,
+  category: "All",
+  search: "",
+});
+
+// --- UI / Notification Flow ---
+export const UIFlow = defineFlow<{
+  cartOpen: boolean;
+  notifications: { id: number; text: string; type: "success" | "error" }[];
+}>("ui", {
+  cartOpen: false,
+  notifications: [],
+});

package/test/tsconfig.app.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+    "paths": {
+      "fractostate": ["../src"]
+    },
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src", "postcss.config.mjs"]
+}

package/test/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/test/tsconfig.node.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "paths": {
+      "fractostate": ["../src"]
+    }
+  },
+  "include": ["vite.config.ts"]
+}

package/test/vite.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+import path from "path";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      fractostate: path.resolve(__dirname, "../src"),
+      react: path.resolve(__dirname, "./node_modules/react"),
+      "react-dom": path.resolve(__dirname, "./node_modules/react-dom"),
+    },
+  },
+});