Two-Line Logo Generator

\n \n {label}\n {description && (\n ({description})\n )}\n \n

\n onChange(e.target.value)}\n className=\"w-10 h-10 border border-gray-300 rounded-md\"\n />\n onChange(e.target.value)}\n placeholder=\"#RRGGBB\"\n className=\"flex-grow px-3 py-2 border border-gray-300 rounded-md shadow-sm font-mono text-sm\"\n maxLength={7}\n />\n

\n {uniqueColors.map((color) => (\n onChange(color)}\n title={color}\n />\n ))}\n

\n );\n};\n\nexport default ColorPicker;",[],[183],{"_104":193,"_97":194,"_164":195,"_166":-5,"_167":146,"_168":196,"_170":118,"_106":197,"_101":187,"_172":188,"_174":198,"_176":22,"_177":-5,"_178":199,"_100":200},"2ed64aee-180d-11f0-b5aa-569c3dd06744","ColorUtils.tsx","4617e33e-2dc7-4cc9-9217-f0aa21938c80",9,["D",1744510534783],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\n// Official OpenMoji color palette\nexport const colorPalettes = {\n // Primary colors from OpenMoji\n primary: [\n \"#EA5A47\", // Red (primary)\n \"#5C9E31\", // Green (primary)\n \"#3692F7\", // Blue (primary)\n \"#F1B31C\", // Yellow (primary)\n \"#E67A94\", // Pink (primary)\n \"#AF7AC5\", // Purple (primary)\n \"#FF8C1A\", // Orange (primary)\n \"#00AEB3\", // Teal (primary)\n ],\n // Secondary/darker colors from OpenMoji\n secondary: [\n \"#781E32\", // Dark Red (secondary)\n \"#286E20\", // Dark Green (secondary)\n \"#0063A6\", // Dark Blue (secondary)\n \"#B27800\", // Dark Yellow (secondary)\n \"#A63553\", // Dark Pink (secondary)\n \"#6F4D9F\", // Dark Purple (secondary)\n \"#C85000\", // Dark Orange (secondary)\n \"#007489\", // Dark Teal (secondary)\n ],\n // Light/background colors\n background: [\n \"#FFFFFF\", // White\n \"#F1F2F2\", // Light Grey\n \"#3F3F3F\", // Dark Grey\n \"#000000\", // Black\n \"#D0CFCE\", // Silver\n \"#9B9B9A\", // Medium Grey\n ]\n};\n\nexport default {\n colorPalettes\n};",[],[194],{"_104":202,"_97":203,"_164":204,"_166":-5,"_167":146,"_168":205,"_170":118,"_106":206,"_101":33,"_172":188,"_174":207,"_176":22,"_177":-5,"_178":208,"_100":209},"41e33ca2-180b-11f0-aa5b-569c3dd06744","EmojiUtils.tsx","884b7533-7950-4916-9965-c4d9fc4458c8",1,["D",1744509707723],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\n// Convert emoji to codepoint\nexport const emojiToCodepoint = (emoji) => {\n try {\n // Get the first character (emoji) from the input\n const singleEmoji = [...emoji][0];\n\n // Convert to codepoint(s)\n let codepoint = \"\";\n for (const codeUnit of singleEmoji) {\n const hex = codeUnit.codePointAt(0).toString(16).toUpperCase();\n codepoint += (codepoint ? \"-\" : \"\") + hex;\n }\n\n // Remove any FE0F (variation selector) for simpler handling\n codepoint = codepoint.replace(/-FE0F/g, \"\");\n\n return codepoint;\n } catch (err) {\n console.error(\"Error converting emoji to codepoint:\", err);\n return null;\n }\n};\n\n// Get a random emoji from emoji-mart\nexport const getRandomEmoji = () => {\n // Pick a random emoji from common categories\n const categories = [\"people\", \"nature\", \"foods\", \"activity\", \"places\", \"objects\", \"symbols\", \"flags\"];\n const randomCategory = categories[Math.floor(Math.random() * categories.length)];\n\n // Default to rocket emoji if we can't get a random one\n let randomEmoji = \"🚀\";\n\n if (window.EmojiMart && window.EmojiMart.data) {\n try {\n const categoryData = window.EmojiMart.data.categories.find(c => c.id === randomCategory);\n if (categoryData && categoryData.emojis && categoryData.emojis.length) {\n const randomIndex = Math.floor(Math.random() * categoryData.emojis.length);\n const emojiKey = categoryData.emojis[randomIndex];\n const emoji = window.EmojiMart.data.emojis[emojiKey];\n if (emoji && emoji.native) {\n randomEmoji = emoji.native;\n }\n }\n } catch (err) {\n console.error(\"Error getting random emoji:\", err);\n }\n }\n\n return randomEmoji;\n};\n\nexport default {\n emojiToCodepoint,\n getRandomEmoji\n};",[],[203],{"_104":211,"_97":212,"_164":213,"_166":-5,"_167":146,"_168":187,"_170":118,"_106":214,"_101":205,"_172":188,"_174":215,"_176":22,"_177":-5,"_178":216,"_100":217},"9348d7e6-180b-11f0-8cf5-569c3dd06744","FontData.tsx","8cd30f82-049d-4547-b35e-234c5786892f",["D",1744509844312],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\n// Neutral colors always available\nexport const neutralColors = [\n \"#000000\",\n \"#ffffff\",\n \"#d0cfce\",\n \"#9b9b9a\",\n \"#3f3f3f\",\n];\n\n// System/Web-safe fonts only\nexport const fontOptions = [\n { name: \"Arial\", value: \"Arial, sans-serif\" },\n { name: \"Helvetica\", value: \"Helvetica, Arial, sans-serif\" },\n { name: \"Verdana\", value: \"Verdana, Geneva, sans-serif\" },\n { name: \"Tahoma\", value: \"Tahoma, Geneva, sans-serif\" },\n { name: \"Trebuchet MS\", value: \"'Trebuchet MS', Helvetica, sans-serif\" },\n { name: \"Georgia\", value: \"Georgia, serif\" },\n { name: \"Garamond\", value: \"Garamond, serif\" },\n { name: \"Times New Roman\", value: \"'Times New Roman', Times, serif\" },\n { name: \"Courier New\", value: \"'Courier New', Courier, monospace\" },\n { name: \"Segoe UI\", value: \"'Segoe UI', Tahoma, Geneva, sans-serif\" },\n { name: \"Calibri\", value: \"Calibri, 'Gill Sans', sans-serif\" },\n { name: \"Geneva\", value: \"Geneva, Verdana, sans-serif\" },\n { name: \"Optima\", value: \"Optima, sans-serif\" },\n { name: \"Cambria\", value: \"Cambria, Georgia, serif\" },\n { name: \"Candara\", value: \"Candara, Calibri, sans-serif\" },\n { name: \"Avenir\", value: \"Avenir, 'Segoe UI', sans-serif\" },\n { name: \"System UI\", value: \"system-ui, -apple-system, BlinkMacSystemFont, sans-serif\" },\n];\n\nexport default {\n neutralColors,\n fontOptions\n};",[],[212],{"_104":219,"_97":220,"_164":221,"_166":-5,"_167":146,"_168":222,"_170":118,"_106":223,"_101":33,"_172":188,"_174":224,"_176":22,"_177":-5,"_178":225,"_100":226},"460646f2-1811-11f0-ab83-569c3dd06744","LogoGenerator.tsx","4606477e-1811-11f0-ab83-569c3dd06744",18,["D",1744512291674],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\n// Common logo generation logic to share between web UI and API\n\n// Fixed corner radius from OpenMoji design (15px)\nexport const CORNER_RADIUS = 15;\n\n// Fixed container dimensions\nexport const CONTAINER_WIDTH = 400;\nexport const CONTAINER_HEIGHT = 150;\n\n/**\n * Estimate font size parameters for text on client or server\n * \n * On client, uses actual DOM measurements when svgRef is provided\n * On server, uses the character estimation approach\n * \n * @param topWord Top text (or single line text)\n * @param bottomWord Bottom text (only used in two-line mode)\n * @param fontFamily Font family to use\n * @param singleLineMode Whether to use single line mode\n * @param svgRef Optional ref to SVG element for DOM measurements\n */\nexport function calculateLogoTextParameters(\n topWord: string,\n bottomWord: string,\n fontFamily: string,\n singleLineMode: boolean,\n svgRef?: React.RefObject | null\n) {\n // Default result structure\n const result = {\n topFontSize: 60,\n bottomFontSize: 40,\n topY: singleLineMode ? CONTAINER_HEIGHT / 2 : 45,\n bottomY: 90,\n calculatedWidth: 0\n };\n \n // For client-side with SVG ref - use DOM measurements (more accurate)\n if (svgRef?.current && typeof document !== 'undefined') {\n try {\n const svg = svgRef.current;\n const svgNS = \"http://www.w3.org/2000/svg\";\n \n // Function to measure text width at a given font size\n const measureTextWidth = (text, fontSize) => {\n const tempText = document.createElementNS(svgNS, \"text\");\n tempText.setAttribute(\"font-family\", fontFamily);\n tempText.setAttribute(\"font-weight\", \"bold\");\n tempText.setAttribute(\"font-size\", fontSize);\n tempText.textContent = text;\n svg.appendChild(tempText);\n const width = tempText.getBBox().width;\n svg.removeChild(tempText);\n return width;\n };\n \n // Function to measure text height at a given font size\n const measureTextHeight = (text, fontSize) => {\n const tempText = document.createElementNS(svgNS, \"text\");\n tempText.setAttribute(\"font-family\", fontFamily);\n tempText.setAttribute(\"font-weight\", \"bold\");\n tempText.setAttribute(\"font-size\", fontSize);\n tempText.textContent = text;\n svg.appendChild(tempText);\n const height = tempText.getBBox().height;\n svg.removeChild(tempText);\n return height;\n };\n \n if (singleLineMode) {\n // For single line mode, simply make the text as large as possible\n let singleText = topWord;\n \n // Start with a large base size\n let baseFontSize = 100;\n \n // Measure width at base size\n const textWidthAt100px = measureTextWidth(singleText, 100);\n \n // Calculate the resulting width at base size\n const projectedWidth = textWidthAt100px * (baseFontSize / 100);\n \n // Max width calculation - use almost the entire container width (98%)\n const maxWidth = CONTAINER_WIDTH * 0.98; // 98% of container width for wider text\n \n // Scale down if necessary\n if (projectedWidth > maxWidth) {\n const scaleFactor = maxWidth / projectedWidth;\n baseFontSize *= scaleFactor;\n }\n \n // Ensure the text can fit vertically too\n const textHeightAtBaseSize = measureTextHeight(singleText, baseFontSize);\n const maxHeight = CONTAINER_HEIGHT * 0.85; // 85% of container height\n \n if (textHeightAtBaseSize > maxHeight) {\n const heightScaleFactor = maxHeight / textHeightAtBaseSize;\n baseFontSize *= heightScaleFactor;\n }\n \n // Set the final font size\n const finalFontSize = Math.floor(baseFontSize);\n result.topFontSize = finalFontSize;\n \n // Calculate and store width for UI\n result.calculatedWidth = measureTextWidth(singleText, finalFontSize);\n } else {\n // Two line mode - apply the original algorithm with tighter spacing\n \n // Measure both words at a reference size to find natural width ratio\n const topWidthAt100px = measureTextWidth(topWord, 100);\n const bottomWidthAt100px = measureTextWidth(bottomWord, 100);\n \n // Calculate ratio for equal width\n // If bottom word is naturally wider, it needs a smaller font size\n const widthRatio = bottomWidthAt100px / topWidthAt100px;\n \n // Start with base sizes - intentionally make top word larger\n let baseTopSize = 90;\n // Calculate bottom size to create equal width\n let baseBottomSize = baseTopSize / widthRatio;\n \n // Calculate the resulting width when both have the same visual width\n const equalWidth = topWidthAt100px * (baseTopSize / 100);\n result.calculatedWidth = equalWidth;\n \n // Check if the combined height exceeds the container\n const topHeight = measureTextHeight(topWord, baseTopSize);\n const bottomHeight = measureTextHeight(bottomWord, baseBottomSize);\n \n // Calculate available height for text (with margins) - use less margin for more text space\n const verticalMargin = CONTAINER_HEIGHT * 0.08; // Reduced from 0.15 to 0.08 (just 8% margin)\n const maxCombinedHeight = CONTAINER_HEIGHT - verticalMargin;\n \n // If we need to scale down to fit vertically\n if (topHeight + bottomHeight > maxCombinedHeight) {\n const scaleFactor = maxCombinedHeight / (topHeight + bottomHeight);\n baseTopSize *= scaleFactor;\n baseBottomSize *= scaleFactor;\n }\n \n // Check if width exceeds container width - use most of the container width (98%)\n const maxWidth = CONTAINER_WIDTH * 0.98; // 98% of container width for wider text\n if (equalWidth > maxWidth) {\n const widthScaleFactor = maxWidth / equalWidth;\n baseTopSize *= widthScaleFactor;\n baseBottomSize *= widthScaleFactor;\n }\n \n // Set the final font sizes\n const finalTopSize = Math.floor(baseTopSize);\n const finalBottomSize = Math.floor(baseBottomSize);\n \n result.topFontSize = finalTopSize;\n result.bottomFontSize = finalBottomSize;\n \n // Calculate vertical positions based on actual heights\n const finalTopHeight = measureTextHeight(topWord, finalTopSize);\n const finalBottomHeight = measureTextHeight(bottomWord, finalBottomSize);\n \n // Calculate vertical positions with even tighter spacing between words\n const totalHeight = finalTopHeight + finalBottomHeight;\n \n // Extreme reduction in the space between words\n const availableSpace = CONTAINER_HEIGHT - totalHeight - (CONTAINER_HEIGHT * 0.05); // very small margin (5%)\n const spacing = availableSpace / 6; // Use smaller divisor for tighter spacing\n \n // Top word position - placed higher\n result.topY = (CONTAINER_HEIGHT * 0.04) + (finalTopHeight / 2) + spacing;\n // Bottom word position - placed closer to top word\n result.bottomY = result.topY + (finalTopHeight / 2) + (spacing * 0.5) + (finalBottomHeight / 2);\n }\n \n return result;\n } catch (error) {\n console.error(\"Error in DOM measurement:\", error);\n // Fall back to text-based estimation below\n }\n }\n \n // For server-side or fallback - use character-based estimation\n try {\n if (singleLineMode) {\n // For single line, use a simplified calculation based on text length\n const textLength = topWord.length;\n \n // Use same exact algorithm as web version but with estimation\n let fontSize = 100; // Start with large size\n \n // Calculate available width (98% of container)\n const availableWidth = CONTAINER_WIDTH * 0.98;\n \n // Estimate text width at base size (100px)\n const estimatedWidthAt100px = estimateTextWidth(topWord, 100);\n \n // Calculate estimated full width\n const estimatedFullWidth = estimatedWidthAt100px * (fontSize / 100);\n \n // Scale down if necessary\n if (estimatedFullWidth > availableWidth) {\n fontSize = fontSize * (availableWidth / estimatedFullWidth);\n }\n \n // Set final estimated font size\n result.topFontSize = Math.floor(fontSize);\n result.calculatedWidth = estimatedWidthAt100px * (result.topFontSize / 100);\n } else {\n // Two-line logo using same approach as web version\n // Measure both words at a reference size to find natural width ratio\n const topEstimatedWidthAt100px = estimateTextWidth(topWord, 100);\n const bottomEstimatedWidthAt100px = estimateTextWidth(bottomWord, 100);\n \n // Calculate ratio for equal width\n // If bottom word is naturally wider, it needs a smaller font size\n const widthRatio = bottomEstimatedWidthAt100px / topEstimatedWidthAt100px || 1;\n \n // Start with base sizes - intentionally make top word larger\n let baseTopSize = 90;\n // Calculate bottom size to create equal width\n let baseBottomSize = baseTopSize / widthRatio;\n \n // Calculate the resulting width when both have the same visual width\n const equalWidth = topEstimatedWidthAt100px * (baseTopSize / 100);\n result.calculatedWidth = equalWidth;\n \n // Check if width exceeds container width - use most of the container width (98%)\n const maxWidth = CONTAINER_WIDTH * 0.98; // 98% of container width for wider text\n if (equalWidth > maxWidth) {\n const widthScaleFactor = maxWidth / equalWidth;\n baseTopSize *= widthScaleFactor;\n baseBottomSize *= widthScaleFactor;\n }\n \n // Set the final font sizes\n result.topFontSize = Math.floor(baseTopSize);\n result.bottomFontSize = Math.floor(baseBottomSize);\n \n // Estimated vertical positions\n result.topY = 45;\n result.bottomY = 90;\n }\n \n return result;\n } catch (error) {\n console.error(\"Error in text estimation:\", error);\n // Return default values as last resort\n return result;\n }\n}\n\n/**\n * Generate SVG content for the logo\n */\nexport function generateLogoSVG(\n topWord: string,\n bottomWord: string,\n fontFamily: string,\n backgroundColor: string,\n textColor: string,\n accentColor: string,\n secondaryColor: string,\n topFontSize: number,\n bottomFontSize: number,\n topY: number,\n bottomY: number,\n singleLineMode: boolean\n): string {\n if (singleLineMode) {\n // Single line version\n return `\n`.trim();\n } else {\n // Two line version\n return `\n`.trim();\n }\n}\n\n/**\n * Estimate text width based on character count and types\n * This is a more sophisticated text width estimator for server-side\n */\nexport function estimateTextWidth(text: string, fontSize: number): number {\n if (!text) return 0;\n \n // Average width of different character types relative to fontSize\n const charWidths = {\n wide: 0.8, // Characters like M, W, Q, D, O, G\n normal: 0.6, // Most characters\n narrow: 0.3 // Characters like I, l, j, f, t\n };\n \n // Character classification\n const wideChars = \"MWQDOG\";\n const narrowChars = \"IljftT1.\";\n \n let totalWidth = 0;\n \n // Calculate width based on character type\n for (const char of text) {\n if (wideChars.includes(char)) {\n totalWidth += charWidths.wide * fontSize;\n } else if (narrowChars.includes(char)) {\n totalWidth += charWidths.narrow * fontSize;\n } else {\n totalWidth += charWidths.normal * fontSize;\n }\n }\n \n // Add spacing between characters\n totalWidth += (text.length - 1) * 0.1 * fontSize;\n \n return totalWidth;\n}\n\n/**\n * Calculate a data URL from SVG content\n */\nexport function svgToDataURL(svgContent: string): string {\n // Browser-safe way to convert SVG to base64\n const svgBase64 = btoa(unescape(encodeURIComponent(svgContent)));\n return `data:image/svg+xml;base64,${svgBase64}`;\n}\n\nexport default {\n CORNER_RADIUS,\n CONTAINER_WIDTH,\n CONTAINER_HEIGHT,\n calculateLogoTextParameters,\n generateLogoSVG,\n estimateTextWidth,\n svgToDataURL\n};",[],[220],{"_104":228,"_97":229,"_164":230,"_166":-5,"_167":146,"_168":145,"_170":118,"_106":231,"_101":232,"_172":188,"_174":233,"_176":22,"_177":-5,"_178":234,"_100":235},"f6ef388e-1884-11f0-b112-569c3dd06744","LogoPreview.tsx","c523ce65-e594-4197-9d45-4ce6d093a4a4",["D",1744561980601],3,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useRef } from \"https://esm.sh/react@18.2.0\";\nimport { CONTAINER_WIDTH, CONTAINER_HEIGHT } from \"./LogoGenerator.tsx\";\n\nexport const LogoPreview = ({ \n bgColor, \n fontFamily, \n textColor,\n accentColor, \n topWord, \n bottomWord, \n topFontSize, \n bottomFontSize,\n cornerRadius,\n calculatedWidth,\n secondaryColor,\n singleLineMode,\n topY,\n bottomY\n}) => {\n const svgRef = useRef(null);\n \n return (\n

Logo Preview

\n \n

\n {singleLineMode ? (\n `Font size: ${topFontSize}px`\n ) : (\n `Font sizes: Top ${topFontSize}px, Bottom ${bottomFontSize}px, Ratio: ${(bottomFontSize / topFontSize).toFixed(2)}`\n )}\n

\n );\n};\n\nexport default LogoPreview;",[],[229],{"_104":237,"_97":238,"_164":239,"_166":-5,"_167":146,"_168":240,"_170":118,"_106":241,"_101":187,"_172":188,"_174":242,"_176":22,"_177":-5,"_178":243,"_100":244},"27cbdf28-180f-11f0-b0ab-569c3dd06744","SvgHostClient.tsx","c0e9d1f1-57b7-4e9c-b3ac-1e4e7e13bc83",13,["D",1744511381965],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\n// Function to upload SVG to the same SVG host service used by OpenMoji\nexport const uploadSvgToHost = async (svgString, title = \"Logo\") => {\n try {\n // Use the same API endpoint as the OpenMoji generator\n const apiUrl = \"https://svgur.com/i.json\";\n \n // Create a form data object to match the API requirements\n const formData = new FormData();\n formData.append('source', svgString);\n formData.append('title', title);\n \n // Make the API request\n const response = await fetch(apiUrl, {\n method: 'POST',\n body: formData,\n });\n \n if (!response.ok) {\n throw new Error(`API responded with status: ${response.status}`);\n }\n \n // Parse the response\n const data = await response.json();\n \n // Check if the upload was successful\n if (data && data.links && data.links.viewer) {\n return {\n success: true,\n url: data.links.viewer, // Direct link to view the SVG\n deleteUrl: data.links.delete, // URL to delete the image if needed\n title: title\n };\n } else {\n throw new Error('API response missing expected data');\n }\n \n } catch (error) {\n console.error(\"Error uploading SVG:\", error);\n \n // Fallback to data URL if API fails\n try {\n const svgBase64 = btoa(unescape(encodeURIComponent(svgString)));\n const dataUrl = `data:image/svg+xml;base64,${svgBase64}`;\n \n return {\n success: true,\n url: dataUrl,\n title: title,\n isDataUrl: true // Flag to indicate this is a fallback\n };\n } catch (fallbackError) {\n return {\n success: false,\n error: `API Error: ${error.message}. Fallback also failed: ${fallbackError.message}`\n };\n }\n }\n};\n\nexport default {\n uploadSvgToHost\n};",[],[238],{"_104":246,"_97":247,"_164":248,"_166":-5,"_167":146,"_168":249,"_170":118,"_106":250,"_101":187,"_172":251,"_174":252,"_176":22,"_177":-5,"_178":253,"_100":254},"52a82aba-1811-11f0-897e-569c3dd06744","api.tsx","052cd264-1810-11f0-abe4-569c3dd06744",19,["D",1744512312850],"http","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { fontOptions } from \"./FontData.tsx\";\nimport { colorPalettes } from \"./ColorUtils.tsx\";\nimport { \n calculateLogoTextParameters,\n generateLogoSVG,\n svgToDataURL\n} from \"./LogoGenerator.tsx\";\n\n/**\n * API for generating SVG logos with one or two lines of text\n * GET Parameters:\n * - topWord: Top text or single line text (required)\n * - bottomWord: Bottom text (only used in two-line mode)\n * - fontFamily: Font family name from FontData.tsx\n * - backgroundColor: Background color in hex (#RRGGBB)\n * - textColor: Text color for top text in hex (#RRGGBB)\n * - accentColor: Color for bottom text in hex (#RRGGBB)\n * - secondaryColor: Color for bottom strip in hex (#RRGGBB)\n * - singleLine: \"true\" for single line mode, any other value for two-line mode\n */\nexport default async function api(request: Request): Promise {\n // Extract URL parameters\n const url = new URL(request.url);\n const params = url.searchParams;\n \n // Get required parameters\n const topWord = params.get(\"topWord\")?.toUpperCase() || \"LOGO\";\n \n // Get optional parameters\n const bottomWord = params.get(\"bottomWord\")?.toUpperCase() || \"TESTER\";\n const singleLine = params.get(\"singleLine\") === \"true\";\n \n // Font family (default to Arial if not valid)\n let fontFamily = \"Arial, sans-serif\";\n const fontName = params.get(\"fontFamily\");\n if (fontName) {\n const fontOption = fontOptions.find(f => f.name.toLowerCase() === fontName.toLowerCase());\n if (fontOption) {\n fontFamily = fontOption.value;\n }\n }\n \n // Colors (use defaults if not provided or invalid)\n const backgroundColor = isValidHexColor(params.get(\"backgroundColor\")) \n ? params.get(\"backgroundColor\") \n : \"#3B82F6\";\n \n const textColor = isValidHexColor(params.get(\"textColor\"))\n ? params.get(\"textColor\")\n : \"#FFFFFF\";\n \n const accentColor = isValidHexColor(params.get(\"accentColor\"))\n ? params.get(\"accentColor\")\n : \"#EA5A47\";\n \n const secondaryColor = isValidHexColor(params.get(\"secondaryColor\"))\n ? params.get(\"secondaryColor\")\n : \"#781E32\";\n \n // Calculate text parameters using the shared logic\n const { topFontSize, bottomFontSize, topY, bottomY } = calculateLogoTextParameters(\n topWord,\n bottomWord,\n fontFamily,\n singleLine,\n null // No SVG ref on server\n );\n \n // Generate SVG content using the shared function\n const svgContent = generateLogoSVG(\n topWord,\n bottomWord,\n fontFamily,\n backgroundColor,\n textColor,\n accentColor,\n secondaryColor,\n topFontSize,\n bottomFontSize,\n topY,\n bottomY,\n singleLine\n );\n \n // Convert to data URL if requested\n const format = params.get(\"format\")?.toLowerCase();\n \n if (format === \"dataurl\") {\n // Get data URL from shared function\n const dataUrl = svgToDataURL(svgContent);\n \n return new Response(JSON.stringify({ \n success: true, \n dataUrl,\n metadata: {\n topFontSize,\n bottomFontSize,\n topY,\n bottomY,\n singleLine\n }\n }), {\n headers: {\n \"Content-Type\": \"application/json\",\n \"Access-Control-Allow-Origin\": \"*\"\n }\n });\n } else {\n // Return SVG directly\n return new Response(svgContent, {\n headers: {\n \"Content-Type\": \"image/svg+xml\",\n \"Access-Control-Allow-Origin\": \"*\"\n }\n });\n }\n}\n\n/**\n * Validate if a string is a valid hex color\n */\nfunction isValidHexColor(color: string | null): boolean {\n if (!color) return false;\n return /^#([0-9A-F]{3}){1,2}$/i.test(color);\n}",[],[247],{"_104":256,"_97":257,"_164":116,"_166":-5,"_167":146,"_168":121,"_170":118,"_106":258,"_101":259,"_172":251,"_174":260,"_176":22,"_177":-5,"_178":261,"_100":262},"ec2c551c-1884-11f0-8907-569c3dd06744","index.tsx",["D",1744561962544],5,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { ColorPicker } from \"./ColorPicker.tsx\";\nimport { LogoPreview } from \"./LogoPreview.tsx\";\nimport { fontOptions } from \"./FontData.tsx\";\nimport { colorPalettes } from \"./ColorUtils.tsx\";\nimport { uploadSvgToHost } from \"./SvgHostClient.tsx\";\nimport { \n calculateLogoTextParameters,\n generateLogoSVG,\n svgToDataURL,\n CORNER_RADIUS\n} from \"./LogoGenerator.tsx\";\n\nconst TwoLineLogoGenerator = () => {\n const [topWord, setTopWord] = useState('LOGO');\n const [bottomWord, setBottomWord] = useState('TESTER');\n const [textColor, setTextColor] = useState(\"#ffffff\");\n const [accentColor, setAccentColor] = useState(\"#EA5A47\");\n const [bgColor, setBgColor] = useState(\"#3B82F6\");\n const [secondaryColor, setSecondaryColor] = useState(\"#781E32\");\n const [fontFamily, setFontFamily] = useState(\"Arial, sans-serif\");\n const [topFontSize, setTopFontSize] = useState(60);\n const [bottomFontSize, setBottomFontSize] = useState(40);\n const [calculatedWidth, setCalculatedWidth] = useState(0);\n const [cornerRadius, setCornerRadius] = useState(CORNER_RADIUS);\n const [svgString, setSvgString] = useState(\"\");\n const [saveSuccess, setSaveSuccess] = useState(null);\n const [savedSvgUrl, setSavedSvgUrl] = useState(\"\");\n const [deleteUrl, setDeleteUrl] = useState(\"\");\n const [savingToHost, setSavingToHost] = useState(false);\n const [singleLineMode, setSingleLineMode] = useState(false);\n const [saveMessage, setSaveMessage] = useState(\"\");\n const [topY, setTopY] = useState(45);\n const [bottomY, setBottomY] = useState(90);\n \n const svgRef = useRef(null);\n const textAreaRef = useRef(null);\n \n // Calculate font sizes and positions using the shared logic\n useEffect(() => {\n try {\n const result = calculateLogoTextParameters(\n topWord,\n bottomWord,\n fontFamily,\n singleLineMode,\n svgRef\n );\n \n setTopFontSize(result.topFontSize);\n setBottomFontSize(result.bottomFontSize);\n setTopY(result.topY);\n setBottomY(result.bottomY);\n setCalculatedWidth(result.calculatedWidth);\n } catch (error) {\n console.error(\"Error calculating text parameters:\", error);\n }\n }, [topWord, bottomWord, fontFamily, singleLineMode]);\n\n // Generate SVG using the shared function\n const generateSVG = () => {\n const svgContent = generateLogoSVG(\n topWord,\n bottomWord,\n fontFamily,\n bgColor,\n textColor,\n accentColor,\n secondaryColor,\n topFontSize,\n bottomFontSize,\n topY,\n bottomY,\n singleLineMode\n );\n\n setSvgString(svgContent);\n \n // Reset save status when generating new SVG\n setSaveSuccess(null);\n setSavedSvgUrl(\"\");\n setDeleteUrl(\"\");\n setSaveMessage(\"\");\n };\n\n const copyToClipboard = () => {\n if (textAreaRef.current) {\n textAreaRef.current.select();\n document.execCommand(\"copy\");\n }\n };\n\n const saveToSvgHost = async () => {\n // Make sure we have SVG content\n if (!svgString) {\n generateSVG();\n }\n \n setSavingToHost(true);\n setSaveMessage(\"Uploading to SVG host...\");\n \n try {\n // Generate name for the logo\n const name = singleLineMode \n ? `${topWord} Logo` \n : `${topWord} ${bottomWord} Logo`;\n \n // Upload to svgHost\n const result = await uploadSvgToHost(svgString, name);\n \n if (result.success) {\n setSaveSuccess(true);\n setSavedSvgUrl(result.url);\n \n // Store delete URL if available\n if (result.deleteUrl) {\n setDeleteUrl(result.deleteUrl);\n }\n \n // Set appropriate message\n if (result.isDataUrl) {\n setSaveMessage(\"Created data URL (couldn't connect to external SVG host)\");\n } else {\n setSaveMessage(\"SVG uploaded successfully to svgur.com\");\n }\n } else {\n setSaveSuccess(false);\n setSaveMessage(`Error: ${result.error || \"Failed to save to SVG Host\"}`);\n }\n } catch (err) {\n setSaveSuccess(false);\n setSaveMessage(`Error: ${err.message}`);\n } finally {\n setSavingToHost(false);\n }\n };\n\n const copySvgUrl = () => {\n if (savedSvgUrl) {\n navigator.clipboard.writeText(savedSvgUrl)\n .catch(err => {\n console.error(\"Failed to copy URL to clipboard\", err);\n });\n }\n };\n\n return (\n

\n {/* Hidden SVG for text measurements */}\n \n \n \n\n

Customize Logo

\n\n

\n setSingleLineMode(!singleLineMode)}\n className=\"mr-2 h-4 w-4\"\n />\n \n Single Line Mode\n \n

\n\n

\n \n {singleLineMode ? \"Text\" : \"Top Word\"}\n \n setTopWord(e.target.value.toUpperCase())}\n className=\"border border-gray-300 rounded p-2\"\n maxLength={20} // Increased character limit\n />\n

\n \n {!singleLineMode && (\n

\n Bottom Word\n setBottomWord(e.target.value.toUpperCase())}\n className=\"border border-gray-300 rounded p-2\"\n maxLength={20} // Increased character limit\n />\n

\n )}\n

\n \n

\n Font\n setFontFamily(e.target.value)}\n className=\"border border-gray-300 rounded p-2\"\n style={{ fontFamily: fontFamily }}\n >\n {fontOptions.map((font) => (\n \n ))}\n \n

\n Corner Radius\n

\n setCornerRadius(parseInt(e.target.value, 10))}\n className=\"flex-grow\"\n />\n

\n setCornerRadius(parseInt(e.target.value, 10))}\n className=\"w-12 px-1 py-1 border border-gray-300 rounded text-center\"\n />\n

\n \n

\n \n \n \n \n {!singleLineMode && (\n \n )}\n \n \n

\n\n

Export Logo

\n \n Generate SVG\n \n \n \n {savingToHost ? \"Saving...\" : \"Save as SVG\"}\n \n

\n \n {/* Save status */}\n {saveSuccess !== null && (\n

\n {saveSuccess ? (\n <>\n

{saveMessage}

\n {savedSvgUrl && (\n

Your SVG is available at:

\n e.target.select()}\n className=\"flex-1 p-1 text-sm border border-gray-300 rounded\"\n />\n \n Copy\n \n

\n \n View in browser\n \n {deleteUrl && (\n \n Delete SVG\n \n )}\n

\n )}\n \n ) : (\n

{saveMessage}

\n )}\n

\n )}\n \n {svgString && (\n

\n \n \n Copy to Clipboard\n \n

\n )}\n

\n \n

Logo Metrics

Font sizes adjusted for optimal fit:

Text size: {topFontSize}px
Top word: {topFontSize}px
Bottom word: {bottomFontSize}px
Font size ratio: {(bottomFontSize / topFontSize).toFixed(2)}
Width: {Math.round(calculatedWidth)}px
\n \n Get this logo via API\n \n

\n );\n};\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n \n \n \n Two-Line Logo Generator\n \n \n \n \n \n

\n \n \n

\n View source\n

\n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\n body {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n line-height: 1.5;\n padding: 20px;\n background-color: #f5f7fa;\n }\n \n .text-xs {\n font-size: 0.75rem;\n }\n \n .text-sm {\n font-size: 0.875rem;\n }\n \n .text-lg {\n font-size: 1.125rem;\n }\n \n .font-medium {\n font-weight: 500;\n }\n \n .font-bold {\n font-weight: 700;\n }\n \n input[type=\"range\"] {\n width: 100%;\n height: 8px;\n -webkit-appearance: none;\n background: #e2e8f0;\n border-radius: 4px;\n outline: none;\n }\n \n input[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 16px;\n height: 16px;\n background: #3b82f6;\n border-radius: 50%;\n cursor: pointer;\n }\n \n .project-logo text {\n dominant-baseline: middle;\n }\n`;",[],[257],"files",[161,181,192,201,210,218,227,236,245,255],"counts",{"_267":33,"_268":232,"_269":33,"_270":271,"_274":275},"pulls","branches","forks","envVars",{"_272":33,"_273":33},"count","emptyCount","connections",{"_272":33,"_276":33},"unfilledCount","contents",[279,282,285,288,291,294,297,300,303,306],{"_104":162,"_97":163,"_164":165,"_166":-5,"_167":146,"_168":169,"_170":118,"_106":280,"_101":33,"_172":173,"_174":175,"_176":22,"_177":-5,"_100":281},["D",1744511772061],[163],{"_104":182,"_97":183,"_164":184,"_166":-5,"_167":146,"_168":185,"_170":118,"_106":283,"_101":187,"_172":188,"_174":189,"_176":22,"_177":-5,"_100":284},["D",1744510929983],[183],{"_104":193,"_97":194,"_164":195,"_166":-5,"_167":146,"_168":196,"_170":118,"_106":286,"_101":187,"_172":188,"_174":198,"_176":22,"_177":-5,"_100":287},["D",1744510534783],[194],{"_104":202,"_97":203,"_164":204,"_166":-5,"_167":146,"_168":205,"_170":118,"_106":289,"_101":33,"_172":188,"_174":207,"_176":22,"_177":-5,"_100":290},["D",1744509707723],[203],{"_104":211,"_97":212,"_164":213,"_166":-5,"_167":146,"_168":187,"_170":118,"_106":292,"_101":205,"_172":188,"_174":215,"_176":22,"_177":-5,"_100":293},["D",1744509844312],[212],{"_104":219,"_97":220,"_164":221,"_166":-5,"_167":146,"_168":222,"_170":118,"_106":295,"_101":33,"_172":188,"_174":224,"_176":22,"_177":-5,"_100":296},["D",1744512291674],[220],{"_104":228,"_97":229,"_164":230,"_166":-5,"_167":146,"_168":145,"_170":118,"_106":298,"_101":232,"_172":188,"_174":233,"_176":22,"_177":-5,"_100":299},["D",1744561980601],[229],{"_104":237,"_97":238,"_164":239,"_166":-5,"_167":146,"_168":240,"_170":118,"_106":301,"_101":187,"_172":188,"_174":242,"_176":22,"_177":-5,"_100":302},["D",1744511381965],[238],{"_104":246,"_97":247,"_164":248,"_166":-5,"_167":146,"_168":249,"_170":118,"_106":304,"_101":187,"_172":251,"_174":252,"_176":22,"_177":-5,"_100":305},["D",1744512312850],[247],{"_104":256,"_97":257,"_164":116,"_166":-5,"_167":146,"_168":121,"_170":118,"_106":307,"_101":259,"_172":251,"_174":260,"_176":22,"_177":-5,"_100":308},["D",1744561962544],[257],"upstreamProject",{"_104":154,"_97":311,"_112":312,"_113":-5,"_110":111,"_23":313},"logoWorkshopOpenMoji","Project created from val URLs",{"_95":96,"_136":137},"upstreamBranch",{"_104":149,"_106":316,"_317":318,"_97":45,"_147":154,"_101":240,"_148":-5,"_150":-5,"_319":320,"_108":-5,"_158":22,"_110":111,"_157":96,"_16":123,"_156":311},["D",1743475616093],"updatedAt",["D",1744851995505],"lockfileKey","1767693431537-esm.town_v_dcm31_logoWorkshopOpenMoji@13-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.compare.$branch",{"_95":96,"_97":98,"_99":45,"_102":327,"_332":145,"_333":232,"_334":335,"_422":118,"_423":331,"_424":425,"_428":-5},{"_104":105,"_97":98,"_106":328,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":116,"_117":118,"_119":-5,"_120":121,"_122":33,"_16":123,"_124":-5,"_125":-5,"_126":127,"_128":127,"_129":130,"_131":130,"_132":130,"_133":127,"_134":127,"_23":329,"_138":330,"_143":331,"_158":22},["D",1744509707723],{"_95":96,"_136":137},{"_95":96,"_140":137,"_14":114,"_141":142},{"_101":145,"_97":45,"_104":146,"_147":105,"_148":149,"_150":151,"_152":111,"_153":154,"_155":123,"_156":98,"_157":96},"ahead","behind","diff",{"_336":337,"_176":353,"_354":355},"added",[338,345,349],{"_100":163,"_339":-7,"_340":341},"targetFile","sourceFile",{"_104":162,"_97":163,"_164":165,"_166":-5,"_167":146,"_168":169,"_170":118,"_106":171,"_101":33,"_172":173,"_174":175,"_176":22,"_177":-5,"_178":-7,"_100":342,"_343":344},[163],"contentHash","d057387ed6ef1a81bd1a3cefa7b27736452002db6b05fa60b2b639dd7e13ebce",{"_100":220,"_339":-7,"_340":346},{"_104":219,"_97":220,"_164":221,"_166":-5,"_167":146,"_168":222,"_170":118,"_106":223,"_101":33,"_172":188,"_174":224,"_176":22,"_177":-5,"_178":-7,"_100":347,"_343":348},[220],"9af50841dce487bbf1c7258a656631f6925dfc06bf2f53d689100a8e8c5b4b89",{"_100":247,"_339":-7,"_340":350},{"_104":246,"_97":247,"_164":248,"_166":-5,"_167":146,"_168":249,"_170":118,"_106":250,"_101":187,"_172":251,"_174":252,"_176":22,"_177":-5,"_178":-7,"_100":351,"_343":352},[247],"601d7921a5656c507c638c22b1ea1c136c9d00f4bfa6dbf1b04eee29440e0233",[],"modified",[356,367,378,389,400,411],{"_100":183,"_339":357,"_340":364},{"_104":358,"_97":183,"_164":359,"_166":-5,"_167":149,"_168":232,"_170":118,"_106":360,"_101":33,"_172":188,"_174":361,"_176":22,"_177":-5,"_178":-7,"_100":362,"_343":363},"f8227a72-1037-11f0-b5f4-569c3dd06744","f8227b1c-1037-11f0-b5f4-569c3dd06744",["D",1743649302063],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\n/**\n * Color picker component with swatch selection\n *\n * @param {Object} props Component props\n * @param {string} props.label Label text for the color picker\n * @param {string} props.value Current color value (hex)\n * @param {Function} props.onChange Function to call when color changes\n * @param {string[]} props.colors Array of color options to display as swatches\n * @param {string} props.description Optional description text\n */\nexport const ColorPicker = ({ label, value, onChange, colors, description }) => (\n

\n \n {label} {description && ({description})}\n \n

\n onChange(e.target.value)}\n className=\"h-10 w-10 mr-2 cursor-pointer\"\n />\n onChange(e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm\"\n />\n

\n {colors.map(color => (\n onChange(color)}\n className={`w-8 h-8 rounded-full border ${\n value === color ? \"border-blue-500 ring-2 ring-blue-200\" : \"border-gray-300\"\n }`}\n style={{ backgroundColor: color }}\n title={color}\n >\n {value === color && (\n \n \n \n )}\n \n ))}\n

\n);\n\nexport default ColorPicker;",[183],"c0b58b60d0a182f0a6b27108545f8d4adb57f6ab4175b6c38a937ad30276e933",{"_104":182,"_97":183,"_164":184,"_166":-5,"_167":146,"_168":185,"_170":118,"_106":186,"_101":187,"_172":188,"_174":189,"_176":22,"_177":-5,"_178":-7,"_100":365,"_343":366},[183],"117f935b157bbf0892e669372725d23d47dc6b0c6974a206ed1cf01a26eb594a",{"_100":194,"_339":368,"_340":375},{"_104":369,"_97":194,"_164":370,"_166":-5,"_167":149,"_168":259,"_170":118,"_106":371,"_101":33,"_172":188,"_174":372,"_176":22,"_177":-5,"_178":-7,"_100":373,"_343":374},"9e5748c6-10df-11f0-9f5b-569c3dd06744","9e574970-10df-11f0-9f5b-569c3dd06744",["D",1743721306862],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\n// Check if a color is close to white, black, or gray\nexport const isNeutralColor = (color) => {\n const r = parseInt(color.slice(1, 3), 16);\n const g = parseInt(color.slice(3, 5), 16);\n const b = parseInt(color.slice(5, 7), 16);\n\n // Check if color is grayscale\n const isGray = Math.abs(r - g) < 30 && Math.abs(g - b) < 30 && Math.abs(r - b) < 30;\n \n // Check if it's very dark or very light\n const isDarkOrLight = (r < 30 && g < 30 && b < 30) || (r > 225 && g > 225 && b > 225);\n \n return isGray || isDarkOrLight;\n};\n\n// Get a contrasting color (black or white) based on background brightness\nexport const getContrastColor = (hexColor) => {\n // Convert hex to RGB\n const r = parseInt(hexColor.slice(1, 3), 16);\n const g = parseInt(hexColor.slice(3, 5), 16);\n const b = parseInt(hexColor.slice(5, 7), 16);\n \n // Calculate perceived brightness\n // Formula: (R * 0.299 + G * 0.587 + B * 0.114)\n const brightness = (r * 0.299 + g * 0.587 + b * 0.114);\n \n // Return black for light backgrounds, white for dark\n return brightness > 150 ? \"#000000\" : \"#ffffff\";\n};\n\n// Calculate contrast ratio for WCAG accessibility\nexport const getContrast = (color1, color2) => {\n // Calculate relative luminance for both colors\n const getLuminance = (hexColor) => {\n const rgb = [\n parseInt(hexColor.slice(1, 3), 16) / 255,\n parseInt(hexColor.slice(3, 5), 16) / 255,\n parseInt(hexColor.slice(5, 7), 16) / 255\n ];\n \n const adjustedRGB = rgb.map(val => {\n return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);\n });\n \n return 0.2126 * adjustedRGB[0] + 0.7152 * adjustedRGB[1] + 0.0722 * adjustedRGB[2];\n };\n \n const l1 = getLuminance(color1);\n const l2 = getLuminance(color2);\n \n // Calculate contrast ratio\n const ratio = l1 > l2 ? (l1 + 0.05) / (l2 + 0.05) : (l2 + 0.05) / (l1 + 0.05);\n \n return ratio;\n};\n\n// Process colors extracted from SVG\nexport const processExtractedColors = (uniqueColors) => {\n // Separate neutral and non-neutral colors\n const neutrals = [];\n const nonNeutrals = [];\n\n uniqueColors.forEach(color => {\n if (isNeutralColor(color)) {\n neutrals.push(color);\n } else {\n nonNeutrals.push(color);\n }\n });\n\n // If we have non-neutral colors, prioritize them, otherwise keep neutrals\n return {\n sortedColors: [...nonNeutrals, ...neutrals],\n neutrals,\n nonNeutrals\n };\n};\n\n// Get optimal colors based on extracted colors\nexport const getOptimalColors = (nonNeutrals, neutrals) => {\n let primaryColor = \"#ea5a47\";\n let secondaryColor = \"#781e32\";\n let textColor = \"#000000\";\n let bgColor = \"#ffffff\";\n\n if (nonNeutrals.length >= 3) {\n // For vibrant emojis with 3+ colors, use a non-neutral for background\n primaryColor = nonNeutrals[0];\n secondaryColor = nonNeutrals[1];\n bgColor = nonNeutrals[2];\n // Keep text color black or white based on background contrast\n textColor = getContrastColor(nonNeutrals[2]);\n } else if (nonNeutrals.length === 2) {\n // For emojis with 2 non-neutral colors\n primaryColor = nonNeutrals[0];\n secondaryColor = nonNeutrals[1];\n // Keep default background, but consider changing it if both colors contrast well\n if (getContrast(nonNeutrals[0], \"#ffffff\") > 4.5 && \n getContrast(nonNeutrals[1], \"#ffffff\") > 4.5) {\n bgColor = nonNeutrals[0];\n primaryColor = nonNeutrals[1];\n textColor = \"#ffffff\";\n }\n } else if (nonNeutrals.length === 1) {\n // For emojis with just one non-neutral color\n primaryColor = nonNeutrals[0];\n // If we have neutral colors, use one for secondary\n if (neutrals.length > 0) {\n secondaryColor = neutrals[0];\n }\n // Consider using the non-neutral as background if it provides enough contrast\n if (getContrast(nonNeutrals[0], \"#000000\") > 4.5) {\n bgColor = nonNeutrals[0];\n textColor = \"#000000\";\n }\n } else if (neutrals.length > 0) {\n // If we only have neutral colors\n primaryColor = neutrals[0];\n if (neutrals.length > 1) {\n secondaryColor = neutrals[1];\n }\n }\n\n return { primaryColor, secondaryColor, textColor, bgColor };\n};\n\nexport default {\n isNeutralColor,\n getContrastColor,\n getContrast,\n processExtractedColors,\n getOptimalColors\n};",[194],"7ea0ded8482054c7ac8c5638fc3db8318fdb078ba1bcdec6c66c4f496c29888a",{"_104":193,"_97":194,"_164":195,"_166":-5,"_167":146,"_168":196,"_170":118,"_106":197,"_101":187,"_172":188,"_174":198,"_176":22,"_177":-5,"_178":-7,"_100":376,"_343":377},[194],"3f6fc70b1caf59a2b6b7ec531ceb777d136e752b58deaa5e422f5bb62fe18a35",{"_100":212,"_339":379,"_340":386},{"_104":380,"_97":212,"_164":381,"_166":-5,"_167":149,"_168":259,"_170":22,"_106":382,"_101":33,"_172":188,"_174":383,"_176":22,"_177":-5,"_178":-7,"_100":384,"_343":385},"9e57569a-10df-11f0-9f5b-569c3dd06744","9e575708-10df-11f0-9f5b-569c3dd06744",["D",1743721306862],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\n// Neutral colors always available\nexport const neutralColors = [\n \"#000000\",\n \"#ffffff\",\n \"#d0cfce\",\n \"#9b9b9a\",\n \"#3f3f3f\",\n];\n\n// Fonts\nexport const fontOptions = [\n { name: \"Quicksand\", value: \"'Quicksand', Arial, sans-serif\" },\n { name: \"Roboto\", value: \"'Roboto', Arial, sans-serif\" },\n { name: \"Open Sans\", value: \"'Open Sans', Arial, sans-serif\" },\n { name: \"Playfair Display\", value: \"'Playfair Display', serif\" },\n { name: \"Montserrat\", value: \"'Montserrat', Arial, sans-serif\" },\n { name: \"Lato\", value: \"'Lato', Arial, sans-serif\" },\n { name: \"Raleway\", value: \"'Raleway', Arial, sans-serif\" },\n { name: \"Source Sans Pro\", value: \"'Source Sans Pro', Arial, sans-serif\" },\n { name: \"Merriweather\", value: \"'Merriweather', serif\" },\n { name: \"PT Sans\", value: \"'PT Sans', Arial, sans-serif\" },\n { name: \"Nunito\", value: \"'Nunito', Arial, sans-serif\" },\n { name: \"Ubuntu\", value: \"'Ubuntu', Arial, sans-serif\" },\n { name: \"Rubik\", value: \"'Rubik', Arial, sans-serif\" },\n { name: \"Poppins\", value: \"'Poppins', Arial, sans-serif\" },\n { name: \"Bonoco Sans\", value: \"'Bonoco', Arial, sans-serif\" },\n { name: \"F1Rial\", value: \"'F1Rial CT Regular', Arial, sans-serif\" },\n { name: \"Original Olinda Style\", value: \"'Original Olinda Style', serif\" },\n];\n\n// Split project name into two parts\nexport const splitName = (projectName) => {\n const words = projectName.split(/\\s+/);\n let firstPart = \"\";\n let lastPart = \"\";\n\n if (words.length === 1) {\n const mid = Math.ceil(words[0].length / 2);\n firstPart = words[0].substring(0, mid);\n lastPart = words[0].substring(mid);\n } else {\n lastPart = words.pop();\n firstPart = words.join(\" \");\n }\n\n return { firstPart, lastPart };\n};\n\nexport default {\n neutralColors,\n fontOptions,\n splitName\n};",[212],"564647a69e9add7157f275d2b254f920ba7c819827f7325e32abaea7e8c5edd4",{"_104":211,"_97":212,"_164":213,"_166":-5,"_167":146,"_168":187,"_170":118,"_106":214,"_101":205,"_172":188,"_174":215,"_176":22,"_177":-5,"_178":-7,"_100":387,"_343":388},[212],"db5db7cfc2ffd87352791315b9015fa757360f5f1e5635a5737db2bbf9702214",{"_100":229,"_339":390,"_340":397},{"_104":391,"_97":229,"_164":392,"_166":-5,"_167":149,"_168":259,"_170":22,"_106":393,"_101":33,"_172":188,"_174":394,"_176":22,"_177":-5,"_178":-7,"_100":395,"_343":396},"9e575884-10df-11f0-9f5b-569c3dd06744","9e5758f2-10df-11f0-9f5b-569c3dd06744",["D",1743721306862],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\nexport const LogoPreview = ({ \n bgColor, \n fontFamily, \n fontSize, \n textColor, \n firstPart, \n lastPart, \n primaryColor, \n secondaryColor, \n emojiSvg, \n emojiX, \n emojiY, \n emojiScale \n}) => {\n return (\n

Logo Preview

\n \n \n\n \n {firstPart}\n {lastPart}\n \n\n {emojiSvg && (\n \n )}\n\n \n \n \n \n\n \n \n

\n Text is automatically centered vertically for best cross-device compatibility\n

\n );\n};\n\nexport default LogoPreview;",[229],"1e6c4da07f7b27bad19a946ccdddb31def2392ad9eedad631074c487d8335a65",{"_104":228,"_97":229,"_164":230,"_166":-5,"_167":146,"_168":145,"_170":118,"_106":231,"_101":232,"_172":188,"_174":233,"_176":22,"_177":-5,"_178":-7,"_100":398,"_343":399},[229],"3b1e7bd3155e41083c2700c3d7983f8385f901e8bb66eadd625d8714f24e3d2f",{"_100":238,"_339":401,"_340":408},{"_104":402,"_97":238,"_164":403,"_166":-5,"_167":149,"_168":151,"_170":118,"_106":404,"_101":33,"_172":188,"_174":405,"_176":22,"_177":-5,"_178":-7,"_100":406,"_343":407},"90f5857c-10e8-11f0-bbd8-569c3dd06744","90f58630-10e8-11f0-bbd8-569c3dd06744",["D",1743725149883],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\n/**\n * Client utility functions to interact with svgHost service\n */\n\n// Function to validate SVG content\nexport const validateSvg = (content: string): boolean => {\n return (\n typeof content === 'string' && \n content.trim().toLowerCase().startsWith('')\n );\n};\n\n// Function to upload SVG content to svgHost\nexport const uploadSvgToHost = async (svgContent: string, name: string): Promise<{success: boolean, id?: string, url?: string, error?: string}> => {\n try {\n // Validate the SVG\n if (!validateSvg(svgContent)) {\n return { \n success: false, \n error: \"Invalid SVG content. Please make sure your content starts with

\n \n\n

Customize Logo

\n\n

\n \n Project Name\n \n setProjectName(e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm\"\n />\n

\n\n

\n \n Font\n \n setFontFamily(e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm\"\n style={{ fontFamily: fontFamily }}\n >\n {fontOptions.map((font) => (\n \n ))}\n \n

\n\n

\n \n Font Size ({minFontSize}-{maxFontSize})\n \n

\n setFontSize(parseInt(e.target.value))}\n className=\"flex-grow\"\n />\n

\n setFontSize(parseInt(e.target.value))}\n className=\"w-12 px-1 py-1 border border-gray-300 rounded-md shadow-sm text-center\"\n />\n

\n\n

\n \n Enter Emoji (colors will be extracted)\n \n

\n setEmojiInput(e.target.value)}\n placeholder=\"Enter any emoji (e.g. 🚀, 🌟, 📱)\"\n className=\"flex-grow px-3 py-2 border border-gray-300 rounded-md shadow-sm\"\n maxLength={2}\n />\n setShowEmojiPicker(!showEmojiPicker)}\n className=\"px-3 py-2 bg-gray-200 hover:bg-gray-300 rounded-md\"\n title=\"Show emoji picker\"\n >\n 😊\n \n \n 🎲\n \n

\n\n {showEmojiPicker && (\n \n

\n )}\n\n

\n Type or paste any emoji, or use the picker. We'll convert it to an OpenMoji and extract its colors.\n

\n {loading &&

Loading emoji...

}\n {error &&

{error}

}\n\n {emojiCodepoint && !loading && !error && (\n

\n Emoji codepoint: {emojiCodepoint}\n

\n )}\n

\n\n

\n {extractedColors.length > 0\n ? (\n <>\n Extracted Color Palette\n \n These colors were automatically extracted from the emoji\n \n \n )\n : (\n <>\n Color Palette\n \n Choose colors for your logo\n \n \n )}\n

\n\n

\n \n

\n\n

\n \n

\n\n

\n \n

\n\n

\n \n

\n\n

Get SVG Code

\n \n Generate SVG\n \n \n \n {savingToHost ? \"Saving...\" : \"Save to SVG Host\"}\n \n

\n \n {/* Save status */}\n {saveSuccess !== null && (\n

\n {saveSuccess ? (\n <>\n

SVG saved successfully!

\n {savedSvgUrl && (\n

Your SVG is available at:

\n e.target.select()}\n className=\"flex-1 p-1 text-sm border border-gray-300 rounded\"\n />\n \n Copy\n \n

\n \n View in browser\n \n

\n )}\n \n ) : (\n

Error: {error || \"Failed to save SVG to host\"}

\n )}\n

\n )}\n \n {svgString && (\n

\n \n \n Copy to Clipboard\n \n

\n )}\n

\n \n );\n};\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n \n \n \n OpenMoji Logo Generator\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n \n \n

\n View source\n

\n Emoji graphics provided by OpenMoji – the open-source emoji and icon project. License: CC BY-SA 4.0\n

\n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\n body {\n font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n line-height: 1.5;\n padding: 20px;\n }\n \n /* Custom styles for emoji-mart */\n .emoji-picker-container {\n z-index: 100;\n width: 100%;\n }\n\n .emoji-picker-container em-emoji-picker {\n width: 100%;\n --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n --border-radius: 8px;\n --category-icon-size: 24px;\n }\n`;",[257],"13dc99cc8ad3084e85858e7d088dbdf0e40bc6b145d61153808fe531d1a4940e",{"_104":256,"_97":257,"_164":116,"_166":-5,"_167":146,"_168":121,"_170":118,"_106":258,"_101":259,"_172":251,"_174":260,"_176":22,"_177":-5,"_178":-7,"_100":420,"_343":421},[257],"d058578207631c7d480f99f25396e93bf73f65d455f3daede8391f302d73240d","hasChanges","sourceBranch","targetBranch",{"_104":149,"_106":426,"_317":427,"_97":45,"_147":154,"_101":240,"_148":-5,"_150":-5,"_319":320,"_108":-5,"_158":22,"_110":111,"_157":96,"_16":123,"_156":311},["D",1743475616093],["D",1744851995505],"pull","actionData","errors"]

dcm31

twoLineLogoGenerator

MergetwoLineLogoGenerator/mainintologoWorkshopOpenMoji/main

ColorPicker.tsx+52-57

ColorUtils.tsx+34-129

FontData.tsx+19-38

LogoPreview.tsx+71-46

SvgHostClient.tsx+43-59

Hindex.tsx+289-377

API_DOCS.md+95-0

LogoGenerator.tsx+424-0

Hapi.tsx+126-0