OpenMoji Logo Generator

\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;",[],[174],{"_104":184,"_95":185,"_156":186,"_158":-5,"_159":141,"_160":187,"_161":177,"_106":188,"_100":32,"_163":179,"_165":189,"_167":22,"_168":-5,"_169":190,"_98":191},"9e5748c6-10df-11f0-9f5b-569c3dd06744","ColorUtils.tsx","9e574970-10df-11f0-9f5b-569c3dd06744",5,["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};",[],[185],{"_104":193,"_95":194,"_156":195,"_158":-5,"_159":141,"_160":101,"_161":177,"_106":196,"_100":32,"_163":179,"_165":197,"_167":22,"_168":-5,"_169":198,"_98":199},"1e7e5070-1a46-11f0-affa-569c3dd06744","EmojiColorHandler.tsx","1e7e512e-1a46-11f0-affa-569c3dd06744",["D",1744754890995],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { processExtractedColors, getOptimalColors } from \"./ColorUtils.tsx\";\nimport { emojiToCodepoint } from \"./EmojiUtils.tsx\";\n\n/**\n * Custom hook for handling emoji fetching and color extraction\n */\nexport const useEmojiColorHandler = (initialEmoji = \"🚀\") => {\n const [emojiInput, setEmojiInput] = React.useState(initialEmoji);\n const [emojiCodepoint, setEmojiCodepoint] = React.useState(\"1F680\");\n const [emojiSvg, setEmojiSvg] = React.useState(\"\");\n const [loading, setLoading] = React.useState(false);\n const [error, setError] = React.useState(\"\");\n const [extractedColors, setExtractedColors] = React.useState([]);\n \n // Colors derived from emoji\n const [primaryColor, setPrimaryColor] = React.useState(\"#ea5a47\");\n const [secondaryColor, setSecondaryColor] = React.useState(\"#781e32\");\n const [textColor, setTextColor] = React.useState(\"#000000\");\n const [bgColor, setBgColor] = React.useState(\"#ffffff\");\n\n // Update when emoji changes\n React.useEffect(() => {\n if (emojiInput) {\n const codepoint = emojiToCodepoint(emojiInput);\n if (codepoint) {\n setEmojiCodepoint(codepoint);\n } else {\n setError(\"Could not convert emoji to codepoint\");\n }\n }\n }, [emojiInput]);\n\n // Fetch emoji SVG when codepoint changes\n React.useEffect(() => {\n if (emojiCodepoint) {\n fetchEmojiSvg(emojiCodepoint);\n }\n }, [emojiCodepoint]);\n\n // Fetch emoji SVG from OpenMoji\n const fetchEmojiSvg = async (codepoint) => {\n setLoading(true);\n setError(\"\");\n try {\n const response = await fetch(`https://cdn.jsdelivr.net/npm/@svgmoji/openmoji@2.0.0/svg/${codepoint}.svg`);\n\n if (!response.ok) {\n throw new Error(`Failed to fetch emoji (${response.status})`);\n }\n\n const svgContent = await response.text();\n setEmojiSvg(svgContent);\n\n // Extract colors from the SVG\n extractColorsFromSvg(svgContent);\n } catch (error) {\n console.error(\"Error fetching emoji SVG:\", error);\n setError(\"Could not load emoji. Try another one.\");\n setEmojiSvg(\"\");\n setExtractedColors([]);\n } finally {\n setLoading(false);\n }\n };\n\n // Extract colors from emoji SVG\n const extractColorsFromSvg = (svgContent) => {\n try {\n const hexColors = svgContent.match(/#[0-9A-Fa-f]{6}/g) || [];\n const uniqueColors = [...new Set(hexColors)];\n \n const { sortedColors, neutrals, nonNeutrals } = processExtractedColors(uniqueColors);\n \n if (sortedColors.length > 0) {\n setExtractedColors(sortedColors);\n\n // Get optimal colors based on what was extracted\n const colors = getOptimalColors(nonNeutrals, neutrals);\n setPrimaryColor(colors.primaryColor);\n setSecondaryColor(colors.secondaryColor);\n setTextColor(colors.textColor);\n setBgColor(colors.bgColor);\n }\n } catch (error) {\n console.error(\"Error extracting colors:\", error);\n }\n };\n\n return {\n emojiInput,\n setEmojiInput,\n emojiCodepoint,\n emojiSvg,\n loading,\n error,\n extractedColors,\n primaryColor,\n setPrimaryColor,\n secondaryColor,\n setSecondaryColor,\n textColor,\n setTextColor,\n bgColor,\n setBgColor\n };\n};\n",[],[194],{"_104":201,"_95":99,"_156":202,"_158":-5,"_159":141,"_160":187,"_161":177,"_106":203,"_100":32,"_163":179,"_165":204,"_167":22,"_168":-5,"_169":205,"_98":206},"9e575438-10df-11f0-9f5b-569c3dd06744","9e5754ba-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// 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};",[],[99],{"_104":208,"_95":209,"_156":210,"_158":-5,"_159":141,"_160":101,"_161":177,"_106":211,"_100":212,"_163":179,"_165":213,"_167":22,"_168":-5,"_169":214,"_98":215},"1e7e82c0-1a46-11f0-affa-569c3dd06744","FontData.tsx","9e575708-10df-11f0-9f5b-569c3dd06744",["D",1744754890995],1,"/** @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\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};",[],[209],{"_104":217,"_95":218,"_156":219,"_158":-5,"_159":141,"_160":101,"_161":22,"_106":220,"_100":32,"_163":179,"_165":221,"_167":22,"_168":-5,"_169":222,"_98":223},"1e7e57c8-1a46-11f0-affa-569c3dd06744","LogoGenerator.tsx","1e7e587c-1a46-11f0-affa-569c3dd06744",["D",1744754890995],"/** \n * Logo generator utility for creating SVG content\n * Works in both client and server environments\n */\n\n// Default X position for text centering - FIXED at 112px as per requirement\nconst DEFAULT_TEXT_X_POSITION = 112;\n\n/**\n * Generate the SVG string for the logo \n * Matches logoAPI implementation exactly\n */\nexport function generateLogoSVG({\n logoWidth,\n logoHeight,\n firstPart,\n lastPart, \n fontFamily,\n bgColor,\n textColor,\n primaryColor,\n secondaryColor,\n emojiSvg,\n emojiX,\n emojiY,\n emojiScale,\n topFontSize,\n bottomFontSize,\n topY, \n bottomY,\n textXPosition = DEFAULT_TEXT_X_POSITION, // Always 112 as per client requirement\n isBoldTop = true,\n isItalicTop = false,\n isBoldBottom = true,\n isItalicBottom = false,\n centerText = true, // Always centered\n singleLineMode = false,\n showGuideLines = false\n}) {\n // Always use the default text X position of 112 (fixed as per requirement)\n textXPosition = DEFAULT_TEXT_X_POSITION;\n \n return `\n\n `.trim();\n}\n\n/**\n * Create an API endpoint URL to generate a logo with the given parameters\n */\nexport function createLogoAPIUrl(baseUrl, firstPart, lastPart, fontFamily, textColor, primaryColor, secondaryColor, bgColor, emoji) {\n const url = new URL('/api', baseUrl);\n \n // Add all parameters\n url.searchParams.set('firstPart', firstPart);\n url.searchParams.set('lastPart', lastPart || '');\n \n if (emoji) url.searchParams.set('emoji', emoji);\n if (fontFamily) url.searchParams.set('fontFamily', fontFamily);\n if (textColor) url.searchParams.set('textColor', textColor);\n if (primaryColor) url.searchParams.set('accentColor', primaryColor);\n if (secondaryColor) url.searchParams.set('secondaryColor', secondaryColor);\n if (bgColor) url.searchParams.set('bgColor', bgColor);\n\n // Add a parameter for text X position - always 112 as per requirement\n url.searchParams.set('textX', DEFAULT_TEXT_X_POSITION.toString());\n\n return url.toString();\n}\n\n/**\n * Generate a downloadable filename based on project name\n */\nexport function createLogoFilename(projectName) {\n return `${projectName.replace(/[^a-z0-9]/gi, '_')}.svg`;\n}\n\n/**\n * Validate a color is a valid hex color\n */\nexport function isValidHexColor(color) {\n return /^#([0-9A-F]{3}){1,2}$/i.test(color);\n}",[],[218],{"_104":225,"_95":226,"_156":227,"_158":-5,"_159":141,"_160":101,"_161":177,"_106":228,"_100":212,"_163":179,"_165":229,"_167":22,"_168":-5,"_169":230,"_98":231},"1e7e8608-1a46-11f0-affa-569c3dd06744","LogoPreview.tsx","9e5758f2-10df-11f0-9f5b-569c3dd06744",["D",1744754890995],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useRef, useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { calculateFontSizesAndPositions } from \"./TextSizing.tsx\";\n\n// Default X position for text (centered at 112)\nconst DEFAULT_TEXT_X_POSITION = 112;\n\n// Default vertical spacing factor from the logoAPI implementation\nconst DEFAULT_VERTICAL_SPACING_FACTOR = 0.2;\n\n// Logo dimensions constants\nconst LOGO_WIDTH = 301;\nconst LOGO_HEIGHT = 113.266;\n\nexport const LogoPreview = ({ \n bgColor, \n fontFamily, \n textColor, \n firstPart, \n lastPart, \n primaryColor, \n secondaryColor, \n emojiSvg, \n emojiX, \n emojiY, \n emojiScale,\n topFontSize,\n bottomFontSize,\n topY = 42, // Default to same value as in TextSizing.tsx\n bottomY, // Will be dynamically calculated if not provided\n textXPosition = DEFAULT_TEXT_X_POSITION, // Default to 112 as per client requirement\n showGuideLines = false,\n isBoldTop = true,\n isItalicTop = false,\n isBoldBottom = true,\n isItalicBottom = false,\n centerText = true, // Always centered\n singleLineMode = false,\n yOffset = 0, // Allow shifting both lines up or down together\n verticalSpacingFactor = DEFAULT_VERTICAL_SPACING_FACTOR // Adjustable vertical spacing factor\n}) => {\n const svgRef = useRef(null);\n const [calculatedPositions, setCalculatedPositions] = useState({\n topY: topY,\n bottomY: bottomY || 70,\n actualWidth: 0\n });\n \n // Always use the default text X position of 112\n textXPosition = DEFAULT_TEXT_X_POSITION;\n \n // Available space for text\n const maxWidth = LOGO_WIDTH - emojiX - 30; // Space between text center and emoji\n const maxHeight = LOGO_HEIGHT - 20; // Reserve some vertical space\n \n // Calculate positions using exactly the same algorithm\n useEffect(() => {\n // Use the exact same algorithm as in TextSizing.tsx with the adjustable spacing factor\n const { topY: calcTopY, bottomY: calcBottomY, actualWidth } = calculateFontSizesAndPositions(\n firstPart,\n lastPart,\n maxWidth,\n maxHeight,\n fontFamily,\n null, // No SVG ref - use the same algorithm as API\n textXPosition,\n emojiX - textXPosition - 20, // Available width\n isBoldTop,\n isItalicTop,\n isBoldBottom, \n isItalicBottom,\n singleLineMode,\n verticalSpacingFactor // Use the adjustable vertical spacing factor\n );\n \n setCalculatedPositions({\n topY: calcTopY,\n bottomY: calcBottomY,\n actualWidth\n });\n }, [\n firstPart, \n lastPart, \n fontFamily, \n maxWidth,\n maxHeight,\n textXPosition,\n emojiX,\n isBoldTop,\n isItalicTop,\n isBoldBottom,\n isItalicBottom,\n singleLineMode,\n verticalSpacingFactor // Recalculate when spacing factor changes\n ]);\n \n // Use provided bottomY if available, otherwise use calculated\n const finalBottomY = bottomY || calculatedPositions.bottomY;\n const finalTopY = topY || calculatedPositions.topY;\n \n // Apply global Y offset to both lines if specified\n const adjustedTopY = finalTopY + yOffset;\n const adjustedBottomY = finalBottomY + yOffset;\n \n return (\n

Logo Preview

\n \n \n\n {/* First part of name (top line) */}\n \n {firstPart}\n \n\n {/* Second part of name (bottom line) - only shown in two-line mode */}\n {(!singleLineMode && lastPart) && (\n \n {lastPart}\n \n )}\n\n {emojiSvg && (\n \n )}\n\n \n \n \n \n\n \n \n {/* Guide lines to visualize layout */}\n {showGuideLines && (\n <>\n {/* Text center position */}\n \n \n {/* Emoji position */}\n \n \n {/* Top line baseline */}\n \n \n {/* Bottom line baseline */}\n {(!singleLineMode && lastPart) && (\n \n )}\n \n {/* Text position values */}\n \n X: {textXPosition}, Top Y: {adjustedTopY.toFixed(1)}, Bottom Y: {adjustedBottomY.toFixed(1)}\n \n \n {/* Spacing factor value */}\n \n Spacing Factor: {verticalSpacingFactor.toFixed(2)}, Spacing: {(adjustedBottomY - adjustedTopY).toFixed(1)}px\n \n \n )}\n \n

\n {singleLineMode ? (\n `Single line logo (${topFontSize}px)`\n ) : (\n `Two-line logo with top size ${topFontSize}px and bottom size ${bottomFontSize}px`\n )}\n {!singleLineMode && ` - Spacing factor: ${verticalSpacingFactor.toFixed(2)}`}\n {showGuideLines && \" (Guide lines visible)\"}\n

\n );\n};\n\nexport default LogoPreview;",[],[226],{"_104":233,"_95":234,"_156":235,"_158":-5,"_159":141,"_160":236,"_161":177,"_106":237,"_100":32,"_163":179,"_165":238,"_167":22,"_168":-5,"_169":239,"_98":240},"90f5857c-10e8-11f0-bbd8-569c3dd06744","SvgHostClient.tsx","90f58630-10e8-11f0-bbd8-569c3dd06744",8,["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 {singleLineMode ? 'Logo Text' : 'Top Line'}\n \n

\n setTopLine(e.target.value.toUpperCase())}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm\"\n placeholder={singleLineMode ? \"LOGO TEXT\" : \"TOP LINE\"}\n />\n

\n \n setIsBoldTop(!isBoldTop)}\n className=\"mr-1\"\n />\n B\n \n \n setIsItalicTop(!isItalicTop)}\n className=\"mr-1\"\n />\n I\n \n

\n \n {!singleLineMode && (\n <>\n \n Bottom Line\n \n

\n setBottomLine(e.target.value.toUpperCase())}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm\"\n placeholder=\"BOTTOM LINE\"\n />\n

\n \n setIsBoldBottom(!isBoldBottom)}\n className=\"mr-1\"\n />\n B\n \n \n setIsItalicBottom(!isItalicBottom)}\n className=\"mr-1\"\n />\n I\n \n

\n \n )}\n \n

Font sizes adjusted for equal visual width:

Top: {topFontSize}px (Y: {Math.round(topY)})
Bottom: {bottomFontSize}px (Y: {Math.round(bottomY)})
Ratio: {formattedRatio}
Width: ~{Math.round(calculatedWidth)}px
Spacing: {bottomY && topY ? Math.round(bottomY - topY) : 'N/A'}px

\n );\n};\n\n// Component for toggling between single and double line modes\nexport const ModeToggle = ({\n singleLineMode,\n toggleSingleLineMode\n}) => {\n return (\n

\n \n toggleSingleLineMode()}\n className=\"mr-2\"\n />\n Two Lines\n \n

\n \n toggleSingleLineMode()}\n className=\"mr-2\"\n />\n Single Line (changes color at space)\n \n

\n );\n};\n\n// Advanced options panel component\nexport const AdvancedOptions = ({\n showAdvancedOptions,\n customMaxWidth,\n setCustomMaxWidth,\n textXPosition,\n setTextXPosition,\n yPosition,\n setYPosition,\n showGuideLines,\n setShowGuideLines,\n verticalSpacingFactor = DEFAULT_VERTICAL_SPACING_FACTOR,\n setVerticalSpacingFactor\n}) => {\n return (\n

Layout Tuning

\n \n

\n \n Max Text Width (px): {customMaxWidth}\n \n

\n setCustomMaxWidth(parseInt(e.target.value))}\n className=\"w-full\"\n />\n setCustomMaxWidth(parseInt(e.target.value))}\n className=\"w-16 px-1 py-1 border border-gray-300 rounded text-center\"\n />\n

\n \n

\n \n Text X Position: Fixed at 112px (as required)\n \n

\n This value is fixed at 112px per requirement and cannot be changed.\n

\n \n {/* Vertical Spacing Factor Slider - updated to allow negative values */}\n

\n \n Vertical Spacing Factor: {verticalSpacingFactor.toFixed(2)} \n (Default: 0.20)\n \n

\n setVerticalSpacingFactor(parseFloat(e.target.value))}\n className=\"w-full\"\n />\n setVerticalSpacingFactor(parseFloat(e.target.value))}\n className=\"w-16 px-1 py-1 border border-gray-300 rounded text-center\"\n />\n

\n Adjusts the spacing between text lines (can be negative for tighter spacing)\n

\n \n

\n \n Text Y Offset (px): {yPosition}\n \n

\n setYPosition(parseInt(e.target.value))}\n className=\"w-full\"\n />\n setYPosition(parseInt(e.target.value))}\n className=\"w-16 px-1 py-1 border border-gray-300 rounded text-center\"\n />\n

\n Moves text up (-) or down (+)\n

\n \n

\n setShowGuideLines(!showGuideLines)}\n className=\"mr-2\"\n />\n \n Show guide lines\n \n

\n );\n};\n\n// Font selector with text alignment component\nexport const FontSelector = ({\n fontFamily,\n setFontFamily,\n fontOptions,\n centerText,\n setCenterText,\n showAdvancedOptions,\n toggleAdvancedOptions\n}) => {\n return (\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 {/* Text alignment option is now hidden since it's always centered at 112px */}\n

\n \n Text Alignment:\n \n

\n \n \n Center (fixed at 112px)\n \n

\n \n {/* Advanced layout options toggle */}\n

\n \n {showAdvancedOptions ? 'Hide Advanced Options' : 'Show Advanced Options'}\n \n

\n );\n};",[],[243],{"_104":250,"_95":251,"_156":252,"_158":-5,"_159":141,"_160":101,"_161":22,"_106":253,"_100":32,"_163":179,"_165":254,"_167":22,"_168":-5,"_169":255,"_98":256},"1e7e6c54-1a46-11f0-affa-569c3dd06744","TextSizing.tsx","1e7e6cfe-1a46-11f0-affa-569c3dd06744",["D",1744754890995],"/**\n * Utility functions for text width estimation and sizing\n * These functions work in both client and server environments\n */\n\n// Constants for text sizing calculations - EXACTLY matching logoAPI\nconst AVG_CHAR_WIDTH_FACTOR = 0.55; // Adjustment factor for average character width\nconst LINE_HEIGHT_FACTOR = 1.1; // Height factor (font size * factor)\n// Default vertical spacing factor, can be overridden by the user interface\nconst DEFAULT_VERTICAL_SPACING_FACTOR = 0.2; // Space between lines - default from logoAPI\n\n/**\n * Estimates the width of a text string based on font size and average character width.\n * This is a direct implementation from logoAPI.\n */\nexport function estimateTextWidth(text: string, fontSize: number): number {\n if (!text) return 0;\n // Basic estimation: number of characters * average width factor * font size\n // This doesn't account for variations in character widths (e.g., 'i' vs 'W').\n return text.length * AVG_CHAR_WIDTH_FACTOR * fontSize;\n}\n\n/**\n * Calculates optimal font sizes and positions for two lines of text\n * to fit within a container, aiming for equal visual width.\n * This is a direct implementation from logoAPI logic.\n */\nexport function calculateFontSizesAndPositions(\n line1: string,\n line2: string,\n maxWidth: number,\n maxHeight: number,\n fontFamily: string,\n svgRef?: React.RefObject | null,\n textXPosition: number = 112, // Fixed at 112 as per requirement\n maxDistanceToEmoji: number = 250,\n isBoldTop: boolean = true,\n isItalicTop: boolean = false,\n isBoldBottom: boolean = true,\n isItalicBottom: boolean = false,\n singleLineMode: boolean = false,\n verticalSpacingFactor: number = DEFAULT_VERTICAL_SPACING_FACTOR // Adjustable vertical spacing factor\n): {\n topFontSize: number;\n bottomFontSize: number;\n topY: number;\n bottomY: number;\n actualWidth: number;\n} {\n // Single line mode logic - split the single line at the first space\n if (singleLineMode && line1.includes(\" \")) {\n const parts = line1.split(\" \");\n const firstPart = parts[0];\n const secondPart = parts.slice(1).join(\" \");\n \n // Use the split parts instead of the original lines\n line1 = firstPart;\n line2 = secondPart;\n }\n \n // Handle empty string cases\n if (!line1 && !line2) {\n return {\n topFontSize: 40,\n bottomFontSize: 40,\n topY: 42,\n bottomY: 70,\n actualWidth: 0\n };\n }\n \n if (!line1) {\n return {\n topFontSize: 0,\n bottomFontSize: 40,\n topY: 0,\n bottomY: 42,\n actualWidth: estimateTextWidth(line2, 40)\n };\n }\n \n if (!line2 && !singleLineMode) {\n return {\n topFontSize: 40,\n bottomFontSize: 0,\n topY: 42,\n bottomY: 0,\n actualWidth: estimateTextWidth(line1, 40)\n };\n }\n\n // Estimate widths at a reference size (e.g., 100px) to find ratio\n const refSize = 100;\n const topWidthRef = estimateTextWidth(line1, refSize);\n const bottomWidthRef = line2 ? estimateTextWidth(line2, refSize) : 0;\n\n // Calculate width ratio\n const widthRatio = bottomWidthRef > 0 ? bottomWidthRef / topWidthRef : 1;\n\n // Initial Font Size Calculation (Aim for equal width)\n // Start with a reasonably large base size for the top line.\n let topFontSize = 150;\n // Calculate bottom font size to match top line's width\n let bottomFontSize = topFontSize / widthRatio;\n\n // Calculate the estimated width at these initial sizes\n let currentWidth = estimateTextWidth(line1, topFontSize);\n\n // Calculate estimated heights and combined height\n let topHeight = topFontSize * LINE_HEIGHT_FACTOR;\n let bottomHeight = bottomFontSize * LINE_HEIGHT_FACTOR;\n // Spacing relative to the smaller font size - now using the adjustable factor\n let spacing = Math.min(topFontSize, bottomFontSize) * verticalSpacingFactor;\n let combinedHeight = topHeight + bottomHeight + spacing;\n\n // Scale Down to Fit Height if necessary\n if (combinedHeight > maxHeight) {\n const scaleFactor = maxHeight / combinedHeight;\n topFontSize *= scaleFactor;\n bottomFontSize *= scaleFactor;\n // Recalculate width and heights based on new sizes\n currentWidth = estimateTextWidth(line1, topFontSize);\n topHeight = topFontSize * LINE_HEIGHT_FACTOR;\n bottomHeight = bottomFontSize * LINE_HEIGHT_FACTOR;\n spacing = Math.min(topFontSize, bottomFontSize) * verticalSpacingFactor;\n }\n\n // Scale Down to Fit Width if necessary\n if (currentWidth > maxWidth) {\n const scaleFactor = maxWidth / currentWidth;\n topFontSize *= scaleFactor;\n bottomFontSize *= scaleFactor;\n // Recalculate final heights and width\n currentWidth = estimateTextWidth(line1, topFontSize);\n topHeight = topFontSize * LINE_HEIGHT_FACTOR;\n bottomHeight = bottomFontSize * LINE_HEIGHT_FACTOR;\n spacing = Math.min(topFontSize, bottomFontSize) * verticalSpacingFactor;\n }\n\n // Calculate Vertical Positions (Y coordinates)\n // Center the entire text block vertically\n const finalCombinedHeight = topHeight + bottomHeight + spacing;\n const totalMargin = maxHeight - finalCombinedHeight;\n const topMargin = totalMargin / 2;\n\n // Y positions - THIS MATCHES logoAPI exactly, but with adjustable spacing factor\n const topY = topMargin + topHeight / 2;\n const bottomY = topY + topHeight / 2 + spacing + bottomHeight / 2;\n\n // Return calculated values, ensuring non-negative sizes\n return {\n topFontSize: Math.max(1, Math.floor(topFontSize)), // Min font size of 1\n bottomFontSize: Math.max(1, Math.floor(bottomFontSize)),\n topY,\n bottomY,\n actualWidth: currentWidth\n };\n}",[],[251],{"_104":258,"_95":259,"_156":260,"_158":-5,"_159":141,"_160":101,"_161":22,"_106":261,"_100":32,"_163":262,"_165":263,"_167":22,"_168":-5,"_169":264,"_98":265},"1e7e429c-1a46-11f0-affa-569c3dd06744","api.tsx","1e7e4350-1a46-11f0-affa-569c3dd06744",["D",1744754890995],"http","/** \n * API endpoint for generating logos with consistent sizing across client/server\n * Uses exact same text positioning algorithm as logoAPI Val\n */\nimport { fontOptions, neutralColors } from \"./FontData.tsx\";\nimport { calculateFontSizesAndPositions } from \"./TextSizing.tsx\";\nimport { generateLogoSVG, isValidHexColor } from \"./LogoGenerator.tsx\";\nimport { emojiToCodepoint } from \"./EmojiUtils.tsx\";\nimport { processExtractedColors, getOptimalColors } from \"./ColorUtils.tsx\";\n\n// Logo dimensions\nconst LOGO_WIDTH = 301;\nconst LOGO_HEIGHT = 113.266;\n// Original emoji position constants (matching web interface)\nconst EMOJI_X = 140;\nconst EMOJI_Y = 13.5;\nconst EMOJI_SCALE = 0.71;\n\n// Default text X position - always centered at 112\nconst DEFAULT_TEXT_X_POSITION = 112;\n\n// Default vertical spacing factor - now using -0.25 as requested\nconst DEFAULT_VERTICAL_SPACING_FACTOR = -0.25;\n\n// Default maxWidth - set to 153 as requested\nconst DEFAULT_MAX_WIDTH = 153;\n\n// Hard-coded Y offset value of 20\nconst Y_OFFSET = 20;\n\nexport default async function api(request: Request): Promise {\n const url = new URL(request.url);\n const params = url.searchParams;\n \n // CORS headers for preflight requests\n if (request.method === \"OPTIONS\") {\n return new Response(null, {\n headers: {\n \"Access-Control-Allow-Origin\": \"*\",\n \"Access-Control-Allow-Methods\": \"GET, OPTIONS\",\n \"Access-Control-Allow-Headers\": \"Content-Type\"\n }\n });\n }\n \n // Required parameters\n const firstPart = params.get(\"firstPart\")?.toUpperCase() || \"LOGO\";\n const lastPart = params.get(\"lastPart\")?.toUpperCase() || \"GENERATOR\";\n \n // Optional parameters with defaults\n const fontFamily = params.get(\"fontFamily\") || \"Arial, sans-serif\";\n \n // Set emoji position to match web interface exactly\n const emojiX = parseInt(params.get(\"emojiX\") || `${EMOJI_X}`);\n const emojiY = parseInt(params.get(\"emojiY\") || `${EMOJI_Y}`);\n const emojiScale = parseFloat(params.get(\"emojiScale\") || `${EMOJI_SCALE}`);\n \n // Always use fixed X position for text (112px)\n const textXPosition = DEFAULT_TEXT_X_POSITION;\n \n // Use the fixed values unless specifically overridden\n const maxWidth = parseInt(params.get(\"maxWidth\") || `${DEFAULT_MAX_WIDTH}`);\n \n // Optional text style parameters\n const isBoldTop = params.get(\"boldTop\") !== \"false\"; // Default to bold\n const isItalicTop = params.get(\"italicTop\") === \"true\"; // Default to normal\n const isBoldBottom = params.get(\"boldBottom\") !== \"false\"; // Default to bold\n const isItalicBottom = params.get(\"italicBottom\") === \"true\"; // Default to normal\n \n // Optional single line mode parameter\n const singleLineMode = params.get(\"singleLine\") === \"true\";\n \n // Always use hardcoded Y offset of 20, regardless of URL parameters\n const yOffset = Y_OFFSET;\n \n // Use vertical spacing factor from params or default to -0.25\n const vertSpacingFactor = parseFloat(params.get(\"verticalSpacingFactor\") || `${DEFAULT_VERTICAL_SPACING_FACTOR}`);\n \n // Get emoji parameter and handle emoji SVG if provided\n const emoji = params.get(\"emoji\") || \"\";\n let emojiSvg = \"\";\n let emojiCodepoint = \"\";\n let extractedColors = [];\n \n // Initial defaults for colors\n let textColor = params.get(\"textColor\");\n let accentColor = params.get(\"accentColor\");\n let secondaryColor = params.get(\"secondaryColor\");\n let bgColor = params.get(\"bgColor\");\n \n // Process emoji if provided\n if (emoji) {\n try {\n // Convert emoji to codepoint\n emojiCodepoint = emojiToCodepoint(emoji);\n \n // Fetch emoji SVG if we have a codepoint\n if (emojiCodepoint) {\n try {\n const response = await fetch(`https://cdn.jsdelivr.net/npm/@svgmoji/openmoji@2.0.0/svg/${emojiCodepoint}.svg`);\n if (response.ok) {\n const svgContent = await response.text();\n emojiSvg = svgContent;\n \n // Extract colors from emoji SVG for auto-theming (like in the web interface)\n if (!textColor || !accentColor || !secondaryColor || !bgColor) {\n // Get hex colors from SVG\n const hexColors = svgContent.match(/#[0-9A-Fa-f]{6}/g) || [];\n const uniqueColors = [...new Set(hexColors)];\n \n // Process extracted colors\n const { sortedColors, neutrals, nonNeutrals } = processExtractedColors(uniqueColors);\n extractedColors = sortedColors;\n \n // Get optimal colors\n const colors = getOptimalColors(nonNeutrals, neutrals);\n \n // Use extracted colors if not explicitly provided in params\n if (!textColor) textColor = colors.textColor;\n if (!accentColor) accentColor = colors.primaryColor;\n if (!secondaryColor) secondaryColor = colors.secondaryColor;\n if (!bgColor) bgColor = colors.bgColor;\n }\n }\n } catch (e) {\n console.error(\"Error fetching emoji SVG:\", e);\n // Continue without SVG\n }\n }\n } catch (e) {\n console.error(\"Error processing emoji:\", e);\n // Continue without emoji\n }\n }\n \n // Validate colors and set defaults if needed\n textColor = isValidHexColor(textColor) ? textColor : \"#000000\";\n accentColor = isValidHexColor(accentColor) ? accentColor : \"#ea5a47\";\n secondaryColor = isValidHexColor(secondaryColor) ? secondaryColor : \"#781e32\";\n bgColor = isValidHexColor(bgColor) ? bgColor : \"#ffffff\";\n \n // Calculate optimal font sizes using the exact same algorithm as logoAPI Val\n const { \n topFontSize,\n bottomFontSize,\n topY: calcTopY,\n bottomY: calcBottomY,\n actualWidth\n } = calculateFontSizesAndPositions(\n firstPart,\n lastPart,\n maxWidth,\n LOGO_HEIGHT - 40, // 40px padding top and bottom\n fontFamily,\n null, // No SVG ref\n textXPosition, // Always fixed at 112\n maxWidth,\n isBoldTop,\n isItalicTop,\n isBoldBottom,\n isItalicBottom,\n singleLineMode,\n vertSpacingFactor // Use the fixed vertical spacing factor (-0.25)\n );\n \n // Apply Y offset to the calculated positions\n const topY = calcTopY + yOffset;\n const bottomY = calcBottomY + yOffset;\n \n // Debug mode shows guide lines if requested\n const showGuideLines = params.get(\"debug\") === \"true\";\n \n // Generate SVG content using the same implementation as logoAPI Val\n const svgContent = generateLogoSVG({\n logoWidth: LOGO_WIDTH,\n logoHeight: LOGO_HEIGHT,\n firstPart,\n lastPart,\n fontFamily,\n bgColor,\n textColor,\n primaryColor: accentColor,\n secondaryColor,\n emojiSvg,\n emojiX,\n emojiY,\n emojiScale,\n topFontSize,\n bottomFontSize,\n topY,\n bottomY,\n textXPosition, // Always fixed at 112\n isBoldTop,\n isItalicTop,\n isBoldBottom,\n isItalicBottom,\n centerText: true, // Always center text\n singleLineMode,\n showGuideLines\n });\n \n // Decide response format based on request\n const format = params.get(\"format\")?.toLowerCase();\n \n if (format === \"json\") {\n // Return JSON response with SVG and metadata\n return new Response(\n JSON.stringify({\n success: true,\n svg: svgContent,\n meta: {\n topFontSize,\n bottomFontSize,\n topY,\n bottomY,\n textXPosition: DEFAULT_TEXT_X_POSITION, // Always 112\n maxWidth,\n actualWidth,\n singleLineMode,\n isBoldTop,\n isItalicTop,\n isBoldBottom,\n isItalicBottom,\n emoji,\n emojiCodepoint,\n emojiX,\n emojiY,\n emojiScale,\n spacing: bottomY - topY,\n verticalSpacingFactor: vertSpacingFactor,\n yOffset,\n extractedColors,\n colors: {\n textColor,\n accentColor,\n secondaryColor,\n bgColor\n }\n }\n }), \n {\n headers: {\n \"Content-Type\": \"application/json\",\n \"Access-Control-Allow-Origin\": \"*\"\n }\n }\n );\n } else {\n // Return SVG directly\n return new Response(\n svgContent,\n {\n headers: {\n \"Content-Type\": \"image/svg+xml\",\n \"Access-Control-Allow-Origin\": \"*\"\n }\n }\n );\n }\n}",[],[259],{"_104":267,"_95":268,"_156":117,"_158":-5,"_159":141,"_160":101,"_161":22,"_106":269,"_100":270,"_163":262,"_165":271,"_167":22,"_168":-5,"_169":272,"_98":273},"1e7e909e-1a46-11f0-affa-569c3dd06744","index.tsx",["D",1744754890995],6,"/** @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, neutralColors, splitName } from \"./FontData.tsx\";\nimport { getRandomEmoji } from \"./EmojiUtils.tsx\";\nimport { uploadSvgToHost } from \"./SvgHostClient.tsx\";\nimport { calculateFontSizesAndPositions } from \"./TextSizing.tsx\";\nimport { generateLogoSVG, createLogoFilename } from \"./LogoGenerator.tsx\";\nimport { useEmojiColorHandler } from \"./EmojiColorHandler.tsx\";\nimport { TextEditor, ModeToggle, AdvancedOptions, FontSelector } from \"./TextEditor.tsx\";\n\n// Logo dimensions and emoji position constants\nconst LOGO_WIDTH = 301;\nconst LOGO_HEIGHT = 113.266;\n// Original emoji position constants\nconst EMOJI_X = 140;\nconst EMOJI_Y = 13.5;\nconst EMOJI_SCALE = 0.71;\n\n// Default text X position - always centered at 112\nconst DEFAULT_TEXT_X_POSITION = 112;\n\n// Default vertical spacing factor - now using -0.25 as requested\nconst DEFAULT_VERTICAL_SPACING_FACTOR = -0.25;\n\n// Default maxWidth - set to 153 as requested\nconst DEFAULT_MAX_WIDTH = 153;\n\n// Default Y offset - set to 6 as requested\nconst DEFAULT_Y_OFFSET = 6;\n\nconst SimpleLogoGenerator = () => {\n // State variables\n const [projectName, setProjectName] = useState(\"Project Name\");\n const [topLine, setTopLine] = useState(\"PROJECT\");\n const [bottomLine, setBottomLine] = useState(\"NAME\");\n const [singleLineMode, setSingleLineMode] = useState(false);\n const [fontFamily, setFontFamily] = useState(\"Arial, sans-serif\");\n const [svgString, setSvgString] = useState(\"\");\n const [savingToHost, setSavingToHost] = useState(false);\n const [saveSuccess, setSaveSuccess] = useState(null);\n const [savedSvgUrl, setSavedSvgUrl] = useState(\"\");\n const [allColors, setAllColors] = useState([]);\n const [showEmojiPicker, setShowEmojiPicker] = useState(false);\n \n // Use our extracted emoji color handler\n const {\n emojiInput,\n setEmojiInput,\n emojiCodepoint,\n emojiSvg,\n loading,\n error,\n extractedColors,\n primaryColor,\n setPrimaryColor,\n secondaryColor,\n setSecondaryColor,\n textColor,\n setTextColor,\n bgColor,\n setBgColor\n } = useEmojiColorHandler(\"🚀\");\n \n // Text styling options\n const [isBoldTop, setIsBoldTop] = useState(true);\n const [isItalicTop, setIsItalicTop] = useState(false);\n const [isBoldBottom, setIsBoldBottom] = useState(true);\n const [isItalicBottom, setIsItalicBottom] = useState(false);\n const [centerText, setCenterText] = useState(true); // Always centered\n \n // Text sizing state variables\n const [topFontSize, setTopFontSize] = useState(40);\n const [bottomFontSize, setBottomFontSize] = useState(40);\n const [topY, setTopY] = useState(42); // Default to 42 - exact logoAPI default\n const [bottomY, setBottomY] = useState(70); // Default from logoAPI\n const [calculatedWidth, setCalculatedWidth] = useState(0);\n \n // Debug mode and layout adjustments\n const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);\n const [showGuideLines, setShowGuideLines] = useState(false);\n const [customMaxWidth, setCustomMaxWidth] = useState(DEFAULT_MAX_WIDTH); // Now defaulting to 153\n const [textXPosition, setTextXPosition] = useState(DEFAULT_TEXT_X_POSITION); // Fixed at 112\n const [yPosition, setYPosition] = useState(DEFAULT_Y_OFFSET); // Default Y offset to 6\n \n // Vertical spacing factor with default now -0.25\n const [verticalSpacingFactor, setVerticalSpacingFactor] = useState(DEFAULT_VERTICAL_SPACING_FACTOR);\n \n // Refs\n const textAreaRef = useRef(null);\n const emojiPickerContainerRef = useRef(null);\n const hiddenSvgRef = useRef(null);\n\n // Update project name when lines change\n useEffect(() => {\n if (singleLineMode) {\n setProjectName(topLine);\n } else {\n setProjectName(`${topLine} ${bottomLine}`);\n }\n }, [topLine, bottomLine, singleLineMode]);\n\n // Reset text position to default when toggling the center text option\n useEffect(() => {\n // Always force text to be centered with X at 112 as per client requirement\n setTextXPosition(DEFAULT_TEXT_X_POSITION);\n }, []);\n\n // Handle font size calculations when project name changes\n useEffect(() => {\n // Different handling based on mode\n let first, second;\n \n if (singleLineMode) {\n // In single line mode, we'll split at the first space for a color transition\n first = topLine;\n second = \"\";\n } else {\n // In two-line mode, we use both lines\n first = topLine;\n second = bottomLine;\n }\n \n // Use the custom max width value (default now 153)\n const maxWidthToUse = customMaxWidth;\n\n // Calculate optimal font sizes using our unified function with the adjustable vertical spacing factor\n const { \n topFontSize: newTopFontSize,\n bottomFontSize: newBottomFontSize,\n topY: newTopY,\n bottomY: newBottomY,\n actualWidth: newWidth\n } = calculateFontSizesAndPositions(\n first,\n second,\n maxWidthToUse,\n LOGO_HEIGHT - 20, // Reserve some vertical space for margins\n fontFamily,\n null, // Don't use DOM measurements to maintain consistency with API\n DEFAULT_TEXT_X_POSITION, // Always use fixed position (112)\n maxWidthToUse,\n isBoldTop,\n isItalicTop,\n isBoldBottom,\n isItalicBottom,\n singleLineMode,\n verticalSpacingFactor // Use the adjustable vertical spacing factor\n );\n\n // Update font sizes\n setTopFontSize(newTopFontSize);\n setBottomFontSize(newBottomFontSize);\n \n // Update Y positions with any manual offset from advanced options\n if (singleLineMode) {\n // Single line mode - adjust center position\n setTopY(newTopY + yPosition);\n } else {\n // Use the calculated values which now respect the vertical spacing factor\n setTopY(newTopY + yPosition);\n setBottomY(newBottomY + yPosition);\n }\n \n setCalculatedWidth(newWidth);\n \n }, [\n topLine, \n bottomLine,\n fontFamily, \n customMaxWidth, \n yPosition,\n singleLineMode,\n isBoldTop,\n isItalicTop,\n isBoldBottom,\n isItalicBottom,\n verticalSpacingFactor // Recalculate when spacing factor changes\n ]);\n\n // Initialize emoji picker\n useEffect(() => {\n // Only try to initialize the picker when it's supposed to be shown\n if (showEmojiPicker && window.EmojiMart && emojiPickerContainerRef.current) {\n // Clear existing picker if any\n while (emojiPickerContainerRef.current.firstChild) {\n emojiPickerContainerRef.current.removeChild(emojiPickerContainerRef.current.firstChild);\n }\n\n const pickerOptions = {\n onEmojiSelect: (emoji) => {\n setEmojiInput(emoji.native);\n setShowEmojiPicker(false);\n },\n };\n\n const picker = new window.EmojiMart.Picker(pickerOptions);\n emojiPickerContainerRef.current.appendChild(picker);\n }\n }, [showEmojiPicker]);\n\n // Update allColors when extractedColors change\n useEffect(() => {\n const combined = [...extractedColors, ...neutralColors];\n setAllColors([...new Set(combined)]);\n }, [extractedColors]);\n\n // Generate random emoji\n const handleRandomEmoji = () => {\n setEmojiInput(getRandomEmoji());\n };\n\n // Toggle advanced options\n const toggleAdvancedOptions = () => {\n setShowAdvancedOptions(!showAdvancedOptions);\n if (showAdvancedOptions) {\n // When disabling advanced options, reset to defaults\n setYPosition(DEFAULT_Y_OFFSET);\n setVerticalSpacingFactor(DEFAULT_VERTICAL_SPACING_FACTOR);\n setCustomMaxWidth(DEFAULT_MAX_WIDTH);\n }\n };\n\n // Toggle single line mode\n const toggleSingleLineMode = () => {\n setSingleLineMode(!singleLineMode);\n if (!singleLineMode) {\n // Switching to single line - combine the two lines\n setTopLine(`${topLine} ${bottomLine}`);\n } else {\n // Switching to two lines - split at first space\n const parts = topLine.split(\" \");\n if (parts.length > 1) {\n setTopLine(parts[0]);\n setBottomLine(parts.slice(1).join(\" \"));\n } else {\n // If there's no space, use the first half as top and second half as bottom\n const mid = Math.ceil(topLine.length / 2);\n setTopLine(topLine.substring(0, mid));\n setBottomLine(topLine.substring(mid));\n }\n }\n };\n\n // Generate SVG content\n const generateSVG = () => {\n const svgContent = generateLogoSVG({\n logoWidth: LOGO_WIDTH,\n logoHeight: LOGO_HEIGHT,\n firstPart: topLine,\n lastPart: bottomLine,\n fontFamily,\n bgColor,\n textColor,\n primaryColor,\n secondaryColor,\n emojiSvg,\n emojiX: EMOJI_X,\n emojiY: EMOJI_Y,\n emojiScale: EMOJI_SCALE,\n topFontSize,\n bottomFontSize,\n topY,\n bottomY,\n textXPosition: DEFAULT_TEXT_X_POSITION, // Always use fixed position (112)\n isBoldTop,\n isItalicTop,\n isBoldBottom,\n isItalicBottom,\n centerText: true, // Always center text\n singleLineMode,\n showGuideLines\n });\n \n setSvgString(svgContent);\n \n // Reset save status when generating new SVG\n setSaveSuccess(null);\n setSavedSvgUrl(\"\");\n };\n\n // Copy SVG to clipboard\n const copyToClipboard = () => {\n if (textAreaRef.current) {\n textAreaRef.current.select();\n document.execCommand(\"copy\");\n }\n };\n\n // Save SVG to host\n const saveToSvgHost = async () => {\n if (!svgString) {\n generateSVG();\n }\n \n setSavingToHost(true);\n try {\n const name = `${projectName} Logo`.trim() || \"OpenMoji Logo\";\n const result = await uploadSvgToHost(svgString, name);\n \n if (result.success) {\n setSaveSuccess(true);\n setSavedSvgUrl(result.url);\n } else {\n setSaveSuccess(false);\n console.error(result.error || \"Failed to save to SVG Host\");\n }\n } catch (err) {\n setSaveSuccess(false);\n console.error(`Error: ${err.message}`);\n } finally {\n setSavingToHost(false);\n }\n };\n\n // Copy SVG URL to clipboard\n const copySvgUrl = () => {\n if (savedSvgUrl) {\n navigator.clipboard.writeText(savedSvgUrl)\n .then(() => {\n // Show a temporary message or something\n })\n .catch(err => {\n console.error(\"Failed to copy URL to clipboard\", err);\n });\n }\n };\n\n // Calculate font size ratio\n const fontSizeRatio = bottomFontSize > 0 ? (topFontSize / bottomFontSize).toFixed(2) : 'N/A';\n\n // Use original emoji positioning constants\n const emojiXPosition = EMOJI_X;\n const emojiYPosition = EMOJI_Y;\n const emojiScaleFactor = EMOJI_SCALE;\n\n return (\n

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

Customize Logo

\n\n \n\n

\n \n\n

\n {}} // No-op function since we always center\n showAdvancedOptions={showAdvancedOptions}\n toggleAdvancedOptions={toggleAdvancedOptions}\n />\n \n {/* Advanced layout options - hide the text alignment option */}\n {showAdvancedOptions && (\n {}} // No-op function since X position is fixed\n yPosition={yPosition}\n setYPosition={setYPosition}\n showGuideLines={showGuideLines}\n setShowGuideLines={setShowGuideLines}\n verticalSpacingFactor={verticalSpacingFactor}\n setVerticalSpacingFactor={setVerticalSpacingFactor}\n />\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 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: system-ui, -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\n /* Responsive text display */\n .project-logo text {\n dominant-baseline: middle;\n }\n\n /* Responsive layout */\n @media (max-width: 640px) {\n body {\n padding: 10px;\n }\n \n .emoji-picker-container {\n max-width: 100%;\n overflow-x: auto;\n }\n }\n`;\n",[],[268],{"_104":275,"_95":276,"_156":277,"_158":-5,"_159":141,"_160":101,"_161":177,"_106":278,"_100":32,"_163":164,"_165":279,"_167":22,"_168":-5,"_169":280,"_98":281},"1e7e7492-1a46-11f0-affa-569c3dd06744","zLogoGenerator.tsx","1e7e7546-1a46-11f0-affa-569c3dd06744",["D",1744754890995],"/** \n * Logo generator utility for creating SVG content\n * Works in both client and server environments\n */\n\n/**\n * Generate the SVG string for the logo \n */\nexport function generateLogoSVG({\n logoWidth,\n logoHeight,\n firstPart,\n lastPart, \n fontFamily,\n bgColor,\n textColor,\n primaryColor,\n secondaryColor,\n emojiSvg,\n emojiX,\n emojiY,\n emojiScale,\n topFontSize,\n bottomFontSize,\n topY, \n bottomY\n}) {\n return `\n\n `.trim();\n}\n\n/**\n * Create an API endpoint URL to generate a logo with the given parameters\n */\nexport function createLogoAPIUrl(baseUrl, firstPart, lastPart, fontFamily, textColor, primaryColor, secondaryColor, bgColor) {\n const url = new URL('/generate', baseUrl);\n \n // Add all parameters\n url.searchParams.set('firstPart', firstPart);\n url.searchParams.set('lastPart', lastPart);\n \n if (fontFamily) url.searchParams.set('fontFamily', fontFamily);\n if (textColor) url.searchParams.set('textColor', textColor);\n if (primaryColor) url.searchParams.set('accentColor', primaryColor);\n if (secondaryColor) url.searchParams.set('secondaryColor', secondaryColor);\n if (bgColor) url.searchParams.set('bgColor', bgColor);\n\n return url.toString();\n}\n\n/**\n * Generate a downloadable filename based on project name\n */\nexport function createLogoFilename(projectName) {\n return `${projectName.replace(/[^a-z0-9]/gi, '_')}.svg`;\n}\n\n/**\n * Validate a color is a valid hex color\n */\nexport function isValidHexColor(color) {\n return /^#([0-9A-F]{3}){1,2}$/i.test(color);\n}\n",[],[276],{"_104":283,"_95":284,"_156":285,"_158":-5,"_159":141,"_160":101,"_161":177,"_106":286,"_100":32,"_163":164,"_165":287,"_167":22,"_168":-5,"_169":288,"_98":289},"1e7e78ac-1a46-11f0-affa-569c3dd06744","zTextSizing.tsx","1e7e7956-1a46-11f0-affa-569c3dd06744",["D",1744754890995],"/**\n * Utility functions for text width estimation and sizing\n * These functions work in both client and server environments\n */\n\n// Constants for text sizing calculations\nconst AVG_CHAR_WIDTH_FACTOR = 0.55; // Adjustment factor for average character width\nconst LINE_HEIGHT_FACTOR = 1.1; // Height factor (font size * factor)\nconst VERTICAL_SPACING_FACTOR = 0.2; // Space between lines relative to smaller font size\n\n/**\n * Estimates text width based on character count and types\n * Used for server-side calculations where DOM measurement isn't available\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\"; // Add more wide characters as needed\n const narrowChars = \"IljftT1.\"; // Add more narrow characters as needed\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 font sizes and positions for two lines of text, aiming for equal visual width\n * Works in both client-side and server-side environments\n * \n * @param line1 Top line text\n * @param line2 Bottom line text\n * @param maxWidth Maximum available width\n * @param maxHeight Maximum available height \n * @param fontFamily Font family used (affects client-side measurement)\n * @param svgRef Optional SVG ref for DOM-based measurements (client-side only)\n */\nexport function calculateFontSizesAndPositions(\n line1: string,\n line2: string,\n maxWidth: number,\n maxHeight: number,\n fontFamily: string,\n svgRef?: React.RefObject | null\n): { \n topFontSize: number; \n bottomFontSize: number; \n topY: number; \n bottomY: number;\n actualWidth: number;\n} {\n // Default result structure\n const defaultResult = {\n topFontSize: 36,\n bottomFontSize: 28,\n topY: 40,\n bottomY: 85,\n actualWidth: 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 // Handle empty string cases\n if (!line1 && !line2) return defaultResult;\n if (!line1) return { ...defaultResult, topFontSize: 0 };\n if (!line2) return { ...defaultResult, bottomFontSize: 0 };\n \n // Measure both words at a reference size to find natural width ratio\n const topWidthAt100px = measureTextWidth(line1, 100);\n const bottomWidthAt100px = measureTextWidth(line2, 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 a reasonably large base size for the top line\n let topFontSize = 60;\n // Calculate bottom font size to match top line's width\n let bottomFontSize = topFontSize / widthRatio;\n \n // Calculate the resulting width when both have the same visual width\n const equalWidth = topWidthAt100px * (topFontSize / 100);\n \n // Calculate estimated heights and combined height\n const topHeight = measureTextHeight(line1, topFontSize);\n const bottomHeight = measureTextHeight(line2, bottomFontSize);\n const spacing = Math.min(topFontSize, bottomFontSize) * VERTICAL_SPACING_FACTOR;\n const combinedHeight = topHeight + bottomHeight + spacing;\n \n // Scale down to fit height if necessary\n if (combinedHeight > maxHeight) {\n const scaleFactor = maxHeight / combinedHeight;\n topFontSize *= scaleFactor;\n bottomFontSize *= scaleFactor;\n }\n \n // Scale down to fit width if necessary\n if (equalWidth > maxWidth) {\n const scaleFactor = maxWidth / equalWidth;\n topFontSize *= scaleFactor;\n bottomFontSize *= scaleFactor;\n }\n \n // Calculate optimal vertical positions for text lines\n const finalTopHeight = measureTextHeight(line1, topFontSize);\n const finalBottomHeight = measureTextHeight(line2, bottomFontSize);\n const finalSpacing = Math.min(topFontSize, bottomFontSize) * VERTICAL_SPACING_FACTOR;\n \n // Vertical centering with correct spacing\n const totalHeight = finalTopHeight + finalBottomHeight + finalSpacing;\n const topMargin = (maxHeight - totalHeight) / 2;\n \n // Calculate Y-positions for text lines\n const topY = topMargin + finalTopHeight / 2;\n const bottomY = topY + finalTopHeight / 2 + finalSpacing + finalBottomHeight / 2;\n \n return {\n topFontSize: Math.floor(topFontSize),\n bottomFontSize: Math.floor(bottomFontSize),\n topY: Math.max(20, topY), // Ensure text doesn't go too high\n bottomY: Math.min(maxHeight - 20, bottomY), // Ensure text doesn't go too low\n actualWidth: equalWidth * (topFontSize / 100) // Actual width at final font size\n };\n } catch (error) {\n console.error(\"Error in DOM text measurement:\", error);\n // Fall back to estimation-based approach below\n }\n }\n \n // Server-side or fallback approach using estimations\n try {\n // Handle empty string cases\n if (!line1 && !line2) return defaultResult;\n if (!line1) return { ...defaultResult, topFontSize: 0 };\n if (!line2) return { ...defaultResult, bottomFontSize: 0 };\n \n // Estimate widths at reference size\n const refSize = 100;\n const topWidthRef = estimateTextWidth(line1, refSize);\n const bottomWidthRef = estimateTextWidth(line2, refSize);\n \n // Calculate width ratio\n const widthRatio = bottomWidthRef / topWidthRef;\n \n // Start with a reasonably large base size for the top line\n let topFontSize = 60;\n // Calculate bottom font size to match top line's width\n let bottomFontSize = topFontSize / widthRatio;\n \n // Calculate the estimated width at these initial sizes\n const currentWidth = topWidthRef * (topFontSize / refSize);\n \n // Calculate estimated heights and combined height\n const topHeight = topFontSize * LINE_HEIGHT_FACTOR;\n const bottomHeight = bottomFontSize * LINE_HEIGHT_FACTOR;\n const spacing = Math.min(topFontSize, bottomFontSize) * VERTICAL_SPACING_FACTOR;\n const combinedHeight = topHeight + bottomHeight + spacing;\n \n // Scale down to fit height if necessary\n if (combinedHeight > maxHeight) {\n const scaleFactor = maxHeight / combinedHeight;\n topFontSize *= scaleFactor;\n bottomFontSize *= scaleFactor;\n }\n \n // Scale down to fit width if necessary\n if (currentWidth > maxWidth) {\n const scaleFactor = maxWidth / currentWidth;\n topFontSize *= scaleFactor;\n bottomFontSize *= scaleFactor;\n }\n \n // Calculate vertical positions\n // Use consistent positions for top and bottom lines\n const topY = 40; // Optimized for logo layout\n const bottomY = 85; // Optimized for logo layout\n \n return {\n topFontSize: Math.floor(topFontSize),\n bottomFontSize: Math.floor(bottomFontSize),\n topY,\n bottomY,\n actualWidth: currentWidth * (topFontSize / 100) // Actual width at final font size\n };\n } catch (error) {\n console.error(\"Error in text size estimation:\", error);\n return defaultResult;\n }\n}\n",[],[284],"files",[153,172,183,192,200,207,216,224,232,241,249,257,266,274,282],"counts",{"_294":187,"_295":187,"_296":212,"_297":298},"pulls","branches","forks","envVars",{"_299":32,"_300":32},"count","emptyCount","contents",[],{"_104":201,"_95":99,"_156":202,"_158":-5,"_159":141,"_160":187,"_161":177,"_106":304,"_100":32,"_163":179,"_165":204,"_167":22,"_168":-5,"_98":305},["D",1743721306862],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":314,"_151":319,"_290":365,"_164":366,"_301":368,"_369":-5,"_370":-5,"_371":-5,"_372":-5,"_373":374},{"_104":105,"_95":96,"_106":315,"_108":-5,"_109":22,"_110":111,"_112":113,"_114":-5,"_14":115,"_116":117,"_118":22,"_119":-5,"_120":121,"_122":32,"_16":123,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":125,"_23":316,"_136":317,"_139":318,"_150":22},["D",1743475616093],{"_93":94,"_134":135},{"_93":94,"_138":135,"_14":115},{"_100":121,"_95":43,"_104":141,"_142":105,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":-5,"_148":96,"_149":94},[320,323,326,329,332,335,338,341,344,347,350,353,356,359,362],{"_104":154,"_95":155,"_156":157,"_158":-5,"_159":141,"_160":101,"_161":22,"_106":162,"_100":32,"_163":164,"_165":166,"_167":22,"_168":-5,"_169":321,"_98":322},[],[155],{"_104":173,"_95":174,"_156":175,"_158":-5,"_159":141,"_160":176,"_161":177,"_106":178,"_100":32,"_163":179,"_165":180,"_167":22,"_168":-5,"_169":324,"_98":325},[],[174],{"_104":184,"_95":185,"_156":186,"_158":-5,"_159":141,"_160":187,"_161":177,"_106":188,"_100":32,"_163":179,"_165":189,"_167":22,"_168":-5,"_169":327,"_98":328},[],[185],{"_104":193,"_95":194,"_156":195,"_158":-5,"_159":141,"_160":101,"_161":177,"_106":196,"_100":32,"_163":179,"_165":197,"_167":22,"_168":-5,"_169":330,"_98":331},[],[194],{"_104":201,"_95":99,"_156":202,"_158":-5,"_159":141,"_160":187,"_161":177,"_106":203,"_100":32,"_163":179,"_165":204,"_167":22,"_168":-5,"_169":333,"_98":334},[],[99],{"_104":208,"_95":209,"_156":210,"_158":-5,"_159":141,"_160":101,"_161":177,"_106":211,"_100":212,"_163":179,"_165":213,"_167":22,"_168":-5,"_169":336,"_98":337},[],[209],{"_104":217,"_95":218,"_156":219,"_158":-5,"_159":141,"_160":101,"_161":22,"_106":220,"_100":32,"_163":179,"_165":221,"_167":22,"_168":-5,"_169":339,"_98":340},[],[218],{"_104":225,"_95":226,"_156":227,"_158":-5,"_159":141,"_160":101,"_161":177,"_106":228,"_100":212,"_163":179,"_165":229,"_167":22,"_168":-5,"_169":342,"_98":343},[],[226],{"_104":233,"_95":234,"_156":235,"_158":-5,"_159":141,"_160":236,"_161":177,"_106":237,"_100":32,"_163":179,"_165":238,"_167":22,"_168":-5,"_169":345,"_98":346},[],[234],{"_104":242,"_95":243,"_156":244,"_158":-5,"_159":141,"_160":101,"_161":177,"_106":245,"_100":32,"_163":179,"_165":246,"_167":22,"_168":-5,"_169":348,"_98":349},[],[243],{"_104":250,"_95":251,"_156":252,"_158":-5,"_159":141,"_160":101,"_161":22,"_106":253,"_100":32,"_163":179,"_165":254,"_167":22,"_168":-5,"_169":351,"_98":352},[],[251],{"_104":258,"_95":259,"_156":260,"_158":-5,"_159":141,"_160":101,"_161":22,"_106":261,"_100":32,"_163":262,"_165":263,"_167":22,"_168":-5,"_169":354,"_98":355},[],[259],{"_104":267,"_95":268,"_156":117,"_158":-5,"_159":141,"_160":101,"_161":22,"_106":269,"_100":270,"_163":262,"_165":271,"_167":22,"_168":-5,"_169":357,"_98":358},[],[268],{"_104":275,"_95":276,"_156":277,"_158":-5,"_159":141,"_160":101,"_161":177,"_106":278,"_100":32,"_163":164,"_165":279,"_167":22,"_168":-5,"_169":360,"_98":361},[],[276],{"_104":283,"_95":284,"_156":285,"_158":-5,"_159":141,"_160":101,"_161":177,"_106":286,"_100":32,"_163":164,"_165":287,"_167":22,"_168":-5,"_169":363,"_98":364},[],[284],[320,323,326,329,332,335,338,341,344,347,350,353,356,359,362],{"_104":201,"_95":99,"_156":202,"_158":-5,"_159":141,"_160":187,"_161":177,"_106":304,"_100":32,"_163":179,"_165":204,"_167":22,"_168":-5,"_98":367},[99],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]

dcm31

logoWorkshopOpenMoji