root = Card([header, platformFilter, kpiRow, growthSection, engagementSection, bestPostsSection, audienceSection, scheduleSection, bestHourSection, commentsSection, earningsSection, collaborationsSection, scheduleForm, followUps])
header = CardHeader("Creator Studio", "Cross-platform analytics & scheduling dashboard · All platforms")
platformFilter = Tabs([tabAll, tabIg, tabTt, tabYt, tabTw, tabLi])
tabAll = TabItem("all", "All Platforms", [platformAllContent])
tabIg = TabItem("instagram", "Instagram", [platformIgContent])
tabTt = TabItem("tiktok", "TikTok", [platformTtContent])
tabYt = TabItem("youtube", "YouTube", [platformYtContent])
tabTw = TabItem("twitter", "X (Twitter)", [platformTwContent])
tabLi = TabItem("linkedin", "LinkedIn", [platformLiContent])
platformAllContent = TextContent("Showing aggregated data across all connected platforms. Select a tab to filter.")
platformIgContent = TextContent("Showing Instagram-only data. Metrics reflect @yourhandle_ig.")
platformTtContent = TextContent("Showing TikTok-only data. Metrics reflect @yourhandle_tt.")
platformYtContent = TextContent("Showing YouTube-only data. Metrics reflect YourChannel.")
platformTwContent = TextContent("Showing X (Twitter)-only data. Metrics reflect @yourhandle_x.")
platformLiContent = TextContent("Showing LinkedIn-only data. Metrics reflect Your Name.")
kpiRow = SnippetCardBlock([kpiFollowers, kpiEngagement, kpiEarnings, kpiGrowth], "grid", true)
kpiFollowers = SnippetCardItem("kpi-followers", kpiFollowersLhs, kpiFollowersRhs)
kpiFollowersLhs = IconText(kpiFollowersIcon, "neutral", "m", "Total Followers", "Across all platforms", false, "horizontal")
kpiFollowersIcon = Icon("users", "people")
kpiFollowersRhs = BoldText("number", "847.3K", "+2.4%", "metric")
kpiEngagement = SnippetCardItem("kpi-engagement", kpiEngagementLhs, kpiEngagementRhs)
kpiEngagementLhs = IconText(kpiEngagementIcon, "neutral", "m", "Engagement Rate", "30-day average", false, "horizontal")
kpiEngagementIcon = Icon("heart", "shapes")
kpiEngagementRhs = BoldText("number", "4.8%", "+0.3%", "metric")
kpiEarnings = SnippetCardItem("kpi-earnings", kpiEarningsLhs, kpiEarningsRhs)
kpiEarningsLhs = IconText(kpiEarningsIcon, "neutral", "m", "Earnings This Month", "Estimated net", false, "horizontal")
kpiEarningsIcon = Icon("circle-dollar-sign", "finance")
kpiEarningsRhs = BoldText("number", "$12,840", "+18.2%", "metric")
kpiGrowth = SnippetCardItem("kpi-growth", kpiGrowthLhs, kpiGrowthRhs)
kpiGrowthLhs = IconText(kpiGrowthIcon, "neutral", "m", "Follower Growth", "Past 30 days", false, "horizontal")
kpiGrowthIcon = Icon("trending-up", "charts")
kpiGrowthRhs = BoldText("number", "+19.8K", "+2.4%", "metric")
growthSection = SectionBlock([growthItem], false)
growthItem = SectionItem("growth", "Follower Growth (Past 30 Days)", [growthChart, growthNote])
growthChart = LineChart(growthLabels, [growthTotalSeries, growthIgSeries, growthTtSeries, growthYtSeries], "natural", "Date", "Followers (K)")
growthLabels = ["Mar 28", "Apr 4", "Apr 11", "Apr 18", "Apr 25", "May 2", "May 9", "May 16", "May 23", "May 30", "Jun 6", "Jun 13", "Jun 20", "Jun 27"]
growthTotalSeries = Series("Total", [782, 789, 796, 804, 811, 819, 826, 833, 839, 844, 848, 851, 854, 847.3])
growthIgSeries = Series("Instagram", [312, 315, 318, 322, 325, 328, 331, 334, 337, 339, 341, 343, 345, 342])
growthTtSeries = Series("TikTok", [245, 249, 253, 258, 262, 267, 271, 275, 279, 283, 286, 289, 291, 288])
growthYtSeries = Series("YouTube", [128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 139])
growthNote = TextContent("Total followers grew 2.4% this month. TikTok leads growth rate at +17.5%, Instagram at +9.6%, YouTube at +8.6%.")
engagementSection = SectionBlock([engagementItem], false)
engagementItem = SectionItem("engagement", "Engagement Rate by Platform", [engagementChart, engagementTable])
engagementChart = BarChart(engPlatforms, [engRateSeries], "grouped", "Platform", "Engagement Rate (%)")
engPlatforms = ["Instagram", "TikTok", "YouTube", "X (Twitter)", "LinkedIn"]
engRateSeries = Series("Rate", [5.2, 6.8, 3.1, 2.4, 4.1])
engagementTable = Table([colEngPlatform, colEngRate, colEngLikes, colEngComments, colEngShares, colEngSaves])
colEngPlatform = Col("Platform", ["Instagram", "TikTok", "YouTube", "X (Twitter)", "LinkedIn"], "string")
colEngRate = Col("Rate", ["5.2%", "6.8%", "3.1%", "2.4%", "4.1%"], "string")
colEngLikes = Col("Avg Likes", [18.4, 42.1, 8.7, 3.2, 1.8], "number")
colEngComments = Col("Avg Comments", [1.2, 3.8, 0.9, 0.4, 0.3], "number")
colEngShares = Col("Avg Shares", [0.8, 5.2, 0.6, 0.7, 0.2], "number")
colEngSaves = Col("Avg Saves", [2.1, 1.4, 0.3, 0.1, 0.5], "number")
bestPostsSection = SectionBlock([bestPostsItem], false)
bestPostsItem = SectionItem("best-posts", "Best Posts This Month (by Reach)", [bestPostsTable])
bestPostsTable = Table([colPostPlatform, colPostPreview, colPostDate, colPostReach, colPostEng, colPostType])
colPostPlatform = Col("Platform", ["TikTok", "Instagram", "YouTube", "TikTok", "Instagram", "LinkedIn"], "string")
colPostPreview = Col("Preview", ["POV: My morning routine 🌅", "Carousel: 5 productivity hacks", "Short: Behind the scenes", "Trending audio lip-sync", "Reel: Weekend vlog", "Article: Building in public"], "string")
colPostDate = Col("Date", ["Jun 12", "Jun 8", "Jun 15", "Jun 3", "Jun 20", "Jun 5"], "string")
colPostReach = Col("Reach", [482000, 287000, 156000, 412000, 198000, 87000], "number")
colPostEng = Col("Engagement", ["28.4K", "14.2K", "8.9K", "31.1K", "9.7K", "4.3K"], "string")
colPostType = Col("Type", ["Video", "Carousel", "Short", "Video", "Reel", "Article"], "string")
audienceSection = SectionBlock([audienceItem], false)
audienceItem = SectionItem("audience", "Audience Split by Platform", [audienceChart, audienceTable])
audienceChart = PieChart(audienceLabels, audienceValues, "donut")
audienceLabels = ["Instagram", "TikTok", "YouTube", "X (Twitter)", "LinkedIn"]
audienceValues = [342000, 288000, 139000, 52000, 26300]
audienceTable = Table([colAudPlatform, colAudFollowers, colAudPct, colAudGrowth, colAudDemo])
colAudPlatform = Col("Platform", ["Instagram", "TikTok", "YouTube", "X (Twitter)", "LinkedIn"], "string")
colAudFollowers = Col("Followers", [342000, 288000, 139000, 52000, 26300], "number")
colAudPct = Col("% of Total", ["40.4%", "34.0%", "16.4%", "6.1%", "3.1%"], "string")
colAudGrowth = Col("30-Day Growth", ["+9.6%", "+17.5%", "+8.6%", "+3.2%", "+12.1%"], "string")
colAudDemo = Col("Top Demo", ["Women 25-34", "Women 18-24", "Men 25-34", "Men 25-34", "Men 30-45"], "string")
scheduleSection = SectionBlock([scheduleItem], false)
scheduleItem = SectionItem("scheduled", "Posts Scheduled This Week", [scheduleList])
scheduleList = ListBlock([sch1, sch2, sch3, sch4, sch5], "number", "default")
sch1 = ListItem("Instagram Reel + Carousel", "Mon, Jun 30 · 10:00 AM · \"Summer essentials haul\"", null, "Edit", { type: "continue_conversation", context: "Edit scheduled post: Instagram Reel + Carousel for Mon Jun 30 10:00 AM" })
sch2 = ListItem("TikTok Video", "Tue, Jul 1 · 7:00 PM · \"Day in the life: creator edition\"", null, "Edit", { type: "continue_conversation", context: "Edit scheduled post: TikTok Video for Tue Jul 1 7:00 PM" })
sch3 = ListItem("YouTube Short", "Wed, Jul 2 · 12:00 PM · \"Quick tip: lighting setup\"", null, "Edit", { type: "continue_conversation", context: "Edit scheduled post: YouTube Short for Wed Jul 2 12:00 PM" })
sch4 = ListItem("X (Twitter) Thread", "Thu, Jul 3 · 9:00 AM · \"Thread: 7 tools I use daily\"", null, "Edit", { type: "continue_conversation", context: "Edit scheduled post: X Thread for Thu Jul 3 9:00 AM" })
sch5 = ListItem("LinkedIn Article", "Fri, Jul 4 · 8:00 AM · \"Building audience from 0 to 100K\"", null, "Edit", { type: "continue_conversation", context: "Edit scheduled post: LinkedIn Article for Fri Jul 4 8:00 AM" })
bestHourSection = SectionBlock([bestHourItem], false)
bestHourItem = SectionItem("best-hour", "Best Hour to Post (Based on 90-Day History)", [bestHourChart, bestHourNote])
bestHourChart = HorizontalBarChart(hourLabels, [hourReachSeries, hourEngSeries], "grouped", "Avg Reach / Engagement Rate", "Hour (Local Time)")
hourLabels = ["6 AM", "7 AM", "8 AM", "9 AM", "10 AM", "11 AM", "12 PM", "1 PM", "2 PM", "3 PM", "4 PM", "5 PM", "6 PM", "7 PM", "8 PM", "9 PM", "10 PM", "11 PM"]
hourReachSeries = Series("Avg Reach (K)", [12, 18, 28, 42, 58, 72, 85, 88, 82, 75, 68, 71, 78, 92, 95, 88, 65, 42])
hourEngSeries = Series("Engagement Rate (%)", [3.2, 3.8, 4.1, 4.5, 4.8, 5.1, 5.2, 5.0, 4.7, 4.4, 4.2, 4.5, 4.9, 5.3, 5.4, 5.1, 4.3, 3.6])
bestHourNote = TextContent("**Peak reach:** 8 PM (95K avg). **Peak engagement:** 8 PM (5.4%). Recommend scheduling high-effort content for 7–9 PM window.")
commentsSection = SectionBlock([commentsItem], false)
commentsItem = SectionItem("comments", "Comments Waiting for Reply (23 total)", [commentsList])
commentsList = ListBlock([cmt1, cmt2, cmt3, cmt4, cmt5], "number", "default")
cmt1 = ListItem("Instagram Reel · \"Summer essentials\"", "Sarah M.: \"Where did you get that tote bag? Link please!\" · 2h ago", null, "Reply", { type: "continue_conversation", context: "Reply to comment on Instagram Reel: 'Where did you get that tote bag? Link please!'" })
cmt2 = ListItem("TikTok · \"Day in the life\"", "Alex K.: \"Your editing style is insane 🔥 What app?\" · 4h ago", null, "Reply", { type: "continue_conversation", context: "Reply to comment on TikTok: 'Your editing style is insane 🔥 What app?'" })
cmt3 = ListItem("YouTube Short · \"Lighting setup\"", "Jamie R.: \"Does this work for phone cameras too?\" · 6h ago", null, "Reply", { type: "continue_conversation", context: "Reply to comment on YouTube Short: 'Does this work for phone cameras too?'" })
cmt4 = ListItem("X Thread · \"7 tools I use\"", "Devon L.: \"Notion template when? 👀\" · 8h ago", null, "Reply", { type: "continue_conversation", context: "Reply to comment on X Thread: 'Notion template when? 👀'" })
cmt5 = ListItem("LinkedIn · \"Building audience\"", "Priya S.: \"Love the transparency on revenue breakdown\" · 12h ago", null, "Reply", { type: "continue_conversation", context: "Reply to comment on LinkedIn: 'Love the transparency on revenue breakdown'" })
earningsSection = SectionBlock([earningsItem], false)
earningsItem = SectionItem("earnings", "Earnings This Month ($12,840 estimated)", [earningsChart, earningsBreakdown])
earningsChart = AreaChart(earnLabels, [earnAdSeries, earnSponsorSeries, earnAffiliateSeries, earnProductSeries], "natural", "Date", "Earnings ($)")
earnLabels = ["Jun 1", "Jun 5", "Jun 10", "Jun 15", "Jun 20", "Jun 25", "Jun 27"]
earnAdSeries = Series("Ad Revenue", [120, 180, 240, 310, 380, 450, 480])
earnSponsorSeries = Series("Sponsorships", [200, 200, 400, 400, 600, 800, 1200])
earnAffiliateSeries = Series("Affiliate", [50, 80, 110, 150, 190, 230, 260])
earnProductSeries = Series("Digital Products", [300, 350, 420, 500, 580, 650, 720])
earningsBreakdown = EntityList([earn1, earn2, earn3, earn4, earn5], "default", { left: "Source", right: "Amount", rightVariant: "number" }, { left: "Total", right: "$12,840", rightVariant: "number" })
earn1 = { left: "Ad Revenue (YouTube + IG)", right: "$4,800", rightVariant: "number" }
earn2 = { left: "Sponsorships (3 deals)", right: "$5,200", rightVariant: "number" }
earn3 = { left: "Affiliate Commissions", right: "$1,840", rightVariant: "number" }
earn4 = { left: "Digital Products (templates)", right: "$1,000", rightVariant: "number" }
earn5 = { left: "Platform Bonuses", right: "$0", rightVariant: "number" }
collaborationsSection = SectionBlock([collabItem], false)
collabItem = SectionItem("collabs", "Pending Collaboration Requests (4)", [collabList])
collabList = ListBlock([col1, col2, col3, col4], "number", "default")
col1 = ListItem("EcoThread Apparel", "Instagram Reel + Story · $2,500 · Sustainable fashion brand", null, "Review", { type: "continue_conversation", context: "Review collaboration request from EcoThread Apparel: Instagram Reel + Story for $2,500" })
col2 = ListItem("Notion", "YouTube Dedicated · $8,000 · Productivity software", null, "Review", { type: "continue_conversation", context: "Review collaboration request from Notion: YouTube Dedicated for $8,000" })
col3 = ListItem("Moment Lens", "TikTok + IG Reel · $3,200 · Camera accessories", null, "Review", { type: "continue_conversation", context: "Review collaboration request from Moment Lens: TikTok + IG Reel for $3,200" })
col4 = ListItem("Skillshare", "Newsletter + LinkedIn · $1,500 · Learning platform", null, "Review", { type: "continue_conversation", context: "Review collaboration request from Skillshare: Newsletter + LinkedIn for $1,500" })
scheduleForm = SectionBlock([formItem], false)
formItem = SectionItem("schedule", "Schedule a New Post", [scheduleFormComponent])
scheduleFormComponent = Form("schedule-post", formButtons, [fcPlatform, fcContentType, fcCaption, fcMedia, fcDateTime, fcFirstComment, fcCrosspost])
formButtons = Buttons([btnSchedule, btnSaveDraft], "row")
btnSchedule = Button("Schedule Post", { type: "continue_conversation", context: "Schedule the post with the provided details across selected platforms" }, "primary")
btnSaveDraft = Button("Save as Draft", { type: "continue_conversation", context: "Save this post as a draft for later editing" }, "secondary")
fcPlatform = FormControl("Platform(s)", platformChips, "Select one or more platforms to post to")
platformChips = Chips("platforms", "multiple", [chipIg, chipTt, chipYt, chipTw, chipLi], {}, ["instagram", "tiktok"])
chipIg = ChipItem("instagram", "Instagram", chipIgIcon)
chipIgIcon = Icon("instagram", "brands")
chipTt = ChipItem("tiktok", "TikTok", chipTtIcon)
chipTtIcon = Icon("music", "multimedia")
chipYt = ChipItem("youtube", "YouTube", chipYtIcon)
chipYtIcon = Icon("youtube", "brands")
chipTw = ChipItem("twitter", "X (Twitter)", chipTwIcon)
chipTwIcon = Icon("twitter", "brands")
chipLi = ChipItem("linkedin", "LinkedIn", chipLiIcon)
chipLiIcon = Icon("linkedin", "brands")
fcContentType = FormControl("Content Type", typeSelect, "Format determines available features (e.g. Reels, Shorts, Threads)")
typeSelect = Select("content-type", [type1, type2, type3, type4, type5, type6], "Select content type")
type1 = SelectItem("reel", "Instagram Reel")
type2 = SelectItem("carousel", "Instagram Carousel")
type3 = SelectItem("tiktok", "TikTok Video")
type4 = SelectItem("short", "YouTube Short")
type5 = SelectItem("thread", "X Thread")
type6 = SelectItem("article", "LinkedIn Article")
fcCaption = FormControl("Caption", captionArea, "Include hashtags, mentions, and line breaks. Character limits vary by platform.")
captionArea = TextArea("caption", "Write your caption here... #creator #behindthescenes @collabpartner", 6)
fcMedia = FormControl("Media", mediaInput, "Upload images or video (max 500MB). Multiple files for carousels.")
mediaInput = Input("media", "Drag & drop or click to upload", "url")
fcDateTime = FormControl("Schedule Date & Time", dateTimePicker, "Times shown in your local timezone (UTC-4)")
dateTimePicker = DatePicker("schedule-datetime", "single", { required: true })
fcFirstComment = FormControl("First Comment (Optional)", firstCommentArea, "Pin a comment with links, hashtags, or CTA")
firstCommentArea = TextArea("first-comment", "Add a pinned comment...", 3)
fcCrosspost = FormControl("Cross-post Settings", crosspostCards, "Adapt caption format per platform automatically")
crosspostCards = OptionCards("crosspost", "single", [cross1, cross2], {}, "adapt")
cross1 = OptionCard("adapt", "Auto-adapt per platform", "Optimize hashtags, mentions, character limits", cross1icon)
cross1icon = Icon("wand", "magic")
cross2 = OptionCard("identical", "Post identical everywhere", "Same caption and media on all platforms", cross2icon)
cross2icon = Icon("copy", "edit")
followUps = FollowUpBlock([fu1, fu2, fu3, fu4])
fu1 = FollowUpItem("Show me my top 10 posts of all time")
fu2 = FollowUpItem("Generate content ideas for next week")
fu3 = FollowUpItem("Compare my growth to similar creators")
fu4 = FollowUpItem("Export this month's analytics as CSV")