From 0742add9e684bf456bf07b2eda31806ffddec6ca Mon Sep 17 00:00:00 2001
From: 4Ventures <4ventures@MacBook-Air-de-4Ventures.local>
Date: Fri, 16 Oct 2026 13:40:45 +0200
Subject: [PATCH] =?UTF-8?q?fix(brandkit):=20permitir=20frases=20en=20l?=
 =?UTF-8?q?=C3=A9xico=20y=20formato=20con=20botones?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

El trim en cada tecla impedía escribir espacios en listas (léxico).
El formato de pieza usa los mismos botones que el filtro, sin dropdown.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/components/BrandZone.tsx             | 17 ++++-
 src/components/CreativePipelineBoard.tsx | 94 ++++++++++++++++--------
 src/lib/brandbook.ts                     | 20 ++++-
 3 files changed, 94 insertions(+), 37 deletions(-)

diff --git a/src/components/BrandZone.tsx b/src/components/BrandZone.tsx
index c3dc833..a43a04c 100644
--- a/src/components/BrandZone.tsx
+++ b/src/components/BrandZone.tsx
@@ -35,6 +35,7 @@ import type { B2BAnalysisResult } from '@/lib/b2b-analyzer';
 import {
   ASSET_KIND_LABELS,
   emptyBrandbook,
+  finalizeLinesList,
   linesToList,
   listToLines,
   newId,
@@ -278,11 +279,23 @@ export default function BrandZone({
     setErr(null);
     setOkMsg(null);
     try {
+      // Trim list fields only on save — mid-edit we keep spaces so phrases work.
+      const cleaned = { ...book } as Brandbook & Record<string, unknown>;
+      for (const key of Object.keys(cleaned)) {
+        const v = cleaned[key];
+        if (
+          Array.isArray(v) &&
+          v.length >= 0 &&
+          v.every((x) => typeof x === 'string')
+        ) {
+          cleaned[key] = finalizeLinesList(v as string[]);
+        }
+      }
       const query = tenantId ? `?tenant_id=${encodeURIComponent(tenantId)}` : '';
       const r = await fetch(`/api/brandbook${query}`, {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ brandbook: book, tenant_id: tenantId }),
+        body: JSON.stringify({ brandbook: cleaned, tenant_id: tenantId }),
       });
       const j = await r.json();
       if (!r.ok) throw new Error(j.error || 'No se pudo guardar');
@@ -1061,6 +1074,7 @@ export default function BrandZone({
               <Field label="Léxico preferido">
                 <textarea
                   className={areaCls}
+                  placeholder="Una frase o palabra por línea&#10;Ej: agua remineralizada&#10;bienestar sin postureo"
                   value={listToLines(book.vocabulary_prefer)}
                   onChange={(e) =>
                     patch({ vocabulary_prefer: linesToList(e.target.value) })
@@ -1070,6 +1084,7 @@ export default function BrandZone({
               <Field label="Léxico a evitar">
                 <textarea
                   className={areaCls}
+                  placeholder="Una frase o palabra por línea"
                   value={listToLines(book.vocabulary_avoid)}
                   onChange={(e) =>
                     patch({ vocabulary_avoid: linesToList(e.target.value) })
diff --git a/src/components/CreativePipelineBoard.tsx b/src/components/CreativePipelineBoard.tsx
index b1ecfee..cef8682 100644
--- a/src/components/CreativePipelineBoard.tsx
+++ b/src/components/CreativePipelineBoard.tsx
@@ -959,9 +959,9 @@ export default function CreativePipelineBoard() {
           })}
         </div>
 
-        {/* Formatos pills */}
+        {/* Formatos pills — filtro del listado */}
         <div className="flex flex-wrap items-center gap-1.5 pt-1">
-          <span className="text-xs text-gray-400 mr-1">Formato:</span>
+          <span className="text-xs text-gray-400 mr-1">Filtrar:</span>
           {['all', 'carrusel', 'reel', 'post', 'story'].map((f) => {
             const active = selectedFormat === f;
             const label =
@@ -1033,20 +1033,38 @@ export default function CreativePipelineBoard() {
               </div>
               <div>
                 <label className="block text-xs font-medium text-gray-600">
-                  Formato
+                  Formato de la pieza
                 </label>
-                <select
-                  value={newFormat}
-                  onChange={(e) =>
-                    setNewFormat(e.target.value as PipelineItem['format'])
-                  }
-                  className="mt-1 w-full rounded-lg border border-gray-200 px-3 py-2 text-sm"
-                >
-                  <option value="post">Post</option>
-                  <option value="story">Story</option>
-                  <option value="reel">Reel</option>
-                  <option value="carrusel">Carrusel</option>
-                </select>
+                <div className="mt-1 flex flex-wrap gap-1.5">
+                  {(
+                    [
+                      ['post', 'Post'],
+                      ['story', 'Story'],
+                      ['reel', 'Reel'],
+                      ['carrusel', 'Carrusel'],
+                    ] as const
+                  ).map(([value, label]) => {
+                    const active = newFormat === value;
+                    return (
+                      <button
+                        key={value}
+                        type="button"
+                        onClick={() => setNewFormat(value)}
+                        className={`rounded-full border px-3 py-1 text-xs font-semibold transition-colors ${
+                          active
+                            ? 'border-brand-600 bg-brand-600 text-white'
+                            : 'border-gray-200 bg-white text-gray-700 hover:border-gray-300'
+                        }`}
+                      >
+                        {label}
+                      </button>
+                    );
+                  })}
+                </div>
+                <p className="mt-1 text-[10px] text-gray-400">
+                  Los botones de arriba filtran el listado; estos eligen el
+                  formato al crear.
+                </p>
               </div>
               <div>
                 <label className="block text-xs font-medium text-gray-600">
@@ -2018,23 +2036,35 @@ function DetailModal({
                       className="mt-1 w-full rounded-lg border border-gray-200 px-2 py-1.5 text-sm font-semibold text-gray-900"
                     />
                   </label>
-                  <label className="block text-xs font-semibold text-gray-600">
-                    Formato
-                    <select
-                      value={editFormat}
-                      onChange={(e) =>
-                        setEditFormat(
-                          e.target.value as PipelineItem['format']
-                        )
-                      }
-                      className="mt-1 w-full rounded-lg border border-gray-200 px-2 py-1.5 text-sm text-gray-900"
-                    >
-                      <option value="post">Post</option>
-                      <option value="story">Story</option>
-                      <option value="reel">Reel</option>
-                      <option value="carrusel">Carrusel</option>
-                    </select>
-                  </label>
+                  <div>
+                    <p className="text-xs font-semibold text-gray-600">Formato</p>
+                    <div className="mt-1 flex flex-wrap gap-1.5">
+                      {(
+                        [
+                          ['post', 'Post'],
+                          ['story', 'Story'],
+                          ['reel', 'Reel'],
+                          ['carrusel', 'Carrusel'],
+                        ] as const
+                      ).map(([value, label]) => {
+                        const active = editFormat === value;
+                        return (
+                          <button
+                            key={value}
+                            type="button"
+                            onClick={() => setEditFormat(value)}
+                            className={`rounded-full border px-2.5 py-1 text-[11px] font-semibold transition-colors ${
+                              active
+                                ? 'border-brand-600 bg-brand-600 text-white'
+                                : 'border-gray-200 bg-white text-gray-700 hover:border-gray-300'
+                            }`}
+                          >
+                            {label}
+                          </button>
+                        );
+                      })}
+                    </div>
+                  </div>
                   <p className="text-xs text-gray-500">
                     {monthLabel(item.month)}{' '}
                     {item.external_ref ? `· Ref: ${item.external_ref}` : ''}
diff --git a/src/lib/brandbook.ts b/src/lib/brandbook.ts
index c160e49..68573dd 100644
--- a/src/lib/brandbook.ts
+++ b/src/lib/brandbook.ts
@@ -1901,11 +1901,23 @@ function arr(v: unknown): string[] {
   return v.map((x) => String(x || '').trim()).filter(Boolean);
 }
 
+/**
+ * Textarea ↔ string[] for brandbook list fields.
+ * - One entry per line (Enter = nueva entrada).
+ * - Spaces and commas stay inside the phrase (no split on ",").
+ * - Do NOT trim the last line on every keystroke — that blocked typing
+ *   a space after the first word ("solo una palabra").
+ */
 export function linesToList(text: string): string[] {
-  return text
-    .split(/\n|,/)
-    .map((s) => s.trim())
-    .filter(Boolean);
+  const parts = String(text ?? '').split('\n');
+  return parts
+    .map((s, i) => (i === parts.length - 1 ? s : s.trim()))
+    .filter((s, i, arr) => s.trim().length > 0 || i === arr.length - 1);
+}
+
+/** Finalize list for persistence (trim, drop empties). */
+export function finalizeLinesList(list: string[]): string[] {
+  return (list || []).map((s) => String(s || '').trim()).filter(Boolean);
 }
 
 export function listToLines(list: string[]): string {