root = Card([header, filterCard, overviewKpis, growthCard, audienceCard, bestPostsCard, scheduledCard, bestHourCard, commentsCard, earningsCard, collabCard, scheduleCard], "card", "column", "xl")
header = CardHeader("Creator Studio", "Cross-platform analytics + planning")
filterCard = Card([filterIntro, platformFilter], "sunk")
filterIntro = Heading("Narrow everything to one platform", "h3")
platformFilter = Form("platform-filter", filterButtons, [platformControl])
platformControl = FormControl("Platform", platformSelect, "Pick a platform to see platform-specific stats")
platformSelect = Select("platform", [platformAll, platformIG, platformTT, platformYT, platformX], "All platforms")
platformAll = SelectItem("all", "All platforms")
platformIG = SelectItem("instagram", "Instagram")
platformTT = SelectItem("tiktok", "TikTok")
platformYT = SelectItem("youtube", "YouTube")
platformX = SelectItem("x", "X / Twitter")
filterButtons = Buttons([applyFilter])
applyFilter = Button("Apply filter", null, "primary")
overviewKpis = Card([followerKpi, growthKpi, engagementKpi, earningsKpi], "sunk", "row", "xl")
followerKpi = TextContent("**2.4M**\nTotal followers", "default")
growthKpi = TextContent("**+3.2%**\nGrowth this month", "default")
engagementKpi = TextContent("**4.8%**\nEngagement rate", "default")
earningsKpi = TextContent("**$12,480**\nEarnings this month", "default")
growthCard = Card([growthHeading, followerGrowthChart], "clear")
growthHeading = Heading("Follower growth — past month", "h3")
followerGrowthChart = LineChart(["Week 1", "Week 2", "Week 3", "Week 4"], [followerSeries], "natural", "Week", "Followers")
followerSeries = Series("Followers", [2280000, 2330000, 2370000, 2400000])
audienceCard = Card([audienceHeading, audiencePie], "clear")
audienceHeading = Heading("Audience split by platform", "h3")
audiencePie = PieChart(["Instagram", "TikTok", "YouTube", "X"], [46, 28, 18, 8], "donut")
bestPostsCard = Card([bestPostsHeading, bestPostsTable], "clear")
bestPostsHeading = Heading("Best posts this month", "h3")
bestPostsTable = Table([postName, postReach])
postName = Col("Post", ["Reel: Behind the scenes", "TikTok: 30-day challenge", "YouTube Short: Setup tour", "Photo carousel: FAQ"])
postReach = Col("Reach", ["482K", "371K", "295K", "204K"])
scheduledCard = Card([scheduledHeading, scheduledTable], "clear")
scheduledHeading = Heading("Posts scheduled this week", "h3")
scheduledTable = Table([schedDay, schedTime, schedCaption])
schedDay = Col("Day", ["Mon", "Tue", "Wed", "Thu", "Fri"])
schedTime = Col("Time", ["7:00 PM", "12:30 PM", "6:15 PM", "8:00 AM", "5:45 PM"])
schedCaption = Col("Caption", ["New product teaser", "Midweek tips reel", "Behind the scenes", "Weekly Q&A prompt", "Weekend roundup"])
bestHourCard = Card([bestHourHeading, bestHourCallout, bestHourChart], "clear")
bestHourHeading = Heading("Best hour to post", "h3")
bestHourCallout = TextCallout("success", "Best time", "7–9 PM historically drives the highest engagement")
bestHourChart = HorizontalBarChart(["6 AM", "9 AM", "12 PM", "3 PM", "6 PM", "9 PM", "11 PM"], [engagementByHourSeries], "grouped", "Engagement", "Hour")
engagementByHourSeries = Series("Avg engagement rate %", [1.8, 2.4, 3.1, 2.9, 4.2, 5.1, 2.6])
commentsCard = Card([commentsHeading, commentsAlert, commentsList], "clear")
commentsHeading = Heading("Comments waiting for a reply", "h3")
commentsAlert = Alert("3 comments awaiting reply", "Longest wait: 2 days on your latest post", "warning")
commentsList = ListBlock([comment1, comment2, comment3])
comment1 = ListItem("@sarah_creates", "Can you share which camera you use?", null, "Reply")
comment2 = ListItem("@dev_dan", "Love the editing style — tutorial?", null, "Reply")
comment3 = ListItem("@maya.lens", "How long did the setup take?", null, "Reply")
earningsCard = Card([earningsHeading, earningsAmount, earningsChart], "clear")
earningsHeading = Heading("Earnings this month", "h3")
earningsAmount = TextContent("**$12,480**\nAcross brand deals, ads, and merch", "large")
earningsChart = AreaChart(["Week 1", "Week 2", "Week 3", "Week 4"], [earningsSeries], "natural", "Week", "Earnings ($)")
earningsSeries = Series("Earnings", [2400, 5100, 8900, 12480])
collabCard = Card([collabHeading, collabTable, collabButtons], "clear")
collabHeading = Heading("Pending collaboration requests", "h3")
collabTable = Table([collabBrand, collabDeal, collabStatus])
collabBrand = Col("Brand", ["Glow Skincare", "Nomad Coffee", "FitTrack"])
collabDeal = Col("Deal", ["$3,000 — 1 Reel + stories", "$1,500 — 2 TikTok posts", "$2,000 — YouTube integration"])
collabStatus = Col("Status", ["Reviewing", "Negotiating", "Reviewing"])
collabButtons = Buttons([approveBtn, declineBtn])
approveBtn = Button("Approve", null, "primary")
declineBtn = Button("Decline", null, "tertiary")
scheduleCard = Card([scheduleHeading, scheduleForm], "sunk")
scheduleHeading = Heading("Schedule a new post", "h3")
scheduleForm = Form("schedule-post", scheduleButtons, [captionControl, dateControl, timeControl, schedulePlatformControl])
captionControl = FormControl("Caption", captionInput, "Write the post text")
captionInput = TextArea("caption", "Your caption...", 4)
dateControl = FormControl("Date", datePicker)
datePicker = DatePicker("post-date", "single")
timeControl = FormControl("Time", timeSelect)
timeSelect = Select("post-time", [time1, time2, time3, time4], "Select a time")
time1 = SelectItem("07:00", "7:00 AM")
time2 = SelectItem("12:30", "12:30 PM")
time3 = SelectItem("19:00", "7:00 PM")
time4 = SelectItem("21:00", "9:00 PM")
schedulePlatformControl = FormControl("Platform", schedulePlatformSelect)
schedulePlatformSelect = Select("post-platform", [scheduleIG, scheduleTT, scheduleYT, scheduleX])
scheduleIG = SelectItem("instagram", "Instagram")
scheduleTT = SelectItem("tiktok", "TikTok")
scheduleYT = SelectItem("youtube", "YouTube")
scheduleX = SelectItem("x", "X / Twitter")
scheduleButtons = Buttons([scheduleBtn, draftBtn])
scheduleBtn = Button("Schedule post", null, "primary")
draftBtn = Button("Save draft", null, "tertiary")