[V0_FILE]javascript:file="plugin.js" isFixed="true" isQuickEdit="true" // This is the main entry point for the Penpot plugin // It registers the plugin with Penpot and sets up message handlers // Declare the penpot variable let penpot function runPlugin() { // Register the plugin with Penpot penpot.api.register({ name: "Circular Text Plugin", version: "1.0.0", author: "Penpot Plugin Creator", description: "Create text along a circular path", iconSVG: ``, main: "index.html", }) // Listen for messages from Penpot window.addEventListener("message", handlePenpotMessage) // Initialize the plugin UI console.log("Circular Text Plugin initialized") } // Handle messages from Penpot function handlePenpotMessage(event) { const message = event.data // Only process messages from Penpot if (message.source !== "penpot") return console.log("Received message from Penpot:", message) // Handle different message types switch (message.type) { case "selection-changed": // Update the plugin UI based on the current selection window.dispatchEvent( new CustomEvent("penpot-selection-changed", { detail: message.payload, }), ) break case "plugin-loaded": // Plugin has been loaded in Penpot window.dispatchEvent(new CustomEvent("penpot-plugin-loaded")) break default: // Handle other message types if needed break } } // Run the plugin when the window loads window.addEventListener("load", runPlugin) [V0_FILE]html:file="index.html" Penpot Circular Text Plugin

[V0_FILE]typescriptreact:file="lib/penpot-api.ts" isQuickEdit="true" // This file contains utilities for interacting with the Penpot API // Types for Penpot API export interface PenpotSelection { objects: any[] type: string } // Send a message to Penpot export function sendMessageToPenpot(type: string, payload: any) { window.parent.postMessage( { source: "plugin", type, payload, }, "*", ) } // Apply circular text to the selected object in Penpot export function applyCircularTextToPenpot( text: string, radius: number, fontSize: number, letterSpacing: number, fontWeight: number, textPosition: string, rotation: number, ) { // Create SVG data for the circular text const svgSize = 300 const centerPoint = svgSize / 2 // Create a circular path based on text position const circlePath = textPosition === "outside" ? `M ${centerPoint},${centerPoint - radius} A ${radius},${radius} 0 1,1 ${centerPoint},${centerPoint + radius} A ${radius},${radius} 0 1,1 ${centerPoint},${centerPoint - radius}` : `M ${centerPoint},${centerPoint - radius} A ${radius},${radius} 0 1,0 ${centerPoint},${centerPoint + radius} A ${radius},${radius} 0 1,0 ${centerPoint},${centerPoint - radius}` // Create the SVG data const svgData = { type: "svg", content: { tag: "svg", attrs: { width: svgSize, height: svgSize, viewBox: `0 0 ${svgSize} ${svgSize}`, }, content: [ { tag: "defs", content: [ { tag: "path", attrs: { id: "textCirclePath", d: circlePath, }, }, ], }, { tag: "text", attrs: { fill: "currentColor", "font-size": fontSize, "font-weight": fontWeight, "letter-spacing": letterSpacing, transform: `rotate(${rotation}, ${centerPoint}, ${centerPoint})`, }, content: [ { tag: "textPath", attrs: { href: "#textCirclePath", startOffset: "50%", "text-anchor": "middle", }, content: text, }, ], }, ], }, } // Send the SVG data to Penpot sendMessageToPenpot("create-shape", svgData) } // Get the current selection from Penpot export function getCurrentSelection(): Promise { return new Promise((resolve) => { const messageHandler = (event: CustomEvent) => { window.removeEventListener("penpot-selection-changed", messageHandler as EventListener) resolve(event.detail as PenpotSelection) } window.addEventListener("penpot-selection-changed", messageHandler as EventListener) sendMessageToPenpot("get-selection", {}) }) } // Check if the plugin is running inside Penpot export function isRunningInPenpot(): boolean { try { return window.parent !== window && window.parent.location.href.includes("penpot") } catch (e) { // If we can't access window.parent.location due to same-origin policy, // we're probably in an iframe, which is a good sign we're in Penpot return true } } // Initialize Penpot API listeners export function initPenpotListeners(callback: () => void) { const pluginLoadedHandler = () => { window.removeEventListener("penpot-plugin-loaded", pluginLoadedHandler) callback() } window.addEventListener("penpot-plugin-loaded", pluginLoadedHandler) } [V0_FILE]css:file="app/globals.css" isFixed="true" isQuickEdit="true" @tailwind base; @tailwind components; @tailwind utilities; @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .animate-spin-slow { animation: spin var(--duration, 10s) linear infinite; } .animate-spin-reverse { animation-direction: reverse; } body { font-family: Arial, Helvetica, sans-serif; } @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/export-modal.tsx" "use client" import { useEffect, useRef } from "react" import { createPortal } from "react-dom" interface ExportModalProps { isOpen: boolean onClose: () => void code: string } export function ExportModal({ isOpen, onClose, code }: ExportModalProps) { const modalRef = useRef(null) const codeRef = useRef(null) // Handle keyboard events for accessibility useEffect(() => { if (!isOpen) return const handleKeyDown = (e: KeyboardEvent) => { if (e.key === "Escape") { onClose() } } window.addEventListener("keydown", handleKeyDown) return () => window.removeEventListener("keydown", handleKeyDown) }, [isOpen, onClose]) // Focus trap useEffect(() => { if (!isOpen || !modalRef.current) return const focusableElements = modalRef.current.querySelectorAll( 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])', ) const firstElement = focusableElements[0] as HTMLElement const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement const handleTabKey = (e: KeyboardEvent) => { if (e.key !== "Tab") return if (e.shiftKey) { if (document.activeElement === firstElement) { lastElement.focus() e.preventDefault() } } else { if (document.activeElement === lastElement) { firstElement.focus() e.preventDefault() } } } window.addEventListener("keydown", handleTabKey) firstElement?.focus() return () => window.removeEventListener("keydown", handleTabKey) }, [isOpen]) // Copy code to clipboard const copyToClipboard = () => { if (codeRef.current) { navigator.clipboard.writeText(code).then( () => { // Show feedback const button = document.getElementById("copy-button") if (button) { const originalText = button.textContent button.textContent = "Copied!" button.classList.add("bg-green-600") setTimeout(() => { button.textContent = originalText button.classList.remove("bg-green-600") }, 2000) } }, (err) => { console.error("Could not copy text: ", err) // Fallback for older browsers const textArea = document.createElement("textarea") textArea.value = code document.body.appendChild(textArea) textArea.select() document.execCommand("copy") document.body.removeChild(textArea) // Show feedback const button = document.getElementById("copy-button") if (button) { const originalText = button.textContent button.textContent = "Copied!" button.classList.add("bg-green-600") setTimeout(() => { button.textContent = originalText button.classList.remove("bg-green-600") }, 2000) } }, ) } } if (!isOpen) return null // Use portal to render modal at the root level return createPortal(

              {code}

, document.body, ) } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useState, useEffect } from "react" import { ExportModal } from "../components/export-modal" // Font options const fontOptions = [ { value: "Roboto", label: "Roboto" }, { value: "Open Sans", label: "Open Sans" }, { value: "Lato", label: "Lato" }, { value: "Inter", label: "Inter" }, { value: "Montserrat", label: "Montserrat" }, { value: "Playfair Display", label: "Playfair Display" }, ] export default function CircularTextGenerator() { // Text and styling states const [text, setText] = useState("Circular Text Example") const [radius, setRadius] = useState(100) const [fontSize, setFontSize] = useState(24) const [letterSpacing, setLetterSpacing] = useState(0) const [fontWeight, setFontWeight] = useState(400) const [textPosition, setTextPosition] = useState("outside") const [rotation, setRotation] = useState(0) const [selectedFont, setSelectedFont] = useState(fontOptions[0].value) // UI states const [isExportModalOpen, setIsExportModalOpen] = useState(false) // SVG viewBox dimensions - increased size const svgSize = 500 const centerPoint = svgSize / 2 // Create a circular path for text to follow const circlePath = textPosition === "outside" ? `M ${centerPoint},${centerPoint - radius} A ${radius},${radius} 0 1,1 ${centerPoint},${centerPoint + radius} A ${radius},${radius} 0 1,1 ${centerPoint},${centerPoint - radius}` : `M ${centerPoint},${centerPoint - radius} A ${radius},${radius} 0 1,0 ${centerPoint},${centerPoint + radius} A ${radius},${radius} 0 1,0 ${centerPoint},${centerPoint - radius}` // Load Google Fonts useEffect(() => { const link = document.createElement("link") link.href = `https://fonts.googleapis.com/css2?family=${selectedFont.replace(" ", "+")}:wght@400;700&display=swap` link.rel = "stylesheet" document.head.appendChild(link) return () => { document.head.removeChild(link) } }, [selectedFont]) const handleExport = () => { setIsExportModalOpen(true) } // Generate HTML code for export const generateExportCode = () => { return ` Circular Text

` } return (

Circular Text Generator

Create and preview text along a circular path

Text setText(e.target.value)} className="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-white/20 text-white transition-all" placeholder="Enter text to display in a circle" />

Font

Circle Radius {radius}px

setRadius(Number(e.target.value))} className="w-full accent-white" />

Font Size {fontSize}px

setFontSize(Number(e.target.value))} className="w-full accent-white" />

Letter Spacing {letterSpacing}

setLetterSpacing(Number(e.target.value))} className="w-full accent-white" />

Font Weight {fontWeight}

setFontWeight(Number(e.target.value))} className="w-full accent-white" />

Text Position

Rotation {rotation}°

setRotation(Number(e.target.value))} className="w-full accent-white" />

Customize your circular text and click 'Export as HTML' to get the HTML code for your design.

{/* Export Modal */} setIsExportModalOpen(false)} code={generateExportCode()} />

) }