root = Card([header, categoryFilter, draftsSection, publishedSection, topArticleSection, readershipSection, commentsSection, scheduleSection, newDraftBtn])
header = CardHeader("Content Studio", "Editor's dashboard — drafts, published, analytics & scheduling")
categoryFilter = Chips("category-filter", "multiple", [catAll, catTech, catBusiness, catCulture, catScience, catHealth], {}, ["all"])
catAll = ChipItem("all", "All", catAllIcon)
catAllIcon = Icon("grid", "layout")
catTech = ChipItem("tech", "Technology", catTechIcon)
catTechIcon = Icon("cpu", "hardware")
catBusiness = ChipItem("business", "Business", catBusinessIcon)
catBusinessIcon = Icon("briefcase", "business")
catCulture = ChipItem("culture", "Culture", catCultureIcon)
catCultureIcon = Icon("music", "multimedia")
catScience = ChipItem("science", "Science", catScienceIcon)
catScienceIcon = Icon("flask-conical", "science")
catHealth = ChipItem("health", "Health", catHealthIcon)
catHealthIcon = Icon("heart-pulse", "medical")
draftsSection = SectionBlock([draftsSectionItem], false)
draftsSectionItem = SectionItem("drafts", "Drafts (12)", [draftsTable])
draftsTable = Table([colDraftTitle, colDraftStatus, colDraftCategory, colDraftUpdated, colDraftActions])
colDraftTitle = Col("Title", draftTitles, "string")
draftTitles = ["The Future of AI in Healthcare", "Quarterly Market Analysis: Q3 2026", "Urban Farming Revolution", "Deep Dive: Quantum Computing Breakthroughs", "Sustainable Fashion Supply Chains", "Remote Work Culture Shift", "Green Energy Investment Trends", "Neuroscience of Decision Making", "Crypto Regulation Update", "Mental Health in Tech", "Space Tourism Economics", "Digital Art NFT Evolution"]
colDraftStatus = Col("Status", draftStatuses, "string")
draftStatuses = ["In Review", "Editing", "Draft", "In Review", "Draft", "Editing", "In Review", "Draft", "Editing", "Draft", "In Review", "Draft"]
colDraftCategory = Col("Category", draftCategories, "string")
draftCategories = ["Health", "Business", "Culture", "Science", "Business", "Culture", "Business", "Science", "Tech", "Health", "Science", "Tech"]
colDraftUpdated = Col("Last Updated", draftUpdated, "string")
draftUpdated = ["2h ago", "5h ago", "1d ago", "3h ago", "2d ago", "4h ago", "1h ago", "6h ago", "3d ago", "1d ago", "2h ago", "4h ago"]
colDraftActions = Col("Actions", draftActions, "string")
draftActions = ["Edit", "Edit", "Edit", "Edit", "Edit", "Edit", "Edit", "Edit", "Edit", "Edit", "Edit", "Edit"]
publishedSection = SectionBlock([publishedSectionItem], false)
publishedSectionItem = SectionItem("published", "Published This Week (8)", [publishedTable])
publishedTable = Table([colPubTitle, colPubCategory, colPubDate, colPubViews, colPubEngagement])
colPubTitle = Col("Title", pubTitles, "string")
pubTitles = ["AI Transforms Radiology Diagnostics", "Global Supply Chain Resilience", "The Rise of Micro-Influencers", "Breakthrough in Battery Technology", "Gen Z Workplace Expectations", "Carbon Credit Market Analysis", "Virtual Reality Therapy Applications", "Decentralized Finance Regulation"]
colPubCategory = Col("Category", pubCategories, "string")
pubCategories = ["Health", "Business", "Culture", "Science", "Culture", "Business", "Health", "Tech"]
colPubDate = Col("Published", pubDates, "string")
pubDates = ["Mon 09:00", "Tue 14:30", "Wed 11:00", "Thu 08:00", "Fri 16:00", "Mon 10:00", "Tue 13:00", "Wed 09:30"]
colPubViews = Col("Views", pubViews, "number")
pubViews = [45200, 38100, 32400, 29800, 27600, 24900, 22100, 19800]
colPubEngagement = Col("Engagement", pubEngagement, "string")
pubEngagement = ["4.2%", "3.8%", "5.1%", "3.5%", "4.7%", "3.2%", "4.9%", "3.9%"]
topArticleSection = SectionBlock([topArticleSectionItem], false)
topArticleSectionItem = SectionItem("top-article", "Most-Read Article This Month", [topArticleCard])
topArticleCard = CompositeCardBlock([topArticleItem], "grid", true)
topArticleItem = CompositeCardItem("top-article-1", topArticleHeader, [topArticleMetric, topArticleBody, topArticleTags], { price: topArticlePrice, button: topArticleBtn })
topArticleHeader = IconText(topArticleIcon, "success", "m", "AI Transforms Radiology Diagnostics", "Health · Published Monday 09:00", true, "horizontal")
topArticleIcon = Icon("trending-up", "charts")
topArticleMetric = MetricIndicatorInline("45,200 views", "4.2% engagement · 1,240 shares", { direction: "up", value: 23.5 })
topArticleBody = Text("text", "New AI models achieve 99.2% accuracy in detecting early-stage lung cancer from CT scans, outperforming radiologists in controlled trials. The technology reduces false positives by 34% and cuts diagnosis time from hours to minutes.", "Deep-dive analysis with expert interviews")
topArticleTags = TagBlock(["Breaking", "Health Tech", "AI", "Peer-Reviewed"])
topArticlePrice = MetricIndicatorWithStrikethrough("0:00", "Time to read", "8 min")
topArticleBtn = Button("View Analytics", { type: "continue_conversation", context: "Show detailed analytics for AI Transforms Radiology Diagnostics" }, "secondary")
readershipSection = SectionBlock([readershipSectionItem], false)
readershipSectionItem = SectionItem("readership", "Readership — Past 30 Days", [readershipChart])
readershipChart = LineChart(readershipDates, [readershipSeries], "natural", "Date", "Daily Views (k)")
readershipDates = ["Jun 15", "Jun 16", "Jun 17", "Jun 18", "Jun 19", "Jun 20", "Jun 21", "Jun 22", "Jun 23", "Jun 24", "Jun 25", "Jun 26", "Jun 27", "Jun 28", "Jun 29", "Jun 30", "Jul 1", "Jul 2", "Jul 3", "Jul 4", "Jul 5", "Jul 6", "Jul 7", "Jul 8", "Jul 9", "Jul 10", "Jul 11", "Jul 12", "Jul 13", "Jul 14"]
readershipSeries = Series("Views", [12.4, 14.2, 13.8, 15.1, 16.3, 14.7, 13.9, 11.2, 10.8, 12.1, 13.5, 14.8, 15.2, 16.0, 14.5, 13.7, 18.2, 19.5, 17.8, 16.4, 15.1, 14.3, 13.9, 12.8, 14.6, 15.8, 16.2, 17.1, 15.4, 14.9])
commentsSection = SectionBlock([commentsSectionItem], false)
commentsSectionItem = SectionItem("comments", "Comments Awaiting Reply (6)", [commentsTable])
commentsTable = Table([colCommentArticle, colCommentAuthor, colCommentText, colCommentTime, colCommentAction])
colCommentArticle = Col("Article", commentArticles, "string")
commentArticles = ["AI Transforms Radiology Diagnostics", "Global Supply Chain Resilience", "The Rise of Micro-Influencers", "Breakthrough in Battery Technology", "Gen Z Workplace Expectations", "Carbon Credit Market Analysis"]
colCommentAuthor = Col("Author", commentAuthors, "string")
commentAuthors = ["Dr. Sarah Chen", "Marcus Johnson", "Emma Rodriguez", "Prof. David Kim", "Lisa Thompson", "Robert Chang"]
colCommentText = Col("Comment", commentTexts, "string")
commentTexts = ["Excellent piece! Could you elaborate on the false positive reduction methodology?", "How does this compare to 2023 supply chain data?", "Great insights on engagement rates. Any data on TikTok vs Instagram?", "What are the commercial viability timelines for solid-state batteries?", "Do you have data on hybrid vs fully remote preferences?", "Interesting analysis. What about voluntary carbon markets?"]
colCommentTime = Col("Time", commentTimes, "string")
commentTimes = ["15 min ago", "1h ago", "2h ago", "3h ago", "4h ago", "5h ago"]
colCommentAction = Col("Action", commentActions, "string")
commentActions = ["Reply", "Reply", "Reply", "Reply", "Reply", "Reply"]
scheduleSection = SectionBlock([scheduleSectionItem], false)
scheduleSectionItem = SectionItem("schedule", "Schedule a Piece", [scheduleForm])
scheduleForm = Form("schedule-piece", scheduleButtons, [fcScheduleTitle, fcScheduleCategory, fcScheduleDate, fcScheduleTime, fcScheduleNotes])
scheduleButtons = Buttons([btnScheduleSubmit, btnScheduleCancel], "row")
btnScheduleSubmit = Button("Schedule", { type: "continue_conversation", context: "Schedule the piece with the provided details" }, "primary")
btnScheduleCancel = Button("Cancel", { type: "continue_conversation", context: "Cancel scheduling" }, "secondary")
fcScheduleTitle = FormControl("Title", scheduleTitleInput, "Enter the article title")
scheduleTitleInput = Input("schedule-title", "e.g. The Future of Renewable Energy", "text", { required: true, minLength: 5, maxLength: 120 })
fcScheduleCategory = FormControl("Category", scheduleCategorySelect, "Select the primary category")
scheduleCategorySelect = Select("schedule-category", [scTech, scBusiness, scCulture, scScience, scHealth], "Choose category", { required: true })
scTech = SelectItem("tech", "Technology")
scBusiness = SelectItem("business", "Business")
scCulture = SelectItem("culture", "Culture")
scScience = SelectItem("science", "Science")
scHealth = SelectItem("health", "Health")
fcScheduleDate = FormControl("Publish Date", scheduleDatePicker, "Select the publication date")
scheduleDatePicker = DatePicker("schedule-date", "single", { required: true })
fcScheduleTime = FormControl("Publish Time", scheduleTimeInput, "Enter time in 24-hour format (UTC)")
scheduleTimeInput = Input("schedule-time", "09:00", "text", { required: true, pattern: "^([01]?[0-9]|2[0-3]):[0-5][0-9]$" })
fcScheduleNotes = FormControl("Editor Notes", scheduleNotesArea, "Optional notes for the publishing team")
scheduleNotesArea = TextArea("schedule-notes", "e.g. Coordinate with marketing for launch campaign...", 3)
newDraftBtn = Button("+ Start New Draft", { type: "continue_conversation", context: "Create a new blank draft in the editor" }, "primary", "large")