\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],{"_102":183,"_95":184,"_153":185,"_155":-5,"_156":138,"_157":186,"_159":160,"_104":187,"_99":32,"_163":178,"_165":188,"_167":22,"_168":-5,"_169":189,"_98":190},"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};",[],[184],{"_102":192,"_95":193,"_153":194,"_155":-5,"_156":138,"_157":195,"_159":160,"_104":196,"_99":32,"_163":178,"_165":197,"_167":22,"_168":-5,"_169":198,"_98":199},"1e7e5070-1a46-11f0-affa-569c3dd06744","EmojiColorHandler.tsx","1e7e512e-1a46-11f0-affa-569c3dd06744",9,["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",[],[193],{"_102":201,"_95":202,"_153":203,"_155":-5,"_156":138,"_157":186,"_159":160,"_104":204,"_99":32,"_163":178,"_165":205,"_167":22,"_168":-5,"_169":206,"_98":207},"9e575438-10df-11f0-9f5b-569c3dd06744","EmojiUtils.tsx","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};",[],[202],{"_102":209,"_95":210,"_153":211,"_155":-5,"_156":138,"_157":195,"_159":160,"_104":212,"_99":213,"_163":178,"_165":214,"_167":22,"_168":-5,"_169":215,"_98":216},"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};",[],[210],{"_102":218,"_95":219,"_153":220,"_155":-5,"_156":138,"_157":221,"_159":160,"_104":222,"_99":162,"_163":178,"_165":223,"_167":22,"_168":-5,"_169":224,"_98":225},"347fa01e-1aef-11f0-a4e9-569c3dd06744","LogoGenerator.tsx","1e7e587c-1a46-11f0-affa-569c3dd06744",12,["D",1744827512859],"/** \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 // For single-line mode with a space in firstPart, we need special handling for the SVG\n // Instead of splitting it into two text elements, we'll use a single text element with tspans\n let svgContent = '';\n \n if (singleLineMode && firstPart.includes(' ')) {\n // Split the first part at the first space\n const spaceIndex = firstPart.indexOf(' ');\n const firstWord = firstPart.substring(0, spaceIndex);\n const restOfText = firstPart.substring(spaceIndex + 1);\n \n // Create a single text element with two tspans for different colors\n // Both parts use topFontSize since we want same size for single-line mode\n svgContent = `\n\n `.trim();\n } else {\n // Standard two-line or single-line without space rendering\n svgContent = `\n\n `.trim();\n }\n \n return svgContent;\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 // Only add emoji parameter if specified, otherwise it will use the SDK fallback\n if (emoji) url.searchParams.set('emoji', emoji);\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 // 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}",[],[219],{"_102":227,"_95":228,"_153":229,"_155":-5,"_156":138,"_157":195,"_159":160,"_104":230,"_99":213,"_163":178,"_165":231,"_167":22,"_168":-5,"_169":232,"_98":233},"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;",[],[228],{"_102":235,"_95":236,"_153":237,"_155":-5,"_156":138,"_157":118,"_159":160,"_104":238,"_99":32,"_163":164,"_165":239,"_167":22,"_168":-5,"_169":240,"_98":241},"354aa848-1b28-11f0-8274-569c3dd06744","SDK_README.md","354aa8c0-1b28-11f0-8274-569c3dd06744",["D",1744851995505],"# LogoWorkshopOpenMoji SDK\n\nThis SDK provides direct programmatic access to the LogoWorkshopOpenMoji logo generation engine. Rather than making HTTP API calls, you can use this SDK to generate logos directly in your code.\n\n## Installation/Import\n\nImport the SDK directly from Val Town:\n\n```typescript\n// Import the default SDK constructor\nimport LogoWorkshopSDK from \"https://esm.town/v/dcm31/logoWorkshopOpenMoji/sdk.tsx\";\n\n// Or import the pre-configured instance\nimport { logoWorkshopSDK } from \"https://esm.town/v/dcm31/logoWorkshopOpenMoji/sdk.tsx\";\n\n// Or import everything\nimport LogoWorkshopSDK, { logoWorkshopSDK, LogoGeneratorOptions } from \"https://esm.town/v/dcm31/logoWorkshopOpenMoji/sdk.tsx\";\n```\n\n## Basic Usage\n\n```typescript\n// Use the pre-configured instance\nimport { logoWorkshopSDK } from \"https://esm.town/v/dcm31/logoWorkshopOpenMoji/sdk.tsx\";\n\n// Generate a simple logo\nconst result = await logoWorkshopSDK.generateLogo({\n words: \"Developer Hub\",\n emoji: \"👨‍💻\"\n});\n\n// The SVG string is available in result.svg\nconsole.log(result.svg);\n\n// Metadata about the logo is available in result.meta\nconsole.log(`Font sizes: ${result.meta.topFontSize}px and ${result.meta.bottomFontSize}px`);\n```\n\n### Shorthand for SVG Only\n\nIf you only need the SVG output:\n\n```typescript\nconst svgString = await logoWorkshopSDK.generateLogoSvg({\n words: \"Developer Hub\",\n emoji: \"👨‍💻\"\n});\n\nconsole.log(svgString);\n```\n\n## Creating a Custom Instance\n\nYou can create your own instance with custom settings:\n\n```typescript\nimport LogoWorkshopSDK from \"https://esm.town/v/dcm31/logoWorkshopOpenMoji/sdk.tsx\";\n\n// Create instance with custom emoji service URL\nconst mySDK = new LogoWorkshopSDK(\"https://my-custom-emoji-service.example.com\");\n\nconst result = await mySDK.generateLogo({\n // options\n});\n```\n\n## Configuration Options\n\nThe SDK accepts the same options as the HTTP API:\n\n```typescript\ntype LogoGeneratorOptions = {\n // Required parameters (at least one of these)\n firstPart?: string; // Text for top line or full text in single line mode\n lastPart?: string; // Text for bottom line (ignored in single line mode)\n words?: string; // All text (will be split automatically)\n \n // Display options\n auto?: boolean; // Auto determine mode based on length (default: true)\n singleLine?: boolean; // Force single line mode (default: auto-determined)\n \n // Text styling\n fontFamily?: string; // Font family (default: \"Arial, sans-serif\")\n textColor?: string; // Hex color for text (default: \"#000000\")\n accentColor?: string; // Hex color for accents (default: \"#ea5a47\")\n secondaryColor?: string; // Hex color for bottom strip (default: \"#781e32\")\n bgColor?: string; // Hex color for background (default: \"#ffffff\")\n boldTop?: boolean; // Bold for top line (default: true)\n italicTop?: boolean; // Italic for top line (default: false)\n boldBottom?: boolean; // Bold for bottom line (default: true)\n italicBottom?: boolean; // Italic for bottom line (default: false)\n \n // Layout and positioning \n emojiX?: number; // X position for emoji (default: 140)\n emojiY?: number; // Y position for emoji (default: 13.5)\n emojiScale?: number; // Scale factor for emoji (default: 0.71)\n verticalSpacingFactor?: number; // Line spacing (default: -0.25)\n \n // Special features\n emoji?: string; // Emoji character to use\n debug?: boolean; // Show guide lines (default: false)\n \n // Emoji auto-generation\n useEmojiSdk?: boolean; // Use emoji generator if none specified (default: true)\n emojiSdkUrl?: string; // Custom emoji service URL\n};\n```\n\n## Response Structure\n\nThe `generateLogo()` method returns a promise that resolves to:\n\n```typescript\ntype LogoGeneratorResult = {\n svg: string; // The complete SVG string\n meta: {\n // Font sizes\n topFontSize: number;\n bottomFontSize: number;\n \n // Positioning\n topY: number;\n bottomY: number;\n textXPosition: number;\n maxWidth: number;\n actualWidth: number;\n \n // Mode settings\n singleLineMode: boolean;\n autoMode: boolean;\n \n // Text content\n originalWords: string;\n firstPart: string;\n lastPart: string;\n totalCharCount: number;\n characterThreshold: number;\n \n // Text styling\n isBoldTop: boolean;\n isItalicTop: boolean;\n isBoldBottom: boolean;\n isItalicBottom: boolean;\n \n // Emoji details\n emoji: string;\n emojiCodepoint: string;\n emojiX: number;\n emojiY: number;\n emojiScale: number;\n \n // Spacing details\n spacing: number;\n verticalSpacingFactor: number;\n yOffset: number;\n \n // Colors\n extractedColors: string[];\n colors: {\n textColor: string;\n accentColor: string;\n secondaryColor: string;\n bgColor: string;\n };\n \n // Additional info\n usedEmojiSdk: boolean;\n };\n};\n```\n\n## Examples\n\n### Basic Two-Line Logo\n\n```typescript\nconst result = await logoWorkshopSDK.generateLogo({\n firstPart: \"CLOUD\",\n lastPart: \"COMPUTING\",\n emoji: \"☁️\"\n});\n```\n\n### Single-Line Mode\n\n```typescript\nconst result = await logoWorkshopSDK.generateLogo({\n words: \"DevHub\",\n emoji: \"👨‍💻\",\n singleLine: true\n});\n```\n\n### Custom Colors\n\n```typescript\nconst result = await logoWorkshopSDK.generateLogo({\n words: \"Ocean Life\",\n emoji: \"🐬\",\n textColor: \"#003366\",\n accentColor: \"#0099cc\",\n secondaryColor: \"#006699\",\n bgColor: \"#f0f8ff\"\n});\n```\n\n### Auto-Generated Emoji\n\n```typescript\nconst result = await logoWorkshopSDK.generateLogo({\n words: \"AI Assistant\",\n // No emoji specified, will use EmojiSummarizer to generate one\n useEmojiSdk: true\n});\n```\n\n### Debug Mode\n\n```typescript\nconst result = await logoWorkshopSDK.generateLogo({\n words: \"Test Logo\",\n debug: true // Shows guide lines for positioning\n});\n```\n\n## Integration with HTML\n\n```typescript\nimport { logoWorkshopSDK } from \"https://esm.town/v/dcm31/logoWorkshopOpenMoji/sdk.tsx\";\n\n// In a browser environment:\nasync function updateLogo() {\n const words = document.getElementById(\"logoText\").value;\n const svgString = await logoWorkshopSDK.generateLogoSvg({ words });\n document.getElementById(\"logoContainer\").innerHTML = svgString;\n}\n```\n\n## Key Limitations\n\n- The SDK does not support custom sizing of the overall logo (fixed at 301x113.266)\n- Only OpenMoji emoji set is supported\n- Text X position is fixed at 112px and cannot be changed\n- Single-line mode requires at least one space in the text to trigger the color split effect",[],[236],{"_102":243,"_95":244,"_153":245,"_155":-5,"_156":138,"_157":246,"_159":160,"_104":247,"_99":32,"_163":178,"_165":248,"_167":22,"_168":-5,"_169":249,"_98":250},"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};",[],[253],{"_102":260,"_95":261,"_153":262,"_155":-5,"_156":138,"_157":263,"_159":160,"_104":264,"_99":213,"_163":178,"_165":265,"_167":22,"_168":-5,"_169":266,"_98":267},"c9a150d6-1a61-11f0-aa9e-569c3dd06744","TextSizing.tsx","1e7e6cfe-1a46-11f0-affa-569c3dd06744",10,["D",1744766774482],"/**\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 // Handle single line mode specially for size calculations\n let firstPart = line1;\n let secondPart = line2;\n let useSameSize = false;\n \n // Single line mode logic - split the single line at the first space\n if (singleLineMode && line1.includes(\" \")) {\n const spaceIndex = line1.indexOf(' ');\n firstPart = line1.substring(0, spaceIndex);\n secondPart = line1.substring(spaceIndex + 1);\n useSameSize = true; // For single-line mode, use the same font size for both parts\n }\n \n // Handle empty string cases\n if (!firstPart && !secondPart) {\n return {\n topFontSize: 40,\n bottomFontSize: 40,\n topY: 42,\n bottomY: 70,\n actualWidth: 0\n };\n }\n \n if (!firstPart) {\n return {\n topFontSize: 0,\n bottomFontSize: 40,\n topY: 0,\n bottomY: 42,\n actualWidth: estimateTextWidth(secondPart, 40)\n };\n }\n \n if (!secondPart && !singleLineMode) {\n return {\n topFontSize: 40,\n bottomFontSize: 0,\n topY: 42,\n bottomY: 0,\n actualWidth: estimateTextWidth(firstPart, 40)\n };\n }\n\n // For single-line mode, estimate the combined width of both parts with space\n let initialFontSize;\n let currentWidth;\n \n if (useSameSize && singleLineMode) {\n // For single-line mode, use a single font size based on the combined text\n // to ensure both parts have the same size\n const combinedText = firstPart + \" \" + secondPart;\n initialFontSize = 150; // Start with large size\n currentWidth = estimateTextWidth(combinedText, initialFontSize);\n \n // Scale down to fit width if necessary\n if (currentWidth > maxWidth) {\n initialFontSize = (initialFontSize * maxWidth) / currentWidth;\n currentWidth = estimateTextWidth(combinedText, initialFontSize);\n }\n \n // Use the same size for both parts\n const topFontSize = Math.max(1, Math.floor(initialFontSize));\n const bottomFontSize = topFontSize;\n \n // For single-line mode, place the text in the vertical center\n const topY = maxHeight / 2;\n const bottomY = topY; // Not really used in single-line mode with tspans\n \n return {\n topFontSize,\n bottomFontSize,\n topY,\n bottomY,\n actualWidth: currentWidth\n };\n } else {\n // Standard two-line logic for different font sizes\n // Estimate widths at a reference size (e.g., 100px) to find ratio\n const refSize = 100;\n const topWidthRef = estimateTextWidth(firstPart, refSize);\n const bottomWidthRef = secondPart ? estimateTextWidth(secondPart, 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 currentWidth = estimateTextWidth(firstPart, 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(firstPart, 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(firstPart, 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 }\n}",[],[261],{"_102":269,"_95":270,"_153":271,"_155":-5,"_156":138,"_157":221,"_159":160,"_104":272,"_99":176,"_163":273,"_165":274,"_167":22,"_168":-5,"_169":275,"_98":276},"347fc27e-1aef-11f0-a4e9-569c3dd06744","api.tsx","1e7e4350-1a46-11f0-affa-569c3dd06744",["D",1744827512859],"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\";\nimport { EmojiSummarizerSDK } from \"https://esm.town/v/dcm31/texttoemoji\";\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 values\nconst DEFAULT_MAX_WIDTH = 153; // For two-line mode (stays fixed)\nconst SINGLE_LINE_MAX_WIDTH = 175; // For single-line mode (fixed value as requested)\n\n// Y offset values\nconst DEFAULT_TWO_LINE_Y_OFFSET = 20; // For two-line mode (stays fixed)\nconst SINGLE_LINE_Y_OFFSET = 17; // For single-line mode (fixed value as requested)\n\n// Character threshold for auto mode (one-line vs two-line)\nconst CHARACTER_THRESHOLD = 10;\n\n// Emoji SDK URL\nconst EMOJI_SDK_URL = \"https://dcm31-texttoemoji.web.val.run\";\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 // Get input words - could be provided as firstPart/lastPart or words parameter\n let firstPart = params.get(\"firstPart\") || \"\";\n let lastPart = params.get(\"lastPart\") || \"\";\n \n // New words parameter that can be used for both modes\n const words = params.get(\"words\") || \"\";\n \n // If words parameter is provided, use that instead of firstPart/lastPart\n if (words) {\n const wordParts = words.split(\" \");\n if (wordParts.length >= 2) {\n // If multiple words, use first word as firstPart and rest as lastPart\n firstPart = wordParts[0];\n lastPart = wordParts.slice(1).join(\" \");\n } else {\n // If only one word, use it as firstPart\n firstPart = words;\n }\n }\n \n // Set defaults if no text is provided\n if (!firstPart && !lastPart) {\n firstPart = \"Logo\";\n lastPart = \"Generator\";\n }\n \n // Calculate total character count for auto mode\n const totalCharCount = firstPart.length + lastPart.length;\n \n // Optional parameters with defaults\n const fontFamily = params.get(\"fontFamily\") || \"Arial, sans-serif\";\n \n // Determine mode based on character count or explicit parameter\n let singleLineMode = params.get(\"singleLine\") === \"true\";\n let autoMode = params.get(\"auto\") !== \"false\" && !params.has(\"singleLine\"); // Auto mode if not explicitly set\n \n if (autoMode) {\n // If auto mode, determine based on character count\n singleLineMode = totalCharCount <= CHARACTER_THRESHOLD;\n }\n \n // Process text based on mode\n let processedFirstPart, processedLastPart;\n \n if (singleLineMode) {\n // If single line mode, we need to make sure there's a space\n if (!firstPart.includes(\" \") && lastPart) {\n // If no space in firstPart but we have lastPart, combine them with a space\n processedFirstPart = `${firstPart} ${lastPart}`;\n processedLastPart = \"\";\n } else {\n // Otherwise, keep firstPart as is\n processedFirstPart = firstPart;\n processedLastPart = lastPart;\n }\n \n // For single line without a space, add a space to ensure proper rendering\n // This is for the case when there's only one word in single line mode\n if (!processedFirstPart.includes(\" \") && processedFirstPart.length > 0) {\n // Add a non-breaking space at the end to ensure proper y-offset\n // This space won't be visible but ensures correct positioning\n processedFirstPart = `${processedFirstPart} `;\n }\n } else {\n // Two-line mode - convert to uppercase\n processedFirstPart = firstPart.toUpperCase();\n processedLastPart = lastPart.toUpperCase();\n }\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 // 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 // Set different parameters for single-line vs two-line mode\n let yOffset, maxWidth;\n \n if (singleLineMode) {\n // For single-line mode, use fixed values as requested\n yOffset = SINGLE_LINE_Y_OFFSET;\n maxWidth = SINGLE_LINE_MAX_WIDTH;\n } else {\n // For two-line mode, use fixed values to ensure it stays perfect\n yOffset = DEFAULT_TWO_LINE_Y_OFFSET;\n maxWidth = DEFAULT_MAX_WIDTH;\n }\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 let emoji = params.get(\"emoji\") || \"\";\n let emojiSvg = \"\";\n let emojiCodepoint = \"\";\n let extractedColors = [];\n let usedEmojiSdk = false;\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 // If emoji is not provided, use the EmojiSummarizerSDK to generate one based on the text\n if (!emoji) {\n try {\n const textToSummarize = `${firstPart} ${lastPart}`.trim();\n const sdk = new EmojiSummarizerSDK(EMOJI_SDK_URL);\n const result = await sdk.summarize(textToSummarize);\n \n if (result && result.emoji) {\n emoji = result.emoji;\n usedEmojiSdk = true;\n console.log(`Generated emoji ${emoji} for text \"${textToSummarize}\" using SDK`);\n }\n } catch (e) {\n console.error(\"Error using EmojiSummarizerSDK:\", e);\n // Fall back to default emoji if SDK fails\n emoji = \"🚀\";\n }\n }\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 processedFirstPart,\n processedLastPart,\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 // For single line without a space, we need to make sure we trim any trailing space\n // that was added for positioning purposes\n let displayFirstPart = processedFirstPart;\n let displayLastPart = processedLastPart;\n \n if (singleLineMode && !firstPart.includes(\" \") && !lastPart && processedFirstPart.endsWith(\" \")) {\n displayFirstPart = processedFirstPart.trim();\n }\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: displayFirstPart,\n lastPart: displayLastPart,\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 autoMode,\n originalWords: words || `${firstPart} ${lastPart}`.trim(),\n firstPart: displayFirstPart,\n lastPart: displayLastPart,\n totalCharCount,\n characterThreshold: CHARACTER_THRESHOLD,\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 usedEmojiSdk\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}",[],[270],{"_102":278,"_95":279,"_153":280,"_155":-5,"_156":138,"_157":118,"_159":160,"_104":281,"_99":32,"_163":178,"_165":282,"_167":22,"_168":-5,"_169":283,"_98":284},"354a6c66-1b28-11f0-8274-569c3dd06744","example.tsx","354a6d10-1b28-11f0-8274-569c3dd06744",["D",1744851995505],"/**\n * LogoWorkshopOpenMoji SDK Example\n * \n * This example demonstrates how to use the SDK to generate logos programmatically.\n */\nimport { logoWorkshopSDK } from \"./sdk.tsx\";\n\n/**\n * Example function that demonstrates different ways to use the SDK\n */\nexport default async function sdkExample() {\n console.log(\"LogoWorkshopOpenMoji SDK Example\");\n \n // Example 1: Basic usage with words parameter\n const example1 = await logoWorkshopSDK.generateLogo({\n words: \"Developer Hub\",\n emoji: \"👨‍💻\"\n });\n \n console.log(\"\\nExample 1: Basic usage with words parameter\");\n console.log(`SVG Size: ${example1.svg.length} bytes`);\n console.log(`Top Font Size: ${example1.meta.topFontSize}px`);\n console.log(`Bottom Font Size: ${example1.meta.bottomFontSize}px`);\n console.log(`Mode: ${example1.meta.singleLineMode ? \"Single-line\" : \"Two-line\"}`);\n \n // Example 2: Using separate first/last part parameters and custom colors\n const example2 = await logoWorkshopSDK.generateLogo({\n firstPart: \"CLOUD\",\n lastPart: \"COMPUTING\",\n emoji: \"☁️\",\n textColor: \"#003366\",\n accentColor: \"#0099cc\",\n secondaryColor: \"#006699\",\n bgColor: \"#f0f8ff\"\n });\n \n console.log(\"\\nExample 2: Using separate first/last part parameters and custom colors\");\n console.log(`SVG Size: ${example2.svg.length} bytes`);\n console.log(`Colors Used: ${JSON.stringify(example2.meta.colors)}`);\n console.log(`Emoji Codepoint: ${example2.meta.emojiCodepoint}`);\n \n // Example 3: Using single-line mode explicitly\n const example3 = await logoWorkshopSDK.generateLogo({\n words: \"DevHub\",\n singleLine: true\n });\n \n console.log(\"\\nExample 3: Using single-line mode explicitly\");\n console.log(`SVG Size: ${example3.svg.length} bytes`);\n console.log(`Single Line Mode: ${example3.meta.singleLineMode}`);\n console.log(`Emoji Used: ${example3.meta.emoji}`);\n console.log(`Used Emoji SDK: ${example3.meta.usedEmojiSdk}`);\n \n // Example 4: Auto-generated emoji based on text\n const example4 = await logoWorkshopSDK.generateLogo({\n words: \"AI Assistant\",\n // No emoji specified - will use EmojiSummarizerSDK\n });\n \n console.log(\"\\nExample 4: Auto-generated emoji based on text\");\n console.log(`Auto-generated Emoji: ${example4.meta.emoji}`);\n console.log(`Used Emoji SDK: ${example4.meta.usedEmojiSdk}`);\n \n // Example 5: Just getting the SVG string directly\n const svgString = await logoWorkshopSDK.generateLogoSvg({\n words: \"Quick SVG\",\n emoji: \"🚀\"\n });\n \n console.log(\"\\nExample 5: Just getting the SVG string directly\");\n console.log(`SVG String Size: ${svgString.length} bytes`);\n console.log(`SVG Starts With: ${svgString.substring(0, 50)}...`);\n \n // Example 6: Using debug mode\n const example6 = await logoWorkshopSDK.generateLogo({\n words: \"Debug Mode\",\n emoji: \"🐞\",\n debug: true\n });\n \n console.log(\"\\nExample 6: Using debug mode\");\n console.log(`Debug Mode Enabled: ${example6.svg.includes(\"guidelines\")}`);\n \n // Return a summary of all examples\n return {\n message: \"SDK examples completed successfully\",\n examples: [\n { id: 1, words: \"Developer Hub\", emoji: \"👨‍💻\", singleLine: example1.meta.singleLineMode },\n { id: 2, words: \"CLOUD COMPUTING\", emoji: \"☁️\", singleLine: example2.meta.singleLineMode },\n { id: 3, words: \"DevHub\", emoji: example3.meta.emoji, singleLine: example3.meta.singleLineMode },\n { id: 4, words: \"AI Assistant\", emoji: example4.meta.emoji, singleLine: example4.meta.singleLineMode },\n { id: 5, words: \"Quick SVG\", emoji: \"🚀\" },\n { id: 6, words: \"Debug Mode\", emoji: \"🐞\", debug: true }\n ]\n };\n}",[],[279],{"_102":286,"_95":287,"_153":288,"_155":-5,"_156":138,"_157":118,"_159":160,"_104":289,"_99":32,"_163":273,"_165":290,"_167":22,"_168":-5,"_169":291,"_98":292},"354a7526-1b28-11f0-8274-569c3dd06744","index.new.tsx","354a75a8-1b28-11f0-8274-569c3dd06744",["D",1744851995505],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useState, useRef, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { logoWorkshopSDK, LogoGeneratorOptions } from \"./sdk.tsx\";\nimport { getRandomEmoji } from \"./EmojiUtils.tsx\";\nimport { fontOptions } from \"./FontData.tsx\";\nimport { uploadSvgToHost } from \"./SvgHostClient.tsx\";\n\n/**\n * Logo Generator Showcase Component\n * \n * Demonstrates the SDK capabilities with a simple interface\n */\nfunction LogoWorkshopDemo() {\n // Basic form inputs\n const [words, setWords] = useState(\"Logo Generator\");\n const [emoji, setEmoji] = useState(\"🚀\");\n const [isGenerating, setIsGenerating] = useState(false);\n const [logoSvg, setLogoSvg] = useState(\"\");\n const [logoMeta, setLogoMeta] = useState(null);\n const [advancedMode, setAdvancedMode] = useState(false);\n const [showEmojiPicker, setShowEmojiPicker] = useState(false);\n \n // API code example\n const [apiCode, setApiCode] = useState(\"\");\n const [sdkCode, setSdkCode] = useState(\"\");\n \n // SDK options\n const [sdkOptions, setSdkOptions] = useState({\n words: \"Logo Generator\",\n emoji: \"🚀\"\n });\n \n // Advanced options\n const [singleLine, setSingleLine] = useState(undefined);\n const [fontFamily, setFontFamily] = useState(\"Arial, sans-serif\");\n const [textColor, setTextColor] = useState(\"\");\n const [accentColor, setAccentColor] = useState(\"\");\n const [secondaryColor, setSecondaryColor] = useState(\"\");\n const [bgColor, setBgColor] = useState(\"\");\n const [boldTop, setBoldTop] = useState(true);\n const [italicTop, setItalicTop] = useState(false);\n const [boldBottom, setBoldBottom] = useState(true);\n const [italicBottom, setItalicBottom] = useState(false);\n const [debug, setDebug] = useState(false);\n \n // Save status\n const [savingToHost, setSavingToHost] = useState(false);\n const [saveSuccess, setSaveSuccess] = useState(null);\n const [savedSvgUrl, setSavedSvgUrl] = useState(\"\");\n \n // Refs\n const textAreaRef = useRef(null);\n const emojiPickerContainerRef = useRef(null);\n \n // Generate the API URL example whenever the options change\n useEffect(() => {\n // Build the API URL\n const baseUrl = \"https://dcm31--1e7e43501a4611f0affa569c3dd06744.web.val.run/\";\n const params = new URLSearchParams();\n \n // Add the basic parameters\n if (words) params.append(\"words\", words);\n if (emoji) params.append(\"emoji\", emoji);\n \n // Add advanced parameters if set\n if (singleLine !== undefined) params.append(\"singleLine\", String(singleLine));\n if (fontFamily !== \"Arial, sans-serif\") params.append(\"fontFamily\", fontFamily);\n if (textColor) params.append(\"textColor\", textColor);\n if (accentColor) params.append(\"accentColor\", accentColor);\n if (secondaryColor) params.append(\"secondaryColor\", secondaryColor);\n if (bgColor) params.append(\"bgColor\", bgColor);\n if (!boldTop) params.append(\"boldTop\", \"false\");\n if (italicTop) params.append(\"italicTop\", \"true\");\n if (!boldBottom) params.append(\"boldBottom\", \"false\");\n if (italicBottom) params.append(\"italicBottom\", \"true\");\n if (debug) params.append(\"debug\", \"true\");\n \n const apiUrl = `${baseUrl}?${params.toString()}`;\n setApiCode(`// Using fetch to call the API\nfetch(\"${apiUrl}\")\n .then(response => response.text())\n .then(svgString => {\n // Use the SVG string\n document.getElementById('logo').innerHTML = svgString;\n });`);\n \n // Generate SDK code example\n const options: Record = {\n words,\n emoji\n };\n \n // Add advanced parameters if set\n if (singleLine !== undefined) options.singleLine = singleLine;\n if (fontFamily !== \"Arial, sans-serif\") options.fontFamily = fontFamily;\n if (textColor) options.textColor = textColor;\n if (accentColor) options.accentColor = accentColor;\n if (secondaryColor) options.secondaryColor = secondaryColor;\n if (bgColor) options.bgColor = bgColor;\n if (!boldTop) options.boldTop = false;\n if (italicTop) options.italicTop = true;\n if (!boldBottom) options.boldBottom = false;\n if (italicBottom) options.italicBottom = true;\n if (debug) options.debug = true;\n \n // Build the SDK code example\n setSdkCode(`// Import the SDK\nimport { logoWorkshopSDK } from \"https://esm.town/v/dcm31/logoWorkshopOpenMoji/sdk.tsx\";\n\n// Generate logo with options\nconst result = await logoWorkshopSDK.generateLogo(${JSON.stringify(options, null, 2)});\n\n// Use the SVG string\ndocument.getElementById('logo').innerHTML = result.svg;`);\n \n // Update the SDK options\n setSdkOptions(options);\n }, [\n words,\n emoji,\n singleLine,\n fontFamily,\n textColor,\n accentColor,\n secondaryColor,\n bgColor,\n boldTop,\n italicTop,\n boldBottom,\n italicBottom,\n debug\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 setEmoji(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 // Generate random emoji\n const handleRandomEmoji = () => {\n setEmoji(getRandomEmoji());\n };\n \n // Generate logo using SDK\n const generateLogo = async () => {\n setIsGenerating(true);\n try {\n // Call the SDK to generate the logo\n const result = await logoWorkshopSDK.generateLogo(sdkOptions);\n setLogoSvg(result.svg);\n setLogoMeta(result.meta);\n \n // Reset save status when generating new SVG\n setSaveSuccess(null);\n setSavedSvgUrl(\"\");\n } catch (error) {\n console.error(\"Error generating logo:\", error);\n } finally {\n setIsGenerating(false);\n }\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 (!logoSvg) {\n generateLogo();\n return;\n }\n \n setSavingToHost(true);\n try {\n const name = `${words} Logo`.trim() || \"OpenMoji Logo\";\n const result = await uploadSvgToHost(logoSvg, 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 // Copy code to clipboard\n const copyCode = (code) => {\n navigator.clipboard.writeText(code)\n .then(() => {\n // Show a temporary message or something\n })\n .catch(err => {\n console.error(\"Failed to copy code to clipboard\", err);\n });\n };\n \n return (\n

LogoWorkshop OpenMoji SDK Demo

\n This demo showcases the LogoWorkshopOpenMoji SDK capabilities.\n Generate logos programmatically with just a few parameters.\n

\n \n {/* Logo preview */}\n

\n {logoSvg ? (\n

\n ) : (\n

Generate a logo to see it here

\n )}\n

\n \n {/* Basic inputs */}\n

\n \n Logo Text\n \n setWords(e.target.value)}\n placeholder=\"Enter logo text (e.g. 'Logo Generator')\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm\"\n />\n

\n \n

\n \n Emoji (OpenMoji will be used)\n \n

\n setEmoji(e.target.value)}\n placeholder=\"Enter 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 {/* Toggle advanced mode */}\n

\n setAdvancedMode(!advancedMode)}\n className=\"text-blue-600 hover:text-blue-800 text-sm font-medium\"\n >\n {advancedMode ? \"Hide Advanced Options\" : \"Show Advanced Options\"}\n \n

\n \n {/* Advanced options */}\n {advancedMode && (\n

Advanced Options

\n \n Layout Mode\n \n {\n const value = e.target.value;\n if (value === \"auto\") setSingleLine(undefined);\n else if (value === \"singleLine\") setSingleLine(true);\n else setSingleLine(false);\n }}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm\"\n >\n \n \n \n \n

\n \n

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

\n \n

\n \n Debug Mode\n \n

\n setDebug(e.target.checked)}\n className=\"h-4 w-4 text-blue-600 border-gray-300 rounded\"\n />\n \n Show guide lines\n \n

\n \n

\n \n Text Color\n \n setTextColor(e.target.value)}\n className=\"w-full h-10 border border-gray-300 rounded-md shadow-sm\"\n />\n

\n \n

\n \n Accent Color\n \n setAccentColor(e.target.value)}\n className=\"w-full h-10 border border-gray-300 rounded-md shadow-sm\"\n />\n

\n \n

\n \n Secondary Color\n \n setSecondaryColor(e.target.value)}\n className=\"w-full h-10 border border-gray-300 rounded-md shadow-sm\"\n />\n

\n \n

\n \n Background Color\n \n setBgColor(e.target.value)}\n className=\"w-full h-10 border border-gray-300 rounded-md shadow-sm\"\n />\n

\n \n

\n \n Top Line Style\n \n

\n setBoldTop(e.target.checked)}\n className=\"h-4 w-4 text-blue-600 border-gray-300 rounded\"\n />\n \n Bold\n \n

\n setItalicTop(e.target.checked)}\n className=\"h-4 w-4 text-blue-600 border-gray-300 rounded\"\n />\n \n Italic\n \n

\n \n

\n \n Bottom Line Style\n \n

\n setBoldBottom(e.target.checked)}\n className=\"h-4 w-4 text-blue-600 border-gray-300 rounded\"\n />\n \n Bold\n \n

\n setItalicBottom(e.target.checked)}\n className=\"h-4 w-4 text-blue-600 border-gray-300 rounded\"\n />\n \n Italic\n \n

\n )}\n \n {/* Generate button */}\n

\n \n {isGenerating ? \"Generating...\" : \"Generate Logo\"}\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: Failed to save SVG to host

\n )}\n

\n \n {/* Code examples */}\n {logoSvg && (\n

Integration Examples

\n \n

API Usage

\n copyCode(apiCode)}\n className=\"px-3 py-1 bg-gray-200 hover:bg-gray-300 text-gray-800 text-sm rounded\"\n >\n Copy\n \n

\n              {apiCode}\n

\n \n

SDK Usage

\n copyCode(sdkCode)}\n className=\"px-3 py-1 bg-gray-200 hover:bg-gray-300 text-gray-800 text-sm rounded\"\n >\n Copy\n \n

\n              {sdkCode}\n

\n \n {/* SVG Output */}\n

SVG Output

\n \n Copy\n \n

\n \n

\n )}\n \n {/* Metadata display */}\n {logoMeta && (\n

Logo Metadata

\n            {JSON.stringify(logoMeta, null, 2)}\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 LogoWorkshop OpenMoji SDK Demo\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 max-height: 400px;\n overflow-y: auto;\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 /* Code syntax highlighting */\n pre {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n white-space: pre-wrap;\n word-break: break-word;\n }\n \n /* Logo container */\n .logo-preview {\n max-width: 100%;\n overflow-x: auto;\n }\n`;\n",[],[287],{"_102":294,"_95":295,"_153":296,"_155":-5,"_156":138,"_157":118,"_159":160,"_104":297,"_99":32,"_163":178,"_165":298,"_167":22,"_168":-5,"_169":299,"_98":300},"354a8d36-1b28-11f0-8274-569c3dd06744","index.sdk.tsx","354a8dc2-1b28-11f0-8274-569c3dd06744",["D",1744851995505],"/**\n * LogoWorkshopOpenMoji SDK - Main Entry Point\n * \n * This file serves as the main entry point for the SDK, exporting all necessary components.\n */\n\n// Re-export everything from the SDK\nexport * from \"./sdk.tsx\";\nexport { default } from \"./sdk.tsx\";\n\n// You can now import the SDK in several ways:\n// \n// 1. Default import:\n// import LogoWorkshopSDK from \"https://esm.town/v/dcm31/logoWorkshopOpenMoji/index.sdk.tsx\";\n// \n// 2. Named imports:\n// import { logoWorkshopSDK, LogoGeneratorOptions } from \"https://esm.town/v/dcm31/logoWorkshopOpenMoji/index.sdk.tsx\";\n// \n// 3. Combined imports:\n// import LogoWorkshopSDK, { logoWorkshopSDK } from \"https://esm.town/v/dcm31/logoWorkshopOpenMoji/index.sdk.tsx\";\n",[],[295],{"_102":302,"_95":303,"_153":115,"_155":-5,"_156":138,"_157":118,"_159":160,"_104":304,"_99":305,"_163":273,"_165":290,"_167":22,"_168":-5,"_169":306,"_98":307},"354adc32-1b28-11f0-8274-569c3dd06744","index.tsx",["D",1744851995505],7,[],[303],{"_102":309,"_95":310,"_153":311,"_155":-5,"_156":138,"_157":118,"_159":160,"_104":312,"_99":32,"_163":178,"_165":313,"_167":22,"_168":-5,"_169":314,"_98":315},"354acd1e-1b28-11f0-8274-569c3dd06744","sdk.tsx","354acda0-1b28-11f0-8274-569c3dd06744",["D",1744851995505],"/**\n * LogoWorkshopOpenMoji SDK\n * \n * This SDK provides programmatic access to the LogoWorkshopOpenMoji functionality\n * allowing developers to generate custom logos with OpenMoji emoji integration\n * directly in their code without making HTTP requests.\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\";\nimport { EmojiSummarizerSDK } from \"https://esm.town/v/dcm31/texttoemoji\";\n\n// Logo dimensions\nconst LOGO_WIDTH = 301;\nconst LOGO_HEIGHT = 113.266;\n\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\nconst DEFAULT_VERTICAL_SPACING_FACTOR = -0.25;\n\n// Default maxWidth values\nconst DEFAULT_MAX_WIDTH = 153; // For two-line mode\nconst SINGLE_LINE_MAX_WIDTH = 175; // For single-line mode\n\n// Y offset values\nconst DEFAULT_TWO_LINE_Y_OFFSET = 20; // For two-line mode\nconst SINGLE_LINE_Y_OFFSET = 17; // For single-line mode\n\n// Character threshold for auto mode (one-line vs two-line)\nconst CHARACTER_THRESHOLD = 10;\n\n// Emoji SDK URL\nconst EMOJI_SDK_URL = \"https://dcm31-texttoemoji.web.val.run\";\n\n// SDK Types\nexport type LogoGeneratorOptions = {\n // Required parameters\n firstPart?: string;\n lastPart?: string;\n words?: string;\n \n // Display options\n auto?: boolean;\n singleLine?: boolean;\n \n // Text styling\n fontFamily?: string;\n textColor?: string;\n accentColor?: string;\n secondaryColor?: string;\n bgColor?: string;\n boldTop?: boolean;\n italicTop?: boolean;\n boldBottom?: boolean;\n italicBottom?: boolean;\n \n // Layout and positioning \n emojiX?: number;\n emojiY?: number;\n emojiScale?: number;\n verticalSpacingFactor?: number;\n \n // Special features\n emoji?: string;\n debug?: boolean;\n \n // Auto-generate emoji\n useEmojiSdk?: boolean;\n emojiSdkUrl?: string;\n};\n\nexport type LogoGeneratorResult = {\n svg: string;\n meta: {\n topFontSize: number;\n bottomFontSize: number;\n topY: number;\n bottomY: number;\n textXPosition: number;\n maxWidth: number;\n actualWidth: number;\n singleLineMode: boolean;\n autoMode: boolean;\n originalWords: string;\n firstPart: string;\n lastPart: string;\n totalCharCount: number;\n characterThreshold: number;\n isBoldTop: boolean;\n isItalicTop: boolean;\n isBoldBottom: boolean;\n isItalicBottom: boolean;\n emoji: string;\n emojiCodepoint: string;\n emojiX: number;\n emojiY: number;\n emojiScale: number;\n spacing: number;\n verticalSpacingFactor: number;\n yOffset: number;\n extractedColors: string[];\n colors: {\n textColor: string;\n accentColor: string;\n secondaryColor: string;\n bgColor: string;\n };\n usedEmojiSdk: boolean;\n };\n};\n\n/**\n * LogoWorkshopOpenMoji SDK class\n * \n * Provides methods to generate custom logos with OpenMoji emoji integration\n */\nexport class LogoWorkshopSDK {\n private emojiSdkUrl: string;\n \n /**\n * Create a new instance of the LogoWorkshopSDK\n * \n * @param emojiSdkUrl - Optional custom URL for the EmojiSummarizer API\n */\n constructor(emojiSdkUrl: string = EMOJI_SDK_URL) {\n this.emojiSdkUrl = emojiSdkUrl;\n }\n \n /**\n * Generate a logo SVG using the Logo Workshop OpenMoji engine\n * \n * @param options - Configuration options for the logo\n * @returns Promise resolving to an object with the SVG and metadata\n */\n async generateLogo(options: LogoGeneratorOptions = {}): Promise {\n // Get input words - could be provided as firstPart/lastPart or words parameter\n let firstPart = options.firstPart || \"\";\n let lastPart = options.lastPart || \"\";\n \n // New words parameter that can be used for both modes\n const words = options.words || \"\";\n \n // If words parameter is provided, use that instead of firstPart/lastPart\n if (words) {\n const wordParts = words.split(\" \");\n if (wordParts.length >= 2) {\n // If multiple words, use first word as firstPart and rest as lastPart\n firstPart = wordParts[0];\n lastPart = wordParts.slice(1).join(\" \");\n } else {\n // If only one word, use it as firstPart\n firstPart = words;\n }\n }\n \n // Set defaults if no text is provided\n if (!firstPart && !lastPart) {\n firstPart = \"Logo\";\n lastPart = \"Generator\";\n }\n \n // Calculate total character count for auto mode\n const totalCharCount = firstPart.length + lastPart.length;\n \n // Optional parameters with defaults\n const fontFamily = options.fontFamily || \"Arial, sans-serif\";\n \n // Determine mode based on character count or explicit parameter\n let singleLineMode = options.singleLine === true;\n let autoMode = options.auto !== false && options.singleLine === undefined; // Auto mode if not explicitly set\n \n if (autoMode) {\n // If auto mode, determine based on character count\n singleLineMode = totalCharCount <= CHARACTER_THRESHOLD;\n }\n \n // Process text based on mode\n let processedFirstPart, processedLastPart;\n \n if (singleLineMode) {\n // If single line mode, we need to make sure there's a space\n if (!firstPart.includes(\" \") && lastPart) {\n // If no space in firstPart but we have lastPart, combine them with a space\n processedFirstPart = `${firstPart} ${lastPart}`;\n processedLastPart = \"\";\n } else {\n // Otherwise, keep firstPart as is\n processedFirstPart = firstPart;\n processedLastPart = lastPart;\n }\n \n // For single line without a space, add a space to ensure proper rendering\n // This is for the case when there's only one word in single line mode\n if (!processedFirstPart.includes(\" \") && processedFirstPart.length > 0) {\n // Add a non-breaking space at the end to ensure proper y-offset\n // This space won't be visible but ensures correct positioning\n processedFirstPart = `${processedFirstPart} `;\n }\n } else {\n // Two-line mode - convert to uppercase\n processedFirstPart = firstPart.toUpperCase();\n processedLastPart = lastPart.toUpperCase();\n }\n \n // Set emoji position to match web interface exactly\n const emojiX = options.emojiX !== undefined ? options.emojiX : EMOJI_X;\n const emojiY = options.emojiY !== undefined ? options.emojiY : EMOJI_Y;\n const emojiScale = options.emojiScale !== undefined ? options.emojiScale : EMOJI_SCALE;\n \n // Always use fixed X position for text (112px)\n const textXPosition = DEFAULT_TEXT_X_POSITION;\n \n // Optional text style parameters\n const isBoldTop = options.boldTop !== false; // Default to bold\n const isItalicTop = options.italicTop === true; // Default to normal\n const isBoldBottom = options.boldBottom !== false; // Default to bold\n const isItalicBottom = options.italicBottom === true; // Default to normal\n \n // Set different parameters for single-line vs two-line mode\n let yOffset, maxWidth;\n \n if (singleLineMode) {\n // For single-line mode, use fixed values as requested\n yOffset = SINGLE_LINE_Y_OFFSET;\n maxWidth = SINGLE_LINE_MAX_WIDTH;\n } else {\n // For two-line mode, use fixed values to ensure it stays perfect\n yOffset = DEFAULT_TWO_LINE_Y_OFFSET;\n maxWidth = DEFAULT_MAX_WIDTH;\n }\n \n // Use vertical spacing factor from params or default to -0.25\n const vertSpacingFactor = options.verticalSpacingFactor !== undefined ? \n options.verticalSpacingFactor : DEFAULT_VERTICAL_SPACING_FACTOR;\n \n // Get emoji parameter and handle emoji SVG if provided\n let emoji = options.emoji || \"\";\n let emojiSvg = \"\";\n let emojiCodepoint = \"\";\n let extractedColors: string[] = [];\n let usedEmojiSdk = false;\n \n // Initial defaults for colors\n let textColor = options.textColor;\n let accentColor = options.accentColor;\n let secondaryColor = options.secondaryColor;\n let bgColor = options.bgColor;\n \n // If emoji is not provided and useEmojiSdk is true, use the EmojiSummarizerSDK\n if (!emoji && (options.useEmojiSdk !== false)) {\n try {\n const textToSummarize = `${firstPart} ${lastPart}`.trim();\n const sdkUrl = options.emojiSdkUrl || this.emojiSdkUrl;\n const sdk = new EmojiSummarizerSDK(sdkUrl);\n const result = await sdk.summarize(textToSummarize);\n \n if (result && result.emoji) {\n emoji = result.emoji;\n usedEmojiSdk = true;\n }\n } catch (e) {\n console.error(\"Error using EmojiSummarizerSDK:\", e);\n // Fall back to default emoji if SDK fails\n emoji = \"🚀\";\n }\n }\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 processedFirstPart,\n processedLastPart,\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\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 = options.debug === true;\n \n // For single line without a space, we need to make sure we trim any trailing space\n // that was added for positioning purposes\n let displayFirstPart = processedFirstPart;\n let displayLastPart = processedLastPart;\n \n if (singleLineMode && !firstPart.includes(\" \") && !lastPart && processedFirstPart.endsWith(\" \")) {\n displayFirstPart = processedFirstPart.trim();\n }\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: displayFirstPart,\n lastPart: displayLastPart,\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 // Return SVG and metadata\n return {\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 autoMode,\n originalWords: words || `${firstPart} ${lastPart}`.trim(),\n firstPart: displayFirstPart,\n lastPart: displayLastPart,\n totalCharCount,\n characterThreshold: CHARACTER_THRESHOLD,\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 usedEmojiSdk\n }\n };\n }\n \n /**\n * Generate a logo SVG and return it as a string\n * \n * @param options - Configuration options for the logo\n * @returns Promise resolving to an SVG string\n */\n async generateLogoSvg(options: LogoGeneratorOptions = {}): Promise {\n const result = await this.generateLogo(options);\n return result.svg;\n }\n}\n\n// Create a default instance for direct usage\nexport const logoWorkshopSDK = new LogoWorkshopSDK();\n\n// Export default constructor for importing directly\nexport default LogoWorkshopSDK;\n",[],[310],{"_102":317,"_95":318,"_153":319,"_155":-5,"_156":138,"_157":195,"_159":160,"_104":320,"_99":32,"_163":164,"_165":321,"_167":22,"_168":-5,"_169":322,"_98":323},"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",[],[318],{"_102":325,"_95":326,"_153":327,"_155":-5,"_156":138,"_157":195,"_159":160,"_104":328,"_99":32,"_163":164,"_165":329,"_167":22,"_168":-5,"_169":330,"_98":331},"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",[],[326],"files",[150,172,182,191,200,208,217,226,234,242,251,259,268,277,285,293,301,308,316,324],"counts",{"_336":186,"_337":186,"_338":213,"_339":340},"pulls","branches","forks","envVars",{"_341":32,"_342":32},"count","emptyCount","contents",[345,348,351,354,357,360,363,366,369,372,375,378,381,384,387,390,393,396,399,402],{"_102":151,"_95":152,"_153":154,"_155":-5,"_156":138,"_157":158,"_159":160,"_104":346,"_99":162,"_163":164,"_165":166,"_167":22,"_168":-5,"_98":347},["D",1744825331670],[152],{"_102":173,"_95":174,"_153":175,"_155":-5,"_156":138,"_157":176,"_159":160,"_104":349,"_99":32,"_163":178,"_165":179,"_167":22,"_168":-5,"_98":350},["D",1743649302063],[174],{"_102":183,"_95":184,"_153":185,"_155":-5,"_156":138,"_157":186,"_159":160,"_104":352,"_99":32,"_163":178,"_165":188,"_167":22,"_168":-5,"_98":353},["D",1743721306862],[184],{"_102":192,"_95":193,"_153":194,"_155":-5,"_156":138,"_157":195,"_159":160,"_104":355,"_99":32,"_163":178,"_165":197,"_167":22,"_168":-5,"_98":356},["D",1744754890995],[193],{"_102":201,"_95":202,"_153":203,"_155":-5,"_156":138,"_157":186,"_159":160,"_104":358,"_99":32,"_163":178,"_165":205,"_167":22,"_168":-5,"_98":359},["D",1743721306862],[202],{"_102":209,"_95":210,"_153":211,"_155":-5,"_156":138,"_157":195,"_159":160,"_104":361,"_99":213,"_163":178,"_165":214,"_167":22,"_168":-5,"_98":362},["D",1744754890995],[210],{"_102":218,"_95":219,"_153":220,"_155":-5,"_156":138,"_157":221,"_159":160,"_104":364,"_99":162,"_163":178,"_165":223,"_167":22,"_168":-5,"_98":365},["D",1744827512859],[219],{"_102":227,"_95":228,"_153":229,"_155":-5,"_156":138,"_157":195,"_159":160,"_104":367,"_99":213,"_163":178,"_165":231,"_167":22,"_168":-5,"_98":368},["D",1744754890995],[228],{"_102":235,"_95":236,"_153":237,"_155":-5,"_156":138,"_157":118,"_159":160,"_104":370,"_99":32,"_163":164,"_165":239,"_167":22,"_168":-5,"_98":371},["D",1744851995505],[236],{"_102":243,"_95":244,"_153":245,"_155":-5,"_156":138,"_157":246,"_159":160,"_104":373,"_99":32,"_163":178,"_165":248,"_167":22,"_168":-5,"_98":374},["D",1743725149883],[244],{"_102":252,"_95":253,"_153":254,"_155":-5,"_156":138,"_157":195,"_159":160,"_104":376,"_99":32,"_163":178,"_165":256,"_167":22,"_168":-5,"_98":377},["D",1744754890995],[253],{"_102":260,"_95":261,"_153":262,"_155":-5,"_156":138,"_157":263,"_159":160,"_104":379,"_99":213,"_163":178,"_165":265,"_167":22,"_168":-5,"_98":380},["D",1744766774482],[261],{"_102":269,"_95":270,"_153":271,"_155":-5,"_156":138,"_157":221,"_159":160,"_104":382,"_99":176,"_163":273,"_165":274,"_167":22,"_168":-5,"_98":383},["D",1744827512859],[270],{"_102":278,"_95":279,"_153":280,"_155":-5,"_156":138,"_157":118,"_159":160,"_104":385,"_99":32,"_163":178,"_165":282,"_167":22,"_168":-5,"_98":386},["D",1744851995505],[279],{"_102":286,"_95":287,"_153":288,"_155":-5,"_156":138,"_157":118,"_159":160,"_104":388,"_99":32,"_163":273,"_165":290,"_167":22,"_168":-5,"_98":389},["D",1744851995505],[287],{"_102":294,"_95":295,"_153":296,"_155":-5,"_156":138,"_157":118,"_159":160,"_104":391,"_99":32,"_163":178,"_165":298,"_167":22,"_168":-5,"_98":392},["D",1744851995505],[295],{"_102":302,"_95":303,"_153":115,"_155":-5,"_156":138,"_157":118,"_159":160,"_104":394,"_99":305,"_163":273,"_165":290,"_167":22,"_168":-5,"_98":395},["D",1744851995505],[303],{"_102":309,"_95":310,"_153":311,"_155":-5,"_156":138,"_157":118,"_159":160,"_104":397,"_99":32,"_163":178,"_165":313,"_167":22,"_168":-5,"_98":398},["D",1744851995505],[310],{"_102":317,"_95":318,"_153":319,"_155":-5,"_156":138,"_157":195,"_159":160,"_104":400,"_99":32,"_163":164,"_165":321,"_167":22,"_168":-5,"_98":401},["D",1744754890995],[318],{"_102":325,"_95":326,"_153":327,"_155":-5,"_156":138,"_157":195,"_159":160,"_104":403,"_99":32,"_163":164,"_165":329,"_167":22,"_168":-5,"_98":404},["D",1744754890995],[326],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.pulls",{"_93":94,"_95":96,"_413":414,"_100":417,"_336":422,"_488":-5,"_489":22,"_490":-5},"filters",{"_415":416},"state","open",{"_102":103,"_95":96,"_104":418,"_106":-5,"_107":22,"_108":109,"_110":111,"_112":-5,"_14":113,"_114":115,"_116":22,"_117":118,"_119":32,"_16":120,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_23":419,"_133":420,"_136":421,"_147":22},["D",1743475616093],{"_93":94,"_131":132},{"_93":94,"_135":132},{"_99":118,"_95":43,"_102":138,"_139":103,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":96,"_146":94},[423,447,456,465,474],{"_102":424,"_425":426,"_110":426,"_104":427,"_428":-5,"_415":429,"_430":221,"_431":-5,"_432":22,"_433":434,"_435":436,"_437":438,"_439":440,"_443":444,"_445":446},"1e76faea-1b28-11f0-bb52-569c3dd06744","title","k",["D",1744851957223],"mergedAt","pending","targetBranchVersion","mergedBranchVersion","isFork","targetBranch",{"_102":138,"_95":43,"_99":118,"_139":103,"_140":-5,"_141":-5,"_146":94,"_145":96,"_106":-5},"targetProject",{"_102":103,"_95":96,"_110":111,"_112":-5,"_108":109},"targetUser",{"_93":94,"_131":132},"sourceBranch",{"_102":441,"_95":442,"_99":305,"_139":103,"_140":138,"_141":221,"_146":94,"_145":96,"_106":-5},"e7ecc976-1b24-11f0-a22a-569c3dd06744","sdk","sourceProject",{"_102":103,"_95":96,"_110":111,"_112":-5,"_108":109},"sourceUser",{"_93":94,"_131":132},{"_102":448,"_425":426,"_110":426,"_104":449,"_428":-5,"_415":429,"_430":221,"_431":-5,"_432":22,"_433":450,"_435":451,"_437":452,"_439":453,"_443":454,"_445":455},"1b5c37c6-1b28-11f0-af7c-569c3dd06744",["D",1744851952015],{"_102":138,"_95":43,"_99":118,"_139":103,"_140":-5,"_141":-5,"_146":94,"_145":96,"_106":-5},{"_102":103,"_95":96,"_110":111,"_112":-5,"_108":109},{"_93":94,"_131":132},{"_102":441,"_95":442,"_99":305,"_139":103,"_140":138,"_141":221,"_146":94,"_145":96,"_106":-5},{"_102":103,"_95":96,"_110":111,"_112":-5,"_108":109},{"_93":94,"_131":132},{"_102":457,"_425":426,"_110":426,"_104":458,"_428":-5,"_415":429,"_430":221,"_431":-5,"_432":22,"_433":459,"_435":460,"_437":461,"_439":462,"_443":463,"_445":464},"19d6056c-1b28-11f0-9d07-569c3dd06744",["D",1744851949457],{"_102":138,"_95":43,"_99":118,"_139":103,"_140":-5,"_141":-5,"_146":94,"_145":96,"_106":-5},{"_102":103,"_95":96,"_110":111,"_112":-5,"_108":109},{"_93":94,"_131":132},{"_102":441,"_95":442,"_99":305,"_139":103,"_140":138,"_141":221,"_146":94,"_145":96,"_106":-5},{"_102":103,"_95":96,"_110":111,"_112":-5,"_108":109},{"_93":94,"_131":132},{"_102":466,"_425":426,"_110":426,"_104":467,"_428":-5,"_415":429,"_430":221,"_431":-5,"_432":22,"_433":468,"_435":469,"_437":470,"_439":471,"_443":472,"_445":473},"185d59ce-1b28-11f0-89f6-569c3dd06744",["D",1744851946989],{"_102":138,"_95":43,"_99":118,"_139":103,"_140":-5,"_141":-5,"_146":94,"_145":96,"_106":-5},{"_102":103,"_95":96,"_110":111,"_112":-5,"_108":109},{"_93":94,"_131":132},{"_102":441,"_95":442,"_99":305,"_139":103,"_140":138,"_141":221,"_146":94,"_145":96,"_106":-5},{"_102":103,"_95":96,"_110":111,"_112":-5,"_108":109},{"_93":94,"_131":132},{"_102":475,"_425":476,"_110":477,"_104":478,"_428":-5,"_415":429,"_430":246,"_431":-5,"_432":22,"_433":479,"_435":480,"_437":481,"_439":482,"_443":486,"_445":487},"ff80867a-1a45-11f0-bc3a-569c3dd06744","finally","x,.",["D",1744754839015],{"_102":138,"_95":43,"_99":118,"_139":103,"_140":-5,"_141":-5,"_146":94,"_145":96,"_106":-5},{"_102":103,"_95":96,"_110":111,"_112":-5,"_108":109},{"_93":94,"_131":132},{"_102":483,"_95":484,"_99":485,"_139":103,"_140":138,"_141":246,"_146":94,"_145":96,"_106":-5},"42b12be8-1807-11f0-86c4-569c3dd06744","system-fonts-responsive",15,{"_102":103,"_95":96,"_110":111,"_112":-5,"_108":109},{"_93":94,"_131":132},"latestBranch","isForkOwner","ownProjectForks","actionData","errors"]

dcm31

logoWorkshopOpenMoji

Pull requests5

Pull requests
5