Marca blanca

import type { CSSProperties } from "react";
import { BRAND_TOKENS, hexToRgbTriplet } from "@unozero-ai/design-tokens/presets";
import { brandFontVariables } from "@unozero-ai/design-tokens/fonts";
import { getTenantBrand } from "@/lib/tenant"; // tu backend: { cyan, blue, purple }
import { Providers } from "./providers";

function brandStyle(brand: { cyan: string; blue: string; purple: string }): CSSProperties {
  const [cyan, blue, purple] = BRAND_TOKENS;
  return Object.fromEntries(
    ([[cyan, brand.cyan], [blue, brand.blue], [purple, brand.purple]] as const).flatMap(([token, hex]) => [
      [token.name, hex],
      [token.rgbName, hexToRgbTriplet(hex)],
    ]),
  );
}

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const brand = await getTenantBrand();
  return (
    <html lang="es" className={brandFontVariables} style={brandStyle(brand)} suppressHydrationWarning>
      <body className="font-sans antialiased">
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

"use client";

import * as React from "react";
import { Button, ColorPicker } from "@unozero-ai/ui/react";
import { applyBrandPreset, BRAND_TOKENS, setBrandColor } from "@unozero-ai/design-tokens/presets";

type Brand = { cyan: string; blue: string; purple: string };
const [cyan, blue, purple] = BRAND_TOKENS;

export function BrandSettings({ saved, onSave }: { saved: Brand; onSave: (brand: Brand) => Promise<void> }) {
  const [brand, setBrand] = React.useState(saved);

  // `input` llega con cada color válido: vista previa en toda la app mientras se elige.
  const edit = (key: keyof Brand, token: typeof cyan) => (e: Event) => {
    const hex = (e.currentTarget as HTMLInputElement).value;
    setBrandColor(token, hex);
    setBrand((b) => ({ ...b, [key]: hex }));
  };

  function discard() {
    applyBrandPreset({ name: "guardada", ...saved });
    setBrand(saved);
  }

  return (
    <form action={() => onSave(brand)} className="grid max-w-md gap-4">
      <ColorPicker label="Color principal" value={brand.blue} onInput={edit("blue", blue)} />
      <ColorPicker label="Acento" value={brand.cyan} onInput={edit("cyan", cyan)} />
      <ColorPicker label="Cierre del gradiente" value={brand.purple} onInput={edit("purple", purple)} />
      <div className="flex gap-3">
        <Button type="submit" variant="primary">Guardar marca</Button>
        <Button variant="ghost" onClick={discard}>Descartar cambios</Button>
      </div>
    </form>
  );
}