SERIES:

${escapeHtml(seriesName)}

PARENT TITLE:

${escapeHtml(parentTitle)}

${tableRows}

SKU	ASIN	Variation Name

`; } function generateVariationPage(variation, index, allVariations, isLastPage) { const bulletsHtml = variation.bullets.filter((b) => b && b.trim() !== "").map((bullet, bIndex) => { return `

${escapeHtml(bullet)}

`; }).join(""); const dimensionsParts = []; if (variation.height) dimensionsParts.push(`Height: ${escapeHtml(variation.height)}`); if (variation.width) dimensionsParts.push(`Width: ${escapeHtml(variation.width)}`); if (variation.depth) dimensionsParts.push(`Depth: ${escapeHtml(variation.depth)}`); if (variation.diameter) dimensionsParts.push(`Diameter: ${escapeHtml(variation.diameter)}`); if (variation.weight) dimensionsParts.push(`Weight: ${escapeHtml(variation.weight)}`); const dimensionsLine = dimensionsParts.join(" | "); const descriptionParas = variation.description.split("\n").filter((p) => p.trim() !== "").map( (para) => `

${escapeHtml(para)}

` ).join(""); const pageBreak = !isLastPage ? '
' : ""; return `

${escapeHtml(variation.variationTitle)}

SKU: ${escapeHtml(variation.sku)}

ASIN: ${escapeHtml(variation.asin)}

Variation: ${escapeHtml(variation.variationName || "")}

${dimensionsLine ? `

${dimensionsLine}

` : ""}

Bullets

${bulletsHtml}

Backend Keywords

${escapeHtml(variation.keywords)}

Description

${descriptionParas}

${pageBreak}

`; } function generateListingScriptorHTML(data) { const { seriesName, parentTitle, variations } = data; const parentPageHtml = generateParentPage( seriesName, parentTitle, variations ); const variationPagesHtml = variations.map( (v, i) => generateVariationPage(v, i, variations, i === variations.length - 1) ).join(""); return `

${parentPageHtml} ${variationPagesHtml}

`; } // virtual:/apps/web/src/utils/listingScriptor/docGenerator.js init_injected_globals(); function buildListingScriptorWordHtmlDocument(bodyHtml, seriesName) { return ` Listing Scriptor - ${seriesName || "Document"} ${bodyHtml} `; } function buildListingScriptorWordHtmlBlob(bodyHtml, seriesName) { const wordHtml = buildListingScriptorWordHtmlDocument(bodyHtml, seriesName); return new Blob(["\uFEFF", wordHtml], { type: "application/msword" }); } async function generateListingScriptorDoc(bodyHtml, seriesName) { try { const blob = buildListingScriptorWordHtmlBlob(bodyHtml, seriesName); const url = window.URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = `[A Script] ${seriesName || "Untitled"}.doc`; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); document.body.removeChild(a); } catch (error) { console.error("Error in generateListingScriptorDoc:", error); throw error; } } // virtual:/apps/web/src/hooks/useListingScriptorGeneration.js function useListingScriptorGeneration() { const [generating, setGenerating] = (0, import_react2.useState)(false); const [generatingDocx, setGeneratingDocx] = (0, import_react2.useState)(false); const [upload, { loading: isUploading }] = useUpload_default(); const convertToDocxMutation = useMutation({ mutationFn: async ({ sourceUrl, outputFileName }) => { const response = await fetch("/api/convert/html-to-docx", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ sourceUrl, outputFileName }) }); if (!response.ok) { const text = await response.text().catch(() => ""); throw new Error( `When fetching /api/convert/html-to-docx, the response was [${response.status}] ${response.statusText}${text ? ` \u2014 ${text}` : ""}` ); } return response.blob(); } }); const isGeneratingAny = (0, import_react2.useMemo)(() => { return generating || generatingDocx || isUploading || convertToDocxMutation.isPending; }, [ generating, generatingDocx, isUploading, convertToDocxMutation.isPending ]); const handleGenerateDoc = (0, import_react2.useCallback)( async ({ seriesName, parentTitle, variations }) => { setGenerating(true); try { const html = generateListingScriptorHTML({ seriesName, parentTitle, variations }); await generateListingScriptorDoc(html, seriesName); } catch (err) { console.error(err); throw new Error("Failed to generate Word document. Please try again."); } finally { setGenerating(false); } }, [] ); const handleGenerateDocx = (0, import_react2.useCallback)( async ({ seriesName, parentTitle, variations, isVariationsGenerated }) => { setGeneratingDocx(true); try { if (!isVariationsGenerated || variations.length === 0) { throw new Error("Please generate variations before exporting DOCX."); } const html = generateListingScriptorHTML({ seriesName, parentTitle, variations }); const htmlBlob = buildListingScriptorWordHtmlBlob( html, seriesName || "Document A" ); const baseName = seriesName || "Untitled"; const htmlFileName = `[A Script] ${baseName}.htm`; const htmlFile = new File([htmlBlob], htmlFileName, { type: "text/html" }); const uploadResult = await upload({ file: htmlFile }); if (uploadResult?.error) { throw new Error(uploadResult.error); } const uploadedUrl = uploadResult?.url; if (!uploadedUrl) { throw new Error("Upload failed: missing uploaded URL."); } const outputFileName = `[A Script] ${baseName}.docx`; const docxBlob = await convertToDocxMutation.mutateAsync({ sourceUrl: uploadedUrl, outputFileName }); const downloadUrl = window.URL.createObjectURL(docxBlob); const a = document.createElement("a"); a.href = downloadUrl; a.download = outputFileName; document.body.appendChild(a); a.click(); setTimeout(() => { window.URL.revokeObjectURL(downloadUrl); document.body.removeChild(a); }, 100); } catch (err) { console.error(err); const message = err?.message || ""; throw new Error( message || "Failed to generate DOCX. Please try again." ); } finally { setGeneratingDocx(false); } }, [upload, convertToDocxMutation] ); return { generating, generatingDocx, isUploading, isGeneratingAny, isConvertingDocx: convertToDocxMutation.isPending, handleGenerateDoc, handleGenerateDocx }; } // virtual:/apps/web/src/hooks/useListingScriptorActions.js init_injected_globals(); var import_react3 = __toESM(require_react()); function useListingScriptorActions({ saveCurrentTab, resetAll, onAfterSave, onAfterResetAll }) { const [saveMessage, setSaveMessage] = (0, import_react3.useState)(""); const [error, setError] = (0, import_react3.useState)(null); const handleSave = (0, import_react3.useCallback)( (parentTitle, options = {}) => { const { silent = false } = options; if (!silent && !parentTitle.trim()) { setError("Please enter a Parent Title before saving."); return; } saveCurrentTab(); try { if (typeof onAfterSave === "function") { onAfterSave(); } } catch (e) { console.error("onAfterSave failed", e); } if (!silent) { setSaveMessage("Saved."); setError(null); setTimeout(() => setSaveMessage(""), 3e3); } }, [saveCurrentTab, onAfterSave] ); const handleResetAll = (0, import_react3.useCallback)(() => { if (confirm( "Reset all tabs and clear all Listing Scriptor data? This cannot be undone." )) { resetAll(); try { if (typeof onAfterResetAll === "function") { onAfterResetAll(); } } catch (e) { console.error("onAfterResetAll failed", e); } setError(null); setSaveMessage(""); } }, [resetAll, onAfterResetAll]); const handleCloseTab = (0, import_react3.useCallback)((tabs, closeTab, tabId) => { const tab = tabs.find((t) => t.id === tabId); const isDirty = tab?.state === "dirty"; const message = isDirty ? "Are you sure you want to close this tab? Unsaved changes will be lost." : "Are you sure you want to close this tab?"; if (!confirm(message)) { return; } closeTab(tabId); }, []); return { saveMessage, error, setError, handleSave, handleResetAll, handleCloseTab }; } // virtual:/apps/web/src/hooks/useDebouncedAutosave.js init_injected_globals(); var import_react4 = __toESM(require_react()); function useDebouncedAutosave(saveCallback, dependencies = [], delay = 2500) { const timeoutRef = (0, import_react4.useRef)(null); const isFirstRender = (0, import_react4.useRef)(true); (0, import_react4.useEffect)(() => { if (isFirstRender.current) { isFirstRender.current = false; return; } if (timeoutRef.current) { clearTimeout(timeoutRef.current); } timeoutRef.current = setTimeout(() => { saveCallback(); }, delay); return () => { if (timeoutRef.current) { clearTimeout(timeoutRef.current); } }; }, dependencies); } // virtual:/apps/web/src/components/ListingScriptor/Header.jsx init_injected_globals(); var import_react5 = __toESM(require_react()); var import_lucide_react = __toESM(require_lucide_react()); var DEFAULT_GUIDE_BLOCK_TEXT = `OEF COPY BIBLE Authoritative reference for titles, bullets, and product voice TITLES \u2013 STRUCTURE AND RULES Titles always start with: OEF Furnishings + Series or SKU + Core Product Description All variation and technical details go in parentheses ( ). Order inside parentheses is fixed: 1. Technical specs (size, height, frame, material, etc.) 2. Color (if applicable) 3. Pack quantity (always last) If both color and pack are present, pack is always last, with color immediately before it. Examples: OEF Furnishings OEF6418B/2 Commercial-Grade Round Stool (18-inch Dining Height, Gray Frame, Vinyl Padded Seat, 2-Pack) OEF Furnishings L600 Mobile Lectern with Side Shelf (Mahogany) Parent titles must be variation-agnostic. Child titles include variation details in parentheses. Use hyphenated measurements: 18-inch, 7/8-inch, 5-year Avoid em dashes and double hyphens. Use commas instead of slashes except in SKUs. Parentheses are only used for variations and technical specs. BULLET STRUCTURE AND RULES Bullet headers use these brackets only: \u3010 \u3011 Bullet headers are inline with the bullet text. Target bullet length: Ideal around 340 characters Maximum 450 characters Bullet headers are always ALL CAPS. Bullet body text is sentence case. Voice: Warm and personable Intelligent and confident Human-sounding, never robotic Inspired by Home Depot, Lowe\u2019s, West Elm, Pottery Barn, Microsoft BULLET ORDER AND CONTENT (LOCKED) Bullet 1 Header: \u3010 OEF FURNISHINGS IS DIFFERENT \u3011 Purpose: Explain how OEF designs and manufactures commercial-grade and industrial-grade products. Emphasize quality steel, durable woods, proven construction methods, and long-term performance in institutional and professional environments. Bullet 2 Header: \u3010 COMMERCIAL GRADE BUILD QUALITY \u3011 Purpose: Focus on how the product is built. This bullet must include concrete technical details such as: Steel gauge and tubing size Material thickness Joinery and welding Fasteners, reinforcements, and construction methods Measured dimensions where relevant Use real numbers and real specs. No fluff. Bullet 3 Header: \u3010 DESIGNED FOR EVERYDAY WORK SETTINGS \u3011 Purpose: Describe where and how the product is used. This is the primary SEO opportunity. Preferred environment vocabulary: Classrooms Training rooms Conference rooms Libraries Labs Breakrooms Worship spaces Auditoriums Event spaces Focus on daily use, shared environments, flexibility, and ease of management. Bullet 4 Header pattern: \u3010 PART OF A COORDINATED [PRODUCT TYPE] LINE \u3011 Purpose: Place the product within the broader OEF lineup. Mention alternate sizes, configurations, finishes, assemblies, or related models. Reinforce that OEF offers a complete and coordinated range for different spaces and requirements. Bullet 5 (FIXED \u2013 DO NOT EDIT) [ The OEF 5-Year Promise ] Built for the long haul and vetted the right way, independently tested by UL Solutions to meet ANSI/BIFMA standards for strength, safety, and durability, and MAS Certified Green for low VOCs. If something needs attention, our U.S.-based support handles it quickly and clearly, backed by our 5-year promise and straightforward, responsive service. TERMINOLOGY RULES Commercial-grade is the default descriptor. Industrial-grade should only be used when steel gauge, testing, or load requirements clearly justify it. NAMING PHILOSOPHY Model-driven naming is preferred. Avoid vague or marketing-heavy series names. Acceptable approaches: OEF Model + Number OEF L + Number (L = Lectern) Series names are optional and must be functionally descriptive if used. PARENT TITLE VS VARIATION TITLE EXAMPLE Parent title (variation-agnostic): OEF Furnishings OEF6200 KD Series Adjustable Height Round Stool (No Backrest) Variation title (specific SKU): OEF Furnishings OEF6218H-KD Knock-Down Commercial-Grade Round Stool (18\u201327 inch Adjustable Height, Gray Frame, Masonite Wood Seat) Notes: Parent titles describe the shared platform or family and do not include finish, color, or pack quantity. Variation titles describe the exact SKU and include technical specs and material details inside parentheses.`; async function fetchGuideBlock() { const response = await fetch("/api/guide-block"); if (!response.ok) { throw new Error( `When fetching /api/guide-block, the response was [${response.status}] ${response.statusText}` ); } return response.json(); } async function saveGuideBlock(text) { const response = await fetch("/api/guide-block", { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ text }) }); if (!response.ok) { let msg = ""; try { const body = await response.json(); msg = body?.error || ""; } catch { } const extra = msg ? `: ${msg}` : ""; throw new Error( `When saving /api/guide-block, the response was [${response.status}] ${response.statusText}${extra}` ); } return response.json(); } function Header({ onGenerateDocx, // onGenerateDoc, // hidden (DOCX only) onSave, onResetAll, isGeneratingAny, isVariationsGenerated, hasVariations, tabState, // generating, generatingDocx, isUploading, isConvertingDocx }) { const queryClient2 = useQueryClient(); const [guideCopied, setGuideCopied] = (0, import_react5.useState)(false); const [isEditOpen, setIsEditOpen] = (0, import_react5.useState)(false); const [draftText, setDraftText] = (0, import_react5.useState)(""); const [editError, setEditError] = (0, import_react5.useState)(null); const [savedFlash, setSavedFlash] = (0, import_react5.useState)(false); const { data: guideData } = useQuery({ queryKey: ["guideBlock"], queryFn: fetchGuideBlock }); const saveGuideMutation = useMutation({ mutationFn: saveGuideBlock, onSuccess: () => { queryClient2.invalidateQueries({ queryKey: ["guideBlock"] }); } }); const guideBlockText = typeof guideData?.text === "string" ? guideData.text : ""; const effectiveGuideText = (0, import_react5.useMemo)(() => { const trimmed = guideBlockText.trim(); return trimmed.length > 0 ? guideBlockText : DEFAULT_GUIDE_BLOCK_TEXT; }, [guideBlockText]); (0, import_react5.useEffect)(() => { if (!guideCopied) { return; } const t = setTimeout(() => setGuideCopied(false), 1500); return () => clearTimeout(t); }, [guideCopied]); (0, import_react5.useEffect)(() => { if (!savedFlash) { return; } const t = setTimeout(() => setSavedFlash(false), 1500); return () => clearTimeout(t); }, [savedFlash]); const copyGuideBlock = (0, import_react5.useCallback)(async () => { try { const textToCopy = effectiveGuideText; if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) { await navigator.clipboard.writeText(textToCopy); } else { const textarea = document.createElement("textarea"); textarea.value = textToCopy; textarea.style.position = "fixed"; textarea.style.left = "-9999px"; textarea.style.top = "0"; document.body.appendChild(textarea); textarea.focus(); textarea.select(); document.execCommand("copy"); document.body.removeChild(textarea); } setGuideCopied(true); } catch (e) { console.error("Failed to copy Guide Block:", e); alert("Could not copy the Guide Block."); } }, [effectiveGuideText]); const downloadGuideBlock = (0, import_react5.useCallback)(() => { try { const textToDownload = effectiveGuideText; const blob = new Blob([textToDownload], { type: "text/plain;charset=utf-8" }); const url = window.URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = "guide-block-a.txt"; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); document.body.removeChild(a); } catch (e) { console.error("Failed to download Guide Block:", e); alert("Could not download the Guide Block."); } }, [effectiveGuideText]); const openEdit = (0, import_react5.useCallback)(() => { setEditError(null); setDraftText(effectiveGuideText); setIsEditOpen(true); }, [effectiveGuideText]); const closeEdit = (0, import_react5.useCallback)(() => { setIsEditOpen(false); setEditError(null); }, []); const saveEdit = (0, import_react5.useCallback)(async () => { setEditError(null); try { await saveGuideMutation.mutateAsync(draftText); setSavedFlash(true); setIsEditOpen(false); } catch (e) { console.error("Failed to save Guide Block:", e); setEditError("Could not save. Please try again."); } }, [draftText, saveGuideMutation]); return /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "28px" } }, /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between" }, /* @__PURE__ */ React.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React.createElement( "h1", { style: { fontSize: "42px", fontWeight: "700", color: "#111827", marginBottom: "10px", letterSpacing: "-0.025em" } }, /* @__PURE__ */ React.createElement("span", { style: { color: "#1e40af" } }, "A"), " Script" ), /* @__PURE__ */ React.createElement( "p", { style: { fontSize: "16px", color: "#6B7280", maxWidth: "768px" } }, "Create professional listing documents with parent overview and child variation pages." )), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "10px" } }, /* @__PURE__ */ React.createElement( "button", { onClick: onGenerateDocx, disabled: isGeneratingAny || !isVariationsGenerated || !hasVariations, className: `px-4 py-2 text-sm font-semibold rounded-lg cursor-pointer flex items-center gap-2 transition-all duration-200 ${isGeneratingAny || !isVariationsGenerated || !hasVariations ? "text-[#9CA3AF] bg-[#F3F4F6] border border-[#E5E7EB] cursor-not-allowed" : "text-white bg-[#2563eb] hover:bg-[#1d4ed8] border-none"}` }, /* @__PURE__ */ React.createElement(import_lucide_react.Download, { size: 16 }), isUploading || isConvertingDocx || generatingDocx ? "Generating..." : "Export DOCX" ), /* @__PURE__ */ React.createElement( "button", { onClick: copyGuideBlock, className: `px-4 py-2 text-sm font-semibold rounded-lg cursor-pointer flex items-center gap-2 transition-all duration-200 ${guideCopied ? "text-white bg-[#16a34a] border-none" : "text-[#111827] bg-white hover:bg-[#F9FAFB] border border-[#E5E7EB]"}`, title: guideCopied ? "Copied to clipboard" : "Copy the Guide Block to clipboard" }, /* @__PURE__ */ React.createElement(import_lucide_react.Copy, { size: 16 }), guideCopied ? "Copied" : "Copy Guide Block" ), /* @__PURE__ */ React.createElement( "button", { onClick: downloadGuideBlock, className: "px-4 py-2 text-sm font-semibold rounded-lg cursor-pointer flex items-center gap-2 transition-all duration-200 text-[#111827] bg-white hover:bg-[#F9FAFB] border border-[#E5E7EB]", title: "Download the Guide Block as a .txt file" }, /* @__PURE__ */ React.createElement(import_lucide_react.FileDown, { size: 16 }), "Download Guide Block" ), /* @__PURE__ */ React.createElement( "button", { onClick: openEdit, className: `px-4 py-2 text-sm font-semibold rounded-lg cursor-pointer flex items-center gap-2 transition-all duration-200 ${savedFlash ? "text-white bg-[#0f766e] border-none" : "text-[#111827] bg-white hover:bg-[#F9FAFB] border border-[#E5E7EB]"}`, title: savedFlash ? "Saved" : "Edit the Guide Block text" }, /* @__PURE__ */ React.createElement(import_lucide_react.Pencil, { size: 16 }), savedFlash ? "Saved" : "Edit Guide Block" ), /* @__PURE__ */ React.createElement( "button", { onClick: onSave, className: `px-4 py-2 text-sm font-semibold rounded-lg cursor-pointer flex items-center gap-2 transition-all duration-200 ${tabState === "saved" ? "text-white bg-[#003B4A] hover:bg-[#005B73] border-none" : "text-[#003B4A] bg-white hover:bg-[#F9FAFB] border-2 border-[#003B4A]"}` }, "Save Document" ), /* @__PURE__ */ React.createElement( "button", { onClick: onResetAll, className: "px-4 py-2 text-sm font-medium text-[#DC2626] bg-white hover:bg-[#FEE2E2] border border-[#DC2626] rounded-lg cursor-pointer flex items-center gap-2 transition-all duration-200" }, /* @__PURE__ */ React.createElement(import_lucide_react.RotateCcw, { size: 16 }), "Reset All" ))), isEditOpen && /* @__PURE__ */ React.createElement( "div", { role: "dialog", "aria-modal": "true", className: "fixed inset-0 z-50 flex items-center justify-center", style: { backgroundColor: "rgba(0,0,0,0.35)" }, onMouseDown: (e) => { if (e.target === e.currentTarget) { closeEdit(); } } }, /* @__PURE__ */ React.createElement( "div", { className: "bg-white rounded-xl border border-[#E5E7EB] shadow-xl", style: { width: "min(900px, 92vw)", maxHeight: "86vh" } }, /* @__PURE__ */ React.createElement( "div", { className: "border-b border-[#E5E7EB]", style: { padding: "12px 14px" } }, /* @__PURE__ */ React.createElement("div", { className: "text-sm font-semibold text-[#111827]" }, "Edit Guide Block"), /* @__PURE__ */ React.createElement("div", { className: "text-xs text-[#6B7280]", style: { marginTop: 4 } }, "Paste or edit the text below, then click Save.") ), /* @__PURE__ */ React.createElement("div", { style: { padding: "12px 14px" } }, /* @__PURE__ */ React.createElement( "textarea", { value: draftText, onChange: (e) => setDraftText(e.target.value), className: "w-full border border-[#E5E7EB] rounded-lg p-3 text-sm text-[#111827]", style: { minHeight: "340px", resize: "vertical", fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace" } } ), editError && /* @__PURE__ */ React.createElement( "div", { className: "text-sm text-[#DC2626]", style: { marginTop: 10 } }, editError ), /* @__PURE__ */ React.createElement( "div", { style: { display: "flex", justifyContent: "flex-end", gap: "10px", marginTop: "12px" } }, /* @__PURE__ */ React.createElement( "button", { onClick: closeEdit, className: "px-4 py-2 text-sm font-semibold rounded-lg cursor-pointer text-[#111827] bg-white hover:bg-[#F9FAFB] border border-[#E5E7EB]" }, "Cancel" ), /* @__PURE__ */ React.createElement( "button", { onClick: saveEdit, disabled: saveGuideMutation.isPending, className: `px-4 py-2 text-sm font-semibold rounded-lg cursor-pointer ${saveGuideMutation.isPending ? "text-[#9CA3AF] bg-[#F3F4F6] border border-[#E5E7EB] cursor-not-allowed" : "text-white bg-[#111827] hover:bg-black border-none"}` }, saveGuideMutation.isPending ? "Saving..." : "Save" ) )) ) )); } // virtual:/apps/web/src/components/ListingScriptor/TabBar.jsx init_injected_globals(); var import_react6 = __toESM(require_react()); var import_lucide_react2 = __toESM(require_lucide_react()); function TabBar({ tabs, activeTabId, onSetActiveTab, onCreateNewTab, onCloseTab, onReorderTabs, atTabLimit, layout = "inline" // "inline" | "sidebar" }) { const [dragTabId, setDragTabId] = (0, import_react6.useState)(null); const [overTabId, setOverTabId] = (0, import_react6.useState)(null); const collapsedSidebarWidthPx = 340; const getStateColor = (state) => { switch (state) { case "blank": return "#9CA3AF"; case "dirty": return "#F59E0B"; case "saved": return "#10B981"; default: return "#9CA3AF"; } }; const tabById = (0, import_react6.useMemo)(() => { const map = /* @__PURE__ */ new Map(); (tabs || []).forEach((t) => map.set(t.id, t)); return map; }, [tabs]); const getGroupKeyById = (0, import_react6.useCallback)( (tabId) => { const t = tabById.get(tabId); return (t?.data?.category || "").trim(); }, [tabById] ); const handleDragStart = (0, import_react6.useCallback)((e, tabId) => { setDragTabId(tabId); try { e.dataTransfer.effectAllowed = "move"; e.dataTransfer.setData("text/plain", tabId); } catch (err) { console.error("Tab dragStart failed", err); } }, []); const handleDragOver = (0, import_react6.useCallback)( (e, tabId) => { if (dragTabId) { const fromKey = getGroupKeyById(dragTabId); const toKey = getGroupKeyById(tabId); if (fromKey !== toKey) { try { e.dataTransfer.dropEffect = "none"; } catch { } setOverTabId(null); return; } } e.preventDefault(); setOverTabId(tabId); try { e.dataTransfer.dropEffect = "move"; } catch { } }, [dragTabId, getGroupKeyById] ); const handleDrop = (0, import_react6.useCallback)( (e, tabId) => { e.preventDefault(); let fromId = dragTabId; try { const data = e.dataTransfer.getData("text/plain"); if (data) { fromId = data; } } catch { } if (fromId && tabId) { const fromKey = getGroupKeyById(fromId); const toKey = getGroupKeyById(tabId); if (fromKey !== toKey) { setDragTabId(null); setOverTabId(null); return; } } if (fromId && tabId && fromId !== tabId) { if (typeof onReorderTabs === "function") { onReorderTabs(fromId, tabId); } } setDragTabId(null); setOverTabId(null); }, [dragTabId, onReorderTabs, getGroupKeyById] ); const handleDragEnd = (0, import_react6.useCallback)(() => { setDragTabId(null); setOverTabId(null); }, []); const tabButtonBase = "px-3 py-2 text-sm rounded-lg cursor-pointer flex items-center gap-2 transition-all duration-200"; const COLLAPSE_STORAGE_KEY = "a-script.collapsedCategories.v1"; const [collapsed, setCollapsed] = (0, import_react6.useState)({}); (0, import_react6.useEffect)(() => { try { const raw = window.localStorage.getItem(COLLAPSE_STORAGE_KEY); if (!raw) { return; } const parsed = JSON.parse(raw); if (parsed && typeof parsed === "object") { setCollapsed(parsed); } } catch { } }, []); const toggleCategory = (0, import_react6.useCallback)((name) => { setCollapsed((prev) => { const next = { ...prev || {}, [name]: !prev?.[name] }; try { window.localStorage.setItem(COLLAPSE_STORAGE_KEY, JSON.stringify(next)); } catch { } return next; }); }, []); const groupedTabs = (0, import_react6.useMemo)(() => { const safeTabs = Array.isArray(tabs) ? tabs : []; const unassigned2 = safeTabs.filter( (t) => !(t?.data?.category || "").trim() ); const grouped2 = TAB_CATEGORIES.map((cat) => { const catTabs = safeTabs.filter( (t) => (t?.data?.category || "").trim() === cat.name ); return { cat, tabs: catTabs }; }).filter((g) => g.tabs.length > 0); return { unassigned: unassigned2, grouped: grouped2 }; }, [tabs]); const renderCategoryHeader = (cat, count) => { const isCollapsed = !!collapsed?.[cat.name]; const Chevron = isCollapsed ? import_lucide_react2.ChevronRight : import_lucide_react2.ChevronDown; return /* @__PURE__ */ React.createElement( "button", { key: `header-${cat.name}`, type: "button", onClick: () => toggleCategory(cat.name), className: "w-full", style: { display: "flex", alignItems: "center", gap: "10px", marginTop: "12px", marginBottom: "6px", padding: "6px 6px", borderRadius: "8px", background: "transparent", cursor: "pointer" } }, /* @__PURE__ */ React.createElement(Chevron, { size: 16, color: "#6B7280", style: { flexShrink: 0 } }), /* @__PURE__ */ React.createElement( "span", { style: { width: "10px", height: "10px", borderRadius: "3px", backgroundColor: cat.color, border: "1px solid rgba(17,24,39,0.2)", flexShrink: 0 } } ), /* @__PURE__ */ React.createElement( "span", { className: "text-[13px] font-bold text-[#374151]", style: { flex: 1, textAlign: "left" } }, cat.name ), /* @__PURE__ */ React.createElement( "span", { className: "text-[11px] font-semibold text-[#6B7280]", style: { flexShrink: 0 } }, count ) ); }; const renderTabButton = (tab, { fullWidth } = { fullWidth: false }) => { const displayName = tab.name.length > 22 ? tab.name.substring(0, 22) + "..." : tab.name; const category = (tab?.data?.category || "").trim(); const categoryColor = getCategoryColor(category); const asinCount = Array.isArray(tab?.data?.asins) ? tab.data.asins.filter((a) => (a?.asin || "").trim().length > 0).length : 0; const isActive = activeTabId === tab.id; const isOver = overTabId === tab.id && dragTabId && dragTabId !== tab.id; const activeClass = "bg-[#F3F4F6] border border-[#D1D5DB] font-semibold text-[#111827]"; const inactiveClass = "bg-transparent border border-transparent font-medium text-[#111827] hover:bg-[#F9FAFB]"; const overStyle = isOver ? { outline: "2px solid #0891b2", outlineOffset: "0px" } : void 0; const widthClass = fullWidth ? "w-full justify-between" : ""; const isDragging = dragTabId === tab.id; return /* @__PURE__ */ React.createElement( "button", { key: tab.id, onClick: () => onSetActiveTab(tab.id), title: tab.name.length > 22 ? tab.name : void 0, draggable: true, onDragStart: (e) => handleDragStart(e, tab.id), onDragOver: (e) => handleDragOver(e, tab.id), onDrop: (e) => handleDrop(e, tab.id), onDragEnd: handleDragEnd, style: { opacity: isDragging ? 0.55 : 1, transform: isDragging ? "scale(0.985)" : "scale(1)", borderLeft: categoryColor ? `4px solid ${categoryColor}` : "4px solid transparent", ...overStyle }, className: `${tabButtonBase} ${widthClass} ${isActive ? activeClass : inactiveClass}` }, /* @__PURE__ */ React.createElement("span", { className: "flex items-center gap-2 min-w-0" }, /* @__PURE__ */ React.createElement( "span", { style: { width: "8px", height: "8px", borderRadius: "50%", backgroundColor: getStateColor(tab.state), flexShrink: 0 } } ), /* @__PURE__ */ React.createElement( "span", { title: category ? `Category: ${category}` : "Unassigned", style: { width: "10px", height: "10px", borderRadius: "3px", backgroundColor: categoryColor || "transparent", border: categoryColor ? "1px solid rgba(17,24,39,0.25)" : "1px solid #E5E7EB", flexShrink: 0 } } ), /* @__PURE__ */ React.createElement("span", { className: "min-w-0 truncate" }, displayName)), /* @__PURE__ */ React.createElement( "span", { className: "flex items-center", style: { gap: "8px", flexShrink: 0 } }, /* @__PURE__ */ React.createElement( "span", { title: `${asinCount} ASIN${asinCount === 1 ? "" : "s"} in this tab`, className: "text-[11px] font-semibold text-[#374151] bg-white border border-[#E5E7EB]", style: { padding: "2px 8px", borderRadius: "999px", lineHeight: "16px", minWidth: "28px", textAlign: "center" } }, asinCount ), tab.id !== "default" && /* @__PURE__ */ React.createElement( import_lucide_react2.X, { size: 14, onClick: (e) => { e.stopPropagation(); onCloseTab(tab.id); }, style: { opacity: 0.6, cursor: "pointer", flexShrink: 0 } } ) ) ); }; if (layout === "sidebar") { const { unassigned: unassigned2, grouped: grouped2 } = groupedTabs; return /* @__PURE__ */ React.createElement( "div", { className: "bg-white border-r border-[#E5E7EB] shadow-sm group", style: { width: `${collapsedSidebarWidthPx}px`, minWidth: `${collapsedSidebarWidthPx}px`, maxWidth: `${collapsedSidebarWidthPx}px`, height: "100vh", position: "sticky", top: 0, alignSelf: "flex-start", overflow: "visible" } }, /* @__PURE__ */ React.createElement("div", { className: "relative", style: { height: "100%" } }, /* @__PURE__ */ React.createElement( "div", { className: "absolute inset-y-0 left-0 bg-white border-r border-[#E5E7EB] shadow-sm transition-all duration-200 w-[340px] group-hover:w-[420px]", style: { zIndex: 30 } }, /* @__PURE__ */ React.createElement( "div", { style: { height: "100%", display: "flex", flexDirection: "column", padding: "12px" } }, /* @__PURE__ */ React.createElement( "div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: "10px", marginBottom: "10px" } }, /* @__PURE__ */ React.createElement("div", { className: "text-xs font-semibold text-[#6B7280]" }, "Tabs (", tabs.length, "/500)"), /* @__PURE__ */ React.createElement( "button", { onClick: onCreateNewTab, disabled: atTabLimit, title: atTabLimit ? "Maximum of 500 tabs. Close one to create a new tab." : "Create new blank tab", className: "px-3 py-2 text-xs font-medium text-[#111827] bg-white hover:bg-[#F9FAFB] border border-[#E5E7EB] rounded-lg cursor-pointer flex items-center gap-1.5 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed" }, /* @__PURE__ */ React.createElement(import_lucide_react2.Plus, { size: 14 }), "Make New" ) ), /* @__PURE__ */ React.createElement( "div", { style: { flex: 1, overflowY: "auto", paddingRight: "4px", display: "flex", flexDirection: "column", gap: "6px" } }, unassigned2.map( (tab) => renderTabButton(tab, { fullWidth: true }) ), unassigned2.length > 0 && grouped2.length > 0 && /* @__PURE__ */ React.createElement( "div", { style: { height: "1px", backgroundColor: "#E5E7EB", margin: "10px 0 0 0" } } ), grouped2.map((group) => { const isCollapsed = !!collapsed?.[group.cat.name]; const count = group.tabs.length; return /* @__PURE__ */ React.createElement("div", { key: group.cat.name, style: { marginTop: "2px" } }, renderCategoryHeader(group.cat, count), !isCollapsed && /* @__PURE__ */ React.createElement( "div", { style: { display: "flex", flexDirection: "column", gap: "6px", paddingLeft: "12px" } }, group.tabs.map( (tab) => renderTabButton(tab, { fullWidth: true }) ) )); }) ), /* @__PURE__ */ React.createElement( "div", { style: { marginTop: "12px", display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React.createElement( "button", { onClick: onCreateNewTab, disabled: atTabLimit, title: atTabLimit ? "Maximum of 500 tabs. Close one to create a new tab." : "Create new blank tab", className: "px-3 py-2 text-xs font-medium text-[#111827] bg-white hover:bg-[#F9FAFB] border border-[#E5E7EB] rounded-lg cursor-pointer flex items-center gap-1.5 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed" }, /* @__PURE__ */ React.createElement(import_lucide_react2.Plus, { size: 14 }), "Make New" ) ), /* @__PURE__ */ React.createElement( "div", { className: "text-[11px] text-[#9CA3AF]", style: { marginTop: "10px" } }, "Tip: drag tabs to reorder (within the same category)." ) ) )) ); } const { unassigned, grouped } = groupedTabs; return /* @__PURE__ */ React.createElement("div", { className: "bg-white border border-[#E5E7EB] rounded-xl p-3 mb-4 flex items-start gap-2 flex-wrap shadow-sm max-h-[240px] overflow-hidden" }, /* @__PURE__ */ React.createElement("div", { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React.createElement( "div", { style: { display: "flex", gap: "6px", flexWrap: "wrap", alignContent: "flex-start" } }, unassigned.map((tab) => renderTabButton(tab)) ), grouped.map((group) => { const isCollapsed = !!collapsed?.[group.cat.name]; const count = group.tabs.length; return /* @__PURE__ */ React.createElement( "div", { key: group.cat.name, style: { marginTop: "6px", width: "100%" } }, renderCategoryHeader(group.cat, count), !isCollapsed && /* @__PURE__ */ React.createElement( "div", { style: { display: "flex", gap: "6px", flexWrap: "wrap", alignContent: "flex-start", paddingLeft: "8px" } }, group.tabs.map((tab) => renderTabButton(tab)) ) ); })), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "8px", flexShrink: 0 } }, /* @__PURE__ */ React.createElement( "button", { onClick: onCreateNewTab, disabled: atTabLimit, title: atTabLimit ? "Maximum of 500 tabs. Close one to create a new tab." : "Create new blank tab", className: "px-3 py-2 text-xs font-medium text-[#111827] bg-white hover:bg-[#F9FAFB] border border-[#E5E7EB] rounded-lg cursor-pointer flex items-center gap-1.5 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed" }, /* @__PURE__ */ React.createElement(import_lucide_react2.Plus, { size: 14 }), "Make New" ))); } // virtual:/apps/web/src/components/ListingScriptor/MessageDisplay.jsx init_injected_globals(); function MessageDisplay({ error, saveMessage }) { if (!error && !saveMessage) { return null; } return /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "12px" } }, error && /* @__PURE__ */ React.createElement("div", { className: "px-4 py-3 bg-[#FEE2E2] border border-[#FCA5A5] rounded-lg text-[#B91C1C] text-sm" }, error), saveMessage && /* @__PURE__ */ React.createElement("div", { className: "px-4 py-3 bg-[#D1FAE5] border border-[#6EE7B7] rounded-lg text-[#047857] text-sm" }, saveMessage)); } // virtual:/apps/web/src/components/ListingScriptor/ParentInfoCard.jsx init_injected_globals(); // virtual:/apps/web/src/components/CopyFieldButton.jsx init_injected_globals(); var import_react7 = __toESM(require_react()); var import_lucide_react3 = __toESM(require_lucide_react()); function fallbackCopyTextToClipboard(text) { try { const el = document.createElement("textarea"); el.value = text; el.setAttribute("readonly", ""); el.style.position = "absolute"; el.style.left = "-9999px"; document.body.appendChild(el); el.select(); document.execCommand("copy"); document.body.removeChild(el); return true; } catch (e) { console.error("fallbackCopyTextToClipboard failed", e); return false; } } function CopyFieldButton({ value, getValue, disabled, title, className = "", size = 16 }) { const [justCopied, setJustCopied] = (0, import_react7.useState)(false); const textToCopy = (0, import_react7.useMemo)(() => { if (typeof getValue === "function") { return String(getValue() ?? ""); } return String(value ?? ""); }, [getValue, value]); const handleCopy = (0, import_react7.useCallback)(async () => { if (disabled) { return; } const text = textToCopy; if (!text) { return; } try { if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) { await navigator.clipboard.writeText(text); } else { const ok = fallbackCopyTextToClipboard(text); if (!ok) { throw new Error("Copy fallback failed"); } } setJustCopied(true); setTimeout(() => setJustCopied(false), 900); } catch (e) { console.error("CopyFieldButton copy failed", e); } }, [disabled, textToCopy]); const effectiveTitle = title || (justCopied ? "Copied" : "Copy"); return /* @__PURE__ */ React.createElement( "button", { type: "button", onClick: handleCopy, disabled: disabled || !textToCopy, title: effectiveTitle, "aria-label": effectiveTitle, className: className || "p-2 bg-white hover:bg-[#F9FAFB] border-2 border-[#E5E7EB] rounded-lg cursor-pointer flex items-center justify-center transition-all duration-200 disabled:opacity-40 disabled:cursor-not-allowed" }, /* @__PURE__ */ React.createElement(import_lucide_react3.Copy, { size, color: justCopied ? "#047857" : "#111827" }) ); } // virtual:/apps/web/src/components/ListingScriptor/AsinTable.jsx init_injected_globals(); var import_lucide_react4 = __toESM(require_lucide_react()); function AsinTable({ asins, isVariationsGenerated, onAddAsin, onRemoveAsin, onUpdateAsin, onGenerateVariations }) { return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("h3", { className: "text-lg font-semibold text-[#111827] mb-4" }, "ASIN Table"), asins.map((asin, index) => /* @__PURE__ */ React.createElement( "div", { key: index, style: { display: "grid", gridTemplateColumns: "1fr 1fr 1fr auto", gap: "12px", marginBottom: "12px", alignItems: "end" } }, /* @__PURE__ */ React.createElement("div", null, index === 0 && /* @__PURE__ */ React.createElement("label", { className: "block text-xs font-medium text-[#374151] mb-1.5" }, "SKU"), /* @__PURE__ */ React.createElement("div", { className: "flex gap-2 items-stretch" }, /* @__PURE__ */ React.createElement( "input", { type: "text", value: asin.sku, onChange: (e) => onUpdateAsin(index, "sku", e.target.value), placeholder: "SKU", className: "w-full px-3.5 py-2.5 text-sm border border-[#D1D5DB] rounded-lg outline-none text-[#111827] transition-colors focus:border-[#2E7C8A]" } ), /* @__PURE__ */ React.createElement(CopyFieldButton, { value: asin.sku }))), /* @__PURE__ */ React.createElement("div", null, index === 0 && /* @__PURE__ */ React.createElement("label", { className: "block text-xs font-medium text-[#374151] mb-1.5" }, "ASIN"), /* @__PURE__ */ React.createElement("div", { className: "flex gap-2 items-stretch" }, /* @__PURE__ */ React.createElement( "input", { type: "text", value: asin.asin, onChange: (e) => onUpdateAsin(index, "asin", e.target.value), placeholder: "ASIN", className: "w-full px-3.5 py-2.5 text-sm border border-[#D1D5DB] rounded-lg outline-none text-[#111827] transition-colors focus:border-[#2E7C8A]" } ), /* @__PURE__ */ React.createElement(CopyFieldButton, { value: asin.asin }))), /* @__PURE__ */ React.createElement("div", null, index === 0 && /* @__PURE__ */ React.createElement("label", { className: "block text-xs font-medium text-[#374151] mb-1.5" }, "Variation Name"), /* @__PURE__ */ React.createElement("div", { className: "flex gap-2 items-stretch" }, /* @__PURE__ */ React.createElement( "input", { type: "text", value: asin.variation, onChange: (e) => onUpdateAsin(index, "variation", e.target.value), placeholder: "Variation Name", className: "w-full px-3.5 py-2.5 text-sm border border-[#D1D5DB] rounded-lg outline-none text-[#111827] transition-colors focus:border-[#2E7C8A]" } ), /* @__PURE__ */ React.createElement(CopyFieldButton, { value: asin.variation }))), /* @__PURE__ */ React.createElement("div", null, asins.length > 1 && /* @__PURE__ */ React.createElement( "button", { onClick: () => onRemoveAsin(index), className: "p-2.5 bg-transparent hover:bg-[#FEE2E2] hover:border-[#DC2626] border border-[#D1D5DB] rounded-lg cursor-pointer flex items-center justify-center transition-all duration-200" }, /* @__PURE__ */ React.createElement(import_lucide_react4.Trash2, { size: 18, color: "#DC2626" }) )) )), asins.length < 10 && /* @__PURE__ */ React.createElement( "button", { onClick: onAddAsin, className: "mt-2 px-5 py-2.5 text-sm font-medium text-[#111827] bg-white hover:bg-[#F9FAFB] border border-[#D1D5DB] rounded-lg cursor-pointer transition-all duration-200" }, "+ Add ASIN" ), !isVariationsGenerated && asins.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "mt-4 flex justify-end" }, /* @__PURE__ */ React.createElement( "button", { onClick: onGenerateVariations, className: "px-8 py-2.5 text-sm font-semibold text-white bg-[#2563eb] hover:bg-[#1d4ed8] border-none rounded-lg cursor-pointer transition-all duration-200" }, "Next: Generate Variations" )), isVariationsGenerated && asins.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "mt-4 flex justify-end" }, /* @__PURE__ */ React.createElement( "button", { onClick: () => { if (confirm( "Regenerate variations? This will overwrite any changes you made to the variation fields below." )) { onGenerateVariations(); } }, className: "px-8 py-2.5 text-sm font-semibold text-[#2563eb] bg-white hover:bg-[#EFF6FF] border-2 border-[#2563eb] rounded-lg cursor-pointer transition-all duration-200" }, "Regenerate Variations" ))); } // virtual:/apps/web/src/components/ListingScriptor/ParentInfoCard.jsx function ParentInfoCard({ seriesName, tabName, category, parentTitle, asins, isVariationsGenerated, onSetSeriesName, onSetTabName, onSetTabCategory, onSetParentTitle, onAddAsin, onRemoveAsin, onUpdateAsin, onGenerateVariations }) { const categoryColor = getCategoryColor(category); return /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-2xl shadow-xl p-6 border border-[#E5E7EB] mb-5" }, /* @__PURE__ */ React.createElement("h2", { className: "text-2xl font-bold text-[#111827] mb-4" }, "Parent Information"), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 gap-5" }, /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "16px" } }, /* @__PURE__ */ React.createElement( "label", { htmlFor: "parentTitle", className: "block text-xs font-medium text-[#374151] mb-1.5" }, "Parent Title ", /* @__PURE__ */ React.createElement("span", { style: { color: "#DC2626" } }, "*") ), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "8px", alignItems: "stretch" } }, /* @__PURE__ */ React.createElement( "input", { id: "parentTitle", type: "text", value: parentTitle, onChange: (e) => onSetParentTitle(e.target.value), placeholder: "Enter parent title", className: "w-full px-3.5 py-2.5 text-sm border border-[#E5E7EB] rounded-lg outline-none text-[#111827] transition-colors focus:border-[#003B4A]" } ), /* @__PURE__ */ React.createElement(CopyFieldButton, { value: parentTitle }))), /* @__PURE__ */ React.createElement( "div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", style: { marginBottom: "18px" } }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement( "label", { htmlFor: "seriesName", className: "block text-xs font-medium text-[#374151] mb-1.5" }, "Series" ), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "8px", alignItems: "stretch" } }, /* @__PURE__ */ React.createElement( "input", { id: "seriesName", type: "text", value: seriesName, onChange: (e) => onSetSeriesName(e.target.value), maxLength: 200, placeholder: "Enter series name", className: "w-full px-3.5 py-2.5 text-sm border border-[#E5E7EB] rounded-lg outline-none text-[#111827] transition-colors focus:border-[#003B4A]" } ), /* @__PURE__ */ React.createElement(CopyFieldButton, { value: seriesName }))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement( "label", { htmlFor: "tabName", className: "block text-xs font-medium text-[#374151] mb-1.5" }, "Tab Name" ), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "8px", alignItems: "stretch" } }, /* @__PURE__ */ React.createElement( "input", { id: "tabName", type: "text", value: tabName, onChange: (e) => onSetTabName(e.target.value), maxLength: 50, placeholder: "Enter tab name", className: "w-full px-3.5 py-2.5 text-sm border border-[#E5E7EB] rounded-lg outline-none text-[#111827] transition-colors focus:border-[#003B4A]" } ), /* @__PURE__ */ React.createElement(CopyFieldButton, { value: tabName })), /* @__PURE__ */ React.createElement("div", { style: { marginTop: "10px" } }, /* @__PURE__ */ React.createElement("label", { className: "block text-[11px] font-medium text-[#6B7280] mb-1" }, "Category (controls tab color + grouping)"), /* @__PURE__ */ React.createElement( "div", { style: { display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ React.createElement( "select", { value: category, onChange: (e) => onSetTabCategory(e.target.value), className: "w-full px-3 py-2 text-sm border border-[#E5E7EB] rounded-lg outline-none text-[#111827] bg-white transition-colors focus:border-[#003B4A]" }, /* @__PURE__ */ React.createElement("option", { value: "" }, "\u2014 Unassigned \u2014"), TAB_CATEGORIES.map((c) => /* @__PURE__ */ React.createElement("option", { key: c.name, value: c.name }, c.name)) ), /* @__PURE__ */ React.createElement( "div", { title: category ? `Color: ${categoryColor}` : "No category", style: { width: "14px", height: "14px", borderRadius: "4px", backgroundColor: categoryColor || "transparent", border: categoryColor ? "1px solid rgba(17,24,39,0.25)" : "1px solid #E5E7EB", flexShrink: 0 } } ) ))) ), /* @__PURE__ */ React.createElement( AsinTable, { asins, isVariationsGenerated, onAddAsin, onRemoveAsin, onUpdateAsin, onGenerateVariations } ))); } // virtual:/apps/web/src/components/ListingScriptor/VariationsSection.jsx init_injected_globals(); // virtual:/apps/web/src/components/ListingScriptor/VariationCard.jsx init_injected_globals(); // virtual:/apps/web/src/components/CopyToAllButton.jsx init_injected_globals(); var import_lucide_react5 = __toESM(require_lucide_react()); var import_react8 = __toESM(require_react()); function CopyToAllButton({ value, onCopyToAll, label = "Copy to All" }) { const [copied, setCopied] = (0, import_react8.useState)(false); (0, import_react8.useEffect)(() => { if (!copied) return; const timer = setTimeout(() => setCopied(false), 1500); return () => clearTimeout(timer); }, [copied]); const handleClick = () => { onCopyToAll(value); setCopied(true); }; return /* @__PURE__ */ React.createElement( "button", { onClick: handleClick, title: copied ? "Copied to all variations" : label, className: `p-2 rounded-lg transition-all duration-200 flex items-center justify-center ${copied ? "bg-teal-50 border-2 border-teal-600 text-teal-700" : "bg-white border-2 border-teal-600 text-teal-600 hover:bg-teal-50"}` }, /* @__PURE__ */ React.createElement(import_lucide_react5.Copy, { size: 16, className: label === "All" ? "" : "mr-1.5" }), label === "All" ? "" : copied ? "\u2713" : label ); } // virtual:/apps/web/src/components/ListingScriptor/VariationCard.jsx function VariationCard({ variation, index, variationName, backgroundColor, onUpdateVariation, onUpdateBullet, onCopyToAll }) { return /* @__PURE__ */ React.createElement( "div", { className: "mb-5 p-5 rounded-xl border border-[#E5E7EB] last:mb-0", style: { backgroundColor } }, /* @__PURE__ */ React.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React.createElement("h3", { className: "text-lg font-semibold text-[#111827]" }, "Variation ", index + 1)), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4 mb-5" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-[#374151] mb-2" }, "SKU"), /* @__PURE__ */ React.createElement("div", { className: "flex gap-2 items-stretch" }, /* @__PURE__ */ React.createElement( "input", { type: "text", value: variation.sku, readOnly: true, className: "w-full px-4 py-2 border border-[#D1D5DB] rounded-lg text-[#6B7280] bg-[#F3F4F6] cursor-not-allowed" } ), /* @__PURE__ */ React.createElement(CopyFieldButton, { value: variation.sku }))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-[#374151] mb-2" }, "ASIN"), /* @__PURE__ */ React.createElement("div", { className: "flex gap-2 items-stretch" }, /* @__PURE__ */ React.createElement( "input", { type: "text", value: variation.asin, readOnly: true, className: "w-full px-4 py-2 border border-[#D1D5DB] rounded-lg text-[#6B7280] bg-[#F3F4F6] cursor-not-allowed" } ), /* @__PURE__ */ React.createElement(CopyFieldButton, { value: variation.asin }))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-[#374151] mb-2" }, "Variation Name"), /* @__PURE__ */ React.createElement("div", { className: "flex gap-2 items-stretch" }, /* @__PURE__ */ React.createElement( "input", { type: "text", value: variationName, readOnly: true, className: "w-full px-4 py-2 border border-[#D1D5DB] rounded-lg text-[#6B7280] bg-[#F3F4F6] cursor-not-allowed" } ), /* @__PURE__ */ React.createElement(CopyFieldButton, { value: variationName })))), /* @__PURE__ */ React.createElement("div", { className: "mb-5" }, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-[#374151] mb-2" }, "Variation Title"), /* @__PURE__ */ React.createElement("div", { className: "flex gap-2 items-stretch" }, /* @__PURE__ */ React.createElement( "textarea", { value: variation.variationTitle, onChange: (e) => onUpdateVariation(index, "variationTitle", e.target.value), maxLength: 200, rows: 2, className: "w-full px-4 py-2 border border-[#D1D5DB] rounded-lg text-[#111827] focus:outline-none focus:ring-2 focus:ring-[#2E7C8A] focus:border-transparent resize-none mb-1", placeholder: "Enter full variation title" } ), /* @__PURE__ */ React.createElement(CopyFieldButton, { value: variation.variationTitle }), /* @__PURE__ */ React.createElement( CopyToAllButton, { value: variation.variationTitle, onCopyToAll: (val) => onCopyToAll("variationTitle", val) } )), /* @__PURE__ */ React.createElement("div", { className: "text-xs text-[#6B7280]" }, variation.variationTitle.length, "/200 characters")), /* @__PURE__ */ React.createElement("div", { className: "mb-5" }, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-[#374151] mb-2" }, "Dimensions (inches) & Weight (lbs)"), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-5 gap-4" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: "block text-xs text-[#6B7280] mb-1" }, "Height"), /* @__PURE__ */ React.createElement("div", { className: "flex gap-2 items-stretch" }, /* @__PURE__ */ React.createElement( "input", { type: "text", value: variation.height, onChange: (e) => onUpdateVariation(index, "height", e.target.value), className: "w-full px-4 py-2 border border-[#D1D5DB] rounded-lg text-[#111827] focus:outline-none focus:ring-2 focus:ring-[#1e40af] focus:border-transparent", placeholder: '10"' } ), /* @__PURE__ */ React.createElement(CopyFieldButton, { value: variation.height }), /* @__PURE__ */ React.createElement( CopyToAllButton, { value: variation.height, onCopyToAll: (val) => onCopyToAll("height", val), label: "All" } ))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: "block text-xs text-[#6B7280] mb-1" }, "Width"), /* @__PURE__ */ React.createElement("div", { className: "flex gap-2 items-stretch" }, /* @__PURE__ */ React.createElement( "input", { type: "text", value: variation.width, onChange: (e) => onUpdateVariation(index, "width", e.target.value), className: "w-full px-4 py-2 border border-[#D1D5DB] rounded-lg text-[#111827] focus:outline-none focus:ring-2 focus:ring-[#1e40af] focus:border-transparent", placeholder: '8"' } ), /* @__PURE__ */ React.createElement(CopyFieldButton, { value: variation.width }), /* @__PURE__ */ React.createElement( CopyToAllButton, { value: variation.width, onCopyToAll: (val) => onCopyToAll("width", val), label: "All" } ))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: "block text-xs text-[#6B7280] mb-1" }, "Depth"), /* @__PURE__ */ React.createElement("div", { className: "flex gap-2 items-stretch" }, /* @__PURE__ */ React.createElement( "input", { type: "text", value: variation.depth, onChange: (e) => onUpdateVariation(index, "depth", e.target.value), className: "w-full px-4 py-2 border border-[#D1D5DB] rounded-lg text-[#111827] focus:outline-none focus:ring-2 focus:ring-[#1e40af] focus:border-transparent", placeholder: '0.5"' } ), /* @__PURE__ */ React.createElement(CopyFieldButton, { value: variation.depth }), /* @__PURE__ */ React.createElement( CopyToAllButton, { value: variation.depth, onCopyToAll: (val) => onCopyToAll("depth", val), label: "All" } ))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: "block text-xs text-[#6B7280] mb-1" }, "Diameter"), /* @__PURE__ */ React.createElement("div", { className: "flex gap-2 items-stretch" }, /* @__PURE__ */ React.createElement( "input", { type: "text", value: variation.diameter || "", onChange: (e) => onUpdateVariation(index, "diameter", e.target.value), className: "w-full px-4 py-2 border border-[#D1D5DB] rounded-lg text-[#111827] focus:outline-none focus:ring-2 focus:ring-[#1e40af] focus:border-transparent", placeholder: '5"' } ), /* @__PURE__ */ React.createElement(CopyFieldButton, { value: variation.diameter || "" }), /* @__PURE__ */ React.createElement( CopyToAllButton, { value: variation.diameter || "", onCopyToAll: (val) => onCopyToAll("diameter", val), label: "All" } ))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: "block text-xs text-[#6B7280] mb-1" }, "Weight"), /* @__PURE__ */ React.createElement("div", { className: "flex gap-2 items-stretch" }, /* @__PURE__ */ React.createElement( "input", { type: "text", value: variation.weight, onChange: (e) => onUpdateVariation(index, "weight", e.target.value), className: "w-full px-4 py-2 border border-[#D1D5DB] rounded-lg text-[#111827] focus:outline-none focus:ring-2 focus:ring-[#1e40af] focus:border-transparent", placeholder: "2 lbs" } ), /* @__PURE__ */ React.createElement(CopyFieldButton, { value: variation.weight }), /* @__PURE__ */ React.createElement( CopyToAllButton, { value: variation.weight, onCopyToAll: (val) => onCopyToAll("weight", val), label: "All" } ))))), /* @__PURE__ */ React.createElement("div", { className: "mb-5" }, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-[#374151] mb-2" }, "Bullets (max 420 characters each)"), variation.bullets.map((bullet, bIndex) => /* @__PURE__ */ React.createElement("div", { key: bIndex, className: "mb-3" }, /* @__PURE__ */ React.createElement("div", { className: "flex gap-2 items-stretch" }, /* @__PURE__ */ React.createElement( "textarea", { value: bullet, onChange: (e) => onUpdateBullet(index, bIndex, e.target.value), maxLength: 420, rows: 4, className: "w-full px-4 py-2 border border-[#D1D5DB] rounded-lg text-[#111827] text-sm focus:outline-none focus:ring-2 focus:ring-[#2E7C8A] focus:border-transparent resize-none mb-1", placeholder: `Bullet ${bIndex + 1}` } ), /* @__PURE__ */ React.createElement(CopyFieldButton, { value: bullet }), /* @__PURE__ */ React.createElement( CopyToAllButton, { value: bullet, onCopyToAll: (val) => onCopyToAll(`bullet-${bIndex}`, val), label: "All" } )), /* @__PURE__ */ React.createElement("div", { className: "text-xs text-[#6B7280]" }, bullet.length, "/420 characters")))), /* @__PURE__ */ React.createElement("div", { className: "mb-5" }, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-[#374151] mb-2" }, "Backend Keywords (max 249 characters)"), /* @__PURE__ */ React.createElement("div", { className: "flex gap-2 items-stretch" }, /* @__PURE__ */ React.createElement( "textarea", { value: variation.keywords, onChange: (e) => onUpdateVariation(index, "keywords", e.target.value), maxLength: 249, rows: 3, className: "w-full px-4 py-2 border border-[#D1D5DB] rounded-lg text-[#111827] focus:outline-none focus:ring-2 focus:ring-[#2E7C8A] focus:border-transparent resize-none mb-1", placeholder: "Space-separated keywords" } ), /* @__PURE__ */ React.createElement(CopyFieldButton, { value: variation.keywords }), /* @__PURE__ */ React.createElement( CopyToAllButton, { value: variation.keywords, onCopyToAll: (val) => onCopyToAll("keywords", val) } )), /* @__PURE__ */ React.createElement("div", { className: "text-xs text-[#6B7280]" }, variation.keywords.length, "/249 characters")), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-[#374151] mb-2" }, "Description (max 2000 characters)"), /* @__PURE__ */ React.createElement("div", { className: "flex gap-2 items-stretch" }, /* @__PURE__ */ React.createElement( "textarea", { value: variation.description, onChange: (e) => onUpdateVariation(index, "description", e.target.value), maxLength: 2e3, rows: 6, className: "w-full px-4 py-2 border border-[#D1D5DB] rounded-lg text-[#111827] focus:outline-none focus:ring-2 focus:ring-[#2E7C8A] focus:border-transparent resize-none mb-1", placeholder: "Product description (separate paragraphs with blank lines)" } ), /* @__PURE__ */ React.createElement(CopyFieldButton, { value: variation.description }), /* @__PURE__ */ React.createElement( CopyToAllButton, { value: variation.description, onCopyToAll: (val) => onCopyToAll("description", val) } )), /* @__PURE__ */ React.createElement("div", { className: "text-xs text-[#6B7280]" }, variation.description.length, "/2000 characters")) ); } // virtual:/apps/web/src/components/ListingScriptor/VariationsSection.jsx var import_react9 = __toESM(require_react()); function VariationsSection({ variations, asins, onUpdateVariation, onUpdateBullet }) { const getCardBackground = (index, total) => { const hue = index / Math.max(total - 1, 1) * 360; return `hsl(${hue}, 20%, 97%)`; }; const handleCopyToAll = (0, import_react9.useCallback)( (currentIndex, fieldName, value) => { variations.forEach((_, varIndex) => { if (varIndex === currentIndex) return; if (fieldName.startsWith("bullet-")) { const bulletIndex = parseInt(fieldName.split("-")[1]); onUpdateBullet(varIndex, bulletIndex, value); } else { onUpdateVariation(varIndex, fieldName, value); } }); }, [variations, onUpdateVariation, onUpdateBullet] ); if (!variations || variations.length === 0) { return null; } return /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-2xl shadow-xl p-6 border border-[#E5E7EB] mb-5" }, /* @__PURE__ */ React.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React.createElement("h2", { className: "text-2xl font-bold text-[#111827]" }, "Child Variations"), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-[#6B7280] mt-2" }, "Fill in the remaining fields for each variation below.")), variations.map((variation, index) => /* @__PURE__ */ React.createElement( VariationCard, { key: index, variation, index, variationName: asins[index]?.variation || "", backgroundColor: getCardBackground(index, variations.length), onUpdateVariation, onUpdateBullet, onCopyToAll: (fieldName, value) => handleCopyToAll(index, fieldName, value) } ))); } // virtual:/apps/web/src/components/ListingScriptor/GenerateButton.jsx init_injected_globals(); var import_lucide_react6 = __toESM(require_lucide_react()); function GenerateButton({ onGenerateDocx, isGeneratingAny }) { return /* @__PURE__ */ React.createElement("div", { className: "bg-gradient-to-r from-[#003B4A] to-[#005B73] rounded-2xl p-6 shadow-lg mb-6" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col md:flex-row items-center justify-between gap-6" }, /* @__PURE__ */ React.createElement("div", { className: "text-white flex-1" }, /* @__PURE__ */ React.createElement("h3", { className: "text-xl font-semibold mb-2" }, "Ready to Export?"), /* @__PURE__ */ React.createElement("p", { className: "text-[#B8D4DB] text-sm" }, isGeneratingAny ? "Generating your DOCX..." : "Export as DOCX using the button below (DOCX only).")), /* @__PURE__ */ React.createElement( "button", { onClick: onGenerateDocx, disabled: isGeneratingAny, className: "px-10 py-4 bg-white hover:bg-[#F5F5F7] disabled:bg-[#374151] text-[#003B4A] disabled:text-[#9CA3AF] font-semibold rounded-xl transition-all duration-200 shadow-md hover:shadow-xl disabled:cursor-not-allowed text-lg whitespace-nowrap flex items-center gap-2" }, /* @__PURE__ */ React.createElement(import_lucide_react6.FileText, { size: 20 }), isGeneratingAny ? "Generating..." : "Generate DOCX" ))); } // virtual:/apps/web/src/components/ListingScriptor.jsx var MAX_TABS2 = 500; var TOOL_KEY = "a-script"; async function fetchToolState() { const response = await fetch(`/api/tool-state/${TOOL_KEY}`); if (!response.ok) { throw new Error( `When fetching /api/tool-state/${TOOL_KEY}, the response was [${response.status}] ${response.statusText}` ); } return response.json(); } async function saveToolState(state) { const response = await fetch(`/api/tool-state/${TOOL_KEY}`, { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ state }) }); if (!response.ok) { throw new Error( `When saving /api/tool-state/${TOOL_KEY}, the response was [${response.status}] ${response.statusText}` ); } return response.json(); } function ListingScriptor() { const store = listingScriptorStore_default(); const { tabs, activeTabId, setActiveTab, createNewTab, // copyCurrentTab, // removed from UI closeTab, saveCurrentTab, resetAll, hydrateFromServerState, reorderTabs, setSeriesName, setTabName, setTabCategory, setParentTitle, addAsin, removeAsin, updateAsin, generateVariations, updateVariation, updateBullet } = store; const queryClient2 = useQueryClient(); const didHydrateFromServer = (0, import_react10.useRef)(false); const { data: serverToolState, isLoading: isLoadingServer, error: loadError } = useQuery({ queryKey: ["toolState", TOOL_KEY], queryFn: fetchToolState }); const saveGlobalStateMutation = useMutation({ mutationFn: saveToolState, onSuccess: () => { queryClient2.invalidateQueries({ queryKey: ["toolState", TOOL_KEY] }); } }); const getSerializableState = (0, import_react10.useCallback)(() => { const snapshot = listingScriptorStore_default.getState(); return { tabs: snapshot.tabs, activeTabId: snapshot.activeTabId, nextDocNumber: snapshot.nextDocNumber }; }, []); const onAfterSave = (0, import_react10.useCallback)(() => { const stateToSave = getSerializableState(); saveGlobalStateMutation.mutate(stateToSave); }, [getSerializableState, saveGlobalStateMutation]); const onAfterResetAll = (0, import_react10.useCallback)(() => { const stateToSave = getSerializableState(); saveGlobalStateMutation.mutate(stateToSave); }, [getSerializableState, saveGlobalStateMutation]); const { saveMessage, error, setError, handleSave, handleResetAll, handleCloseTab } = useListingScriptorActions({ saveCurrentTab, resetAll, onAfterSave, onAfterResetAll }); (0, import_react10.useEffect)(() => { if (didHydrateFromServer.current) { return; } if (serverToolState?.state) { hydrateFromServerState(serverToolState.state); } if (!isLoadingServer) { didHydrateFromServer.current = true; } }, [serverToolState, hydrateFromServerState, isLoadingServer]); (0, import_react10.useEffect)(() => { if (loadError) { console.error(loadError); setError("Could not load saved A Script data."); } }, [loadError, setError]); (0, import_react10.useEffect)(() => { if (saveGlobalStateMutation.isError) { console.error(saveGlobalStateMutation.error); setError("Could not sync saved A Script data."); } }, [ saveGlobalStateMutation.isError, saveGlobalStateMutation.error, setError ]); (0, import_react10.useEffect)(() => { const anyDirty = (tabs || []).some((t) => t.state === "dirty"); if (!anyDirty) { return; } const handleBeforeUnload = (e) => { e.preventDefault(); e.returnValue = ""; }; window.addEventListener("beforeunload", handleBeforeUnload); return () => window.removeEventListener("beforeunload", handleBeforeUnload); }, [tabs]); const currentTab = (0, import_react10.useMemo)( () => tabs.find((t) => t.id === activeTabId), [tabs, activeTabId] ); (0, import_react10.useEffect)(() => { if (!currentTab && tabs.length > 0) { setActiveTab(tabs[0].id); } }, [currentTab, tabs, setActiveTab]); const seriesName = currentTab?.data.seriesName || ""; const tabName = currentTab?.data.tabName || ""; const category = currentTab?.data.category || ""; const parentTitle = currentTab?.data.parentTitle || ""; const asins = currentTab?.data.asins || []; const variations = currentTab?.data.variations || []; const isVariationsGenerated = currentTab?.data.isVariationsGenerated || false; const tabState = currentTab?.state || "blank"; useDebouncedAutosave( () => { handleSave(parentTitle, { silent: true }); }, [ seriesName, tabName, category, parentTitle, asins, variations, isVariationsGenerated, activeTabId ], 2500 ); const { // generating, generatingDocx, isUploading, isGeneratingAny, isConvertingDocx, // handleGenerateDoc, // DOC hidden handleGenerateDocx } = useListingScriptorGeneration(); const atTabLimit = tabs.length >= MAX_TABS2; const onGenerateDocx = async () => { setError(null); try { await handleGenerateDocx({ seriesName, parentTitle, variations, isVariationsGenerated }); } catch (err) { setError(err.message); } }; return /* @__PURE__ */ React.createElement("div", { className: "bg-[#F5F5F7] min-h-screen font-['Times_New_Roman']" }, /* @__PURE__ */ React.createElement("div", { className: "md:flex" }, /* @__PURE__ */ React.createElement("div", { className: "hidden md:block" }, /* @__PURE__ */ React.createElement( TabBar, { tabs, activeTabId, onSetActiveTab: setActiveTab, onCreateNewTab: createNewTab, onCloseTab: (tabId) => handleCloseTab(tabs, closeTab, tabId), onReorderTabs: reorderTabs, atTabLimit, layout: "sidebar" } )), /* @__PURE__ */ React.createElement("div", { style: { flex: 1, padding: "28px 14px" } }, /* @__PURE__ */ React.createElement("div", { style: { maxWidth: "1200px", margin: "0 auto" } }, /* @__PURE__ */ React.createElement( Header, { onGenerateDocx, onSave: () => handleSave(parentTitle), onResetAll: handleResetAll, isGeneratingAny, isVariationsGenerated, hasVariations: variations.length > 0, tabState, generatingDocx, isUploading, isConvertingDocx } ), /* @__PURE__ */ React.createElement( "div", { style: { height: "2px", backgroundColor: "#1e40af", marginBottom: "28px", width: "100%" } } ), /* @__PURE__ */ React.createElement("div", { className: "md:hidden" }, /* @__PURE__ */ React.createElement( TabBar, { tabs, activeTabId, onSetActiveTab: setActiveTab, onCreateNewTab: createNewTab, onCloseTab: (tabId) => handleCloseTab(tabs, closeTab, tabId), onReorderTabs: reorderTabs, atTabLimit, layout: "inline" } )), /* @__PURE__ */ React.createElement(MessageDisplay, { error, saveMessage }), /* @__PURE__ */ React.createElement( ParentInfoCard, { seriesName, tabName, category, parentTitle, asins, isVariationsGenerated, onSetSeriesName: setSeriesName, onSetTabName: setTabName, onSetTabCategory: setTabCategory, onSetParentTitle: setParentTitle, onAddAsin: addAsin, onRemoveAsin: removeAsin, onUpdateAsin: updateAsin, onGenerateVariations: generateVariations } ), isVariationsGenerated && variations.length > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement( VariationsSection, { variations, asins, onUpdateVariation: updateVariation, onUpdateBullet: updateBullet } ), /* @__PURE__ */ React.createElement( GenerateButton, { onGenerateDocx, isGeneratingAny } )), /* @__PURE__ */ React.createElement( "div", { style: { display: "flex", justifyContent: "flex-end", marginTop: "16px" } }, /* @__PURE__ */ React.createElement( "button", { onClick: () => handleSave(parentTitle), className: `px-6 py-3 text-sm font-semibold rounded-lg cursor-pointer transition-all duration-200 ${tabState === "saved" ? "text-white bg-[#003B4A] hover:bg-[#005B73] border-none" : "text-[#003B4A] bg-white hover:bg-[#F9FAFB] border-2 border-[#003B4A]"}` }, "Save Document" ) ))))); } // virtual:/apps/web/src/components/DocumentBTool.jsx init_injected_globals(); var import_react21 = __toESM(require_react()); // virtual:/apps/web/src/utils/documentBStore.js init_injected_globals(); var MAX_TABS3 = 500; var LATEST_TEMPLATE_IMAGE_URLS = { car2: "https://res.cloudinary.com/ecm-assets/image/upload/v1766515598/CAR_2_xid4ln.png" }; var OLD_CAR2_URLS = [ "https://ucarecdn.com/a9b8d1e8-292c-469d-a511-33cfefd4e283/-/format/auto/", "https://res.cloudinary.com/ecm-assets/image/upload/v1764618939/CAR_1_thvs6r.png" // in case this was mistakenly used ]; var createEmptyDocument2 = () => ({ seriesName: "", tabName: "", category: "", // NEW: fixed category that controls tab grouping + color parentTitle: "", asins: [{ asin: "", variation: "", sku: "" }], carousels: { car1: { slogan: ["", "", ""], imageUrl: "https://res.cloudinary.com/ecm-assets/image/upload/v1764618939/CAR_1_thvs6r.png" }, car2: { header: ["", ""], features: [ { line1: "", line2: "" }, { line1: "", line2: "" }, { line1: "", line2: "" }, { line1: "", line2: "" }, { line1: "", line2: "" }, { line1: "", line2: "" } ], imageUrl: LATEST_TEMPLATE_IMAGE_URLS.car2 }, car3: { specs: [ { line1: "", line2: "" }, { line1: "", line2: "" }, { line1: "", line2: "" }, { line1: "", line2: "" } ], height: "", width: "", length: "", baseWidth: "", weight: "", weightCapacity: "", imageUrl: "https://res.cloudinary.com/ecm-assets/image/upload/v1764618938/CAR_3_ntnztq.png" }, car4: { ours: ["", "", ""], theirs: ["", "", ""], imageUrl: "https://res.cloudinary.com/ecm-assets/image/upload/v1764618938/CAR_4_i6r8il.png" }, car5: { attributes: [ { line1: "", line2: "" }, { line1: "", line2: "" }, { line1: "", line2: "" }, { line1: "", line2: "" }, { line1: "", line2: "" } ], imageUrl: "https://res.cloudinary.com/ecm-assets/image/upload/v1764618938/CAR_5_ctey31.png" } }, banners: { ban1: { slogan: ["", "", ""], imageUrl: "https://res.cloudinary.com/ecm-assets/image/upload/v1764618937/BAN_1_w4nhd6.png" }, ban2: { useCases: ["", "", "", ""], imageUrl: "https://res.cloudinary.com/ecm-assets/image/upload/v1764618937/BAN_2_kxf4v3.png" }, ban3: { explainer: "", imageUrl: "https://res.cloudinary.com/ecm-assets/image/upload/v1764618937/BAN_3_nyb8wv.png" }, ban4: { imageUrl: "https://res.cloudinary.com/ecm-assets/image/upload/v1764618936/BAN_4_qbqbkf.png" } } }); var useDocumentBStore = create( persist( (set, get) => ({ // Tab management tabs: [ { id: "default", name: "Default", state: "blank", data: createEmptyDocument2() } ], activeTabId: "default", nextDocNumber: 1, // Set active tab setActiveTab: (tabId) => set({ activeTabId: tabId }), // Create new blank tab createNewTab: () => { const state = get(); if (state.tabs.length >= MAX_TABS3) return; const newId = `doc-${Date.now()}`; const newTab = { id: newId, name: `Doc ${state.nextDocNumber}`, state: "blank", data: createEmptyDocument2() }; set({ tabs: [...state.tabs, newTab], activeTabId: newId, nextDocNumber: state.nextDocNumber + 1 }); }, // Copy current tab copyCurrentTab: () => { const state = get(); if (state.tabs.length >= MAX_TABS3) return; const currentTab = state.tabs.find((t) => t.id === state.activeTabId); if (!currentTab) return; const newId = `doc-${Date.now()}`; const title = currentTab.data.parentTitle.trim(); const newName = title ? title.substring(0, 8) : `Doc ${state.nextDocNumber}`; const clonedData = JSON.parse(JSON.stringify(currentTab.data)); clonedData.asins = [{ asin: "", variation: "", sku: "" }]; const newTab = { id: newId, name: newName, state: "saved", data: clonedData }; set({ tabs: [...state.tabs, newTab], activeTabId: newId, nextDocNumber: state.nextDocNumber + 1 }); }, // Close tab closeTab: (tabId) => { const state = get(); if (tabId === "default") return; const tabIndex = state.tabs.findIndex((t) => t.id === tabId); if (tabIndex === -1) return; const newTabs = state.tabs.filter((t) => t.id !== tabId); let newActiveId = state.activeTabId; if (state.activeTabId === tabId) { const newIndex = Math.max(0, tabIndex - 1); newActiveId = newTabs[newIndex]?.id || "default"; } set({ tabs: newTabs, activeTabId: newActiveId }); }, // Save current tab saveCurrentTab: () => { const state = get(); const currentTab = state.tabs.find((t) => t.id === state.activeTabId); if (!currentTab) return; const tabNameValue = currentTab.data.tabName.trim(); let newName = currentTab.name; if (tabNameValue) { newName = tabNameValue; } else { const title = currentTab.data.parentTitle.trim(); if (currentTab.id === "default" && currentTab.name === "Default" && title) { newName = title.substring(0, 8); } else if (title && currentTab.name !== "Default") { newName = title.substring(0, 8); } } const newTabs = state.tabs.map( (tab) => tab.id === state.activeTabId ? { ...tab, name: newName, state: "saved" } : tab ); set({ tabs: newTabs }); }, // Hydrate entire store from server-saved state hydrateFromServerState: (serverState) => { try { if (!serverState || typeof serverState !== "object") { return; } const incomingTabs = Array.isArray(serverState.tabs) ? serverState.tabs.slice(0, MAX_TABS3) : null; if (!incomingTabs || incomingTabs.length === 0) { return; } const normalizedTabs = incomingTabs.map((t) => { const safeId = typeof t?.id === "string" ? t.id : `doc-${Date.now()}`; const safeName = typeof t?.name === "string" ? t.name : "Doc"; const safeState = t?.state === "blank" || t?.state === "dirty" || t?.state === "saved" ? t.state : "blank"; const safeDataBase = t?.data && typeof t.data === "object" ? t.data : createEmptyDocument2(); const safeData = { ...safeDataBase, category: normalizeTabCategory(safeDataBase?.category) }; return { id: safeId, name: safeName, state: safeState, data: safeData }; }); const requestedActive = typeof serverState.activeTabId === "string" ? serverState.activeTabId : "default"; const safeActiveTabId = normalizedTabs.find((t) => t.id === requestedActive)?.id || normalizedTabs[0]?.id || "default"; const safeNextDocNumber = typeof serverState.nextDocNumber === "number" && Number.isFinite(serverState.nextDocNumber) ? serverState.nextDocNumber : normalizedTabs.length + 1; set({ tabs: normalizedTabs, activeTabId: safeActiveTabId, nextDocNumber: safeNextDocNumber }); } catch (e) { console.error("hydrateFromServerState (B Script) failed", e); } }, // Reset all resetAll: () => { set({ tabs: [ { id: "default", name: "Default", state: "blank", data: createEmptyDocument2() } ], activeTabId: "default", nextDocNumber: 1 }); }, // Update methods that modify current tab setSeriesName: (value) => { const state = get(); const newTabs = state.tabs.map( (tab) => tab.id === state.activeTabId ? { ...tab, data: { ...tab.data, seriesName: value }, state: tab.state === "blank" ? "dirty" : tab.state === "saved" ? "dirty" : tab.state } : tab ); set({ tabs: newTabs }); }, setParentTitle: (value) => { const state = get(); const newTabs = state.tabs.map( (tab) => tab.id === state.activeTabId ? { ...tab, data: { ...tab.data, parentTitle: value }, state: tab.state === "blank" ? "dirty" : tab.state === "saved" ? "dirty" : tab.state } : tab ); set({ tabs: newTabs }); }, setTabName: (value) => { const state = get(); const newTabs = state.tabs.map( (tab) => tab.id === state.activeTabId ? { ...tab, name: value.trim() || tab.name, data: { ...tab.data, tabName: value }, state: tab.state === "blank" ? "dirty" : tab.state === "saved" ? "dirty" : tab.state } : tab ); set({ tabs: newTabs }); }, // NEW: Set category (controls grouping + tab color) setTabCategory: (value) => { const state = get(); const normalized = normalizeTabCategory(value); const newTabs = state.tabs.map( (tab) => tab.id === state.activeTabId ? { ...tab, data: { ...tab.data, category: normalized }, state: tab.state === "blank" ? "dirty" : tab.state === "saved" ? "dirty" : tab.state } : tab ); set({ tabs: newTabs }); }, setAsins: (asins) => { const state = get(); const newTabs = state.tabs.map( (tab) => tab.id === state.activeTabId ? { ...tab, data: { ...tab.data, asins }, state: tab.state === "blank" ? "dirty" : tab.state === "saved" ? "dirty" : tab.state } : tab ); set({ tabs: newTabs }); }, addAsin: () => { const state = get(); const currentTab = state.tabs.find((t) => t.id === state.activeTabId); if (!currentTab) return; const newTabs = state.tabs.map( (tab) => tab.id === state.activeTabId ? { ...tab, data: { ...tab.data, asins: [ ...tab.data.asins, { asin: "", variation: "", sku: "" } ] }, state: tab.state === "blank" ? "dirty" : tab.state === "saved" ? "dirty" : tab.state } : tab ); set({ tabs: newTabs }); }, removeAsin: (index) => { const state = get(); const currentTab = state.tabs.find((t) => t.id === state.activeTabId); if (!currentTab) return; const newTabs = state.tabs.map( (tab) => tab.id === state.activeTabId ? { ...tab, data: { ...tab.data, asins: tab.data.asins.filter((_, i) => i !== index) }, state: tab.state === "blank" ? "dirty" : tab.state === "saved" ? "dirty" : tab.state } : tab ); set({ tabs: newTabs }); }, updateAsin: (index, field, value) => { const state = get(); const currentTab = state.tabs.find((t) => t.id === state.activeTabId); if (!currentTab) return; const newTabs = state.tabs.map( (tab) => tab.id === state.activeTabId ? { ...tab, data: { ...tab.data, asins: tab.data.asins.map( (asin, i) => i === index ? { ...asin, [field]: value } : asin ) }, state: tab.state === "blank" ? "dirty" : tab.state === "saved" ? "dirty" : tab.state } : tab ); set({ tabs: newTabs }); }, updateCarousel: (carKey, carData) => { const state = get(); const currentTab = state.tabs.find((t) => t.id === state.activeTabId); if (!currentTab) return; const newTabs = state.tabs.map( (tab) => tab.id === state.activeTabId ? { ...tab, data: { ...tab.data, carousels: { ...tab.data.carousels, [carKey]: carData } }, state: tab.state === "blank" ? "dirty" : tab.state === "saved" ? "dirty" : tab.state } : tab ); set({ tabs: newTabs }); }, updateBanner: (banKey, banData) => { const state = get(); const currentTab = state.tabs.find((t) => t.id === state.activeTabId); if (!currentTab) return; const newTabs = state.tabs.map( (tab) => tab.id === state.activeTabId ? { ...tab, data: { ...tab.data, banners: { ...tab.data.banners, [banKey]: banData } }, state: tab.state === "blank" ? "dirty" : tab.state === "saved" ? "dirty" : tab.state } : tab ); set({ tabs: newTabs }); }, // Reorder tabs (drag + drop) reorderTabs: (dragTabId, dropTabId, insertAfter = false) => { const state = get(); if (!dragTabId || !dropTabId || dragTabId === dropTabId) { return; } const fromIndex = state.tabs.findIndex((t) => t.id === dragTabId); const toIndex = state.tabs.findIndex((t) => t.id === dropTabId); if (fromIndex === -1 || toIndex === -1) { return; } const nextTabs = state.tabs.slice(); const [moved] = nextTabs.splice(fromIndex, 1); let insertIndex = toIndex; if (fromIndex < toIndex) { insertIndex = insertAfter ? toIndex : toIndex - 1; } else { insertIndex = insertAfter ? toIndex + 1 : toIndex; } nextTabs.splice(insertIndex, 0, moved); const nextTabsWithDirty = nextTabs.map((t) => { if (t.id !== state.activeTabId) { return t; } if (t.state === "saved") { return { ...t, state: "dirty" }; } return t; }); set({ tabs: nextTabsWithDirty }); }, // Old reset method for compatibility reset: () => get().resetAll() }), { name: "document-b-storage", version: 7, migrate: (persistedState) => { try { if (!persistedState || !persistedState.tabs) { return persistedState; } const newTabs = (persistedState.tabs || []).map((tab) => { const imageUrl = tab?.data?.carousels?.car2?.imageUrl; const isOldTemplate = typeof imageUrl === "string" && OLD_CAR2_URLS.includes(imageUrl); const nextCategory = normalizeTabCategory(tab?.data?.category); if (!isOldTemplate) { return { ...tab, data: { ...tab.data, category: nextCategory } }; } return { ...tab, data: { ...tab.data, category: nextCategory, carousels: { ...tab.data.carousels, car2: { ...tab.data.carousels.car2, imageUrl: LATEST_TEMPLATE_IMAGE_URLS.car2 } } } }; }); return { ...persistedState, tabs: newTabs }; } catch (e) { console.error("documentBStore migrate failed", e); return persistedState; } } } ) ); var documentBStore_default = useDocumentBStore; // virtual:/apps/web/src/components/Step2/CarouselSection.jsx init_injected_globals(); // virtual:/apps/web/src/components/Step2/CarouselCard.jsx init_injected_globals(); function CarouselCard({ title, imageUrl, onImageChange, content }) { return /* @__PURE__ */ React.createElement( "div", { style: { backgroundColor: "white", borderRadius: "12px", padding: "22px", boxShadow: "0 2px 8px rgba(0,0,0,0.06)", border: "1px solid #E9ECEF" } }, /* @__PURE__ */ React.createElement( "h3", { style: { fontSize: "17px", fontWeight: "600", color: "#212529", marginBottom: "16px" } }, title ), imageUrl && /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "18px" } }, /* @__PURE__ */ React.createElement( "img", { src: imageUrl, alt: title, style: { width: "100%", height: "auto", maxHeight: "280px", objectFit: "contain", border: "1px solid #DEE2E6", borderRadius: "10px", padding: "10px", backgroundColor: "#F8F9FA" } } )), /* @__PURE__ */ React.createElement("div", null, content) ); } // virtual:/apps/web/src/components/Step2/Input.jsx init_injected_globals(); function Input({ label, value, onChange, placeholder, maxLength, autoCapitalize = true }) { return /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "16px" } }, label && /* @__PURE__ */ React.createElement( "label", { style: { display: "block", fontSize: "13px", fontWeight: "500", color: "#374151", marginBottom: "6px" } }, label ), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "8px", alignItems: "stretch" } }, /* @__PURE__ */ React.createElement( "input", { type: "text", value, onChange: (e) => { let newValue = e.target.value; if (maxLength && newValue.length > maxLength) { newValue = newValue.slice(0, maxLength); } onChange(autoCapitalize ? newValue.toUpperCase() : newValue); }, placeholder: placeholder || (label ? `Enter ${label.toLowerCase()}` : ""), maxLength, style: { width: "100%", padding: "10px 14px", fontSize: "14px", border: "1px solid #E5E7EB", borderRadius: "6px", outline: "none", transition: "border-color 0.2s", textTransform: autoCapitalize ? "uppercase" : "none", color: "#111827", marginBottom: maxLength ? "4px" : "0" }, onFocus: (e) => { e.target.style.borderColor = "#003B4A"; }, onBlur: (e) => { e.target.style.borderColor = "#E5E7EB"; } } ), /* @__PURE__ */ React.createElement(CopyFieldButton, { value })), maxLength && /* @__PURE__ */ React.createElement( "div", { style: { fontSize: "12px", color: "#6B7280" } }, value.length, "/", maxLength, " characters" )); } // virtual:/apps/web/src/components/Step2/CarouselSection.jsx function CarouselSection({ carousels, updateCarousel }) { const safeCarousels = carousels || {}; return /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "32px" } }, /* @__PURE__ */ React.createElement( "h2", { style: { fontSize: "24px", fontWeight: "700", color: "#111", marginBottom: "16px", paddingBottom: "10px", borderBottom: "2px solid #E0E0E0", letterSpacing: "-0.3px" } }, "CAROUSELS (5 REQUIRED SLIDES)" ), /* @__PURE__ */ React.createElement( "div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(500px, 1fr))", gap: "20px" } }, /* @__PURE__ */ React.createElement( CarouselCard, { title: "CAROUSEL 1 \u2014 Main Image + Slogan", imageUrl: safeCarousels.car1?.imageUrl, onImageChange: (url) => updateCarousel("car1", { ...safeCarousels.car1 || {}, imageUrl: url }), content: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement( "div", { style: { fontSize: "13px", fontWeight: "600", color: "#444", marginBottom: "8px" } }, "Slogan (3 lines)" ), [0, 1, 2].map((index) => /* @__PURE__ */ React.createElement("div", { key: index, style: { marginBottom: "8px" } }, /* @__PURE__ */ React.createElement( Input, { placeholder: `Line ${index + 1}`, value: (safeCarousels.car1?.slogan || [])[index] || "", onChange: (value) => { const newSlogan = [ ...safeCarousels.car1?.slogan || ["", "", ""] ]; newSlogan[index] = value; updateCarousel("car1", { ...safeCarousels.car1 || {}, slogan: newSlogan }); } } ))), /* @__PURE__ */ React.createElement("div", { style: { marginTop: "16px" } }, /* @__PURE__ */ React.createElement( "div", { style: { fontSize: "13px", fontWeight: "600", color: "#444", marginBottom: "8px" } }, "Explainer Text" ), /* @__PURE__ */ React.createElement( "div", { style: { display: "flex", gap: "8px", alignItems: "stretch" } }, /* @__PURE__ */ React.createElement( "input", { type: "text", value: safeCarousels.car1?.explainer || "", onChange: (e) => { updateCarousel("car1", { ...safeCarousels.car1 || {}, explainer: e.target.value.toLowerCase() }); }, placeholder: "Small explainer text", style: { width: "100%", padding: "10px 14px", fontSize: "12px", border: "1px solid #E5E7EB", borderRadius: "6px", outline: "none", transition: "border-color 0.2s", textTransform: "none", fontStyle: "italic", color: "#9CA3AF" }, onFocus: (e) => { e.target.style.borderColor = "#003B4A"; }, onBlur: (e) => { e.target.style.borderColor = "#E5E7EB"; } } ), /* @__PURE__ */ React.createElement( CopyFieldButton, { value: safeCarousels.car1?.explainer || "" } ) ))) } ), /* @__PURE__ */ React.createElement( CarouselCard, { title: "CAROUSEL 2 \u2014 Header + 6 Features", imageUrl: safeCarousels.car2?.imageUrl, onImageChange: (url) => updateCarousel("car2", { ...safeCarousels.car2 || {}, imageUrl: url }), content: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "24px" } }, /* @__PURE__ */ React.createElement( "div", { style: { fontSize: "13px", fontWeight: "600", color: "#444", marginBottom: "8px" } }, "Optional Header (2 lines)" ), [0, 1].map((index) => /* @__PURE__ */ React.createElement("div", { key: index, style: { marginBottom: "8px" } }, /* @__PURE__ */ React.createElement( Input, { placeholder: `Line ${index + 1}`, value: (safeCarousels.car2?.header || [])[index] || "", maxLength: 100, onChange: (value) => { const newHeader = [ ...safeCarousels.car2?.header || ["", ""] ]; newHeader[index] = value; updateCarousel("car2", { ...safeCarousels.car2 || {}, header: newHeader }); } } )))), /* @__PURE__ */ React.createElement( "div", { style: { fontSize: "13px", fontWeight: "600", color: "#444", marginBottom: "12px" } }, "Features (6 required, 2 lines each)" ), /* @__PURE__ */ React.createElement( "div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "16px" } }, [0, 1, 2, 3, 4, 5].map((i) => { const feature = (safeCarousels.car2?.features || Array(6).fill({ line1: "", line2: "" }))[i]; const featureLine1 = feature?.line1 || ""; const featureLine2 = feature?.line2 || ""; return /* @__PURE__ */ React.createElement("div", { key: i }, /* @__PURE__ */ React.createElement( "div", { style: { fontSize: "12px", color: "#666", marginBottom: "6px", fontWeight: "500" } }, "Feature ", i + 1 ), /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "8px" } }, /* @__PURE__ */ React.createElement( "div", { style: { display: "flex", gap: "8px", alignItems: "stretch" } }, /* @__PURE__ */ React.createElement( "input", { type: "text", value: featureLine1, maxLength: 18, onChange: (e) => { let value = e.target.value; if (value.length > 18) { value = value.slice(0, 18); } const newFeatures = [ ...safeCarousels.car2?.features || Array(6).fill({ line1: "", line2: "" }) ]; newFeatures[i] = { ...newFeatures[i] || {}, line1: value.toUpperCase() }; updateCarousel("car2", { ...safeCarousels.car2 || {}, features: newFeatures }); }, placeholder: "Line 1", style: { width: "100%", padding: "8px 10px", fontSize: "13px", border: "1px solid #E5E7EB", borderRadius: "6px", outline: "none", transition: "border-color 0.2s", textTransform: "uppercase", color: "#111827" }, onFocus: (e) => e.target.style.borderColor = "#003B4A", onBlur: (e) => e.target.style.borderColor = "#E5E7EB" } ), /* @__PURE__ */ React.createElement(CopyFieldButton, { value: featureLine1 }) )), /* @__PURE__ */ React.createElement( "div", { style: { display: "flex", gap: "8px", alignItems: "stretch" } }, /* @__PURE__ */ React.createElement( "input", { type: "text", value: featureLine2, maxLength: 18, onChange: (e) => { let value = e.target.value; if (value.length > 18) { value = value.slice(0, 18); } const newFeatures = [ ...safeCarousels.car2?.features || Array(6).fill({ line1: "", line2: "" }) ]; newFeatures[i] = { ...newFeatures[i] || {}, line2: value.toUpperCase() }; updateCarousel("car2", { ...safeCarousels.car2 || {}, features: newFeatures }); }, placeholder: "Line 2", style: { width: "100%", padding: "8px 10px", fontSize: "13px", border: "1px solid #E5E7EB", borderRadius: "6px", outline: "none", transition: "border-color 0.2s", textTransform: "uppercase", color: "#111827" }, onFocus: (e) => e.target.style.borderColor = "#003B4A", onBlur: (e) => e.target.style.borderColor = "#E5E7EB" } ), /* @__PURE__ */ React.createElement(CopyFieldButton, { value: featureLine2 }) )); }) )) } ), /* @__PURE__ */ React.createElement( CarouselCard, { title: "CAROUSEL 3 \u2014 Product Dimensions (4 Physical Specs Only)", imageUrl: safeCarousels.car3?.imageUrl, onImageChange: (url) => updateCarousel("car3", { ...safeCarousels.car3 || {}, imageUrl: url }), content: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement( "div", { style: { fontSize: "13px", fontWeight: "600", color: "#444", marginBottom: "12px" } }, "Specifications (4 required, 2 lines each)" ), /* @__PURE__ */ React.createElement( "div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "16px" } }, (safeCarousels.car3?.specs || Array(4).fill({ line1: "", line2: "" })).map((spec, i) => /* @__PURE__ */ React.createElement("div", { key: i }, /* @__PURE__ */ React.createElement( "div", { style: { fontSize: "12px", color: "#666", marginBottom: "6px", fontWeight: "500" } }, "Spec ", i + 1 ), /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "8px" } }, /* @__PURE__ */ React.createElement( Input, { placeholder: "Line 1", value: spec?.line1 || "", maxLength: 24, autoCapitalize: true, onChange: (value) => { const newSpecs = [ ...safeCarousels.car3?.specs || Array(4).fill({ line1: "", line2: "" }) ]; newSpecs[i] = { ...newSpecs[i] || {}, line1: value }; updateCarousel("car3", { ...safeCarousels.car3 || {}, specs: newSpecs }); } } )), /* @__PURE__ */ React.createElement( Input, { placeholder: "Line 2", value: spec?.line2 || "", maxLength: 24, autoCapitalize: false, onChange: (value) => { const newSpecs = [ ...safeCarousels.car3?.specs || Array(4).fill({ line1: "", line2: "" }) ]; newSpecs[i] = { ...newSpecs[i] || {}, line2: value }; updateCarousel("car3", { ...safeCarousels.car3 || {}, specs: newSpecs }); } } ))) )) } ), /* @__PURE__ */ React.createElement( CarouselCard, { title: "CAROUSEL 4 \u2014 Ours vs Theirs", imageUrl: safeCarousels.car4?.imageUrl, onImageChange: (url) => updateCarousel("car4", { ...safeCarousels.car4 || {}, imageUrl: url }), content: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "20px" } }, /* @__PURE__ */ React.createElement( "div", { style: { fontSize: "14px", fontWeight: "600", color: "#111", marginBottom: "12px" } }, "Ours (3 points)" ), (safeCarousels.car4?.ours || ["", "", ""]).map((item, i) => /* @__PURE__ */ React.createElement("div", { key: i, style: { marginBottom: "8px" } }, /* @__PURE__ */ React.createElement( Input, { placeholder: `Our advantage ${i + 1}`, value: item || "", maxLength: 40, autoCapitalize: false, onChange: (value) => { const newOurs = [ ...safeCarousels.car4?.ours || ["", "", ""] ]; newOurs[i] = value; updateCarousel("car4", { ...safeCarousels.car4 || {}, ours: newOurs }); } } )))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement( "div", { style: { fontSize: "14px", fontWeight: "600", color: "#111", marginBottom: "12px" } }, "Theirs (3 points)" ), (safeCarousels.car4?.theirs || ["", "", ""]).map((item, i) => /* @__PURE__ */ React.createElement("div", { key: i, style: { marginBottom: "8px" } }, /* @__PURE__ */ React.createElement( Input, { placeholder: `Their limitation ${i + 1}`, value: item || "", maxLength: 40, autoCapitalize: false, onChange: (value) => { const newTheirs = [ ...safeCarousels.car4?.theirs || ["", "", ""] ]; newTheirs[i] = value; updateCarousel("car4", { ...safeCarousels.car4 || {}, theirs: newTheirs }); } } ))))) } ), /* @__PURE__ */ React.createElement( CarouselCard, { title: "CAROUSEL 5 \u2014 Glamor Shot Attributes", imageUrl: safeCarousels.car5?.imageUrl, onImageChange: (url) => updateCarousel("car5", { ...safeCarousels.car5 || {}, imageUrl: url }), content: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement( "div", { style: { fontSize: "13px", fontWeight: "600", color: "#444", marginBottom: "8px" } }, "Key Attributes (5 required, 2 lines each)" ), (safeCarousels.car5?.attributes || Array(5).fill({ line1: "", line2: "" })).map((attr, i) => /* @__PURE__ */ React.createElement("div", { key: i, style: { marginBottom: "12px" } }, /* @__PURE__ */ React.createElement( "div", { style: { fontSize: "12px", color: "#666", marginBottom: "6px", fontWeight: "500" } }, "Attribute ", i + 1 ), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "8px" } }, /* @__PURE__ */ React.createElement( Input, { placeholder: "Top", value: attr?.line1 || "", maxLength: 18, autoCapitalize: true, onChange: (value) => { const newAttributes = [ ...safeCarousels.car5?.attributes || Array(5).fill({ line1: "", line2: "" }) ]; newAttributes[i] = { ...newAttributes[i] || {}, line1: value }; updateCarousel("car5", { ...safeCarousels.car5 || {}, attributes: newAttributes }); } } ), /* @__PURE__ */ React.createElement( Input, { placeholder: "Bottom", value: attr?.line2 || "", maxLength: 18, autoCapitalize: true, onChange: (value) => { const newAttributes = [ ...safeCarousels.car5?.attributes || Array(5).fill({ line1: "", line2: "" }) ]; newAttributes[i] = { ...newAttributes[i] || {}, line2: value }; updateCarousel("car5", { ...safeCarousels.car5 || {}, attributes: newAttributes }); } } ))))) } ) )); } // virtual:/apps/web/src/components/Step2/BannerSection.jsx init_injected_globals(); // virtual:/apps/web/src/components/Step2/BannerCard.jsx init_injected_globals(); function BannerCard({ title, imageUrl, onImageChange, content }) { return /* @__PURE__ */ React.createElement( "div", { style: { backgroundColor: "white", borderRadius: "12px", padding: "22px", boxShadow: "0 2px 8px rgba(0,0,0,0.06)", border: "1px solid #E9ECEF" } }, /* @__PURE__ */ React.createElement( "h3", { style: { fontSize: "17px", fontWeight: "600", color: "#212529", marginBottom: "16px" } }, title ), imageUrl && /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "18px" } }, /* @__PURE__ */ React.createElement( "img", { src: imageUrl, alt: title, style: { width: "100%", height: "auto", maxHeight: "280px", objectFit: "contain", border: "1px solid #DEE2E6", borderRadius: "10px", padding: "10px", backgroundColor: "#F8F9FA" } } )), /* @__PURE__ */ React.createElement("div", null, content) ); } // virtual:/apps/web/src/components/Step2/RichTextInput.jsx init_injected_globals(); var import_react11 = __toESM(require_react()); function RichTextInput({ label, value, onChange, placeholder, maxLength, rows = 4, showCharCount = true }) { const editorRef = (0, import_react11.useRef)(null); const sanitizeHtml = (html) => { const temp = document.createElement("div"); temp.innerHTML = html; const scripts = temp.querySelectorAll("script, style, iframe, object"); scripts.forEach((s) => s.remove()); const allowedTags = [ "B", "STRONG", "I", "EM", "U", "BR", "P", "DIV", "SPAN", "UL", "OL", "LI" ]; const cleanNode = (node) => { if (node.nodeType === Node.TEXT_NODE) { return node.textContent; } if (node.nodeType === Node.ELEMENT_NODE) { const tagName = node.tagName.toUpperCase(); if (!allowedTags.includes(tagName)) { return node.textContent; } const children = Array.from(node.childNodes).map((child) => cleanNode(child)).join(""); switch (tagName) { case "B": case "STRONG": return `${children}`; case "I": case "EM": return `${children}`; case "U": return `${children}`; case "BR": return "
"; case "P": return `

${children}

`; case "DIV": return children ? `${children}
` : ""; case "UL": return `

${children}`; case "OL": return `

${children}`; case "LI": return `

${children}

`; case "SPAN": return children; default: return children; } } return ""; }; const cleaned = cleanNode(temp); return cleaned; }; const handlePaste = (e) => { e.preventDefault(); const html = e.clipboardData.getData("text/html") || e.clipboardData.getData("text/plain"); if (html) { const cleaned = sanitizeHtml(html); const tempDiv = document.createElement("div"); tempDiv.innerHTML = cleaned; const textLength = tempDiv.textContent.length; if (maxLength && textLength > maxLength) { return; } document.execCommand("insertHTML", false, cleaned); const newHtml = editorRef.current.innerHTML; onChange(newHtml); } }; (0, import_react11.useEffect)(() => { if (editorRef.current && editorRef.current.innerHTML !== value) { editorRef.current.innerHTML = value || ""; } }, [value]); const getTextLength = () => { if (!editorRef.current) return 0; return editorRef.current.textContent.length; }; const handleInput = () => { const newHtml = editorRef.current.innerHTML; const textLength = editorRef.current.textContent.length; if (maxLength && textLength > maxLength) { editorRef.current.innerHTML = value || ""; return; } onChange(newHtml); }; const getPlainText = (0, import_react11.useCallback)(() => { if (!editorRef.current) { return ""; } return editorRef.current.textContent || ""; }, []); return /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "16px" } }, label && /* @__PURE__ */ React.createElement( "label", { style: { display: "block", fontSize: "13px", fontWeight: "500", color: "#374151", marginBottom: "6px" } }, label ), /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement( "div", { ref: editorRef, contentEditable: true, onInput: handleInput, onPaste: handlePaste, "data-placeholder": placeholder || "", style: { width: "100%", minHeight: `${rows * 1.6}em`, padding: "10px 44px 10px 14px", fontSize: "13px", border: "1px solid #E5E7EB", borderRadius: "6px", outline: "none", fontFamily: "inherit", lineHeight: "1.6", color: "#111827", transition: "border-color 0.2s", overflowY: "auto", whiteSpace: "pre-wrap", wordWrap: "break-word", marginBottom: "4px" }, onFocus: (e) => e.currentTarget.style.borderColor = "#003B4A", onBlur: (e) => e.currentTarget.style.borderColor = "#E5E7EB" } ), /* @__PURE__ */ React.createElement("div", { style: { position: "absolute", top: 8, right: 8 } }, /* @__PURE__ */ React.createElement(CopyFieldButton, { getValue: getPlainText, size: 15 }))), showCharCount && maxLength && /* @__PURE__ */ React.createElement( "div", { style: { fontSize: "12px", color: "#6B7280" } }, getTextLength(), "/", maxLength, " characters" ), /* @__PURE__ */ React.createElement("style", { jsx: true }, ` [contentEditable][data-placeholder]:empty:before { content: attr(data-placeholder); color: #9ca3af; font-style: italic; } [contentEditable] strong { font-weight: 700; } [contentEditable] em { font-style: italic; } [contentEditable] u { text-decoration: underline; } [contentEditable] ul, [contentEditable] ol { margin-left: 20px; margin-top: 8px; margin-bottom: 8px; } [contentEditable] li { margin-bottom: 4px; } [contentEditable] p { margin-bottom: 8px; } `)); } // virtual:/apps/web/src/components/Step2/BannerSection.jsx function BannerSection({ banners, updateBanner }) { const safeBanners = banners || {}; return /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "32px" } }, /* @__PURE__ */ React.createElement( "h2", { style: { fontSize: "24px", fontWeight: "700", color: "#111", marginBottom: "16px", paddingBottom: "10px", borderBottom: "2px solid #E0E0E0", letterSpacing: "-0.3px" } }, "A+ BANNERS (4 REQUIRED BANNERS)" ), /* @__PURE__ */ React.createElement( "div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(550px, 1fr))", gap: "20px" } }, /* @__PURE__ */ React.createElement( BannerCard, { title: "BAN_1 \u2014 Left Image + Slogan", imageUrl: safeBanners.ban1?.imageUrl, onImageChange: (url) => updateBanner("ban1", { ...safeBanners.ban1 || {}, imageUrl: url }), content: /* @__PURE__ */ React.createElement(React.Fragment, null, (safeBanners.ban1?.slogan || ["", "", ""]).map((line, i) => /* @__PURE__ */ React.createElement( Input, { key: i, label: `Slogan Line ${i + 1}`, value: line || "", onChange: (value) => { const newSlogan = [ ...safeBanners.ban1?.slogan || ["", "", ""] ]; newSlogan[i] = value; updateBanner("ban1", { ...safeBanners.ban1 || {}, slogan: newSlogan }); } } )), /* @__PURE__ */ React.createElement( RichTextInput, { label: "Additional Text", value: safeBanners.ban1?.additionalText || "", onChange: (value) => { updateBanner("ban1", { ...safeBanners.ban1 || {}, additionalText: value }); }, placeholder: "Enter additional text (bold, italic, bullets supported)", maxLength: 1200, rows: 4 } )) } ), /* @__PURE__ */ React.createElement( BannerCard, { title: "BAN_2 \u2014 Four Use-Cases", imageUrl: safeBanners.ban2?.imageUrl, onImageChange: (url) => updateBanner("ban2", { ...safeBanners.ban2 || {}, imageUrl: url }), content: /* @__PURE__ */ React.createElement(React.Fragment, null, (safeBanners.ban2?.useCases || ["", "", "", ""]).map( (useCase, i) => /* @__PURE__ */ React.createElement( Input, { key: i, label: `Use Case ${i + 1} Title`, value: useCase || "", onChange: (value) => { const newUseCases = [ ...safeBanners.ban2?.useCases || ["", "", "", ""] ]; newUseCases[i] = value; updateBanner("ban2", { ...safeBanners.ban2 || {}, useCases: newUseCases }); } } ) ), /* @__PURE__ */ React.createElement( RichTextInput, { label: "Additional Text", value: safeBanners.ban2?.additionalText || "", onChange: (value) => { updateBanner("ban2", { ...safeBanners.ban2 || {}, additionalText: value }); }, placeholder: "Enter additional text (bold, italic, bullets supported)", maxLength: 1200, rows: 4 } )) } ), /* @__PURE__ */ React.createElement( BannerCard, { title: "BAN_3 \u2014 Series Explainer", imageUrl: safeBanners.ban3?.imageUrl, onImageChange: (url) => updateBanner("ban3", { ...safeBanners.ban3 || {}, imageUrl: url }), content: /* @__PURE__ */ React.createElement( RichTextInput, { label: "Explainer Text", value: safeBanners.ban3?.explainer || "", onChange: (value) => updateBanner("ban3", { ...safeBanners.ban3 || {}, explainer: value }), placeholder: "Enter explainer text (bold, italic, bullets supported)", rows: 5, showCharCount: false } ) } ), /* @__PURE__ */ React.createElement( BannerCard, { title: "BAN_4 \u2014 Why Customers Love Our Brand", imageUrl: safeBanners.ban4?.imageUrl, onImageChange: (url) => updateBanner("ban4", { ...safeBanners.ban4 || {}, imageUrl: url }), content: /* @__PURE__ */ React.createElement( "div", { style: { padding: "20px", backgroundColor: "#F1F3F5", borderRadius: "8px", color: "#868E96", fontStyle: "italic", textAlign: "center", fontSize: "14px" } }, "This banner uses standard brand elements. No copy required." ) } ) )); } // virtual:/apps/web/src/hooks/useStep2DocGeneration.js init_injected_globals(); var import_react12 = __toESM(require_react()); // virtual:/apps/web/src/utils/step2/htmlTemplate.js init_injected_globals(); // virtual:/apps/web/src/utils/step2/wordSections/headerSection.js init_injected_globals(); function escapeHtml2(text) { if (!text) { return ""; } return String(text).replace(/&/g, "&").replace(//g, ">").replace(/"/g, """).replace(/'/g, "'"); } function generateWordHeaderSection(seriesName, parentTitle) { const safeSeriesName = escapeHtml2(seriesName || ""); const safeParentTitle = escapeHtml2(parentTitle || ""); return `

SERIES:

${safeSeriesName}

PARENT TITLE:

${safeParentTitle}

`; } // virtual:/apps/web/src/utils/step2/wordSections/asinTableSection.js init_injected_globals(); function generateWordAsinTableSection(asins) { if (!asins || asins.length === 0) return ""; return `

${asins.map( (asin) => ` ` ).join("")}

SKU	ASIN	Variation Name
${asin.sku \|\| ""}	${asin.asin \|\| ""}	${asin.variation \|\| ""}

`; } // virtual:/apps/web/src/utils/step2/wordSections/carouselSections.js init_injected_globals(); // virtual:/apps/web/src/utils/step2/htmlFormatters.js init_injected_globals(); var safeGet = (obj, path, defaultValue = "") => { try { return path.split(".").reduce((acc, part) => acc?.[part], obj) ?? defaultValue; } catch { return defaultValue; } }; // virtual:/apps/web/src/utils/step2/wordSections/carouselSections.js function generateWordCarouselSections(carousels, getImageSrc, carouselNum = null) { if (carouselNum) { switch (carouselNum) { case 1: return generateWordCar1(carousels, getImageSrc); case 2: return generateWordCar2(carousels, getImageSrc); case 3: return generateWordCar3(carousels, getImageSrc); case 4: return generateWordCar4(carousels, getImageSrc); case 5: return generateWordCar5(carousels, getImageSrc); default: return ""; } } return ` ${generateWordCar1(carousels, getImageSrc)} ${generateWordCar2(carousels, getImageSrc)} ${generateWordCar3(carousels, getImageSrc)} ${generateWordCar4(carousels, getImageSrc)} ${generateWordCar5(carousels, getImageSrc)} `; } function generateWordCar1(carousels, getImageSrc) { const slogan = safeGet(carousels, "car1.slogan", []); const explainer = safeGet(carousels, "car1.explainer", ""); return `

Carousel 1 \u2014 Main Image + Slogan

${safeGet(carousels, "car1.imageUrl") ? `

` : ""}

Slogan (3 lines)

${slogan[0] || ""}

${slogan[1] || ""}

${slogan[2] || ""}

${explainer ? `

${explainer}

` : ""}

`; } function generateWordCar2(carousels, getImageSrc) { const header = safeGet(carousels, "car2.header", []); const features = safeGet(carousels, "car2.features", []); return `

Carousel 2 \u2014 Header + 6 Features

${safeGet(carousels, "car2.imageUrl") ? `

` : ""}

Optional Header (2 lines)

${header[0] || ""}

${header[1] || ""}

Features (6 required, 2 lines each)

Feature 1

${features[0]?.line1 || ""}

${features[0]?.line2 || ""}

Feature 2

${features[1]?.line1 || ""}

${features[1]?.line2 || ""}

Feature 3

${features[2]?.line1 || ""}

${features[2]?.line2 || ""}

Feature 4

${features[3]?.line1 || ""}

${features[3]?.line2 || ""}

Feature 5

${features[4]?.line1 || ""}

${features[4]?.line2 || ""}

Feature 6

${features[5]?.line1 || ""}

${features[5]?.line2 || ""}

`; } function generateWordCar3(carousels, getImageSrc) { const specs = safeGet(carousels, "car3.specs", []); return `

Carousel 3 \u2014 Product Dimensions (4 Physical Specs Only)

${safeGet(carousels, "car3.imageUrl") ? `

` : ""}

Specifications (4 required, 2 lines each)

Spec 1

${specs[0]?.line1 || ""}

${specs[0]?.line2 || ""}

Spec 2

${specs[1]?.line1 || ""}

${specs[1]?.line2 || ""}

Spec 3

${specs[2]?.line1 || ""}

${specs[2]?.line2 || ""}

Spec 4

${specs[3]?.line1 || ""}

${specs[3]?.line2 || ""}

`; } function generateWordCar4(carousels, getImageSrc) { const ours = safeGet(carousels, "car4.ours", []); const theirs = safeGet(carousels, "car4.theirs", []); return `

Carousel 4 \u2014 Ours vs Theirs

${safeGet(carousels, "car4.imageUrl") ? `

` : ""}

Ours (3 points)

${ours[0] || ""}

${ours[1] || ""}

${ours[2] || ""}

Theirs (3 points)

${theirs[0] || ""}

${theirs[1] || ""}

${theirs[2] || ""}

`; } function generateWordCar5(carousels, getImageSrc) { const attributes = safeGet(carousels, "car5.attributes", []); return `

Carousel 5 \u2014 Glamor Shot Attributes

${safeGet(carousels, "car5.imageUrl") ? `

` : ""}

Key Attributes (5 required, 2 lines each)

${attributes.map( (attr, i) => `

Attribute ${i + 1}

${attr?.line1 || ""}

${attr?.line2 || ""}

` ).join("")}

`; } // virtual:/apps/web/src/utils/step2/wordSections/bannerSections.js init_injected_globals(); function enforce8ptInlineRichText(html) { if (!html || !String(html).trim()) { return ""; } const base = String(html); const style8pt = "font-size: 8pt; mso-ansi-font-size: 8.0pt; mso-bidi-font-size: 8.0pt; mso-fareast-font-size: 8.0pt; line-height: 1.35; mso-line-height-rule: exactly; margin: 0; padding: 0;"; const hasBlockTags = /<(p|div|ul|ol|li)\b/i.test(base); if (!hasBlockTags) { return `

${base}

`; } const injectStyle = (tag, input) => { const openTagRegex = new RegExp(`<${tag}([^>]*)>`, "gi"); return input.replace(openTagRegex, (match, attrs) => { const safeAttrs = attrs || ""; const hasStyle = /\sstyle\s*=\s*"/i.test(safeAttrs); if (!hasStyle) { return `<${tag}${safeAttrs} style="${style8pt}">`; } return match.replace(/\sstyle\s*=\s*"([^"]*)"/i, (m, existing) => { const cleaned = String(existing).replace(/font-size\s*:\s*[^;]+;?/gi, "").replace(/mso-ansi-font-size\s*:\s*[^;]+;?/gi, "").replace(/mso-bidi-font-size\s*:\s*[^;]+;?/gi, ""); return ` style="${style8pt} ${cleaned.trim()}"`; }); }); }; const injectInlineStyle = (tag, styleRules, input) => { const openTagRegex = new RegExp(`<${tag}([^>]*)>`, "gi"); return input.replace(openTagRegex, (match, attrs) => { const safeAttrs = attrs || ""; const hasStyle = /\sstyle\s*=\s*"/i.test(safeAttrs); if (!hasStyle) { return `<${tag}${safeAttrs} style="${styleRules}">`; } return match.replace(/\sstyle\s*=\s*"([^"]*)"/i, (m, existing) => { return ` style="${styleRules} ${existing.trim()}"`; }); }); }; let out = base; out = injectStyle("p", out); out = injectStyle("li", out); out = injectStyle("ul", out); out = injectStyle("ol", out); out = injectStyle("div", out); out = injectInlineStyle( "strong", "font-weight: bold; mso-bidi-font-weight: bold;", out ); out = injectInlineStyle( "b", "font-weight: bold; mso-bidi-font-weight: bold;", out ); out = injectInlineStyle( "em", "font-style: italic; mso-bidi-font-style: italic;", out ); out = injectInlineStyle( "i", "font-style: italic; mso-bidi-font-style: italic;", out ); out = injectInlineStyle("u", "text-decoration: underline;", out); return out; } function generateWordBannerSections(banners, getImageSrc, bannerNum = null) { if (bannerNum) { switch (bannerNum) { case 1: return generateWordBan1(banners, getImageSrc); case 2: return generateWordBan2(banners, getImageSrc); case 3: return generateWordBan3(banners, getImageSrc); case 4: return generateWordBan4(banners, getImageSrc); default: return ""; } } return ` ${generateWordBan1(banners, getImageSrc)} ${generateWordBan2(banners, getImageSrc)} ${generateWordBan3(banners, getImageSrc)} ${generateWordBan4(banners, getImageSrc)} `; } function generateWordBan1(banners, getImageSrc) { const slogan = safeGet(banners, "ban1.slogan", []); const additionalText = safeGet(banners, "ban1.additionalText", ""); const enforcedAdditionalText = enforce8ptInlineRichText(additionalText); return `

Banner 1 \u2014 Hero Banner with Slogan

${safeGet(banners, "ban1.imageUrl") ? `

` : ""}

Slogan (3 lines)

${slogan[0] || ""}

${slogan[1] || ""}

${slogan[2] || ""}

${additionalText ? `

Additional Text

${enforcedAdditionalText}

` : ""}

`; } function generateWordBan2(banners, getImageSrc) { const useCases = safeGet(banners, "ban2.useCases", []); const additionalText = safeGet(banners, "ban2.additionalText", ""); const enforcedAdditionalText = enforce8ptInlineRichText(additionalText); return `

Banner 2 \u2014 Use Cases Banner

${safeGet(banners, "ban2.imageUrl") ? `

` : ""}

Use Cases (4 titles)

${useCases[0] || ""}

${useCases[1] || ""}

${useCases[2] || ""}

${useCases[3] || ""}

${additionalText ? `

Additional Text

${enforcedAdditionalText}

` : ""}

`; } function generateWordBan3(banners, getImageSrc) { const explainer = safeGet(banners, "ban3.explainer", ""); return `

Banner 3 \u2014 Explainer Banner

${safeGet(banners, "ban3.imageUrl") ? `

` : ""} ${explainer ? `

Explainer Text

${explainer}

` : ""}

`; } function generateWordBan4(banners, getImageSrc) { return `

Banner 4 \u2014 Brand Elements Banner

${safeGet(banners, "ban4.imageUrl") ? `

` : ""}

This banner shows standard brand elements (logo, contact, etc.). No additional text fields required.

`; } // virtual:/apps/web/src/utils/step2/htmlTemplate.js function generateWordHTML(seriesName, parentTitle, asins, carousels, banners, imageBase64Map = {}) { const getImageSrc = (url) => imageBase64Map[url] || url; const hasContent = (obj, key) => obj?.[key]?.imageUrl; return `

${generateWordHeaderSection(seriesName, parentTitle)} ${generateWordAsinTableSection(asins)} ${hasContent(carousels, "car1") ? generateWordCarouselSections(carousels, getImageSrc, 1) : ""} ${hasContent(carousels, "car2") ? generateWordCarouselSections(carousels, getImageSrc, 2) : ""} ${hasContent(carousels, "car3") ? generateWordCarouselSections(carousels, getImageSrc, 3) : ""} ${hasContent(carousels, "car4") ? generateWordCarouselSections(carousels, getImageSrc, 4) : ""} ${hasContent(carousels, "car5") ? generateWordCarouselSections(carousels, getImageSrc, 5) : ""} ${hasContent(banners, "ban1") ? generateWordBannerSections(banners, getImageSrc, 1) : ""} ${hasContent(banners, "ban2") ? generateWordBannerSections(banners, getImageSrc, 2) : ""} ${hasContent(banners, "ban3") ? generateWordBannerSections(banners, getImageSrc, 3) : ""} ${hasContent(banners, "ban4") ? generateWordBannerSections(banners, getImageSrc, 4) : ""}

`; } // virtual:/apps/web/src/utils/step2/imageConverter.js init_injected_globals(); async function convertImagesToBase64(imageUrls) { const imageBase64Map = {}; if (!imageUrls || !Array.isArray(imageUrls)) { console.warn("convertImagesToBase64: Invalid imageUrls provided"); return imageBase64Map; } for (const url of imageUrls) { if (!url || typeof url !== "string" || url.trim() === "") { continue; } try { try { new URL(url); } catch (urlError) { console.error(`Invalid URL format: ${url}`); imageBase64Map[url] = url; continue; } const controller = new AbortController(); const timeoutId = setTimeout(() => controller.abort(), 15e3); const response = await fetch(url, { signal: controller.signal }); clearTimeout(timeoutId); if (!response.ok) { throw new Error(`HTTP ${response.status}: ${response.statusText}`); } const blob = await response.blob(); if (!blob.type.startsWith("image/")) { throw new Error(`Not an image: ${blob.type}`); } const img = await createImageBitmap(blob); const canvas = document.createElement("canvas"); const scale = 3; canvas.width = img.width * scale; canvas.height = img.height * scale; const ctx = canvas.getContext("2d", { alpha: true, colorSpace: "srgb", willReadFrequently: false }); if (!ctx) { throw new Error("Could not get canvas context"); } ctx.fillStyle = "#FFFFFF"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.imageSmoothingEnabled = true; ctx.imageSmoothingQuality = "high"; ctx.drawImage(img, 0, 0, canvas.width, canvas.height); const base64 = canvas.toDataURL("image/jpeg", 1); imageBase64Map[url] = base64; } catch (error) { console.error(`Failed to load image: ${url}`, error.message || error); imageBase64Map[url] = url; } } return imageBase64Map; } // virtual:/apps/web/src/utils/step2/docGenerator.js init_injected_globals(); function buildWordHtmlDocument(bodyHtml, seriesName) { return ` ${seriesName || "Document B"} ${bodyHtml} `; } function buildWordHtmlBlob(bodyHtml, seriesName) { const wordHtml = buildWordHtmlDocument(bodyHtml, seriesName); return new Blob(["\uFEFF", wordHtml], { type: "application/msword" }); } // virtual:/apps/web/src/hooks/useStep2DocGeneration.js function useStep2DocGeneration(seriesName, parentTitle, asins, carousels, banners) { const [upload, { loading: isUploading }] = useUpload_default(); const convertToDocxMutation = useMutation({ mutationFn: async ({ sourceUrl, outputFileName }) => { const response = await fetch("/api/convert/html-to-docx", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ sourceUrl, outputFileName }) }); if (!response.ok) { let errorMessage = ""; try { const errorData = await response.json(); errorMessage = errorData?.error || ""; } catch { errorMessage = await response.text().catch(() => ""); } throw new Error( errorMessage || `Conversion service returned status ${response.status}` ); } return response.blob(); } }); const isGenerating = (0, import_react12.useMemo)(() => { return isUploading || convertToDocxMutation.isPending; }, [isUploading, convertToDocxMutation.isPending]); const handleGenerateDoc = (0, import_react12.useCallback)(async () => { try { const safeCarousels = carousels || {}; const safeBanners = banners || {}; const safeAsins = Array.isArray(asins) ? asins : []; if (!seriesName?.trim() && !parentTitle?.trim()) { throw new Error( "Please provide at least a series name or parent title." ); } const imageUrls = []; if (safeCarousels?.car1?.imageUrl) imageUrls.push(safeCarousels.car1.imageUrl); if (safeCarousels?.car2?.imageUrl) imageUrls.push(safeCarousels.car2.imageUrl); if (safeCarousels?.car3?.imageUrl) imageUrls.push(safeCarousels.car3.imageUrl); if (safeCarousels?.car4?.imageUrl) imageUrls.push(safeCarousels.car4.imageUrl); if (safeCarousels?.car5?.imageUrl) imageUrls.push(safeCarousels.car5.imageUrl); if (safeBanners?.ban1?.imageUrl) imageUrls.push(safeBanners.ban1.imageUrl); if (safeBanners?.ban2?.imageUrl) imageUrls.push(safeBanners.ban2.imageUrl); if (safeBanners?.ban3?.imageUrl) imageUrls.push(safeBanners.ban3.imageUrl); if (safeBanners?.ban4?.imageUrl) imageUrls.push(safeBanners.ban4.imageUrl); if (imageUrls.length === 0) { throw new Error( "Please add at least one carousel or banner image before generating the document." ); } const imageBase64Map = await convertImagesToBase64(imageUrls); const html = generateWordHTML( seriesName || "", parentTitle || "", safeAsins, safeCarousels, safeBanners, imageBase64Map ); const htmlBlob = buildWordHtmlBlob(html, seriesName || "Document B"); const htmlFileName = `[B Script] ${seriesName || "Untitled"}.htm`; const htmlFile = new File([htmlBlob], htmlFileName, { type: "text/html" }); const uploadResult = await upload({ file: htmlFile }); if (uploadResult?.error) { throw new Error(uploadResult.error); } const uploadedUrl = uploadResult?.url; if (!uploadedUrl) { throw new Error("Upload failed: missing uploaded URL."); } const outputFileName = `[B Script] ${seriesName || "Untitled"}.docx`; const docxBlob = await convertToDocxMutation.mutateAsync({ sourceUrl: uploadedUrl, outputFileName }); const downloadUrl = window.URL.createObjectURL(docxBlob); const a = document.createElement("a"); a.href = downloadUrl; a.download = outputFileName; document.body.appendChild(a); a.click(); setTimeout(() => { window.URL.revokeObjectURL(downloadUrl); document.body.removeChild(a); }, 100); } catch (error) { console.error("Error generating DOCX:", error); const message = error?.message || ""; alert(`Failed to generate DOCX. ${message || "Please try again."}`); } }, [ asins, banners, carousels, convertToDocxMutation, parentTitle, seriesName, upload ]); return { isGenerating, handleGenerateDoc }; } // virtual:/apps/web/src/hooks/useStep2Validation.js init_injected_globals(); var import_react13 = __toESM(require_react()); // virtual:/apps/web/src/utils/step2/validation.js init_injected_globals(); function validateStep2Data(carousels, banners) { return true; } // virtual:/apps/web/src/hooks/useStep2Validation.js function useStep2Validation(carousels, banners) { const [isValid, setIsValid] = (0, import_react13.useState)(false); (0, import_react13.useEffect)(() => { const valid = validateStep2Data(carousels, banners); setIsValid(valid); }, [carousels, banners]); return isValid; } // virtual:/apps/web/src/hooks/useDocumentBToolState.js init_injected_globals(); var import_react14 = __toESM(require_react()); var TOOL_KEY2 = "b-script"; async function fetchToolState2() { const response = await fetch(`/api/tool-state/${TOOL_KEY2}`); if (!response.ok) { throw new Error( `When fetching /api/tool-state/${TOOL_KEY2}, the response was [${response.status}] ${response.statusText}` ); } return response.json(); } async function saveToolState2(state) { const response = await fetch(`/api/tool-state/${TOOL_KEY2}`, { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ state }) }); if (!response.ok) { throw new Error( `When saving /api/tool-state/${TOOL_KEY2}, the response was [${response.status}] ${response.statusText}` ); } return response.json(); } function useDocumentBToolState() { const store = documentBStore_default(); const queryClient2 = useQueryClient(); const didHydrateFromServer = (0, import_react14.useRef)(false); const [saveMessage, setSaveMessage] = (0, import_react14.useState)(""); const [errorMessage, setErrorMessage] = (0, import_react14.useState)(""); const { data: serverToolState, isLoading: isLoadingServer, error: loadError } = useQuery({ queryKey: ["toolState", TOOL_KEY2], queryFn: fetchToolState2 }); const saveGlobalStateMutation = useMutation({ mutationFn: saveToolState2, onSuccess: () => { queryClient2.invalidateQueries({ queryKey: ["toolState", TOOL_KEY2] }); } }); const getSerializableState = (0, import_react14.useCallback)(() => { const snapshot = documentBStore_default.getState(); return { tabs: snapshot.tabs, activeTabId: snapshot.activeTabId, nextDocNumber: snapshot.nextDocNumber }; }, []); (0, import_react14.useEffect)(() => { if (didHydrateFromServer.current) { return; } if (serverToolState?.state) { store.hydrateFromServerState(serverToolState.state); } if (!isLoadingServer) { didHydrateFromServer.current = true; } }, [serverToolState, store, isLoadingServer]); (0, import_react14.useEffect)(() => { if (loadError) { console.error(loadError); setErrorMessage("Could not load saved B Script data."); } }, [loadError]); (0, import_react14.useEffect)(() => { if (saveGlobalStateMutation.isError) { console.error(saveGlobalStateMutation.error); setErrorMessage("Could not sync saved B Script data."); } }, [saveGlobalStateMutation.isError, saveGlobalStateMutation.error]); const handleSave = (0, import_react14.useCallback)( (parentTitle, options = {}) => { const { silent = false } = options; if (!silent && !parentTitle.trim()) { setErrorMessage("Please enter a Parent Title before saving."); return; } store.saveCurrentTab(); try { const stateToSave = getSerializableState(); saveGlobalStateMutation.mutate(stateToSave); } catch (e) { console.error("B Script global save failed", e); setErrorMessage("Could not sync saved B Script data."); } if (!silent) { setSaveMessage("Saved."); setErrorMessage(""); setTimeout(() => setSaveMessage(""), 3e3); } }, [store, getSerializableState, saveGlobalStateMutation] ); const handleResetAll = (0, import_react14.useCallback)(() => { if (confirm( "Reset all tabs and clear all Document B data? This cannot be undone." )) { store.resetAll(); try { const stateToSave = getSerializableState(); saveGlobalStateMutation.mutate(stateToSave); } catch (e) { console.error("B Script global reset save failed", e); } setErrorMessage(""); setSaveMessage(""); } }, [store, getSerializableState, saveGlobalStateMutation]); return { saveMessage, errorMessage, setErrorMessage, handleSave, handleResetAll }; } // virtual:/apps/web/src/hooks/useTabDragDrop.js init_injected_globals(); var import_react15 = __toESM(require_react()); function useTabDragDrop(reorderTabs, getGroupKey) { const [dragTabId, setDragTabId] = (0, import_react15.useState)(null); const [dropTarget, setDropTarget] = (0, import_react15.useState)(null); const handleTabDragStart = (0, import_react15.useCallback)((e, tabId) => { setDragTabId(tabId); try { e.dataTransfer.effectAllowed = "move"; e.dataTransfer.setData("text/plain", tabId); } catch (err) { console.error("B Script tab dragStart failed", err); } }, []); const handleTabDragOver = (0, import_react15.useCallback)( (e, tabId, rect) => { if (typeof getGroupKey === "function" && dragTabId) { const fromKey = getGroupKey(dragTabId); const toKey = getGroupKey(tabId); if (fromKey !== toKey) { try { e.dataTransfer.dropEffect = "none"; } catch { } setDropTarget(null); return; } } e.preventDefault(); try { e.dataTransfer.dropEffect = "move"; } catch { } let position = "after"; if (rect && typeof rect.top === "number" && typeof rect.height === "number") { const mouseY = e.clientY; const tabMiddle = rect.top + rect.height / 2; position = mouseY < tabMiddle ? "before" : "after"; } setDropTarget({ tabId, position }); }, [dragTabId, getGroupKey] ); const handleTabDrop = (0, import_react15.useCallback)( (e, tabId, position) => { e.preventDefault(); let fromId = dragTabId; try { const data = e.dataTransfer.getData("text/plain"); if (data) { fromId = data; } } catch { } if (typeof getGroupKey === "function" && fromId && tabId) { const fromKey = getGroupKey(fromId); const toKey = getGroupKey(tabId); if (fromKey !== toKey) { setDragTabId(null); setDropTarget(null); return; } } if (fromId && tabId && fromId !== tabId) { const insertAfter = position === "after"; reorderTabs(fromId, tabId, insertAfter); } setDragTabId(null); setDropTarget(null); }, [dragTabId, reorderTabs, getGroupKey] ); const handleTabDragEnd = (0, import_react15.useCallback)(() => { setDragTabId(null); setDropTarget(null); }, []); return { dragTabId, dropTarget, handleTabDragStart, handleTabDragOver, handleTabDrop, handleTabDragEnd }; } // virtual:/apps/web/src/hooks/useUnsavedChangesWarning.js init_injected_globals(); var import_react16 = __toESM(require_react()); function useUnsavedChangesWarning(tabs) { (0, import_react16.useEffect)(() => { const anyDirty = (tabs || []).some((t) => t.state === "dirty"); if (!anyDirty) { return; } const handleBeforeUnload = (e) => { e.preventDefault(); e.returnValue = ""; }; window.addEventListener("beforeunload", handleBeforeUnload); return () => window.removeEventListener("beforeunload", handleBeforeUnload); }, [tabs]); } // virtual:/apps/web/src/components/DocumentBTool/TabSidebar.jsx init_injected_globals(); var import_react18 = __toESM(require_react()); var import_lucide_react8 = __toESM(require_lucide_react()); // virtual:/apps/web/src/components/DocumentBTool/TabButton.jsx init_injected_globals(); var import_lucide_react7 = __toESM(require_lucide_react()); var import_react17 = __toESM(require_react()); function TabButton({ tab, isActive, dragTabId, dropTarget, onSetActive, onClose, onDragStart, onDragOver, onDrop, onDragEnd }) { const buttonRef = (0, import_react17.useRef)(null); const dataTabName = (tab?.data?.tabName || "").trim(); const effectiveName = dataTabName || tab.name; const displayName = effectiveName.length > 22 ? effectiveName.substring(0, 22) + "..." : effectiveName; const category = (tab?.data?.category || "").trim(); const categoryColor = getCategoryColor(category); const asinCount = Array.isArray(tab?.data?.asins) ? tab.data.asins.filter((a) => (a?.asin || "").trim().length > 0).length : 0; const showDropIndicator = dropTarget?.tabId === tab.id && dragTabId && dragTabId !== tab.id; const dropPosition = dropTarget?.position; const getStateColor = (state) => { switch (state) { case "blank": return "#9CA3AF"; case "dirty": return "#F59E0B"; case "saved": return "#10B981"; default: return "#9CA3AF"; } }; const activeClass = "bg-[#F3F4F6] border border-[#D1D5DB] font-semibold text-[#111827]"; const inactiveClass = "bg-transparent border border-transparent font-medium text-[#111827] hover:bg-[#F9FAFB]"; const isDragging = dragTabId === tab.id; return /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, showDropIndicator && dropPosition === "before" && /* @__PURE__ */ React.createElement( "div", { style: { position: "absolute", top: "-3px", left: "0", right: "0", height: "3px", backgroundColor: "#0891b2", borderRadius: "2px", zIndex: 10, transition: "opacity 120ms ease" } } ), /* @__PURE__ */ React.createElement( "button", { ref: buttonRef, onClick: () => onSetActive(tab.id), title: effectiveName.length > 22 ? effectiveName : void 0, draggable: true, onDragStart: (e) => onDragStart(e, tab.id), onDragOver: (e) => { if (buttonRef.current) { const rect = buttonRef.current.getBoundingClientRect(); onDragOver(e, tab.id, rect); } }, onDrop: (e) => onDrop(e, tab.id, dropPosition), onDragEnd, style: { opacity: isDragging ? 0.55 : 1, transform: isDragging ? "scale(0.985)" : "scale(1)", borderLeft: categoryColor ? `4px solid ${categoryColor}` : "4px solid transparent", width: "100%", justifyContent: "space-between" }, className: `px-3 py-2 text-sm rounded-lg cursor-pointer flex items-center gap-2 transition-all duration-200 ${isActive ? activeClass : inactiveClass}` }, /* @__PURE__ */ React.createElement("span", { className: "flex items-center gap-2 min-w-0" }, /* @__PURE__ */ React.createElement( "span", { style: { width: "8px", height: "8px", borderRadius: "50%", backgroundColor: getStateColor(tab.state), flexShrink: 0 } } ), /* @__PURE__ */ React.createElement( "span", { title: category ? `Category: ${category}` : "Unassigned", style: { width: "10px", height: "10px", borderRadius: "3px", backgroundColor: categoryColor || "transparent", border: categoryColor ? "1px solid rgba(17,24,39,0.25)" : "1px solid #E5E7EB", flexShrink: 0 } } ), /* @__PURE__ */ React.createElement("span", { className: "min-w-0 truncate" }, displayName)), /* @__PURE__ */ React.createElement( "span", { className: "flex items-center", style: { gap: "8px", flexShrink: 0 } }, /* @__PURE__ */ React.createElement( "span", { title: `${asinCount} ASIN${asinCount === 1 ? "" : "s"} in this tab`, className: "text-[11px] font-semibold text-[#374151] bg-white border border-[#E5E7EB]", style: { padding: "2px 8px", borderRadius: "999px", lineHeight: "16px", minWidth: "28px", textAlign: "center" } }, asinCount ), tab.id !== "default" && /* @__PURE__ */ React.createElement( import_lucide_react7.X, { size: 14, onClick: (e) => { e.stopPropagation(); onClose(tab.id); }, style: { opacity: 0.6, cursor: "pointer", flexShrink: 0 } } ) ) ), showDropIndicator && dropPosition === "after" && /* @__PURE__ */ React.createElement( "div", { style: { position: "absolute", bottom: "-3px", left: "0", right: "0", height: "3px", backgroundColor: "#0891b2", borderRadius: "2px", zIndex: 10, transition: "opacity 120ms ease" } } )); } // virtual:/apps/web/src/components/DocumentBTool/TabSidebar.jsx function TabSidebar({ tabs, activeTabId, atTabLimit, dragTabId, overTabId, onSetActiveTab, onCreateNewTab, onCopyCurrentTab, onCloseTab, onTabDragStart, onTabDragOver, onTabDrop, onTabDragEnd }) { const collapsedSidebarWidthPx = 340; const COLLAPSE_STORAGE_KEY = "b-script.collapsedCategories.v1"; const [collapsed, setCollapsed] = (0, import_react18.useState)({}); (0, import_react18.useEffect)(() => { try { const raw = window.localStorage.getItem(COLLAPSE_STORAGE_KEY); if (!raw) { return; } const parsed = JSON.parse(raw); if (parsed && typeof parsed === "object") { setCollapsed(parsed); } } catch (e) { } }, []); const toggleCategory = (0, import_react18.useCallback)((name) => { setCollapsed((prev) => { const next = { ...prev || {}, [name]: !prev?.[name] }; try { window.localStorage.setItem(COLLAPSE_STORAGE_KEY, JSON.stringify(next)); } catch { } return next; }); }, []); const groupedTabs = (0, import_react18.useMemo)(() => { const safeTabs = Array.isArray(tabs) ? tabs : []; const unassigned2 = safeTabs.filter( (t) => !(t?.data?.category || "").trim() ); const grouped2 = TAB_CATEGORIES.map((cat) => { const catTabs = safeTabs.filter( (t) => (t?.data?.category || "").trim() === cat.name ); return { cat, tabs: catTabs }; }).filter((g) => g.tabs.length > 0); return { unassigned: unassigned2, grouped: grouped2 }; }, [tabs]); const renderCategoryHeader = (cat, count) => { const isCollapsed = !!collapsed?.[cat.name]; const Chevron = isCollapsed ? import_lucide_react8.ChevronRight : import_lucide_react8.ChevronDown; return /* @__PURE__ */ React.createElement( "button", { key: `header-${cat.name}`, type: "button", onClick: () => toggleCategory(cat.name), className: "w-full", style: { display: "flex", alignItems: "center", gap: "10px", marginTop: "14px", marginBottom: "6px", padding: "6px 6px", borderRadius: "8px", background: "transparent", cursor: "pointer" } }, /* @__PURE__ */ React.createElement(Chevron, { size: 16, color: "#6B7280", style: { flexShrink: 0 } }), /* @__PURE__ */ React.createElement( "span", { style: { width: "10px", height: "10px", borderRadius: "3px", backgroundColor: cat.color, border: "1px solid rgba(17,24,39,0.2)", flexShrink: 0 } } ), /* @__PURE__ */ React.createElement( "span", { className: "text-[13px] font-bold text-[#374151]", style: { flex: 1, textAlign: "left" } }, cat.name ), /* @__PURE__ */ React.createElement( "span", { className: "text-[11px] font-semibold text-[#6B7280]", style: { flexShrink: 0 } }, count ) ); }; const { unassigned, grouped } = groupedTabs; return /* @__PURE__ */ React.createElement("div", { className: "hidden md:block" }, /* @__PURE__ */ React.createElement( "div", { className: "bg-white border-r border-[#E5E7EB] shadow-sm group", style: { width: `${collapsedSidebarWidthPx}px`, minWidth: `${collapsedSidebarWidthPx}px`, maxWidth: `${collapsedSidebarWidthPx}px`, height: "100vh", position: "sticky", top: 0, alignSelf: "flex-start", overflow: "visible" } }, /* @__PURE__ */ React.createElement("div", { className: "relative", style: { height: "100%" } }, /* @__PURE__ */ React.createElement( "div", { className: "absolute inset-y-0 left-0 bg-white border-r border-[#E5E7EB] shadow-sm transition-all duration-200 w-[340px] group-hover:w-[420px]", style: { zIndex: 30 } }, /* @__PURE__ */ React.createElement( "div", { style: { height: "100%", display: "flex", flexDirection: "column", padding: "12px" } }, /* @__PURE__ */ React.createElement( "div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: "10px", marginBottom: "10px" } }, /* @__PURE__ */ React.createElement("div", { className: "text-xs font-semibold text-[#6B7280]" }, "Tabs (", tabs.length, "/500)"), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "6px" } }, /* @__PURE__ */ React.createElement( "button", { onClick: onCopyCurrentTab, disabled: atTabLimit, title: atTabLimit ? "Maximum of 500 tabs. Close one to duplicate." : "Duplicate current tab", className: "px-3 py-2 text-xs font-medium text-[#111827] bg-white hover:bg-[#F9FAFB] border border-[#E5E7EB] rounded-lg cursor-pointer flex items-center gap-1.5 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed" }, /* @__PURE__ */ React.createElement(import_lucide_react8.Copy, { size: 14 }), "Duplicate" ), /* @__PURE__ */ React.createElement( "button", { onClick: onCreateNewTab, disabled: atTabLimit, title: atTabLimit ? "Maximum of 500 tabs. Close one to create a new tab." : "Create new blank tab", className: "px-3 py-2 text-xs font-medium text-[#111827] bg-white hover:bg-[#F9FAFB] border border-[#E5E7EB] rounded-lg cursor-pointer flex items-center gap-1.5 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed" }, /* @__PURE__ */ React.createElement(import_lucide_react8.Plus, { size: 14 }), "Make New" )) ), /* @__PURE__ */ React.createElement( "div", { style: { flex: 1, overflowY: "auto", paddingRight: "4px", display: "flex", flexDirection: "column", gap: "6px" } }, unassigned.map((tab) => /* @__PURE__ */ React.createElement( TabButton, { key: tab.id, tab, isActive: activeTabId === tab.id, dragTabId, dropTarget: overTabId, onSetActive: onSetActiveTab, onClose: onCloseTab, onDragStart: onTabDragStart, onDragOver: onTabDragOver, onDrop: onTabDrop, onDragEnd: onTabDragEnd } )), unassigned.length > 0 && grouped.length > 0 && /* @__PURE__ */ React.createElement( "div", { style: { height: "1px", backgroundColor: "#E5E7EB", margin: "10px 0 0 0" } } ), grouped.map((group) => { const isCollapsed = !!collapsed?.[group.cat.name]; const count = group.tabs.length; return /* @__PURE__ */ React.createElement("div", { key: group.cat.name, style: { marginTop: "2px" } }, renderCategoryHeader(group.cat, count), !isCollapsed && /* @__PURE__ */ React.createElement( "div", { style: { display: "flex", flexDirection: "column", gap: "6px", paddingLeft: "12px" } }, group.tabs.map((tab) => /* @__PURE__ */ React.createElement( TabButton, { key: tab.id, tab, isActive: activeTabId === tab.id, dragTabId, dropTarget: overTabId, onSetActive: onSetActiveTab, onClose: onCloseTab, onDragStart: onTabDragStart, onDragOver: onTabDragOver, onDrop: onTabDrop, onDragEnd: onTabDragEnd } )) )); }) ), /* @__PURE__ */ React.createElement( "div", { style: { marginTop: "12px", display: "flex", justifyContent: "flex-end", gap: "6px" } }, /* @__PURE__ */ React.createElement( "button", { onClick: onCopyCurrentTab, disabled: atTabLimit, title: atTabLimit ? "Maximum of 500 tabs. Close one to duplicate." : "Duplicate current tab", className: "px-3 py-2 text-xs font-medium text-[#111827] bg-white hover:bg-[#F9FAFB] border border-[#E5E7EB] rounded-lg cursor-pointer flex items-center gap-1.5 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed" }, /* @__PURE__ */ React.createElement(import_lucide_react8.Copy, { size: 14 }), "Duplicate" ), /* @__PURE__ */ React.createElement( "button", { onClick: onCreateNewTab, disabled: atTabLimit, title: atTabLimit ? "Maximum of 500 tabs. Close one to create a new tab." : "Create new blank tab", className: "px-3 py-2 text-xs font-medium text-[#111827] bg-white hover:bg-[#F9FAFB] border border-[#E5E7EB] rounded-lg cursor-pointer flex items-center gap-1.5 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed" }, /* @__PURE__ */ React.createElement(import_lucide_react8.Plus, { size: 14 }), "Make New" ) ), /* @__PURE__ */ React.createElement( "div", { className: "text-[11px] text-[#9CA3AF]", style: { marginTop: "10px" } }, "Tip: drag tabs to reorder (within the same category)." ) ) )) )); } // virtual:/apps/web/src/components/DocumentBTool/MobileTabBar.jsx init_injected_globals(); var import_react19 = __toESM(require_react()); var import_lucide_react9 = __toESM(require_lucide_react()); function MobileTabBar({ tabs, activeTabId, atTabLimit, dragTabId, overTabId, onSetActiveTab, onCreateNewTab, onCloseTab, onTabDragStart, onTabDragOver, onTabDrop, onTabDragEnd }) { const COLLAPSE_STORAGE_KEY = "b-script.collapsedCategories.v1"; const [collapsed, setCollapsed] = (0, import_react19.useState)({}); (0, import_react19.useEffect)(() => { try { const raw = window.localStorage.getItem(COLLAPSE_STORAGE_KEY); if (!raw) { return; } const parsed = JSON.parse(raw); if (parsed && typeof parsed === "object") { setCollapsed(parsed); } } catch { } }, []); const toggleCategory = (0, import_react19.useCallback)((name) => { setCollapsed((prev) => { const next = { ...prev || {}, [name]: !prev?.[name] }; try { window.localStorage.setItem(COLLAPSE_STORAGE_KEY, JSON.stringify(next)); } catch { } return next; }); }, []); const getStateColor = (state) => { switch (state) { case "blank": return "#9CA3AF"; case "dirty": return "#F59E0B"; case "saved": return "#10B981"; default: return "#9CA3AF"; } }; const groupedTabs = (0, import_react19.useMemo)(() => { const safeTabs = Array.isArray(tabs) ? tabs : []; const unassigned2 = safeTabs.filter( (t) => !(t?.data?.category || "").trim() ); const grouped2 = TAB_CATEGORIES.map((cat) => { const catTabs = safeTabs.filter( (t) => (t?.data?.category || "").trim() === cat.name ); return { cat, tabs: catTabs }; }).filter((g) => g.tabs.length > 0); return { unassigned: unassigned2, grouped: grouped2 }; }, [tabs]); const renderCategoryHeader = (cat, count) => { const isCollapsed = !!collapsed?.[cat.name]; const Chevron = isCollapsed ? import_lucide_react9.ChevronRight : import_lucide_react9.ChevronDown; return /* @__PURE__ */ React.createElement( "button", { key: `header-${cat.name}`, type: "button", onClick: () => toggleCategory(cat.name), className: "w-full", style: { display: "flex", alignItems: "center", gap: "10px", marginTop: "12px", marginBottom: "6px", padding: "6px 6px", borderRadius: "8px", background: "transparent", cursor: "pointer" } }, /* @__PURE__ */ React.createElement(Chevron, { size: 16, color: "#6B7280", style: { flexShrink: 0 } }), /* @__PURE__ */ React.createElement( "span", { style: { width: "10px", height: "10px", borderRadius: "3px", backgroundColor: cat.color, border: "1px solid rgba(17,24,39,0.2)", flexShrink: 0 } } ), /* @__PURE__ */ React.createElement( "span", { className: "text-[13px] font-bold text-[#374151]", style: { flex: 1, textAlign: "left" } }, cat.name ), /* @__PURE__ */ React.createElement( "span", { className: "text-[11px] font-semibold text-[#6B7280]", style: { flexShrink: 0 } }, count ) ); }; const { unassigned, grouped } = groupedTabs; const renderTabButton = (tab) => { const dataTabName = (tab?.data?.tabName || "").trim(); const effectiveName = dataTabName || tab.name; const displayName = effectiveName.length > 22 ? effectiveName.substring(0, 22) + "..." : effectiveName; const category = (tab?.data?.category || "").trim(); const categoryColor = getCategoryColor(category); const asinCount = Array.isArray(tab?.data?.asins) ? tab.data.asins.filter((a) => (a?.asin || "").trim().length > 0).length : 0; const isOver = overTabId?.tabId === tab.id && dragTabId && dragTabId !== tab.id; const overStyle = isOver ? { outline: "2px solid #0891b2", outlineOffset: "0px" } : void 0; const isDragging = dragTabId === tab.id; const dropPosition = overTabId?.position || "after"; return /* @__PURE__ */ React.createElement( "button", { key: tab.id, onClick: () => onSetActiveTab(tab.id), title: effectiveName.length > 22 ? effectiveName : void 0, draggable: true, onDragStart: (e) => onTabDragStart(e, tab.id), onDragOver: (e) => { const rect = e.currentTarget.getBoundingClientRect(); onTabDragOver(e, tab.id, rect); }, onDrop: (e) => onTabDrop(e, tab.id, dropPosition), onDragEnd: onTabDragEnd, style: { opacity: isDragging ? 0.55 : 1, transform: isDragging ? "scale(0.985)" : "scale(1)", borderLeft: categoryColor ? `4px solid ${categoryColor}` : "4px solid transparent", ...overStyle }, className: `px-3 py-2 text-sm rounded-lg cursor-pointer flex items-center gap-2 transition-all duration-200 ${activeTabId === tab.id ? "bg-[#F3F4F6] border border-[#D1D5DB] font-semibold text-[#111827]" : "bg-transparent border border-transparent font-medium text-[#111827] hover:bg-[#F9FAFB]"}` }, /* @__PURE__ */ React.createElement( "div", { style: { width: "8px", height: "8px", borderRadius: "50%", backgroundColor: getStateColor(tab.state), flexShrink: 0 } } ), /* @__PURE__ */ React.createElement( "div", { title: category ? `Category: ${category}` : "Unassigned", style: { width: "10px", height: "10px", borderRadius: "3px", backgroundColor: categoryColor || "transparent", border: categoryColor ? "1px solid rgba(17,24,39,0.25)" : "1px solid #E5E7EB", flexShrink: 0 } } ), /* @__PURE__ */ React.createElement("span", null, displayName), /* @__PURE__ */ React.createElement( "span", { title: `${asinCount} ASIN${asinCount === 1 ? "" : "s"} in this tab`, className: "text-[11px] font-semibold text-[#374151] bg-white border border-[#E5E7EB]", style: { padding: "1px 6px", borderRadius: "999px", lineHeight: "16px", minWidth: "24px", textAlign: "center" } }, asinCount ), tab.id !== "default" && /* @__PURE__ */ React.createElement( import_lucide_react9.X, { size: 14, onClick: (e) => { e.stopPropagation(); onCloseTab(tab.id); }, style: { marginLeft: "4px", opacity: 0.6, cursor: "pointer" } } ) ); }; return /* @__PURE__ */ React.createElement("div", { className: "md:hidden" }, /* @__PURE__ */ React.createElement("div", { className: "bg-white border border-[#E5E7EB] rounded-xl p-3.5 mb-5 flex items-start gap-2 flex-wrap shadow-sm max-h-[240px] overflow-hidden" }, /* @__PURE__ */ React.createElement("div", { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React.createElement( "div", { style: { display: "flex", gap: "6px", flexWrap: "wrap", alignContent: "flex-start" } }, unassigned.map((tab) => renderTabButton(tab)) ), grouped.map((group) => { const isCollapsed = !!collapsed?.[group.cat.name]; const count = group.tabs.length; return /* @__PURE__ */ React.createElement( "div", { key: group.cat.name, style: { marginTop: "6px", width: "100%" } }, renderCategoryHeader(group.cat, count), !isCollapsed && /* @__PURE__ */ React.createElement( "div", { style: { display: "flex", gap: "6px", flexWrap: "wrap", alignContent: "flex-start", paddingLeft: "8px" } }, group.tabs.map((tab) => renderTabButton(tab)) ) ); })), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "8px", flexShrink: 0 } }, /* @__PURE__ */ React.createElement( "button", { onClick: onCreateNewTab, disabled: atTabLimit, title: atTabLimit ? "Maximum of 500 tabs. Close one to create a new tab." : "Create new blank tab", className: "px-3 py-2 text-xs font-medium text-[#111827] bg-white hover:bg-[#F9FAFB] border border-[#E5E7EB] rounded-lg cursor-pointer flex items-center gap-1.5 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed" }, /* @__PURE__ */ React.createElement(import_lucide_react9.Plus, { size: 14 }), "Make New" )))); } // virtual:/apps/web/src/components/DocumentBTool/ToolHeader.jsx init_injected_globals(); var import_react20 = __toESM(require_react()); var import_lucide_react10 = __toESM(require_lucide_react()); var DEFAULT_GUIDE_BLOCK_TEXT2 = ""; async function fetchGuideBlockB() { const response = await fetch("/api/guide-block-b"); if (!response.ok) { throw new Error( `When fetching /api/guide-block-b, the response was [${response.status}] ${response.statusText}` ); } return response.json(); } async function saveGuideBlockB(text) { const response = await fetch("/api/guide-block-b", { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ text }) }); if (!response.ok) { let msg = ""; try { const body = await response.json(); msg = body?.error || ""; } catch { } const extra = msg ? `: ${msg}` : ""; throw new Error( `When saving /api/guide-block-b, the response was [${response.status}] ${response.statusText}${extra}` ); } return response.json(); } function ToolHeader({ isGeneratingDocx, isValidForDocx, parentTitle, onSave, onGenerateDocx, onResetAll }) { const queryClient2 = useQueryClient(); const [guideCopied, setGuideCopied] = (0, import_react20.useState)(false); const [isEditOpen, setIsEditOpen] = (0, import_react20.useState)(false); const [draftText, setDraftText] = (0, import_react20.useState)(""); const [editError, setEditError] = (0, import_react20.useState)(null); const [savedFlash, setSavedFlash] = (0, import_react20.useState)(false); const { data: guideData } = useQuery({ queryKey: ["guideBlockB"], queryFn: fetchGuideBlockB }); const saveGuideMutation = useMutation({ mutationFn: saveGuideBlockB, onSuccess: () => { queryClient2.invalidateQueries({ queryKey: ["guideBlockB"] }); } }); const guideBlockText = typeof guideData?.text === "string" ? guideData.text : ""; const effectiveGuideText = (0, import_react20.useMemo)(() => { const trimmed = guideBlockText.trim(); return trimmed.length > 0 ? guideBlockText : DEFAULT_GUIDE_BLOCK_TEXT2; }, [guideBlockText]); (0, import_react20.useEffect)(() => { if (!guideCopied) { return; } const t = setTimeout(() => setGuideCopied(false), 1500); return () => clearTimeout(t); }, [guideCopied]); (0, import_react20.useEffect)(() => { if (!savedFlash) { return; } const t = setTimeout(() => setSavedFlash(false), 1500); return () => clearTimeout(t); }, [savedFlash]); const copyGuideBlock = (0, import_react20.useCallback)(async () => { try { const textToCopy = effectiveGuideText; if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) { await navigator.clipboard.writeText(textToCopy); } else { const textarea = document.createElement("textarea"); textarea.value = textToCopy; textarea.style.position = "fixed"; textarea.style.left = "-9999px"; textarea.style.top = "0"; document.body.appendChild(textarea); textarea.focus(); textarea.select(); document.execCommand("copy"); document.body.removeChild(textarea); } setGuideCopied(true); } catch (e) { console.error("Failed to copy Guide Block:", e); alert("Could not copy the Guide Block."); } }, [effectiveGuideText]); const downloadGuideBlock = (0, import_react20.useCallback)(() => { try { const textToDownload = effectiveGuideText; const blob = new Blob([textToDownload], { type: "text/plain;charset=utf-8" }); const url = window.URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = "guide-block-b.txt"; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); document.body.removeChild(a); } catch (e) { console.error("Failed to download Guide Block:", e); alert("Could not download the Guide Block."); } }, [effectiveGuideText]); const openEdit = (0, import_react20.useCallback)(() => { setEditError(null); setDraftText(effectiveGuideText); setIsEditOpen(true); }, [effectiveGuideText]); const closeEdit = (0, import_react20.useCallback)(() => { setIsEditOpen(false); setEditError(null); }, []); const saveEdit = (0, import_react20.useCallback)(async () => { setEditError(null); try { await saveGuideMutation.mutateAsync(draftText); setSavedFlash(true); setIsEditOpen(false); } catch (e) { console.error("Failed to save Guide Block:", e); setEditError("Could not save. Please try again."); } }, [draftText, saveGuideMutation]); return /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "28px" } }, /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between" }, /* @__PURE__ */ React.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React.createElement( "h1", { style: { fontSize: "42px", fontWeight: "700", color: "#111827", marginBottom: "10px", letterSpacing: "-0.025em" } }, /* @__PURE__ */ React.createElement("span", { style: { color: "#0891b2" } }, "B"), " Script" ), /* @__PURE__ */ React.createElement( "p", { style: { fontSize: "16px", color: "#6B7280", maxWidth: "768px" } }, "Create professional Amazon listing documents with carousel and banner content." )), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "10px" } }, /* @__PURE__ */ React.createElement( "button", { onClick: onGenerateDocx, disabled: isGeneratingDocx || !parentTitle.trim() || !isValidForDocx, title: !parentTitle.trim() ? "Please enter a Parent Title first" : !isValidForDocx ? "Please complete the carousel/banner sections before exporting DOCX" : "", className: `px-4 py-2 text-sm font-semibold rounded-lg cursor-pointer flex items-center gap-2 transition-all duration-200 ${isGeneratingDocx || !parentTitle.trim() || !isValidForDocx ? "text-[#9CA3AF] bg-[#F3F4F6] border border-[#E5E7EB] cursor-not-allowed" : "text-white bg-[#0891b2] hover:bg-[#0e7490] border-none"}` }, /* @__PURE__ */ React.createElement(import_lucide_react10.Download, { size: 16 }), isGeneratingDocx ? "Generating..." : "Export DOCX" ), /* @__PURE__ */ React.createElement( "button", { onClick: copyGuideBlock, className: `px-4 py-2 text-sm font-semibold rounded-lg cursor-pointer flex items-center gap-2 transition-all duration-200 ${guideCopied ? "text-white bg-[#16a34a] border-none" : "text-[#111827] bg-white hover:bg-[#F9FAFB] border border-[#E5E7EB]"}`, title: guideCopied ? "Copied to clipboard" : "Copy the Guide Block to clipboard" }, /* @__PURE__ */ React.createElement(import_lucide_react10.Copy, { size: 16 }), guideCopied ? "Copied" : "Copy Guide Block" ), /* @__PURE__ */ React.createElement( "button", { onClick: downloadGuideBlock, className: "px-4 py-2 text-sm font-semibold rounded-lg cursor-pointer flex items-center gap-2 transition-all duration-200 text-[#111827] bg-white hover:bg-[#F9FAFB] border border-[#E5E7EB]", title: "Download the Guide Block as a .txt file" }, /* @__PURE__ */ React.createElement(import_lucide_react10.FileDown, { size: 16 }), "Download Guide Block" ), /* @__PURE__ */ React.createElement( "button", { onClick: openEdit, className: `px-4 py-2 text-sm font-semibold rounded-lg cursor-pointer flex items-center gap-2 transition-all duration-200 ${savedFlash ? "text-white bg-[#0f766e] border-none" : "text-[#111827] bg-white hover:bg-[#F9FAFB] border border-[#E5E7EB]"}`, title: savedFlash ? "Saved" : "Edit the Guide Block text" }, /* @__PURE__ */ React.createElement(import_lucide_react10.Pencil, { size: 16 }), savedFlash ? "Saved" : "Edit Guide Block" ), /* @__PURE__ */ React.createElement( "button", { onClick: onSave, className: "px-4 py-2 text-sm font-semibold rounded-lg cursor-pointer flex items-center gap-2 transition-all duration-200 text-[#003B4A] bg-white hover:bg-[#F9FAFB] border-2 border-[#003B4A]" }, "Save Document" ), /* @__PURE__ */ React.createElement( "button", { onClick: onResetAll, className: "px-4 py-2 text-sm font-medium text-[#DC2626] bg-white hover:bg-[#FEE2E2] border border-[#DC2626] rounded-lg cursor-pointer flex items-center gap-2 transition-all duration-200" }, /* @__PURE__ */ React.createElement(import_lucide_react10.RotateCcw, { size: 16 }), "Reset All" ))), isEditOpen && /* @__PURE__ */ React.createElement( "div", { role: "dialog", "aria-modal": "true", className: "fixed inset-0 z-50 flex items-center justify-center", style: { backgroundColor: "rgba(0,0,0,0.35)" }, onMouseDown: (e) => { if (e.target === e.currentTarget) { closeEdit(); } } }, /* @__PURE__ */ React.createElement( "div", { className: "bg-white rounded-xl border border-[#E5E7EB] shadow-xl", style: { width: "min(900px, 92vw)", maxHeight: "86vh" } }, /* @__PURE__ */ React.createElement( "div", { className: "border-b border-[#E5E7EB]", style: { padding: "12px 14px" } }, /* @__PURE__ */ React.createElement("div", { className: "text-sm font-semibold text-[#111827]" }, "Edit Guide Block"), /* @__PURE__ */ React.createElement("div", { className: "text-xs text-[#6B7280]", style: { marginTop: 4 } }, "Paste or edit the text below, then click Save.") ), /* @__PURE__ */ React.createElement("div", { style: { padding: "12px 14px" } }, /* @__PURE__ */ React.createElement( "textarea", { value: draftText, onChange: (e) => setDraftText(e.target.value), className: "w-full border border-[#E5E7EB] rounded-lg p-3 text-sm text-[#111827]", style: { minHeight: "340px", resize: "vertical", fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace" } } ), editError && /* @__PURE__ */ React.createElement( "div", { className: "text-sm text-[#DC2626]", style: { marginTop: 10 } }, editError ), /* @__PURE__ */ React.createElement( "div", { style: { display: "flex", justifyContent: "flex-end", gap: "10px", marginTop: "12px" } }, /* @__PURE__ */ React.createElement( "button", { onClick: closeEdit, className: "px-4 py-2 text-sm font-semibold rounded-lg cursor-pointer text-[#111827] bg-white hover:bg-[#F9FAFB] border border-[#E5E7EB]" }, "Cancel" ), /* @__PURE__ */ React.createElement( "button", { onClick: saveEdit, disabled: saveGuideMutation.isPending, className: `px-4 py-2 text-sm font-semibold rounded-lg cursor-pointer ${saveGuideMutation.isPending ? "text-[#9CA3AF] bg-[#F3F4F6] border border-[#E5E7EB] cursor-not-allowed" : "text-white bg-[#111827] hover:bg-black border-none"}` }, saveGuideMutation.isPending ? "Saving..." : "Save" ) )) ) )); } // virtual:/apps/web/src/components/DocumentBTool/MessageDisplay.jsx init_injected_globals(); function MessageDisplay2({ errorMessage, saveMessage }) { if (!errorMessage && !saveMessage) { return null; } return /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "12px" } }, errorMessage && /* @__PURE__ */ React.createElement("div", { className: "px-4 py-3 bg-[#FEE2E2] border border-[#FCA5A5] rounded-lg text-[#B91C1C] text-sm" }, errorMessage), saveMessage && /* @__PURE__ */ React.createElement("div", { className: "px-4 py-3 bg-[#D1FAE5] border border-[#6EE7B7] rounded-lg text-[#047857] text-sm" }, saveMessage)); } // virtual:/apps/web/src/components/DocumentBTool/DocumentInfoSection.jsx init_injected_globals(); function DocumentInfoSection({ parentTitle, seriesName, tabName, category, onSetParentTitle, onSetSeriesName, onSetTabName, onSetTabCategory }) { const categoryColor = getCategoryColor(category); return /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-lg p-5 shadow-sm border border-[#E5E7EB] mb-4" }, /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "16px" } }, /* @__PURE__ */ React.createElement( "label", { htmlFor: "parentTitle", className: "block text-xs font-medium text-[#374151] mb-1.5" }, "Parent Title ", /* @__PURE__ */ React.createElement("span", { style: { color: "#DC2626" } }, "*") ), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "8px", alignItems: "stretch" } }, /* @__PURE__ */ React.createElement( "input", { id: "parentTitle", type: "text", value: parentTitle, onChange: (e) => onSetParentTitle(e.target.value), placeholder: "Enter parent title", className: "w-full px-3.5 py-2.5 text-sm border border-[#E5E7EB] rounded-lg outline-none text-[#111827] transition-colors focus:border-[#003B4A]" } ), /* @__PURE__ */ React.createElement(CopyFieldButton, { value: parentTitle }))), /* @__PURE__ */ React.createElement( "div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", style: { marginBottom: "18px" } }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement( "label", { htmlFor: "seriesName", className: "block text-xs font-medium text-[#374151] mb-1.5" }, "Series" ), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "8px", alignItems: "stretch" } }, /* @__PURE__ */ React.createElement( "input", { id: "seriesName", type: "text", value: seriesName, onChange: (e) => onSetSeriesName(e.target.value), placeholder: "Enter series name", className: "w-full px-3.5 py-2.5 text-sm border border-[#E5E7EB] rounded-lg outline-none text-[#111827] transition-colors focus:border-[#003B4A]" } ), /* @__PURE__ */ React.createElement(CopyFieldButton, { value: seriesName }))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement( "label", { htmlFor: "tabName", className: "block text-xs font-medium text-[#374151] mb-1.5" }, "Tab Name" ), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "8px", alignItems: "stretch" } }, /* @__PURE__ */ React.createElement( "input", { id: "tabName", type: "text", value: tabName, onChange: (e) => onSetTabName(e.target.value), placeholder: "Enter tab name", maxLength: 50, className: "w-full px-3.5 py-2.5 text-sm border border-[#E5E7EB] rounded-lg outline-none text-[#111827] transition-colors focus:border-[#003B4A]" } ), /* @__PURE__ */ React.createElement(CopyFieldButton, { value: tabName })), /* @__PURE__ */ React.createElement("div", { style: { marginTop: "10px" } }, /* @__PURE__ */ React.createElement("label", { className: "block text-[11px] font-medium text-[#6B7280] mb-1" }, "Category (controls tab color + grouping)"), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ React.createElement( "select", { value: category, onChange: (e) => onSetTabCategory(e.target.value), className: "w-full px-3 py-2 text-sm border border-[#E5E7EB] rounded-lg outline-none text-[#111827] bg-white transition-colors focus:border-[#003B4A]" }, /* @__PURE__ */ React.createElement("option", { value: "" }, "\u2014 Unassigned \u2014"), TAB_CATEGORIES.map((c) => /* @__PURE__ */ React.createElement("option", { key: c.name, value: c.name }, c.name)) ), /* @__PURE__ */ React.createElement( "div", { title: category ? `Color: ${categoryColor}` : "No category", style: { width: "14px", height: "14px", borderRadius: "4px", backgroundColor: categoryColor || "transparent", border: categoryColor ? "1px solid rgba(17,24,39,0.25)" : "1px solid #E5E7EB", flexShrink: 0 } } )))) )); } // virtual:/apps/web/src/components/DocumentBTool/AsinTableSection.jsx init_injected_globals(); var import_lucide_react11 = __toESM(require_lucide_react()); function AsinTableSection({ asins, onAddAsin, onRemoveAsin, onUpdateAsin }) { return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement( "h2", { style: { fontSize: "18px", fontWeight: "600", color: "#111827", marginBottom: "16px" } }, "ASIN Table" ), asins.map((asin, index) => /* @__PURE__ */ React.createElement( "div", { key: index, style: { display: "grid", gridTemplateColumns: "1fr 1fr 1fr auto", gap: "12px", marginBottom: "12px", alignItems: "end" } }, /* @__PURE__ */ React.createElement("div", null, index === 0 && /* @__PURE__ */ React.createElement("label", { className: "block text-xs font-medium text-[#374151] mb-1.5" }, "SKU"), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "8px", alignItems: "stretch" } }, /* @__PURE__ */ React.createElement( "input", { type: "text", value: asin.sku, onChange: (e) => onUpdateAsin(index, "sku", e.target.value), placeholder: "SKU", className: "w-full px-3.5 py-2.5 text-sm border border-[#E5E7EB] rounded-lg outline-none text-[#111827] transition-colors focus:border-[#003B4A]" } ), /* @__PURE__ */ React.createElement(CopyFieldButton, { value: asin.sku }))), /* @__PURE__ */ React.createElement("div", null, index === 0 && /* @__PURE__ */ React.createElement("label", { className: "block text-xs font-medium text-[#374151] mb-1.5" }, "ASIN"), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "8px", alignItems: "stretch" } }, /* @__PURE__ */ React.createElement( "input", { type: "text", value: asin.asin, onChange: (e) => onUpdateAsin(index, "asin", e.target.value), placeholder: "ASIN", className: "w-full px-3.5 py-2.5 text-sm border border-[#E5E7EB] rounded-lg outline-none text-[#111827] transition-colors focus:border-[#003B4A]" } ), /* @__PURE__ */ React.createElement(CopyFieldButton, { value: asin.asin }))), /* @__PURE__ */ React.createElement("div", null, index === 0 && /* @__PURE__ */ React.createElement("label", { className: "block text-xs font-medium text-[#374151] mb-1.5" }, "Variation Name"), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "8px", alignItems: "stretch" } }, /* @__PURE__ */ React.createElement( "input", { type: "text", value: asin.variation, onChange: (e) => onUpdateAsin(index, "variation", e.target.value), placeholder: "Variation Name", className: "w-full px-3.5 py-2.5 text-sm border border-[#E5E7EB] rounded-lg outline-none text-[#111827] transition-colors focus:border-[#003B4A]" } ), /* @__PURE__ */ React.createElement(CopyFieldButton, { value: asin.variation }))), /* @__PURE__ */ React.createElement("div", null, asins.length > 1 && /* @__PURE__ */ React.createElement( "button", { onClick: () => onRemoveAsin(index), className: "p-2.5 bg-transparent hover:bg-[#FEE2E2] hover:border-[#DC2626] border border-[#E5E7EB] rounded-lg cursor-pointer flex items-center justify-center transition-all duration-200" }, /* @__PURE__ */ React.createElement(import_lucide_react11.Trash2, { size: 18, color: "#DC2626" }) )) )), asins.length < 10 && /* @__PURE__ */ React.createElement( "button", { onClick: onAddAsin, className: "mt-2 px-5 py-2.5 text-sm font-medium text-[#111827] bg-white hover:bg-[#F9FAFB] border border-[#E5E7EB] rounded-lg cursor-pointer transition-all duration-200" }, "+ Add ASIN" )); } // virtual:/apps/web/src/components/DocumentBTool.jsx var MAX_TABS4 = 500; function DocumentBTool() { const store = documentBStore_default(); const { tabs, activeTabId, setActiveTab, createNewTab, copyCurrentTab, closeTab, reorderTabs, saveCurrentTab, setSeriesName, setTabName, setTabCategory, setParentTitle, addAsin, removeAsin, updateAsin, updateCarousel, updateBanner } = store; const { saveMessage, errorMessage, setErrorMessage, handleSave, handleResetAll } = useDocumentBToolState(); const getTabGroupKey = (0, import_react21.useCallback)( (tabId) => { const t = (tabs || []).find((x) => x.id === tabId); return (t?.data?.category || "").trim(); }, [tabs] ); const { dragTabId, dropTarget, handleTabDragStart, handleTabDragOver, handleTabDrop, handleTabDragEnd } = useTabDragDrop(reorderTabs, getTabGroupKey); useUnsavedChangesWarning(tabs); const currentTab = (0, import_react21.useMemo)( () => tabs.find((t) => t.id === activeTabId), [tabs, activeTabId] ); const seriesName = currentTab?.data.seriesName || ""; const tabName = currentTab?.data.tabName || ""; const category = currentTab?.data.category || ""; const parentTitle = currentTab?.data.parentTitle || ""; const asins = currentTab?.data.asins || []; const carousels = currentTab?.data.carousels || {}; const banners = currentTab?.data.banners || {}; useDebouncedAutosave( () => { handleSave(parentTitle, { silent: true }); }, [ seriesName, tabName, category, parentTitle, asins, carousels, banners, activeTabId ], 2500 ); const handleCloseTab = (0, import_react21.useCallback)( (tabId) => { const tab = tabs.find((t) => t.id === tabId); const isDirty = tab?.state === "dirty"; const message = isDirty ? "Are you sure you want to close this tab? Unsaved changes will be lost." : "Are you sure you want to close this tab?"; if (!confirm(message)) { return; } closeTab(tabId); }, [tabs, closeTab] ); const isValidForDocx = useStep2Validation(carousels, banners); const { isGenerating: isGeneratingDocx, handleGenerateDoc } = useStep2DocGeneration(seriesName, parentTitle, asins, carousels, banners); const handleGenerateDocx = (0, import_react21.useCallback)(async () => { setErrorMessage(""); try { await handleGenerateDoc(); } catch (error) { console.error("DOCX generation failed (wrapper):", error); } }, [handleGenerateDoc, setErrorMessage]); const handleSaveClick = (0, import_react21.useCallback)(() => { handleSave(parentTitle); }, [handleSave, parentTitle]); const atTabLimit = tabs.length >= MAX_TABS4; return /* @__PURE__ */ React.createElement("div", { style: { backgroundColor: "#F5F5F7", minHeight: "100vh" } }, /* @__PURE__ */ React.createElement("div", { className: "md:flex" }, /* @__PURE__ */ React.createElement( TabSidebar, { tabs, activeTabId, atTabLimit, dragTabId, overTabId: dropTarget, onSetActiveTab: setActiveTab, onCreateNewTab: createNewTab, onCopyCurrentTab: copyCurrentTab, onCloseTab: handleCloseTab, onTabDragStart: handleTabDragStart, onTabDragOver: handleTabDragOver, onTabDrop: handleTabDrop, onTabDragEnd: handleTabDragEnd } ), /* @__PURE__ */ React.createElement("div", { style: { flex: 1, padding: "28px 14px" } }, /* @__PURE__ */ React.createElement("div", { style: { maxWidth: "1200px", margin: "0 auto" } }, /* @__PURE__ */ React.createElement( ToolHeader, { isGeneratingDocx, isValidForDocx, parentTitle, onSave: handleSaveClick, onGenerateDocx: handleGenerateDocx, onResetAll: handleResetAll } ), /* @__PURE__ */ React.createElement( "div", { style: { height: "2px", backgroundColor: "#ea580c", marginBottom: "28px", width: "100%" } } ), /* @__PURE__ */ React.createElement( MobileTabBar, { tabs, activeTabId, atTabLimit, dragTabId, overTabId: dropTarget, onSetActiveTab: setActiveTab, onCreateNewTab: createNewTab, onCloseTab: handleCloseTab, onTabDragStart: handleTabDragStart, onTabDragOver: handleTabDragOver, onTabDrop: handleTabDrop, onTabDragEnd: handleTabDragEnd } ), /* @__PURE__ */ React.createElement( MessageDisplay2, { errorMessage, saveMessage } ), /* @__PURE__ */ React.createElement( DocumentInfoSection, { parentTitle, seriesName, tabName, category, onSetParentTitle: setParentTitle, onSetSeriesName: setSeriesName, onSetTabName: setTabName, onSetTabCategory: setTabCategory } ), /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-lg p-5 shadow-sm border border-[#E5E7EB] mb-4" }, /* @__PURE__ */ React.createElement( AsinTableSection, { asins, onAddAsin: addAsin, onRemoveAsin: removeAsin, onUpdateAsin: updateAsin } )), /* @__PURE__ */ React.createElement( CarouselSection, { carousels, updateCarousel } ), /* @__PURE__ */ React.createElement(BannerSection, { banners, updateBanner }), /* @__PURE__ */ React.createElement( "div", { style: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React.createElement( "button", { onClick: handleSaveClick, className: "px-6 py-3 text-sm font-semibold text-white bg-[#003B4A] hover:bg-[#005B73] border-none rounded-lg cursor-pointer transition-all duration-200" }, "Save Document" ) ))))); } // virtual:/apps/web/src/components/RefinerTool.jsx init_injected_globals(); var import_react22 = __toESM(require_react()); // virtual:/apps/web/src/utils/refinerStore.js init_injected_globals(); var initialState = { // Listing Info title: "", author: "", listingDump: "", // Helium Keywords heliumDump: "", // Fine-Tuning alwaysInclude: "", exclude: "", // Results cleanedHeliumWords: [], listingWords: [], backendCandidates: [], finalBackendKeywords: "", byteCount: 0, // UI State isProcessing: false, error: null, showCleanedList: false, showListingList: false, showCandidatesList: false, hasHydrated: false }; var useRefinerStore = create( persist( (set) => ({ ...initialState, // Setters for inputs setTitle: (value) => set({ title: value }), setAuthor: (value) => set({ author: value }), setListingDump: (value) => set({ listingDump: value }), setHeliumDump: (value) => set({ heliumDump: value }), setAlwaysInclude: (value) => set({ alwaysInclude: value }), setExclude: (value) => set({ exclude: value }), // Setters for results setResults: (results) => set({ cleanedHeliumWords: results.cleanedHeliumWords || [], listingWords: results.listingWords || [], backendCandidates: results.backendCandidates || [], finalBackendKeywords: results.finalBackendKeywords || "", byteCount: results.byteCount || 0 }), // Processing state setProcessing: (value) => set({ isProcessing: value }), setError: (value) => set({ error: value }), // Toggle lists toggleCleanedList: () => set((state) => ({ showCleanedList: !state.showCleanedList })), toggleListingList: () => set((state) => ({ showListingList: !state.showListingList })), toggleCandidatesList: () => set((state) => ({ showCandidatesList: !state.showCandidatesList })), // Hydration setHasHydrated: (value) => set({ hasHydrated: value }), // Reset reset: () => set({ ...initialState, hasHydrated: true }) }), { name: "refiner-storage", onRehydrateStorage: () => (state) => { state?.setHasHydrated(true); } } ) ); var refinerStore_default = useRefinerStore; // virtual:/apps/web/src/components/Refiner/InputCard.jsx init_injected_globals(); function InputCard({ title, children }) { return /* @__PURE__ */ React.createElement("div", { className: "w-full bg-white rounded-xl shadow-sm p-6 border border-[#E5E7EB] hover:shadow-md transition-shadow duration-200 h-full" }, /* @__PURE__ */ React.createElement("h3", { className: "text-xl font-semibold text-[#111827] mb-5 pb-3 border-b border-[#F3F4F6]" }, title), children); } // virtual:/apps/web/src/components/Refiner/TextInput.jsx init_injected_globals(); function TextInput({ label, placeholder, value, onChange }) { return /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "16px" } }, /* @__PURE__ */ React.createElement( "label", { style: { display: "block", fontSize: "13px", fontWeight: "500", color: "#374151", marginBottom: "6px" } }, label ), /* @__PURE__ */ React.createElement( "input", { type: "text", value, onChange: (e) => onChange(e.target.value), placeholder, style: { width: "100%", padding: "10px 14px", fontSize: "14px", border: "1px solid #E5E7EB", borderRadius: "6px", outline: "none", color: "#111827" }, onFocus: (e) => e.target.style.borderColor = "#2E7C8A", onBlur: (e) => e.target.style.borderColor = "#E5E7EB" } )); } // virtual:/apps/web/src/components/Refiner/TextArea.jsx init_injected_globals(); function TextArea({ label, placeholder, value, onChange, helperText, rows = 6 }) { return /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "16px" } }, /* @__PURE__ */ React.createElement( "label", { style: { display: "block", fontSize: "13px", fontWeight: "500", color: "#374151", marginBottom: "6px" } }, label ), /* @__PURE__ */ React.createElement( "textarea", { value, onChange: (e) => onChange(e.target.value), placeholder, rows, style: { width: "100%", padding: "10px 14px", fontSize: "14px", border: "1px solid #E5E7EB", borderRadius: "6px", outline: "none", color: "#111827", resize: "none" }, onFocus: (e) => e.target.style.borderColor = "#2E7C8A", onBlur: (e) => e.target.style.borderColor = "#E5E7EB" } ), helperText && /* @__PURE__ */ React.createElement("p", { style: { fontSize: "12px", color: "#6B7280", marginTop: "8px" } }, helperText)); } // virtual:/apps/web/src/components/Refiner/ResultSection.jsx init_injected_globals(); function ResultSection({ title, subtitle, wordCount, showList, onToggle, words }) { return /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "24px" } }, /* @__PURE__ */ React.createElement( "div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "8px" } }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("h4", { style: { fontSize: "13px", fontWeight: "600", color: "#111827" } }, title), /* @__PURE__ */ React.createElement("p", { style: { fontSize: "12px", color: "#6B7280", marginTop: "4px" } }, subtitle)), /* @__PURE__ */ React.createElement("div", { style: { fontSize: "14px", color: "#6B7280" } }, "Words: ", wordCount) ), wordCount > 0 && /* @__PURE__ */ React.createElement( "button", { onClick: onToggle, style: { fontSize: "14px", color: "#2563EB", fontWeight: "500", marginTop: "8px", background: "none", border: "none", cursor: "pointer", padding: "0" }, onMouseEnter: (e) => e.target.style.color = "#1D4ED8", onMouseLeave: (e) => e.target.style.color = "#2563EB" }, showList ? "Hide list" : "Show list" ), showList && wordCount > 0 && /* @__PURE__ */ React.createElement( "div", { style: { marginTop: "12px", padding: "12px", backgroundColor: "#F9FAFB", border: "1px solid #E5E7EB", borderRadius: "6px", maxHeight: "128px", overflowY: "auto" } }, /* @__PURE__ */ React.createElement( "p", { style: { fontSize: "14px", color: "#374151", wordBreak: "break-word" } }, words ) )); } // virtual:/apps/web/src/components/RefinerTool.jsx var import_lucide_react12 = __toESM(require_lucide_react()); function RefinerTool() { const { title, author, listingDump, heliumDump, alwaysInclude, exclude, setTitle, setAuthor, setListingDump, setHeliumDump, setAlwaysInclude, setExclude, cleanedHeliumWords, listingWords, backendCandidates, finalBackendKeywords, byteCount, isProcessing, error, showCleanedList, showListingList, showCandidatesList, setResults, setProcessing, setError, toggleCleanedList, toggleListingList, toggleCandidatesList, reset } = refinerStore_default(); const [copySuccess, setCopySuccess] = (0, import_react22.useState)(false); const [warning, setWarning] = (0, import_react22.useState)(null); const [retryCount, setRetryCount] = (0, import_react22.useState)(0); const [lastProcessTime, setLastProcessTime] = (0, import_react22.useState)(0); const MAX_INPUT_LENGTH = 1e5; const getTotalInputSize = () => { return (title?.length || 0) + (author?.length || 0) + (listingDump?.length || 0) + (heliumDump?.length || 0) + (alwaysInclude?.length || 0) + (exclude?.length || 0); }; const handleProcess = (0, import_react22.useCallback)(async () => { if (isProcessing) return; const now = Date.now(); const timeSinceLastProcess = now - lastProcessTime; if (timeSinceLastProcess < 2e3) { setError("Please wait a moment before processing again."); return; } const totalSize = getTotalInputSize(); if (totalSize > MAX_INPUT_LENGTH) { setError( `Input is too large (${Math.round(totalSize / 1e3)}KB). Please reduce to under ${Math.round(MAX_INPUT_LENGTH / 1e3)}KB.` ); return; } setLastProcessTime(now); setError(null); setWarning(null); setProcessing(true); try { const response = await fetch("/api/refiner/process", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ title, author, listingDump, heliumDump, alwaysInclude, exclude }) }); if (!response.ok) { let errorMessage = "Processing failed"; try { const errorData = await response.json(); errorMessage = errorData.error || errorMessage; } catch (jsonError) { errorMessage = `Server error: ${response.status} ${response.statusText}`; } throw new Error(errorMessage); } const data = await response.json(); setResults({ cleanedHeliumWords: data.cleanedHeliumWords, listingWords: data.listingWords, backendCandidates: data.backendCandidates, finalBackendKeywords: data.finalBackendKeywords, byteCount: data.byteCount }); if (data.warning) { setWarning(data.warning); } setRetryCount(0); } catch (err) { console.error("Processing error:", err); setError(err.message); setRetryCount((prev) => prev + 1); } finally { setProcessing(false); } }, [ isProcessing, lastProcessTime, title, author, listingDump, heliumDump, alwaysInclude, exclude, setResults, setProcessing, setError, getTotalInputSize ]); const handleCopy = async () => { try { await navigator.clipboard.writeText(finalBackendKeywords); setCopySuccess(true); setTimeout(() => setCopySuccess(false), 3e3); } catch (err) { console.error("Copy failed:", err); setError("Failed to copy to clipboard"); } }; const handleDownload = () => { if (!finalBackendKeywords) return; const content = `Title: ${title || "(no title entered)"} Author: ${author || "(no author entered)"} Backend Search Terms (\u2264 250 bytes): ${finalBackendKeywords}`; const blob = new Blob([content], { type: "text/plain;charset=utf-8" }); const url = window.URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; const baseTitle = title.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9\-]/g, ""); const baseAuthor = author.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9\-]/g, ""); let filename = "backend-keywords"; if (baseTitle) filename += `-${baseTitle}`; if (baseAuthor) filename += `-${baseAuthor}`; a.download = `${filename}.txt`; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); document.body.removeChild(a); }; const handleReset = () => { if (confirm("Are you sure you want to clear all inputs and results?")) { reset(); setCopySuccess(false); setWarning(null); setRetryCount(0); } }; const currentInputSize = getTotalInputSize(); const inputSizePercent = currentInputSize / MAX_INPUT_LENGTH * 100; const isInputSizeWarning = inputSizePercent > 80; return /* @__PURE__ */ React.createElement("div", { className: "bg-[#F5F5F7] min-h-screen", style: { padding: "40px 24px" } }, /* @__PURE__ */ React.createElement("div", { style: { maxWidth: "1200px", margin: "0 auto" } }, /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "40px" } }, /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between" }, /* @__PURE__ */ React.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React.createElement( "h1", { style: { fontSize: "42px", fontWeight: "700", color: "#111827", marginBottom: "12px", letterSpacing: "-0.025em" } }, "Keyword Refinery" ), /* @__PURE__ */ React.createElement( "p", { style: { fontSize: "16px", color: "#6B7280", maxWidth: "768px" } }, "Clean Helium10 dumps, subtract listing content, and generate an optimized, 250-byte backend Search Terms string." )), /* @__PURE__ */ React.createElement( "button", { onClick: handleReset, className: "px-4 py-2 bg-white hover:bg-[#F9FAFB] text-[#6B7280] hover:text-[#111827] border border-[#E5E7EB] font-medium rounded-lg transition-all duration-200 flex items-center gap-2 shadow-sm hover:shadow-md" }, /* @__PURE__ */ React.createElement(import_lucide_react12.RotateCcw, { size: 16 }), "Reset" )), isInputSizeWarning && /* @__PURE__ */ React.createElement("div", { className: "mt-4 flex items-center gap-2 text-sm" }, /* @__PURE__ */ React.createElement(import_lucide_react12.AlertCircle, { size: 16, className: "text-[#F59E0B]" }), /* @__PURE__ */ React.createElement("span", { className: "text-[#F59E0B] font-medium" }, "Input size:", " ", Math.round(currentInputSize / MAX_INPUT_LENGTH * 100), "% of maximum"))), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-12 gap-6 mb-8" }, /* @__PURE__ */ React.createElement("div", { className: "lg:col-span-4" }, /* @__PURE__ */ React.createElement(InputCard, { title: "Listing Info" }, /* @__PURE__ */ React.createElement( TextInput, { label: "Title", placeholder: "Product title as it appears on Amazon", value: title, onChange: setTitle } ), /* @__PURE__ */ React.createElement( TextInput, { label: "Author / Brand", placeholder: "Your name or brand", value: author, onChange: setAuthor } ), /* @__PURE__ */ React.createElement( TextArea, { label: "Listing Dump", placeholder: "Paste your Amazon title, bullets, and description here. Any format is fine.", value: listingDump, onChange: setListingDump, helperText: "All text here counts as front-end content. The app will remove these words from Helium keywords so you don't waste backend space.", rows: 8 } ))), /* @__PURE__ */ React.createElement("div", { className: "lg:col-span-4" }, /* @__PURE__ */ React.createElement(InputCard, { title: "Helium Keywords" }, /* @__PURE__ */ React.createElement( TextArea, { label: "Helium Dump", placeholder: "Paste exported keywords from Helium10 here. Any mix of lines, commas, or spacing is fine.", value: heliumDump, onChange: setHeliumDump, rows: 16, helperText: "The app will clean this dump into a unique word list, then subtract anything already used in your listing." } ))), /* @__PURE__ */ React.createElement("div", { className: "lg:col-span-4" }, /* @__PURE__ */ React.createElement(InputCard, { title: "Fine-Tuning (Optional)" }, /* @__PURE__ */ React.createElement( TextArea, { label: "Always include these words", placeholder: "Words you want forced into the final backend keywords. Separate with spaces or line breaks.", value: alwaysInclude, onChange: setAlwaysInclude, rows: 6, helperText: "These words will be kept in the final backend keywords where possible, even if they appear in the listing or might otherwise be trimmed." } ), /* @__PURE__ */ React.createElement( TextArea, { label: "Exclude these words", placeholder: "Words you never want to appear. Separate with spaces or line breaks.", value: exclude, onChange: setExclude, rows: 6, helperText: "These words will be removed from all sets and will not appear in the final backend keywords." } )))), /* @__PURE__ */ React.createElement("div", { className: "bg-gradient-to-r from-[#003B4A] to-[#005B73] rounded-2xl p-6 mb-8 shadow-lg" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col md:flex-row items-center justify-between gap-6" }, /* @__PURE__ */ React.createElement("div", { className: "text-white flex-1" }, /* @__PURE__ */ React.createElement("h3", { className: "text-xl font-semibold mb-2" }, "Ready to Process?"), /* @__PURE__ */ React.createElement("p", { className: "text-[#B8D4DB] text-sm" }, isProcessing ? "AI is analyzing and optimizing your keywords..." : error ? "There was an issue. Please check your input and try again." : "Click the button to clean, refine, and optimize your backend keywords."), warning && /* @__PURE__ */ React.createElement("p", { className: "text-[#FFD54F] text-sm mt-2 flex items-start gap-2" }, /* @__PURE__ */ React.createElement("span", null, "\u26A0\uFE0F"), /* @__PURE__ */ React.createElement("span", null, warning)), error && /* @__PURE__ */ React.createElement("div", { className: "mt-2" }, /* @__PURE__ */ React.createElement("p", { className: "text-[#FF6B6B] text-sm flex items-start gap-2 mb-3" }, /* @__PURE__ */ React.createElement("span", null, "\u274C"), /* @__PURE__ */ React.createElement("span", null, error)), retryCount > 0 && retryCount < 3 && /* @__PURE__ */ React.createElement( "button", { onClick: handleProcess, disabled: isProcessing, className: "px-4 py-2 bg-white hover:bg-[#F5F5F7] disabled:bg-[#374151] text-[#003B4A] disabled:text-[#9CA3AF] font-medium rounded-lg transition-all duration-200 text-sm" }, "Try Again" ))), /* @__PURE__ */ React.createElement( "button", { onClick: handleProcess, disabled: isProcessing || currentInputSize > MAX_INPUT_LENGTH, className: "px-10 py-4 bg-white hover:bg-[#F5F5F7] disabled:bg-[#374151] text-[#003B4A] disabled:text-[#9CA3AF] font-semibold rounded-xl transition-all duration-200 shadow-md hover:shadow-xl disabled:cursor-not-allowed text-lg whitespace-nowrap" }, isProcessing ? "Processing..." : "Clean & Refine Keywords" ))), finalBackendKeywords && /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-2xl shadow-xl p-8 border border-[#E5E7EB]" }, /* @__PURE__ */ React.createElement("h2", { className: "text-2xl font-bold text-[#111827] mb-6" }, "Results"), /* @__PURE__ */ React.createElement( ResultSection, { title: "Cleaned Helium Keywords (before subtraction)", subtitle: "Unique, lower-case words extracted from your Helium Dump, after cleaning.", wordCount: cleanedHeliumWords.length, showList: showCleanedList, onToggle: toggleCleanedList, words: cleanedHeliumWords.join(" ") } ), /* @__PURE__ */ React.createElement( ResultSection, { title: "Listing Words", subtitle: "Unique, lower-case words from Title, Author, and Listing Dump (used for subtraction).", wordCount: listingWords.length, showList: showListingList, onToggle: toggleListingList, words: listingWords.join(" ") } ), /* @__PURE__ */ React.createElement( ResultSection, { title: "Backend Candidates (after subtraction & fine-tuning)", subtitle: "Unique, lower-case words from Helium that are not in your listing, plus any forced 'Always include' words, minus any excluded words.", wordCount: backendCandidates.length, showList: showCandidatesList, onToggle: toggleCandidatesList, words: backendCandidates.join(" ") } ), /* @__PURE__ */ React.createElement("div", { className: "pt-8 border-t-2 border-[#E5E7EB] mt-8" }, /* @__PURE__ */ React.createElement("div", { className: "bg-gradient-to-br from-[#F0F9FF] to-[#E0F2FE] rounded-xl p-8 border-2 border-[#BAE6FD]" }, /* @__PURE__ */ React.createElement("h4", { className: "text-lg font-bold text-[#111827] mb-2 flex items-center gap-2" }, /* @__PURE__ */ React.createElement("span", { className: "text-2xl" }, "\u2728"), "Optimized Backend Search Terms"), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-[#6B7280] mb-4" }, "Final output contains no duplicate words."), /* @__PURE__ */ React.createElement( "textarea", { readOnly: true, value: finalBackendKeywords, rows: 4, className: "w-full px-5 py-4 border-2 border-[#BAE6FD] rounded-lg bg-white text-[#111827] resize-none mb-4 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-[#0EA5E9] shadow-sm" } ), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between mb-6 bg-white rounded-lg px-5 py-3 border border-[#E5E7EB]" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React.createElement( "div", { className: `text-base font-bold ${byteCount > 250 ? "text-[#DC2626]" : "text-[#059669]"}` }, byteCount, " / 250 bytes" ), /* @__PURE__ */ React.createElement("div", { className: "h-2 w-48 bg-[#E5E7EB] rounded-full overflow-hidden" }, /* @__PURE__ */ React.createElement( "div", { className: `h-full transition-all duration-300 ${byteCount > 250 ? "bg-[#DC2626]" : "bg-[#059669]"}`, style: { width: `${Math.min(byteCount / 250 * 100, 100)}%` } } ))), copySuccess && /* @__PURE__ */ React.createElement("span", { className: "text-sm font-medium text-[#059669] flex items-center gap-1" }, /* @__PURE__ */ React.createElement("span", null, "\u2713"), " Copied to clipboard")), /* @__PURE__ */ React.createElement("div", { className: "flex gap-4" }, /* @__PURE__ */ React.createElement( "button", { onClick: handleCopy, className: "flex-1 px-8 py-3 bg-[#003B4A] hover:bg-[#005B73] text-white font-semibold rounded-lg transition-all duration-200 shadow-md hover:shadow-lg" }, "Copy Keywords" ), /* @__PURE__ */ React.createElement( "button", { onClick: handleDownload, className: "flex-1 px-8 py-3 bg-white hover:bg-[#F9FAFB] text-[#111827] border-2 border-[#E5E7EB] hover:border-[#003B4A] font-semibold rounded-lg transition-all duration-200" }, "Download .TXT" ))))))); } // virtual:/apps/web/src/components/DataTableTool.jsx init_injected_globals(); var import_react23 = __toESM(require_react()); var import_lucide_react13 = __toESM(require_lucide_react()); // virtual:/apps/web/src/utils/dataTableStore.js init_injected_globals(); var useDataTableStore = create((set) => ({ // Raw CSV data (array of row objects) data: [], // Original data order for reset originalData: [], // Filter values for each column filters: { upc: "", npsSku: "", ecmSku: "", hmdSku: "", oefSku: "", oefPSku: "", oefAsin: "", category: "", subCategory: "" }, // Sort state sortColumn: null, sortDirection: null, // 'asc', 'desc', or null // Upload/download state fileName: null, // Loading state isLoading: false, // Set loading state setLoading: (loading) => set({ isLoading: loading }), // Set data from CSV setData: (newData) => set({ data: newData, originalData: [...newData], sortColumn: null, sortDirection: null }), // Update a single filter setFilter: (column, value) => set((state) => ({ filters: { ...state.filters, [column]: value.toUpperCase() } })), // Clear all filters clearFilters: () => set({ filters: { upc: "", npsSku: "", ecmSku: "", hmdSku: "", oefSku: "", oefPSku: "", oefAsin: "", category: "", subCategory: "" } }), // Set sort state setSort: (column, direction) => set({ sortColumn: column, sortDirection: direction }), // Reset to original order resetSort: () => set((state) => ({ data: [...state.originalData], sortColumn: null, sortDirection: null })), // Set file name setFileName: (name) => set({ fileName: name }), // Clear all data and reset to initial state clearAll: () => set({ data: [], originalData: [], filters: { upc: "", npsSku: "", ecmSku: "", hmdSku: "", oefSku: "", oefPSku: "", oefAsin: "", category: "", subCategory: "" }, sortColumn: null, sortDirection: null, fileName: null }) })); var dataTableStore_default = useDataTableStore; // virtual:/apps/web/src/components/DataTableTool.jsx var COLUMNS = [ { key: "upc", label: "UPC", shortLabel: "UPC" }, { key: "npsSku", label: "NPS SKU", shortLabel: "NPS" }, { key: "ecmSku", label: "ECM SKU", shortLabel: "ECM" }, { key: "hmdSku", label: "HMD SKU", shortLabel: "HMD" }, { key: "oefSku", label: "OEF SKU", shortLabel: "OEF" }, { key: "oefPSku", label: "OEF P-SKU", shortLabel: "P-SKU" }, { key: "oefAsin", label: "OEF ASIN", shortLabel: "ASIN" }, { key: "category", label: "CATEGORY", shortLabel: "CAT" }, { key: "subCategory", label: "SUB-CATEGORY", shortLabel: "SUB" } ]; function DataTableTool() { const { data, originalData, filters, sortColumn, sortDirection, setData, setFilter, clearFilters, setSort, resetSort, fileName, setFileName, clearAll, isLoading, setLoading } = dataTableStore_default(); const [copyFeedback, setCopyFeedback] = (0, import_react23.useState)(null); const [error, setError] = (0, import_react23.useState)(null); const fileInputRef = (0, import_react23.useRef)(null); const filterTimeouts = (0, import_react23.useRef)({}); (0, import_react23.useEffect)(() => { const fetchData = async () => { setLoading(true); setError(null); try { const response = await fetch("/api/csv-data"); if (!response.ok) { throw new Error("Failed to fetch data"); } const result = await response.json(); setData(result.data || []); setFileName(result.fileName); } catch (err) { console.error("Error fetching CSV data:", err); setError("Failed to load CSV data. Please refresh the page."); } finally { setLoading(false); } }; fetchData(); }, [setData, setFileName, setLoading]); (0, import_react23.useEffect)(() => { return () => { Object.values(filterTimeouts.current).forEach((timeout) => { if (timeout) clearTimeout(timeout); }); }; }, []); const parseCSV = (text) => { const lines = text.split("\n").filter((line) => line.trim()); if (lines.length < 2) { throw new Error("CSV must have at least a header row and one data row"); } const header = lines[0].split(",").map((h) => h.trim()); const expectedColumns = 9; if (header.length !== expectedColumns) { throw new Error( `Invalid CSV format: Expected ${expectedColumns} columns (UPC, NPS SKU, ECM SKU, HMD SKU, OEF SKU, OEF P-SKU, OEF ASIN, CATEGORY, SUB-CATEGORY) but found ${header.length}` ); } const rows = []; for (let i = 1; i < lines.length; i++) { const values = lines[i].split(",").map((v) => v.trim().toUpperCase()); if (values.length !== expectedColumns) { console.warn( `Row ${i + 1} has ${values.length} columns, expected ${expectedColumns}. Padding with empty values.` ); } rows.push({ upc: values[0] || "", npsSku: values[1] || "", ecmSku: values[2] || "", hmdSku: values[3] || "", oefSku: values[4] || "", oefPSku: values[5] || "", oefAsin: values[6] || "", category: values[7] || "", subCategory: values[8] || "" }); } return rows; }; const handleFileUpload = async (event) => { const file = event.target.files?.[0]; if (!file) return; setError(null); if (file.size > 10 * 1024 * 1024) { setError("File too large. Maximum size is 10MB."); if (fileInputRef.current) { fileInputRef.current.value = ""; } return; } setLoading(true); try { const text = await file.text(); const parsedData = parseCSV(text); if (parsedData.length > 1e4) { throw new Error("CSV has too many rows. Maximum 10,000 rows allowed."); } const response = await fetch("/api/csv-data", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ data: parsedData, fileName: file.name }) }); if (!response.ok) { const errorData = await response.json(); throw new Error(errorData.error || "Failed to save data to database"); } setData(parsedData); setFileName(file.name); clearFilters(); } catch (err) { console.error("CSV upload error:", err); setError(err.message || "Failed to upload CSV file"); } finally { setLoading(false); } if (fileInputRef.current) { fileInputRef.current.value = ""; } }; const handleDownload = () => { if (data.length === 0) { setError("No data to download"); return; } const header = "UPC,NPS SKU,ECM SKU,HMD SKU,OEF SKU,OEF P-SKU,OEF ASIN,CATEGORY,SUB-CATEGORY\n"; const rows = data.map( (row) => COLUMNS.map((col) => row[col.key] || "").join(",") ); const csv = header + rows.join("\n"); const blob = new Blob([csv], { type: "text/csv;charset=utf-8" }); const url = window.URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = fileName || "data-table-export.csv"; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); document.body.removeChild(a); }; const handleClearAll = async () => { if (confirm( "Are you sure you want to clear all data? This will affect all users and cannot be undone." )) { setLoading(true); try { const response = await fetch("/api/csv-data", { method: "DELETE" }); if (!response.ok) { throw new Error("Failed to delete data from database"); } clearAll(); setError(null); setCopyFeedback(null); } catch (err) { console.error("Error clearing data:", err); setError("Failed to clear data from database"); } finally { setLoading(false); } } }; const handleFilterChange = (0, import_react23.useCallback)( (column, value) => { if (filterTimeouts.current[column]) { clearTimeout(filterTimeouts.current[column]); } filterTimeouts.current[column] = setTimeout(() => { setFilter(column, value); }, 300); }, [setFilter] ); const filteredData = (0, import_react23.useMemo)(() => { let result = [...data]; COLUMNS.forEach((col) => { const filterValue = filters[col.key]; if (filterValue) { result = result.filter( (row) => (row[col.key] || "").toUpperCase().includes(filterValue.toUpperCase()) ); } }); return result; }, [data, filters]); const sortedData = (0, import_react23.useMemo)(() => { if (!sortColumn || !sortDirection) { return filteredData; } const sorted = [...filteredData].sort((a, b) => { const aVal = (a[sortColumn] || "").toUpperCase(); const bVal = (b[sortColumn] || "").toUpperCase(); if (aVal === "" && bVal === "") return 0; if (aVal === "") return 1; if (bVal === "") return -1; if (sortDirection === "asc") { return aVal.localeCompare(bVal); } else { return bVal.localeCompare(aVal); } }); return sorted; }, [filteredData, sortColumn, sortDirection]); const handleHeaderClick = (column) => { if (sortColumn !== column) { setSort(column, "asc"); } else if (sortDirection === "asc") { setSort(column, "desc"); } else { resetSort(); } }; const handleCellClick = async (value, rowIndex, colKey) => { try { await navigator.clipboard.writeText(value || ""); setCopyFeedback({ row: rowIndex, col: colKey }); setTimeout(() => setCopyFeedback(null), 2e3); } catch (err) { console.error("Copy failed:", err); } }; const hasActiveFilters = Object.values(filters).some((f) => f !== ""); return /* @__PURE__ */ React.createElement("div", { className: "bg-[#F5F5F7] min-h-screen", style: { padding: "40px 24px" } }, isLoading && /* @__PURE__ */ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" }, /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-lg p-6 shadow-xl" }, /* @__PURE__ */ React.createElement("div", { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-[#003B4A] mx-auto mb-4" }), /* @__PURE__ */ React.createElement("p", { className: "text-[#111827] font-semibold" }, "Loading..."))), /* @__PURE__ */ React.createElement("div", { style: { maxWidth: "1400px", margin: "0 auto" } }, /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "40px" } }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-4" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement( "h1", { style: { fontSize: "42px", fontWeight: "700", color: "#111827", marginBottom: "12px", letterSpacing: "-0.025em" } }, "DATA TABLE" ), /* @__PURE__ */ React.createElement( "p", { style: { fontSize: "16px", color: "#6B7280", maxWidth: "768px" } }, "Upload a CSV to view, search, sort, and copy data. Click any cell to copy its value." )), /* @__PURE__ */ React.createElement("div", { className: "flex gap-3" }, /* @__PURE__ */ React.createElement( "button", { onClick: () => fileInputRef.current?.click(), className: "px-6 py-3 bg-[#003B4A] hover:bg-[#005B73] text-white font-semibold rounded-lg transition-all duration-200 shadow-md hover:shadow-lg flex items-center gap-2" }, /* @__PURE__ */ React.createElement(import_lucide_react13.Upload, { size: 18 }), "UPLOAD CSV" ), /* @__PURE__ */ React.createElement( "button", { onClick: handleDownload, disabled: data.length === 0, className: "px-6 py-3 bg-white hover:bg-[#F9FAFB] text-[#111827] border-2 border-[#E5E7EB] hover:border-[#003B4A] font-semibold rounded-lg transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2" }, /* @__PURE__ */ React.createElement(import_lucide_react13.Download, { size: 18 }), "DOWNLOAD CSV" ), data.length > 0 && /* @__PURE__ */ React.createElement( "button", { onClick: handleClearAll, className: "px-6 py-3 bg-white hover:bg-[#FEE2E2] text-[#DC2626] border-2 border-[#DC2626] font-semibold rounded-lg transition-all duration-200 flex items-center gap-2" }, /* @__PURE__ */ React.createElement(import_lucide_react13.Trash2, { size: 18 }), "CLEAR DATA" ))), fileName && /* @__PURE__ */ React.createElement("p", { className: "text-sm text-[#6B7280]" }, "Current file:", " ", /* @__PURE__ */ React.createElement("span", { className: "font-medium text-[#111827]" }, fileName)), error && /* @__PURE__ */ React.createElement("div", { className: "mt-4 bg-[#FEE2E2] border-2 border-[#DC2626] rounded-lg p-4" }, /* @__PURE__ */ React.createElement("p", { className: "text-[#DC2626] font-medium" }, error)), /* @__PURE__ */ React.createElement( "input", { ref: fileInputRef, type: "file", accept: ".csv", onChange: handleFileUpload, className: "hidden" } )), data.length > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-2xl shadow-xl p-6 border border-[#E5E7EB] mb-6" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between mb-4" }, /* @__PURE__ */ React.createElement("h3", { className: "text-lg font-bold text-[#111827]" }, "SEARCH FILTERS"), hasActiveFilters && /* @__PURE__ */ React.createElement( "button", { onClick: clearFilters, className: "px-4 py-2 text-sm font-semibold text-[#DC2626] hover:bg-[#FEE2E2] rounded-lg transition-all duration-200 flex items-center gap-2" }, /* @__PURE__ */ React.createElement(import_lucide_react13.X, { size: 16 }), "CLEAR FILTERS" )), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3" }, COLUMNS.map((col) => /* @__PURE__ */ React.createElement("div", { key: col.key }, /* @__PURE__ */ React.createElement("label", { className: "block text-xs font-bold text-[#6B7280] mb-1 uppercase" }, col.label), /* @__PURE__ */ React.createElement( "input", { type: "text", placeholder: `Filter...`, defaultValue: filters[col.key], onChange: (e) => handleFilterChange(col.key, e.target.value), className: "w-full px-3 py-2 border-2 border-[#E5E7EB] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#2E7C8A] focus:border-transparent uppercase text-xs" } ))))), /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-2xl shadow-xl border border-[#E5E7EB] overflow-hidden" }, /* @__PURE__ */ React.createElement( "div", { className: "relative overflow-x-auto", style: { maxHeight: "600px" } }, /* @__PURE__ */ React.createElement("table", { className: "w-full table-fixed" }, /* @__PURE__ */ React.createElement("thead", { className: "bg-[#111827] sticky top-0 z-10" }, /* @__PURE__ */ React.createElement("tr", null, COLUMNS.map((col) => /* @__PURE__ */ React.createElement( "th", { key: col.key, onClick: () => handleHeaderClick(col.key), className: "px-2 py-3 text-left text-xs font-bold text-white cursor-pointer hover:bg-[#1F2937] transition-colors duration-150 select-none", style: { width: `${100 / COLUMNS.length}%` } }, /* @__PURE__ */ React.createElement( "div", { className: "flex items-center gap-1", title: col.label }, /* @__PURE__ */ React.createElement("span", { className: "truncate" }, col.shortLabel), sortColumn === col.key && /* @__PURE__ */ React.createElement("span", { className: "flex-shrink-0" }, sortDirection === "asc" ? /* @__PURE__ */ React.createElement(import_lucide_react13.ChevronUp, { size: 14 }) : /* @__PURE__ */ React.createElement(import_lucide_react13.ChevronDown, { size: 14 })) ) )))), /* @__PURE__ */ React.createElement("tbody", null, sortedData.length === 0 ? /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement( "td", { colSpan: COLUMNS.length, className: "px-4 py-12 text-center" }, /* @__PURE__ */ React.createElement("div", { className: "text-[#6B7280]" }, /* @__PURE__ */ React.createElement("p", { className: "text-lg font-semibold mb-2" }, "NO MATCHING ROWS FOUND"), /* @__PURE__ */ React.createElement("p", { className: "text-sm" }, "Try adjusting your filters or uploading a different CSV.")) )) : sortedData.map((row, rowIndex) => /* @__PURE__ */ React.createElement( "tr", { key: rowIndex, className: "border-t border-[#E5E7EB] hover:bg-[#F9FAFB] transition-colors duration-150" }, COLUMNS.map((col) => /* @__PURE__ */ React.createElement( "td", { key: col.key, onClick: () => handleCellClick(row[col.key], rowIndex, col.key), className: "px-2 py-2 text-xs text-[#111827] cursor-pointer hover:bg-[#E5E7EB] transition-colors duration-150 relative overflow-hidden", title: row[col.key] || "" }, /* @__PURE__ */ React.createElement("div", { className: "truncate" }, row[col.key] || ""), copyFeedback?.row === rowIndex && copyFeedback?.col === col.key && /* @__PURE__ */ React.createElement("span", { className: "absolute top-0 right-0 bg-[#059669] text-white text-xs px-2 py-1 rounded-bl shadow-lg" }, "\u2713") )) )))), /* @__PURE__ */ React.createElement( "div", { className: "absolute bottom-0 left-0 right-0 h-8 pointer-events-none", style: { background: "linear-gradient(to bottom, transparent, #F5F5F7)" } } ) ), /* @__PURE__ */ React.createElement("div", { className: "bg-[#F9FAFB] px-6 py-4 border-t border-[#E5E7EB]" }, /* @__PURE__ */ React.createElement("p", { className: "text-sm text-[#6B7280]" }, "Showing", " ", /* @__PURE__ */ React.createElement("span", { className: "font-semibold text-[#111827]" }, sortedData.length), " ", "of", " ", /* @__PURE__ */ React.createElement("span", { className: "font-semibold text-[#111827]" }, originalData.length), " ", "rows \u2022 Hover over cells to see full content")))), data.length === 0 && !error && /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-2xl shadow-xl p-12 border border-[#E5E7EB] text-center" }, /* @__PURE__ */ React.createElement("div", { className: "max-w-md mx-auto" }, /* @__PURE__ */ React.createElement("div", { className: "w-16 h-16 bg-[#E0F2FE] rounded-full flex items-center justify-center mx-auto mb-4" }, /* @__PURE__ */ React.createElement(import_lucide_react13.Upload, { size: 32, className: "text-[#0EA5E9]" })), /* @__PURE__ */ React.createElement("h3", { className: "text-xl font-bold text-[#111827] mb-2" }, "NO DATA LOADED"), /* @__PURE__ */ React.createElement("p", { className: "text-[#6B7280] mb-6" }, "Upload a CSV file with 9 columns: UPC, NPS SKU, ECM SKU, HMD SKU, OEF SKU, OEF P-SKU, OEF ASIN, CATEGORY, SUB-CATEGORY"), /* @__PURE__ */ React.createElement( "button", { onClick: () => fileInputRef.current?.click(), className: "px-8 py-3 bg-[#003B4A] hover:bg-[#005B73] text-white font-semibold rounded-lg transition-all duration-200 shadow-md hover:shadow-lg flex items-center gap-2 mx-auto" }, /* @__PURE__ */ React.createElement(import_lucide_react13.Upload, { size: 18 }), "UPLOAD CSV FILE" ))))); } // virtual:/apps/web/src/components/ErrorBoundary.jsx init_injected_globals(); var import_react24 = __toESM(require_react()); var ErrorBoundary = class extends import_react24.Component { constructor(props) { super(props); this.state = { hasError: false, error: null }; } static getDerivedStateFromError(error) { return { hasError: true, error }; } componentDidCatch(error, errorInfo) { console.error("Error caught by boundary:", error, errorInfo); } render() { if (this.state.hasError) { return /* @__PURE__ */ React.createElement("div", { className: "min-h-screen bg-[#F5F5F7] flex items-center justify-center p-6" }, /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-xl shadow-lg p-8 max-w-lg w-full border border-[#E5E7EB]" }, /* @__PURE__ */ React.createElement("div", { className: "text-center mb-6" }, /* @__PURE__ */ React.createElement("div", { className: "text-6xl mb-4" }, "\u26A0\uFE0F"), /* @__PURE__ */ React.createElement("h1", { className: "text-2xl font-bold text-[#111827] mb-2" }, "Something went wrong"), /* @__PURE__ */ React.createElement("p", { className: "text-[#6B7280] mb-4" }, "Don't worry, your data is safe. Try one of these options:")), /* @__PURE__ */ React.createElement("div", { className: "space-y-3 mb-6" }, /* @__PURE__ */ React.createElement( "button", { onClick: () => { this.setState({ hasError: false, error: null }); }, className: "w-full px-6 py-3 bg-[#003B4A] hover:bg-[#005B73] text-white font-semibold rounded-lg transition-all duration-200" }, "Try Again" ), /* @__PURE__ */ React.createElement( "button", { onClick: () => { window.location.href = "/"; }, className: "w-full px-6 py-3 bg-white hover:bg-[#F9FAFB] text-[#111827] border-2 border-[#E5E7EB] font-semibold rounded-lg transition-all duration-200" }, "Go to Homepage" ), /* @__PURE__ */ React.createElement( "button", { onClick: () => { window.location.reload(); }, className: "w-full px-6 py-3 bg-white hover:bg-[#F9FAFB] text-[#6B7280] border border-[#E5E7EB] font-medium rounded-lg transition-all duration-200" }, "Reload Page" )), this.state.error && /* @__PURE__ */ React.createElement("details", { className: "text-sm" }, /* @__PURE__ */ React.createElement("summary", { className: "cursor-pointer text-[#6B7280] hover:text-[#111827] font-medium mb-2" }, "Technical Details"), /* @__PURE__ */ React.createElement("div", { className: "bg-[#F9FAFB] p-4 rounded-lg border border-[#E5E7EB] overflow-auto" }, /* @__PURE__ */ React.createElement("pre", { className: "text-xs text-[#DC2626] whitespace-pre-wrap break-words" }, this.state.error.toString()))))); } return this.props.children; } }; // virtual:/apps/web/src/app/page.jsx function HomePage() { const [activeTab, setActiveTab] = (0, import_react25.useState)(null); return /* @__PURE__ */ React.createElement("div", { className: "min-h-screen bg-[#0B1120]" }, /* @__PURE__ */ React.createElement("header", { className: "bg-[#111827] border-b border-[#1F2937]" }, /* @__PURE__ */ React.createElement("div", { className: "max-w-[1200px] mx-auto px-6 py-4" }, /* @__PURE__ */ React.createElement("h1", { className: "text-2xl font-semibold text-[#F9FAFB] flex items-center gap-3" }, /* @__PURE__ */ React.createElement(import_lucide_react14.Settings, { size: 28, className: "text-[#2E7C8A]" }), "ECM Tools"))), /* @__PURE__ */ React.createElement("nav", { className: "bg-[#111827] border-b border-[#1F2937]" }, /* @__PURE__ */ React.createElement("div", { className: "max-w-[1200px] mx-auto px-6" }, /* @__PURE__ */ React.createElement("div", { className: "flex gap-1" }, /* @__PURE__ */ React.createElement( "button", { onClick: () => setActiveTab("listing"), className: `px-6 py-3 font-medium transition-colors duration-200 border-b-2 ${activeTab === "listing" ? "text-[#2E7C8A] border-[#2E7C8A]" : "text-[#D1D5DB] border-transparent hover:text-[#F9FAFB] hover:border-[#374151]"}` }, "A Script" ), /* @__PURE__ */ React.createElement( "button", { onClick: () => setActiveTab("aplus"), className: `px-6 py-3 font-medium transition-colors duration-200 border-b-2 ${activeTab === "aplus" ? "text-[#2E7C8A] border-[#2E7C8A]" : "text-[#D1D5DB] border-transparent hover:text-[#F9FAFB] hover:border-[#374151]"}` }, "B Script" ), /* @__PURE__ */ React.createElement( "button", { onClick: () => setActiveTab("refiner"), className: `px-6 py-3 font-medium transition-colors duration-200 border-b-2 ${activeTab === "refiner" ? "text-[#2E7C8A] border-[#2E7C8A]" : "text-[#D1D5DB] border-transparent hover:text-[#F9FAFB] hover:border-[#374151]"}` }, "Keyword Refinery" ), /* @__PURE__ */ React.createElement( "button", { onClick: () => setActiveTab("datatable"), className: `px-6 py-3 font-medium transition-colors duration-200 border-b-2 ${activeTab === "datatable" ? "text-[#2E7C8A] border-[#2E7C8A]" : "text-[#D1D5DB] border-transparent hover:text-[#F9FAFB] hover:border-[#374151]"}` }, "Data Table" )))), !activeTab && /* @__PURE__ */ React.createElement("main", { className: "max-w-[1200px] mx-auto px-6 py-12" }, /* @__PURE__ */ React.createElement("div", { className: "bg-[#1F2937] rounded-2xl p-12 border border-[#374151] text-center" }, /* @__PURE__ */ React.createElement("h2", { className: "text-3xl font-semibold text-[#F9FAFB] mb-4" }, "Welcome to ECM Tools"), /* @__PURE__ */ React.createElement("p", { className: "text-[#D1D5DB] text-lg mb-2" }, "Your central hub for e-commerce content management."), /* @__PURE__ */ React.createElement("p", { className: "text-[#9CA3AF] max-w-2xl mx-auto" }, "Select a tool from the tabs above to streamline your workflow."))), activeTab === "listing" && /* @__PURE__ */ React.createElement(ErrorBoundary, null, /* @__PURE__ */ React.createElement(ListingScriptor, null)), activeTab === "aplus" && /* @__PURE__ */ React.createElement(ErrorBoundary, null, /* @__PURE__ */ React.createElement(DocumentBTool, null)), activeTab === "refiner" && /* @__PURE__ */ React.createElement(ErrorBoundary, null, /* @__PURE__ */ React.createElement(RefinerTool, null)), activeTab === "datatable" && /* @__PURE__ */ React.createElement(ErrorBoundary, null, /* @__PURE__ */ React.createElement(DataTableTool, null))); } // virtual:/apps/web/src/app/layout.jsx init_injected_globals(); var queryClient = new QueryClient({ defaultOptions: { queries: { staleTime: 1e3 * 60 * 5, // 5 minutes cacheTime: 1e3 * 60 * 30, // 30 minutes retry: 1, refetchOnWindowFocus: false } } }); function RootLayout({ children }) { return /* @__PURE__ */ React.createElement(QueryClientProvider, { client: queryClient }, children); } // virtual:/__wrapped_entry__.jsx function WrappedPage(props) { let content = /* @__PURE__ */ import_react26.default.createElement(HomePage, { ...props }); content = /* @__PURE__ */ import_react26.default.createElement(RootLayout, null, content); return content; } return __toCommonJS(wrapped_entry_exports); })(); /*! Bundled license information: lucide-react/dist/cjs/lucide-react.js: (** * @license lucide-react v0.358.0 - ISC * * This source code is licensed under the ISC license. * See the LICENSE file in the root directory of this source tree. *) react/cjs/react-jsx-runtime.production.min.js: (** * @license React * react-jsx-runtime.production.min.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. *) */