@fayz-ai/admin 0.62.0 → 0.63.0

package/dist/ConnectedBrandingSettings-43ZM3HCI.js

@@ -0,0 +1,680 @@
+import { normalizeBrand, EMPTY_BRAND, UpgradeOverlay } from './chunk-3HLX7YB2.js';
+import './chunk-E6DF3VR6.js';
+import './chunk-HCFO4Z6A.js';
+import { useAccessOptional } from './chunk-S56FQKPL.js';
+import { useTranslation } from './chunk-YUHCC7JY.js';
+import { toast } from './chunk-3OUD4XBK.js';
+import './chunk-VSXNROYH.js';
+import './chunk-M2CMDWUI.js';
+import './chunk-6CQFGMEO.js';
+import './chunk-BG5Z6KLN.js';
+import './chunk-SGAFPNMA.js';
+import './chunk-TL42NKTH.js';
+import { useAppConfigStore, OrgMark } from './chunk-5D5QLMOQ.js';
+import './chunk-UQ2NTFQC.js';
+import { getFayzSupabaseClient } from './chunk-KJELMULA.js';
+import { cn } from './chunk-JRZJBMOY.js';
+import { useOrganizationStore } from './chunk-YKPPCV2Z.js';
+import './chunk-QD7BMUDF.js';
+import * as React from 'react';
+import { Save, X, Upload } from 'lucide-react';
+import { SegmentedControl, Input, Separator, Button, Badge } from '@fayz-ai/ui';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function ListField({ label, hint, value, onChange, placeholder, danger }) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx("label", { className: cn("text-sm font-medium", danger && "text-destructive"), children: label }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        value: value.join(", "),
+        placeholder,
+        onChange: (e) => onChange(e.target.value.split(",").map((x) => x.trim()).filter(Boolean))
+      }
+    ),
+    hint && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: hint })
+  ] });
+}
+function FileUploadField({
+  label,
+  accept,
+  currentUrl,
+  onFileSelect,
+  onClear,
+  hint
+}) {
+  const { t } = useTranslation();
+  const inputRef = React.useRef(null);
+  const [preview, setPreview] = React.useState(null);
+  const handleChange = (e) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      onFileSelect(file);
+      const url = URL.createObjectURL(file);
+      setPreview(url);
+    }
+    if (e.target) {
+      e.target.value = "";
+    }
+  };
+  const displayUrl = preview ?? currentUrl;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: label }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+      displayUrl ? /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: displayUrl,
+            alt: label,
+            className: "h-16 w-16 rounded-md border object-contain p-1"
+          }
+        ),
+        onClear && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "bare",
+            size: "bare",
+            type: "button",
+            onClick: () => {
+              onClear();
+              setPreview(null);
+            },
+            className: "absolute -right-1.5 -top-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-destructive text-destructive-foreground",
+            "aria-label": `Remove ${label.toLowerCase()}`,
+            children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx("div", { className: "flex h-16 w-16 items-center justify-center rounded-md border border-dashed", children: /* @__PURE__ */ jsx(Upload, { className: "h-5 w-5 text-muted-foreground/50" }) }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            onClick: () => inputRef.current?.click(),
+            children: t("settings.branding.chooseFile")
+          }
+        ),
+        hint && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: hint })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept,
+        className: "hidden",
+        onChange: handleChange
+      }
+    )
+  ] });
+}
+function luminance(hex) {
+  const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) return null;
+  const n = parseInt(m[1], 16);
+  const ch = [n >> 16 & 255, n >> 8 & 255, n & 255].map((v) => {
+    const c = v / 255;
+    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * ch[0] + 0.7152 * ch[1] + 0.0722 * ch[2];
+}
+function contrastRatio(a, b) {
+  const la = luminance(a);
+  const lb = luminance(b);
+  if (la === null || lb === null) return null;
+  const [hi, lo] = la > lb ? [la, lb] : [lb, la];
+  return Math.round((hi + 0.05) / (lo + 0.05) * 100) / 100;
+}
+function selfContradictions(brand) {
+  const banned = (brand.voice?.avoid ?? []).map((w) => w.toLowerCase()).filter(Boolean);
+  if (banned.length === 0) return [];
+  const haystack = [
+    brand.identity?.tagline,
+    brand.identity?.mission,
+    brand.voice?.tone,
+    ...brand.voice?.ctas ?? [],
+    ...brand.voice?.lexicon ?? []
+  ].filter(Boolean).join(" ").toLowerCase();
+  return banned.filter((w) => haystack.includes(w));
+}
+function countChanges(a, b) {
+  const flat = (x) => ({
+    name: x.identity?.name ?? "",
+    tagline: x.identity?.tagline ?? "",
+    mission: x.identity?.mission ?? "",
+    logoUrl: x.identity?.logoUrl ?? "",
+    faviconUrl: x.identity?.faviconUrl ?? "",
+    primary: x.tokens?.color?.primary ?? "",
+    accent: x.tokens?.color?.accent ?? "",
+    heading: x.tokens?.font?.heading ?? "",
+    body: x.tokens?.font?.body ?? "",
+    // Sem estas duas o botão Salvar não acorda quando só a trilha muda.
+    rail: JSON.stringify(x.tokens?.rail ?? {}),
+    surface: JSON.stringify(x.tokens?.surface ?? {}),
+    tone: x.voice?.tone ?? "",
+    lexicon: (x.voice?.lexicon ?? []).join(","),
+    avoid: (x.voice?.avoid ?? []).join(","),
+    ctas: (x.voice?.ctas ?? []).join(","),
+    hashtags: (x.voice?.hashtags ?? []).join(",")
+  });
+  const fa = flat(a);
+  const fb = flat(b);
+  return Object.keys(fa).filter((k) => fa[k] !== fb[k]).length;
+}
+function readableOn(hex) {
+  const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) return "#ffffff";
+  const n = parseInt(m[1], 16);
+  const lin = (c) => {
+    const v = c / 255;
+    return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+  };
+  const L = 0.2126 * lin(n >> 16 & 255) + 0.7152 * lin(n >> 8 & 255) + 0.0722 * lin(n & 255);
+  return L > 0.45 ? "#1a1a1a" : "#ffffff";
+}
+function BrandPreview({ brand, t }) {
+  const primary = brand.tokens?.color?.primary || "#111827";
+  const accent = brand.tokens?.color?.accent || "#6366f1";
+  const railBg = brand.tokens?.rail?.background || primary;
+  const railFg = brand.tokens?.rail?.foreground || "#ffffff";
+  const railActive = brand.tokens?.rail?.accent || "rgba(255,255,255,0.14)";
+  const pageBg = brand.tokens?.surface?.background || "#ffffff";
+  const cardBg = brand.tokens?.surface?.card || "#ffffff";
+  const pageFg = brand.tokens?.surface?.foreground || "#111827";
+  const radius = brand.tokens?.radius || "0.75rem";
+  const ctaFg = readableOn(primary);
+  const mark = brand.identity?.markUrl || brand.identity?.logoUrl || "";
+  const heading = brand.tokens?.font?.heading;
+  const body = brand.tokens?.font?.body;
+  const name = brand.identity?.name || t("settings.brand.previewFallbackName");
+  const cta = brand.voice?.ctas?.[0] || t("settings.brand.previewFallbackCta");
+  const onPrimary = contrastRatio(primary, readableOn(primary));
+  const banned = brand.voice?.avoid ?? [];
+  const clashes = selfContradictions(brand);
+  const sample = [
+    brand.voice?.tone ? t("settings.brand.sampleWithTone", { name }) : t("settings.brand.sampleNoTone", { name }),
+    brand.voice?.lexicon?.length ? t("settings.brand.sampleLexicon", { word: brand.voice.lexicon[0] }) : "",
+    `${cta}.`
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3 lg:sticky lg:top-4", "data-testid": "brand-preview", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground", children: t("settings.brand.previewTitle") }),
+    /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-xl border shadow-sm", style: { backgroundColor: railBg }, children: /* @__PURE__ */ jsxs("div", { className: "flex", children: [
+      /* @__PURE__ */ jsxs("div", { className: "w-16 shrink-0 space-y-2 p-2", children: [
+        /* @__PURE__ */ jsx(OrgMark, { name, logoUrl: mark || void 0, className: "h-5 w-5" }),
+        /* @__PURE__ */ jsx("div", { className: "flex h-3 items-center rounded px-1", style: { backgroundColor: railActive }, children: /* @__PURE__ */ jsx("span", { className: "h-1.5 w-7 rounded", style: { backgroundColor: railFg, opacity: 0.85 } }) }),
+        /* @__PURE__ */ jsx("div", { className: "h-1.5 w-7 rounded", style: { backgroundColor: railFg, opacity: 0.3 } }),
+        /* @__PURE__ */ jsx("div", { className: "h-1.5 w-8 rounded", style: { backgroundColor: railFg, opacity: 0.3 } })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 p-2 pl-0", children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "space-y-3 p-3",
+          style: { backgroundColor: pageBg, color: pageFg, borderRadius: radius },
+          children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", style: heading ? { fontFamily: heading } : void 0, children: name }),
+            /* @__PURE__ */ jsx("p", { className: "text-[11px] leading-relaxed opacity-70", style: body ? { fontFamily: body } : void 0, children: brand.identity?.tagline || t("settings.brand.previewFallbackTagline") }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "flex items-center gap-2 p-2",
+                style: { backgroundColor: cardBg, borderRadius: radius },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "px-2.5 py-1 text-[11px] font-medium",
+                      style: { backgroundColor: primary, color: ctaFg, borderRadius: `calc(${radius} - 0.25rem)` },
+                      children: cta
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "px-2 py-1 text-[11px]",
+                      style: { backgroundColor: `${accent}22`, color: accent, borderRadius: `calc(${radius} - 0.25rem)` },
+                      children: t("settings.brand.previewChip")
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      ) })
+    ] }) }),
+    onPrimary !== null && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-lg border px-3 py-2", "data-testid": "brand-contrast", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground", children: t("settings.brand.contrast") }),
+      /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium tabular-nums", children: [
+        onPrimary,
+        ":1"
+      ] }),
+      /* @__PURE__ */ jsx(Badge, { variant: onPrimary >= 4.5 ? "success" : "destructive", children: onPrimary >= 7 ? "AAA" : onPrimary >= 4.5 ? "AA" : t("settings.brand.contrastFail") })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "rounded-xl border bg-muted/20 p-3", children: [
+      /* @__PURE__ */ jsx("p", { className: "mb-1.5 text-[11px] font-medium text-muted-foreground", children: t("settings.brand.voicePreview") }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs leading-relaxed", style: body ? { fontFamily: body } : void 0, children: sample }),
+      banned.length > 0 && /* @__PURE__ */ jsx("p", { className: "mt-2 text-[10px] text-muted-foreground", children: t("settings.brand.neverSays", { words: banned.join(", ") }) })
+    ] }),
+    clashes.length > 0 && /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-destructive/40 bg-destructive/5 px-3 py-2", "data-testid": "brand-clash", children: /* @__PURE__ */ jsx("p", { className: "text-[11px] text-destructive", children: t("settings.brand.clash", { words: clashes.join(", ") }) }) })
+  ] });
+}
+function SkinGate({ children }) {
+  const access = useAccessOptional();
+  if (access.entitled("branding.theme")) return /* @__PURE__ */ jsx(Fragment, { children });
+  return /* @__PURE__ */ jsx(UpgradeOverlay, { feature: "branding.theme", overlayClassName: "min-h-[22rem]", children });
+}
+function BrandingSettings({ brand, onSave }) {
+  const { t } = useTranslation();
+  const [section, setSection] = React.useState("identity");
+  const [saved, setSaved] = React.useState(brand ?? EMPTY_BRAND);
+  const [draft, setDraft] = React.useState(brand ?? EMPTY_BRAND);
+  const [logoFile, setLogoFile] = React.useState(null);
+  const [faviconFile, setFaviconFile] = React.useState(null);
+  const [saving, setSaving] = React.useState(false);
+  React.useEffect(() => {
+    if (brand) {
+      setSaved(brand);
+      setDraft(brand);
+    }
+  }, [brand]);
+  const identity = draft.identity ?? {};
+  const color = draft.tokens?.color ?? {};
+  const font = draft.tokens?.font ?? {};
+  const voice = draft.voice ?? {};
+  const rail = draft.tokens?.rail ?? {};
+  const surface = draft.tokens?.surface ?? {};
+  const changes = countChanges(saved, draft) + (logoFile ? 1 : 0) + (faviconFile ? 1 : 0);
+  const dirty = changes > 0;
+  const patchIdentity = (v) => setDraft((d) => ({ ...d, identity: { ...d.identity, ...v } }));
+  const patchColor = (v) => setDraft((d) => ({ ...d, tokens: { ...d.tokens, color: { ...d.tokens?.color, ...v } } }));
+  const patchFont = (v) => setDraft((d) => ({ ...d, tokens: { ...d.tokens, font: { ...d.tokens?.font, ...v } } }));
+  const patchLayer = (layer) => (v) => setDraft((d) => {
+    const next = { ...d.tokens?.[layer] };
+    for (const [k, val] of Object.entries(v)) {
+      if (val) next[k] = val;
+      else delete next[k];
+    }
+    const tokens = { ...d.tokens, [layer]: next };
+    if (!Object.keys(next).length) delete tokens[layer];
+    return { ...d, tokens };
+  });
+  const patchRail = patchLayer("rail");
+  const patchSurface = patchLayer("surface");
+  const patchVoice = (v) => setDraft((d) => ({ ...d, voice: { ...d.voice, ...v } }));
+  const discard = () => {
+    setDraft(saved);
+    setLogoFile(null);
+    setFaviconFile(null);
+  };
+  const submit = async (e) => {
+    e.preventDefault();
+    if (!onSave) return;
+    setSaving(true);
+    try {
+      await onSave({ identity: draft.identity, tokens: draft.tokens, voice: draft.voice }, { logoFile, faviconFile });
+      setSaved(draft);
+      setLogoFile(null);
+      setFaviconFile(null);
+    } finally {
+      setSaving(false);
+    }
+  };
+  const Swatch = ({ value, onChange, id, label, fallback }) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx("label", { htmlFor: id, className: "text-sm font-medium", children: label }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "color",
+          id,
+          value: value || fallback || "#808080",
+          onChange: (e) => onChange(e.target.value),
+          className: "h-9 w-9 shrink-0 cursor-pointer rounded-lg border bg-transparent p-1"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          value: value ?? "",
+          onChange: (e) => onChange(e.target.value),
+          placeholder: fallback,
+          maxLength: 7,
+          className: "font-mono text-sm"
+        }
+      )
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxs("form", { onSubmit: submit, className: "pb-24", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-4 flex flex-wrap items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsx("p", { className: "max-w-xl text-sm text-muted-foreground", children: t("settings.brand.subtitle") }),
+      /* @__PURE__ */ jsx(
+        SegmentedControl,
+        {
+          value: section,
+          onChange: setSection,
+          options: [
+            { value: "identity", label: t("settings.brand.identity") },
+            { value: "color", label: t("settings.brand.colors") },
+            { value: "type", label: t("settings.brand.typography") },
+            { value: "voice", label: t("settings.brand.voice") }
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-6 lg:grid-cols-[minmax(0,1fr)_320px]", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-5", "data-testid": `brand-section-${section}`, children: [
+        section === "identity" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("settings.brand.identityHint") }),
+          /* @__PURE__ */ jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: t("settings.brand.name") }),
+              /* @__PURE__ */ jsx(Input, { value: identity.name ?? "", onChange: (e) => patchIdentity({ name: e.target.value }) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: t("settings.brand.tagline") }),
+              /* @__PURE__ */ jsx(Input, { value: identity.tagline ?? "", onChange: (e) => patchIdentity({ tagline: e.target.value }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: t("settings.brand.mission") }),
+            /* @__PURE__ */ jsx(Input, { value: identity.mission ?? "", onChange: (e) => patchIdentity({ mission: e.target.value }) })
+          ] }),
+          /* @__PURE__ */ jsx(Separator, {}),
+          /* @__PURE__ */ jsx(
+            FileUploadField,
+            {
+              label: "Logo",
+              accept: "image/png,image/jpeg,image/svg+xml,image/webp",
+              currentUrl: identity.logoUrl || void 0,
+              onFileSelect: setLogoFile,
+              onClear: () => {
+                patchIdentity({ logoUrl: "" });
+                setLogoFile(null);
+              },
+              hint: "200x50px, PNG ou SVG"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FileUploadField,
+            {
+              label: "Favicon",
+              accept: "image/png,image/x-icon,image/svg+xml",
+              currentUrl: identity.faviconUrl || void 0,
+              onFileSelect: setFaviconFile,
+              onClear: () => {
+                patchIdentity({ faviconUrl: "" });
+                setFaviconFile(null);
+              },
+              hint: "32x32px, PNG ou ICO"
+            }
+          )
+        ] }),
+        section === "color" && /* @__PURE__ */ jsxs(SkinGate, { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("settings.brand.colorsHint") }),
+          /* @__PURE__ */ jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [
+            /* @__PURE__ */ jsx(
+              Swatch,
+              {
+                value: color.primary,
+                onChange: (v) => patchColor({ primary: v }),
+                id: "primary-color",
+                label: t("settings.branding.primaryColor"),
+                fallback: "#111827"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Swatch,
+              {
+                value: color.accent,
+                onChange: (v) => patchColor({ accent: v }),
+                id: "accent-color",
+                label: t("settings.branding.accentColor"),
+                fallback: "#6366f1"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("settings.brand.colorsWhere") }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-3 border-t border-border pt-4", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium", children: "Barra lateral" }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Com a moldura ligada, esta cor pinta a trilha E o fundo atr\xE1s do conte\xFAdo." })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "grid gap-4 sm:grid-cols-3", children: [
+              /* @__PURE__ */ jsx(
+                Swatch,
+                {
+                  value: rail.background,
+                  onChange: (v) => patchRail({ background: v }),
+                  id: "rail-bg",
+                  label: "Fundo",
+                  fallback: "#111827"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Swatch,
+                {
+                  value: rail.foreground,
+                  onChange: (v) => patchRail({ foreground: v }),
+                  id: "rail-fg",
+                  label: "Texto",
+                  fallback: "#FFFFFF"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Swatch,
+                {
+                  value: rail.accent,
+                  onChange: (v) => patchRail({ accent: v }),
+                  id: "rail-accent",
+                  label: "Item ativo",
+                  fallback: "#1F2937"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-3 border-t border-border pt-4", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium", children: "Superf\xEDcie" }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Apague o campo para devolver a decis\xE3o ao tema do sistema." })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "grid gap-4 sm:grid-cols-3", children: [
+              /* @__PURE__ */ jsx(
+                Swatch,
+                {
+                  value: surface.background,
+                  onChange: (v) => patchSurface({ background: v }),
+                  id: "surface-bg",
+                  label: "P\xE1gina",
+                  fallback: "#FFFFFF"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Swatch,
+                {
+                  value: surface.card,
+                  onChange: (v) => patchSurface({ card: v }),
+                  id: "surface-card",
+                  label: "Cartas",
+                  fallback: "#FFFFFF"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Swatch,
+                {
+                  value: surface.foreground,
+                  onChange: (v) => patchSurface({ foreground: v }),
+                  id: "surface-fg",
+                  label: "Texto",
+                  fallback: "#111827"
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        section === "type" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("settings.brand.typographyHint") }),
+          /* @__PURE__ */ jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: t("settings.brand.headingFont") }),
+              /* @__PURE__ */ jsx(Input, { value: font.heading ?? "", onChange: (e) => patchFont({ heading: e.target.value }), placeholder: "Hanken Grotesk" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: t("settings.brand.bodyFont") }),
+              /* @__PURE__ */ jsx(Input, { value: font.body ?? "", onChange: (e) => patchFont({ body: e.target.value }), placeholder: "Inter" })
+            ] })
+          ] })
+        ] }),
+        section === "voice" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("settings.brand.voiceHint") }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: t("settings.brand.tone") }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                value: voice.tone ?? "",
+                onChange: (e) => patchVoice({ tone: e.target.value }),
+                placeholder: t("settings.brand.tonePlaceholder")
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            ListField,
+            {
+              label: t("settings.brand.lexicon"),
+              value: voice.lexicon ?? [],
+              onChange: (v) => patchVoice({ lexicon: v }),
+              placeholder: "acolhimento, cuidado"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ListField,
+            {
+              label: t("settings.brand.ctas"),
+              value: voice.ctas ?? [],
+              onChange: (v) => patchVoice({ ctas: v }),
+              placeholder: t("settings.brand.ctasPlaceholder")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ListField,
+            {
+              label: t("settings.brand.hashtags"),
+              value: voice.hashtags ?? [],
+              onChange: (v) => patchVoice({ hashtags: v }),
+              placeholder: "#suamarca"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-destructive/30 bg-destructive/[0.03] p-4", "data-testid": "brand-avoid", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-destructive", children: t("settings.brand.avoid") }),
+            /* @__PURE__ */ jsx("p", { className: "mb-3 mt-0.5 text-xs text-muted-foreground", children: t("settings.brand.avoidHint") }),
+            /* @__PURE__ */ jsx(
+              ListField,
+              {
+                label: t("settings.brand.avoidWords"),
+                value: voice.avoid ?? [],
+                onChange: (v) => patchVoice({ avoid: v }),
+                placeholder: t("settings.brand.avoidPlaceholder"),
+                danger: true
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(BrandPreview, { brand: draft, t })
+    ] }),
+    dirty && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed inset-x-0 bottom-0 z-30 border-t bg-background/95 px-4 py-3 backdrop-blur sm:px-6",
+        "data-testid": "brand-dirty-bar",
+        children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex max-w-5xl flex-wrap items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm", children: changes === 1 ? t("settings.brand.unsavedOne") : t("settings.brand.unsaved", { count: String(changes) }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", onClick: discard, disabled: saving, children: t("settings.brand.discard") }),
+            /* @__PURE__ */ jsxs(Button, { type: "submit", disabled: saving, children: [
+              /* @__PURE__ */ jsx(Save, { className: "mr-2 h-4 w-4" }),
+              saving ? t("common.saving") : t("settings.branding.saveBranding")
+            ] })
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+function ConnectedBrandingSettings() {
+  const currentOrg = useOrganizationStore((s) => s.currentOrg);
+  const setCurrentOrg = useOrganizationStore((s) => s.setCurrentOrg);
+  const handleSave = async (patch, assets) => {
+    if (!currentOrg) return;
+    try {
+      const supabase = getFayzSupabaseClient();
+      const next = {
+        ...patch,
+        identity: { ...patch.identity }
+      };
+      const stamp = Date.now().toString(36);
+      if (assets?.logoFile) {
+        const ext = assets.logoFile.name.split(".").pop() ?? "png";
+        const path = `${currentOrg.id}/branding/logo-${stamp}.${ext}`;
+        const { error } = await supabase.storage.from("avatars").upload(path, assets.logoFile, { upsert: true });
+        if (error) throw error;
+        next.identity.logoUrl = supabase.storage.from("avatars").getPublicUrl(path).data.publicUrl;
+        delete next.identity.markUrl;
+      }
+      if (assets?.faviconFile) {
+        const ext = assets.faviconFile.name.split(".").pop() ?? "png";
+        const path = `${currentOrg.id}/branding/favicon-${stamp}.${ext}`;
+        const { error } = await supabase.storage.from("avatars").upload(path, assets.faviconFile, { upsert: true });
+        if (error) throw error;
+        next.identity.faviconUrl = supabase.storage.from("avatars").getPublicUrl(path).data.publicUrl;
+      }
+      const { data: brand2, error: patchError } = await supabase.rpc("tenant_brand_patch", { p_patch: next });
+      if (patchError) throw patchError;
+      const logoUrl = brand2?.identity?.logoUrl ?? currentOrg.logoUrl ?? null;
+      if (logoUrl !== currentOrg.logoUrl) {
+        await supabase.from("tenants").update({ logo_url: logoUrl }).eq("id", currentOrg.id);
+      }
+      const settings = {
+        ...currentOrg.settings ?? {},
+        branding: {
+          ...(currentOrg.settings ?? {}).branding ?? {},
+          ...next
+        }
+      };
+      setCurrentOrg({ ...currentOrg, logoUrl: logoUrl ?? void 0, settings });
+      const appConfig = useAppConfigStore.getState();
+      if (brand2 && appConfig.tenantId === currentOrg.id) {
+        appConfig.setConfig({ ...appConfig.config, branding: brand2 }, appConfig.tenantId);
+      }
+      toast.success("Marca salva");
+    } catch (err) {
+      toast.error("N\xE3o foi poss\xEDvel salvar a marca", { description: err?.message });
+    }
+  };
+  const [brand, setBrand] = React.useState(() => normalizeBrand(
+    (currentOrg?.settings ?? {}).branding,
+    { name: currentOrg?.name, logoUrl: currentOrg?.logoUrl }
+  ));
+  React.useEffect(() => {
+    let alive = true;
+    void (async () => {
+      try {
+        const { data } = await getFayzSupabaseClient().rpc("tenant_brand");
+        if (alive && data) setBrand(normalizeBrand(data, { name: currentOrg?.name, logoUrl: currentOrg?.logoUrl }));
+      } catch {
+      }
+    })();
+    return () => {
+      alive = false;
+    };
+  }, [currentOrg?.id, currentOrg?.name, currentOrg?.logoUrl]);
+  return /* @__PURE__ */ jsx(BrandingSettings, { brand, onSave: handleSave });
+}
+
+export { ConnectedBrandingSettings };
+//# sourceMappingURL=ConnectedBrandingSettings-43ZM3HCI.js.map
+//# sourceMappingURL=ConnectedBrandingSettings-43ZM3HCI.js.map