{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "article-editor-toolbar", "title": "Article Editor Toolbar", "type": "registry:page", "files": [ { "path": "packages/registry-react/blocks/article-editor-toolbar/ArticleEditorToolbar.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n AlignCenter,\n AlignLeft,\n AlignRight,\n AlertTriangle,\n ArrowLeft,\n ArrowUpRight,\n Bold,\n Bookmark,\n BookOpen,\n Check,\n CheckCheck,\n ChevronDown,\n Cloud,\n Code,\n Copy,\n ExternalLink,\n Eye,\n FileCode,\n Heart,\n HelpCircle,\n ImageIcon,\n Info,\n Italic,\n Layers,\n Lightbulb,\n Link2,\n List,\n ListOrdered,\n Maximize2,\n MessageSquare,\n Minus,\n MoreHorizontal,\n PenLine,\n Plus,\n Quote,\n Redo2,\n RotateCcw,\n Send,\n Share2,\n Sparkles,\n Strikethrough,\n Tag,\n Terminal,\n Type,\n Underline,\n Undo2,\n Upload,\n Volume2,\n X,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Separator } from '@/components/ui/separator'\nimport { Textarea } from '@/components/ui/textarea'\n\nexport interface ArticleEditorToolbarProps {\n className?: string\n}\n\ntype TextStyle = 'paragraph' | 'h1' | 'h2' | 'h3'\ntype CalloutType = 'tip' | 'warning' | 'info'\n\nexport function ArticleEditorToolbar({ className }: ArticleEditorToolbarProps) {\n // View Mode\n const [isPreviewMode, setIsPreviewMode] = React.useState(false)\n\n // Story Content State\n const [articleTitle, setArticleTitle] = React.useState('The Death of the Monolithic Component Package')\n const [articleSubtitle, setArticleSubtitle] = React.useState(\n 'Why the unbundled registry architecture is replacing npm packages for UI systems.',\n )\n const [topicTag, setTopicTag] = React.useState('Architecture & UI')\n const [authorName] = React.useState('Alex Rivera')\n const [authorHandle] = React.useState('@arivera_eng')\n const [publicationName] = React.useState('The Engineering Digest')\n const [lastSavedText, setLastSavedText] = React.useState('Draft Saved 2m ago')\n const [isAutosaving, setIsAutosaving] = React.useState(false)\n\n // Reader Engagement State\n const [clapCount, setClapCount] = React.useState(342)\n const [isBookmarked, setIsBookmarked] = React.useState(false)\n const [isFollowing, setIsFollowing] = React.useState(false)\n const [readerFontSize, setReaderFontSize] = React.useState<'normal' | 'large'>('normal')\n\n // Toolbar Formatter State\n const [activeTextStyle, setActiveTextStyle] = React.useState('paragraph')\n const [isStyleDropdownOpen, setIsStyleDropdownOpen] = React.useState(false)\n\n const [isBoldActive, setIsBoldActive] = React.useState(false)\n const [isItalicActive, setIsItalicActive] = React.useState(false)\n const [isUnderlineActive, setIsUnderlineActive] = React.useState(false)\n const [isStrikeActive, setIsStrikeActive] = React.useState(false)\n const [isInlineCodeActive, setIsInlineCodeActive] = React.useState(false)\n\n // Active Block Elements in Canvas\n const [calloutType, setCalloutType] = React.useState('tip')\n const [isCodeBlockCopied, setIsCodeBlockCopied] = React.useState(false)\n const [activeCodeTab, setActiveCodeTab] = React.useState<'json' | 'bash'>('json')\n\n // Modals / Drawers\n const [isPublishModalOpen, setIsPublishModalOpen] = React.useState(false)\n const [isLinkModalOpen, setIsLinkModalOpen] = React.useState(false)\n const [isPublishedSuccess, setIsPublishedSuccess] = React.useState(false)\n const [linkUrl, setLinkUrl] = React.useState('https://uipkge.dev')\n const [linkText, setLinkText] = React.useState('unbundled registry architecture')\n\n // Publish Settings State\n const [publishTags, setPublishTags] = React.useState([\n 'Web Development',\n 'Design Systems',\n 'Vue',\n 'React',\n 'Frontend',\n ])\n const [newTagInput, setNewTagInput] = React.useState('')\n const [canonicalUrl, setCanonicalUrl] = React.useState('https://theengineeringdigest.io/p/unbundled-ui-registries')\n const [seoDescription, setSeoDescription] = React.useState(\n 'A deep dive into why copy-paste UI component registries like shadcn and uipkge are displacing monolithic npm component libraries across engineering teams.',\n )\n const [sendNewsletter, setSendNewsletter] = React.useState(true)\n const [publishSchedule, setPublishSchedule] = React.useState<'now' | 'schedule'>('now')\n\n // Toast Feedback\n const [toastMessage, setToastMessage] = React.useState(null)\n const toastTimerRef = React.useRef(null)\n\n const showToast = React.useCallback((msg: string) => {\n if (toastTimerRef.current) clearTimeout(toastTimerRef.current)\n setToastMessage(msg)\n toastTimerRef.current = setTimeout(() => {\n setToastMessage(null)\n }, 3000)\n }, [])\n\n // Word Count and Reading Metrics Calculation\n const wordCount = React.useMemo(() => {\n const fullText = `${articleTitle} ${articleSubtitle} For nearly a decade the standard recipe for building a frontend design system was predictable spin up a private or public npm monorepo bundle fifty UI components with Rollup or Vite and force every application team to install as a heavyweight runtime dependency The component registry model inverts this entire dynamic Instead of consuming a closed npm black box developers pull atomic clean TypeScript source files directly into their repository Zero Runtime Overhead Direct Accessibility Ownership Native Token Sync`\n const words = fullText.trim().split(/\\s+/).filter(Boolean)\n return words.length + 1380\n }, [articleTitle, articleSubtitle])\n\n const readingTimeMinutes = React.useMemo(() => {\n return Math.max(1, Math.ceil(wordCount / 220))\n }, [wordCount])\n\n function triggerManualSave() {\n setIsAutosaving(true)\n setLastSavedText('Saving changes...')\n setTimeout(() => {\n setIsAutosaving(false)\n setLastSavedText('Draft Saved just now')\n showToast('All draft changes saved to cloud.')\n }, 600)\n }\n\n function handleAddTag() {\n const trimmed = newTagInput.trim()\n if (trimmed && !publishTags.includes(trimmed)) {\n setPublishTags((prev) => [...prev, trimmed])\n setNewTagInput('')\n }\n }\n\n function handleRemoveTag(tagToRemove: string) {\n setPublishTags((prev) => prev.filter((t) => t !== tagToRemove))\n }\n\n function copyCodeSnippet() {\n setIsCodeBlockCopied(true)\n showToast('Code snippet copied to clipboard!')\n setTimeout(() => {\n setIsCodeBlockCopied(false)\n }, 2000)\n }\n\n function handlePublish() {\n setIsPublishModalOpen(false)\n setIsPublishedSuccess(true)\n showToast('🎉 Story published successfully to The Engineering Digest!')\n }\n\n function insertCallout(type: CalloutType) {\n setCalloutType(type)\n showToast(`Applied ${type.toUpperCase()} callout formatting.`)\n }\n\n function handleAiAssist() {\n showToast('✨ AI polished paragraph for conciseness and punchy cadence.')\n }\n\n return (\n
\n {/* Top Sticky Application Header Bar */}\n
\n
\n {/* Left: Publication & Save Status */}\n
\n
\n
\n \n
\n
\n {publicationName}\n / Editor\n
\n
\n\n \n\n {/* Autosave Status Badge */}\n \n {!isAutosaving ? (\n \n ) : (\n \n )}\n {lastSavedText}\n Saved\n \n
\n\n {/* Center: Live Story Statistics */}\n \n\n {/* Right: Actions & Publishing Controls */}\n
\n {/* Undo / Redo controls */}\n
\n showToast('Undo action')}\n title=\"Undo (⌘Z)\"\n >\n \n \n showToast('Redo action')}\n title=\"Redo (⇧⌘Z)\"\n >\n \n \n
\n\n \n\n {/* Preview Toggle Button */}\n setIsPreviewMode(!isPreviewMode)}\n >\n \n {isPreviewMode ? 'Edit Story' : 'Preview Article'}\n \n\n {/* Publish Story Primary Button */}\n setIsPublishModalOpen(true)}\n >\n \n Publish Story\n \n
\n
\n
\n\n {/* Floating / Sticky Formatting Toolbar (Only in Editor Mode) */}\n {!isPreviewMode && (\n
\n
\n {/* Group 1: Typography Block Selector */}\n
\n
\n setIsStyleDropdownOpen(!isStyleDropdownOpen)}\n >\n \n \n {activeTextStyle === 'paragraph' ? 'Normal Text' : activeTextStyle.toUpperCase()}\n \n \n \n\n {/* Text Style Dropdown */}\n {isStyleDropdownOpen && (\n
\n {\n setActiveTextStyle('paragraph')\n setIsStyleDropdownOpen(false)\n }}\n >\n Paragraph\n Body\n \n {\n setActiveTextStyle('h1')\n setIsStyleDropdownOpen(false)\n }}\n >\n Heading 1\n H1\n \n {\n setActiveTextStyle('h2')\n setIsStyleDropdownOpen(false)\n }}\n >\n Heading 2\n H2\n \n {\n setActiveTextStyle('h3')\n setIsStyleDropdownOpen(false)\n }}\n >\n Heading 3\n H3\n \n
\n )}\n
\n\n \n\n {/* Group 2: Inline Formatting */}\n
\n {\n setIsBoldActive(!isBoldActive)\n showToast(!isBoldActive ? 'Bold applied' : 'Bold removed')\n }}\n title=\"Bold (⌘B)\"\n >\n \n \n {\n setIsItalicActive(!isItalicActive)\n showToast(!isItalicActive ? 'Italic applied' : 'Italic removed')\n }}\n title=\"Italic (⌘I)\"\n >\n \n \n {\n setIsUnderlineActive(!isUnderlineActive)\n showToast(!isUnderlineActive ? 'Underline applied' : 'Underline removed')\n }}\n title=\"Underline (⌘U)\"\n >\n \n \n {\n setIsStrikeActive(!isStrikeActive)\n showToast('Strikethrough toggled')\n }}\n title=\"Strikethrough (⇧⌘X)\"\n >\n \n \n {\n setIsInlineCodeActive(!isInlineCodeActive)\n showToast('Inline code toggled')\n }}\n title=\"Inline Code (⌘E)\"\n >\n \n \n setIsLinkModalOpen(true)}\n title=\"Insert Link (⌘K)\"\n >\n \n \n
\n
\n\n {/* Group 3: Block Elements & Media */}\n
\n \n\n showToast('Blockquote formatted')}\n title=\"Blockquote (⌘⇧.)\"\n >\n \n \n\n \n insertCallout(calloutType === 'tip' ? 'warning' : calloutType === 'warning' ? 'info' : 'tip')\n }\n title=\"Toggle Callout Box\"\n >\n \n \n\n showToast('Code block activated')}\n title=\"Code Block (```)\"\n >\n \n \n\n showToast('Bullet list toggled')}\n title=\"Bullet List (⌘⇧8)\"\n >\n \n \n\n showToast('Numbered list toggled')}\n title=\"Numbered List (⌘⇧7)\"\n >\n \n \n\n showToast('Horizontal divider inserted')}\n title=\"Divider (---)\"\n >\n \n \n\n showToast('Image upload dialog simulated')}\n title=\"Upload Media\"\n >\n \n \n\n \n\n {/* AI Polish Action */}\n \n \n AI Assist\n \n
\n
\n
\n )}\n\n {/* MAIN ARTICLE DRAFTING CANVAS / READER PREVIEW */}\n
\n {/* PUBLISHED SUCCESS BANNER */}\n {isPublishedSuccess && (\n
\n
\n \n
\n

Story Live on The Engineering Digest

\n

URL: {canonicalUrl}

\n
\n
\n \n
\n )}\n\n {/* ARTICLE HEADER */}\n
\n {/* Topic Category Tag */}\n
\n \n \n {topicTag}\n \n\n {isPreviewMode && (\n
\n setReaderFontSize(readerFontSize === 'normal' ? 'large' : 'normal')}\n >\n \n {readerFontSize === 'large' ? 'Standard text' : 'Larger text'}\n \n
\n )}\n
\n\n {/* Article Title */}\n {!isPreviewMode ? (\n
\n setArticleTitle(v)}\n rows={2}\n className=\"text-foreground placeholder:text-muted-foreground/40 w-full resize-none border-0 bg-transparent p-0 text-3xl font-bold tracking-tight focus-visible:ring-0 focus-visible:outline-hidden sm:text-4xl lg:text-5xl\"\n placeholder=\"Title...\"\n />\n
\n ) : (\n \n {articleTitle}\n \n )}\n\n {/* Article Subtitle */}\n {!isPreviewMode ? (\n
\n setArticleSubtitle(v)}\n rows={2}\n className=\"text-muted-foreground placeholder:text-muted-foreground/40 w-full resize-none border-0 bg-transparent p-0 text-lg font-normal focus-visible:ring-0 focus-visible:outline-hidden sm:text-xl\"\n placeholder=\"Add a subtitle...\"\n />\n
\n ) : (\n \n {articleSubtitle}\n

\n )}\n\n {/* Author / Byline Bar */}\n
\n
\n
\n AR\n
\n
\n
\n {authorName}\n {authorHandle}\n {isPreviewMode && (\n {\n setIsFollowing(!isFollowing)\n showToast(!isFollowing ? 'Following Alex Rivera' : 'Unfollowed')\n }}\n >\n {isFollowing ? 'Following' : 'Follow'}\n \n )}\n
\n

\n Published in {publicationName} · Oct 24, 2024 ·{' '}\n {readingTimeMinutes} min read\n

\n
\n
\n\n {/* Social / Reader actions */}\n
\n showToast('Audio version playing (6 min narration)')}\n >\n \n Listen\n \n {\n setIsBookmarked(!isBookmarked)\n showToast(!isBookmarked ? 'Saved to bookmarks' : 'Removed from bookmarks')\n }}\n title=\"Bookmark story\"\n >\n \n \n showToast('Link copied to clipboard')}\n title=\"Share article\"\n >\n \n \n
\n
\n\n \n\n {/* ARTICLE BODY PROSE */}\n \n {/* Paragraph 1 */}\n

\n For nearly a decade, the standard recipe for building a frontend design system was predictable: spin up a\n private or public npm monorepo, bundle fifty UI components with Rollup or Vite, and force every\n application team to install{' '}\n \n @acme/design-system\n {' '}\n as a heavyweight runtime dependency.\n

\n\n {/* Stylized Callout Box */}\n \n
\n
\n {calloutType === 'tip' ? (\n \n ) : calloutType === 'warning' ? (\n \n ) : (\n \n )}\n
\n
\n
\n

\n {calloutType === 'tip'\n ? 'Key Architectural Takeaway'\n : calloutType === 'warning'\n ? 'Dependency Fragility Warning'\n : 'Registry Distribution Note'}\n

\n {!isPreviewMode && (\n
\n setCalloutType('tip')}\n >\n Tip\n \n setCalloutType('warning')}\n >\n Warn\n \n setCalloutType('info')}\n >\n Info\n \n
\n )}\n
\n

\n When UI primitives are distributed via semver npm packages, updating a single button variant\n requires a patch release, a dependency bump, and a potential cascade of peer-dependency conflicts\n across twenty consuming micro-frontends.\n

\n
\n
\n
\n\n {/* Subheading (H2) */}\n

\n 1. The \"Own Your Code\" Revolution\n

\n\n

\n The{' '}\n \n {linkText}\n {' '}\n inverts this dynamic completely. Instead of consuming a closed npm black box, developers pull atomic,\n clean TypeScript source files directly into their repository via CLI tools like{' '}\n shadcn-vue or{' '}\n uipkge.\n

\n\n {/* Syntax-Highlighted Code Block */}\n
\n {/* Code Block Header */}\n
\n
\n setActiveCodeTab('json')}\n >\n \n components.json\n \n setActiveCodeTab('bash')}\n >\n \n Terminal CLI\n \n
\n\n
\n \n {activeCodeTab === 'json' ? 'JSON' : 'BASH'}\n \n \n {isCodeBlockCopied ? : }\n {isCodeBlockCopied ? 'Copied' : 'Copy'}\n \n
\n
\n\n {/* Code Content Area */}\n
\n {activeCodeTab === 'json' ? (\n 
\n                    \n                      {'{'}\n                      {'\\n  '}\n                      \"$schema\":{' '}\n                      \"https://uipkge.dev/schema.json\",{'\\n  '}\n                      \"style\":{' '}\n                      \"new-york\",{'\\n  '}\n                      \"rsc\":{' '}\n                      true,{'\\n  '}\n                      \"aliases\":{' '}\n                      {'{'}\n                      {'\\n    '}\n                      \"components\":{' '}\n                      \"@/components/ui\",{'\\n    '}\n                      \"utils\": \"@/lib/utils\"\n                      ,{'\\n    '}\n                      \"blocks\":{' '}\n                      \"@/components/blocks\"\n                      {'\\n  '}\n                      {'}'}\n                      {'\\n'}\n                      {'}'}\n                    \n
\n ) : (\n 
\n                    \n                      # Add rich article drafting block to your project\n                      {'\\n'}\n                      npx shadcn-vue@latest add\n                      https://uipkge.dev/r/vue/article-editor-toolbar.json -y\n                    \n
\n )}\n
\n
\n\n {/* Stylized Blockquote */}\n
\n

\n \"The component registry model inverts the dependency tree. Instead of depending on an external\n maintainer's release cadence, your team owns every line of component markup, adapting it to your\n product's exact accessibility and branding needs without vendor lock-in.\"\n

\n
\n — Guillermo Rauch, CEO at Vercel\n
\n
\n\n {/* Subheading (H2) */}\n

\n 2. Core Architectural Advantages\n

\n\n

\n When evaluating the switch from packaged distributions to registry generation, teams consistently report\n three major velocity unlocks:\n

\n\n {/* Numbered List */}\n
    \n
  1. \n \n 1\n \n
    \n Zero Runtime Overhead:\n \n Unused component variants and dead code branches are automatically pruned during application\n tree-shaking.\n \n
    \n
    2. \n
  2. \n \n 2\n \n
    \n Direct Source Control:\n \n Audit, modify, and patch WCAG accessibility tags directly inside your repository without waiting for\n upstream PR merges.\n \n
    \n
    3. \n
  3. \n \n 3\n \n
    \n Native OKLCH Token Integration:\n \n Colors and elevation variables adapt directly across modern Tailwind CSS v4 design systems.\n \n
    \n
    4. \n
\n\n {/* Embedded Media Figure */}\n
\n
\n
\n
\n \n
\n

Unbundled Registry Architecture Flow

\n

\n Registry CLI pulls atomic SFC files directly into src/components/ui\n

\n
\n
\n \n Figure 1.0\n \n showToast('Expanded media view')}\n >\n \n \n
\n
\n
\n

\n Figure 1: Monolithic npm package distribution vs. direct registry source ownership.\n

\n
\n
\n\n {/* Section Divider */}\n
\n \n \n \n
\n\n {/* Summary Conclusion */}\n

\n The shift from monolithic npm packages to unbundled UI registries is not just a tooling trend; it\n represents a fundamental re-alignment of software ownership, empowering engineering teams to build\n resilient interfaces that evolve with their product.\n

\n \n \n\n {/* READER PREVIEW ENGAGEMENT FOOTER (When Preview Mode is Active) */}\n {isPreviewMode && (\n
\n
\n
\n {\n setClapCount((prev) => prev + 1)\n showToast(`Clapped! (${clapCount + 1} claps total)`)\n }}\n >\n \n {clapCount}\n \n\n showToast('Responses panel opened (24 responses)')}\n >\n \n 24\n \n
\n\n
\n {\n setIsBookmarked(!isBookmarked)\n showToast(!isBookmarked ? 'Bookmarked' : 'Removed')\n }}\n >\n \n Bookmark\n \n setIsPublishModalOpen(true)}\n >\n Publish\n \n
\n
\n
\n )}\n \n\n {/* PUBLISH SETTINGS MODAL / DIALOG */}\n {isPublishModalOpen && (\n
\n \n \n
\n Publish Story to Publication\n \n Configure publication metadata, topic tags, and newsletter distribution.\n \n
\n setIsPublishModalOpen(false)}\n >\n \n \n \n\n \n {/* Story Summary Card */}\n
\n

{articleTitle}

\n

{articleSubtitle}

\n
\n Author: {authorName}\n ·\n {wordCount} words\n ·\n {readingTimeMinutes} min read\n
\n
\n\n {/* Tags Input */}\n
\n \n
\n {publishTags.map((tag) => (\n \n {tag}\n handleRemoveTag(tag)}\n >\n \n \n \n ))}\n setNewTagInput(e.target.value)}\n type=\"text\"\n className=\"placeholder:text-muted-foreground min-w-[100px] flex-1 border-0 bg-transparent p-0 text-xs focus:ring-0 focus:outline-hidden\"\n placeholder=\"Add a tag...\"\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault()\n handleAddTag()\n }\n }}\n />\n
\n
\n\n {/* SEO Meta Description */}\n
\n
\n \n {seoDescription.length}/160\n
\n setSeoDescription(v)}\n rows={2}\n className=\"resize-none text-xs\"\n placeholder=\"Brief summary for search engines and social cards...\"\n />\n
\n\n {/* Canonical URL */}\n
\n \n setCanonicalUrl(e.target.value)}\n className=\"h-8 font-mono text-xs\"\n />\n
\n\n {/* Newsletter Distribution Toggle */}\n
\n
\n

Broadcast to Subscribers

\n

\n Send as an instant newsletter email to 14,200 active readers.\n

\n
\n setSendNewsletter(e.target.checked)}\n type=\"checkbox\"\n className=\"border-border accent-primary size-4 cursor-pointer rounded\"\n />\n
\n\n {/* Schedule Options */}\n
\n \n \n
\n \n\n \n setIsPublishModalOpen(false)}\n >\n Cancel\n \n \n \n \n
\n )}\n\n {/* INSERT LINK MODAL */}\n {isLinkModalOpen && (\n
\n \n \n Insert Hyperlink\n Add an external reference link\n \n \n
\n \n setLinkText(e.target.value)} className=\"h-8 text-xs\" />\n
\n
\n \n setLinkUrl(e.target.value)}\n className=\"h-8 font-mono text-xs\"\n placeholder=\"https://\"\n />\n
\n \n \n \n {\n setIsLinkModalOpen(false)\n showToast('Link inserted successfully!')\n }}\n >\n Apply Link\n \n \n \n
\n )}\n\n {/* INTERACTIVE TOAST NOTIFICATION */}\n {toastMessage && (\n
\n \n {toastMessage}\n
\n )}\n \n )\n}\n\nexport default ArticleEditorToolbar\n", "type": "registry:page", "target": "~/components/blocks/ArticleEditorToolbar.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/input.json", "https://uipkge.dev/r/react/separator.json", "https://uipkge.dev/r/react/textarea.json" ], "description": "Medium and Substack style rich text formatting toolbar and article drafting canvas with typography controls, syntax highlighted code blocks, callouts, and publishing drawer.", "categories": [ "media", "app", "content" ] }