Do lovable.dev/new ao ecossistema Uttara

# A partir da raiz do repo da app, com main checked-out e clean.
# Vendoriza o pacote dentro de src/lib/uttara-ui — mesmo caminho que a vitrine usa.
git remote add uttara-ui git@github.com:uttara-dev/uttara-ui.git
git fetch uttara-ui
git subtree add --prefix=src/lib/uttara-ui uttara-ui main --squash

# Atualizar para a última versão publicada do pacote
git fetch uttara-ui
git subtree pull --prefix=src/lib/uttara-ui uttara-ui main --squash

@uttara-dev:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_PACKAGES_TOKEN}

# Pacote + peers obrigatórios
bun add @uttara-dev/ui

# Peers opcionais (para forms enriquecidos)
bun add react-hook-form @hookform/resolvers zod sonner

/* src/styles.css — tema Uttara já com tokens light/dark */
@import "tailwindcss";
@import "@uttara-dev/ui/styles.css";

/* src/styles.css — quando consumindo via subtree */
@import "tailwindcss";
@import "./lib/uttara-ui/styles.css";

// src/components/AppProviders.tsx
import { ThemeProvider } from "@uttara-dev/ui/providers";
import { I18nProvider } from "@uttara-dev/ui/i18n";
import { AuthProvider } from "@uttara-dev/ui/auth";
import { createCasServerAuthAdapter } from "@uttara-dev/cas-client/react/adapters";
import { ConfirmDialogProvider } from "@uttara-dev/ui/composite";
import { Toaster } from "@uttara-dev/ui/primitives";
import { uttaraTheme } from "@uttara-dev/ui/tokens";
import { previewUsers } from "@/preview-users";

// O adapter REAL do CAS é o mesmo em dev e em produção. O Preview
// Mode do SDK (cas-client v1.1.0+) emite uma sessão local válida
// no iframe do Lovable e em localhost, sem precisar de mock.
const auth = createCasServerAuthAdapter({
  preview: {
    enabled: import.meta.env.DEV,
    users: previewUsers,
  },
});

export function AppProviders({ children }: { children: React.ReactNode }) {
  return (
    // brand={uttaraTheme} é hardcoded de propósito: cada app do
    // ecossistema escolhe seu tema em build-time. Para uma instância
    // white-label, troque por createBrandTheme({...}) ou outro tema.
    <ThemeProvider brand={uttaraTheme} defaultMode="system">
      <I18nProvider defaultLocale="pt-BR">
        <AuthProvider adapter={auth}>
          <ConfirmDialogProvider>
            {children}
            <Toaster richColors />
          </ConfirmDialogProvider>
        </AuthProvider>
      </I18nProvider>
    </ThemeProvider>
  );
}

// src/routes/__root.tsx — AppShell envolvendo as rotas
import { Outlet, createRootRoute } from "@tanstack/react-router";
import { AppShell } from "@uttara-dev/ui/layout";
import { Home, Users, Settings } from "lucide-react";
import { AppProviders } from "@/components/AppProviders";

const nav = [
  { label: "Início",   to: "/",         icon: Home },
  { label: "Clientes", to: "/clientes", icon: Users,    requiredPermission: "clientes.view" },
  { label: "Ajustes",  to: "/ajustes",  icon: Settings },
];

export const Route = createRootRoute({
  component: () => (
    <AppProviders>
      <AppShell nav={nav}>
        <Outlet />
      </AppShell>
    </AppProviders>
  ),
});

// src/lib/supabase.ts — cliente único da app
import { createClient } from "@supabase/supabase-js";

// Padrão do ecossistema (ver seção "Secrets do projeto" acima):
//   SUPABASE_URL                — URL do projeto Supabase desta app
//   SUPABASE_PUBLISHABLE_KEY    — chave anon, segura no client
//   SUPABASE_SCHEMA             — schema dedicado da app (ex: "vendas")
// SUPABASE_SERVICE_ROLE_KEY fica APENAS em edge functions / server fns.

export const supabase = createClient(
  import.meta.env.VITE_SUPABASE_URL!,
  import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY!,
  {
    db: { schema: import.meta.env.VITE_SUPABASE_SCHEMA ?? "public" },
  },
);

// src/routes/clientes.tsx — primeira tela "de verdade"
import { createFileRoute } from "@tanstack/react-router";
import { PageHeader, StatCard, EmptyState } from "@uttara-dev/ui/composite";
import { Button } from "@uttara-dev/ui/primitives";
import { Plus, Users, TrendingUp } from "lucide-react";

export const Route = createFileRoute("/clientes")({
  component: ClientesPage,
});

function ClientesPage() {
  const clientes: unknown[] = []; // virá da sua API

  return (
    <div className="space-y-6 p-6">
      <PageHeader
        title="Clientes"
        description="Sua base ativa, em um só lugar."
        actions={
          <Button>
            <Plus className="mr-2 h-4 w-4" /> Novo cliente
          </Button>
        }
      />

      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        <StatCard label="Total"    value="0"   icon={Users} />
        <StatCard label="Ativos"   value="0"   icon={TrendingUp} delta={{ value: "+0%", trend: "up" }} />
        <StatCard label="Inativos" value="0"   icon={Users} />
      </div>

      {clientes.length === 0 && (
        <EmptyState
          icon={Users}
          title="Nenhum cliente ainda"
          description="Cadastre o primeiro para começar."
          action={<Button><Plus className="mr-2 h-4 w-4" /> Novo cliente</Button>}
        />
      )}
    </div>
  );
}

// src/auth/cas-start-login.ts — disparo do fluxo OIDC + PKCE
const CAS = import.meta.env.VITE_CAS_ISSUER!;            // ex: "https://cas.uttara.com"
const CLIENT_ID = import.meta.env.VITE_CAS_CLIENT_ID!;   // registrado no CAS
const REDIRECT_URI = `${window.location.origin}/auth/callback`;

function b64url(buf: ArrayBuffer): string {
  return btoa(String.fromCharCode(...new Uint8Array(buf)))
    .replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
}
const sha256 = (s: string) => crypto.subtle.digest("SHA-256", new TextEncoder().encode(s));

export async function startLogin(returnTo = "/") {
  const verifier  = b64url(crypto.getRandomValues(new Uint8Array(32)).buffer);
  const challenge = b64url(await sha256(verifier));
  const state = crypto.randomUUID();
  const nonce = crypto.randomUUID();

  sessionStorage.setItem("cas_pkce_verifier", verifier);
  sessionStorage.setItem("cas_state", state);
  sessionStorage.setItem("cas_nonce", nonce);
  sessionStorage.setItem("cas_return_to", returnTo);

  const params = new URLSearchParams({
    response_type: "code",
    client_id: CLIENT_ID,
    redirect_uri: REDIRECT_URI,
    // Princípio do menor privilégio: peça só os scopes que a app vai usar.
    scope: "openid profile email",
    state, nonce,
    code_challenge: challenge,
    code_challenge_method: "S256",
  });
  window.location.href = `${CAS}/api/authorize?${params}`;
}

// src/routes/auth.callback.tsx — troca code por tokens, valida id_token
import { createFileRoute, useNavigate } from "@tanstack/react-router";
import * as jose from "jose";

const CAS = import.meta.env.VITE_CAS_ISSUER!;
const CLIENT_ID = import.meta.env.VITE_CAS_CLIENT_ID!;
const REDIRECT_URI = typeof window !== "undefined"
  ? `${window.location.origin}/auth/callback`
  : "";
const JWKS = jose.createRemoteJWKSet(new URL(`${CAS}/api/jwks`));

export const Route = createFileRoute("/auth/callback")({
  component: CallbackPage,
});

function CallbackPage() {
  const navigate = useNavigate();
  // ... efeitos de troca de code, validação de state/nonce, persistência.
  // Para SPA pura, mantenha access_token em memória e refresh_token em
  // cookie httpOnly setado por uma server function (padrão BFF).
  return <p>Entrando…</p>;
}

// src/auth/cas-adapter.ts — encaixe entre CAS e o AuthAdapter da UI
import type { AuthAdapter, AuthUser } from "@uttara-dev/ui/auth";
import { startLogin } from "./cas-start-login";

/**
 * Camada fina: o CAS resolve OIDC/PKCE/refresh; este adapter apenas
 * espelha o usuário corrente para o ThemeProvider/AppShell/UserMenu.
 */
export function createCasAuthAdapter(): AuthAdapter {
  let user: AuthUser | null = null;
  let loading = true;
  const listeners = new Set<() => void>();
  const notify = () => listeners.forEach((l) => l());

  // Bootstrap: se já há sessão (refresh cookie válido), troca por access
  // token e baixa /userinfo. Se 401, fica deslogado e silencioso.
  void hydrateFromSession().then((u) => {
    user = u;
    loading = false;
    notify();
  });

  return {
    getUser: () => user,
    isLoading: () => loading,
    hasPermission: (perm) => {
      const p = user?.permissions ?? [];
      return p.includes("*") || p.includes(perm);
    },
    signIn: () => startLogin(window.location.pathname),
    signOut: async () => { await casLogout(); user = null; notify(); },
    subscribe: (l) => { listeners.add(l); return () => listeners.delete(l); },
  };
}

// hydrateFromSession() / casLogout() ficam no arquivo cas-session.ts
// — separados porque envolvem fetch ao backend BFF da app.