type DataSourceFormat = "number" | "currency" | "percent" | "date" | "relative-time" | "duration-seconds"

// Point to the "totalRevenue" field in the "revenue" data source
const source: DataSource = {
  sourceId: "revenue",
  field: "totalRevenue",
  format: "currency",
};

type LayoutGap = "none" | "sm" | "md"

const kpis: KPIRowSectionConfig = {
  type: "kpi-row",
  columns: 3,
  metrics: [
    { label: "MRR", source: { sourceId: "rev", field: "mrr", format: "currency" } },
    { label: "Subscribers", source: { sourceId: "rev", field: "count" } },
    { label: "Churn", source: { sourceId: "rev", field: "churnRate", format: "percent" } },
  ],
};

type SummaryQuadSlotConfig = SummaryQuadMetricSlotConfig | SummaryQuadSparklineSlotConfig | SummaryQuadEmptySlotConfig

const issues: ListSectionConfig = {
  type: "list",
  source: { sourceId: "github", field: "issues" },
  itemTemplate: {
    title: { sourceId: "github", field: "title" },
    subtitle: { sourceId: "github", field: "author" },
    badge: { label: { sourceId: "github", field: "state" } },
  },
  emptyMessage: "No open issues",
};

type FilterBarControlConfig = FilterBarSelectControlConfig | FilterBarRangeControlConfig | FilterBarToggleControlConfig

const visitors: ChartSectionConfig = {
  type: "chart",
  variant: "area",
  source: { sourceId: "analytics", field: "dailyVisitors" },
  height: 200,
  color: "var(--chart-1)",
};

type SectionConfig = AlertSectionConfig | HeadlineStatSectionConfig | OverviewPanelSectionConfig | KPIRowSectionConfig | SummaryQuadSectionConfig | ListSectionConfig | RowListSectionConfig | StreamListSectionConfig | FilterBarSectionConfig | DenseRankedTableSectionConfig | TableSectionConfig | CardListSectionConfig | ChartSectionConfig | ActivityChartSectionConfig | TabsSectionConfig | StackLayoutConfig | GridLayoutConfig | SplitLayoutConfig

const config: WidgetTemplateConfig = {
  version: 1,
  dataSources: [{ id: "my-widget" }],
  sections: [
    kpiRow("my-widget", [{ label: "Total", field: "count" }]),
    list("my-widget", "items", { title: "name", subtitle: "status" }),
  ],
  expandedSections: [
    // Full table in expanded view
  ],
};

type WidgetModalSize = "sm" | "md" | "lg"

type GridSlot = "slot1" | "slot2" | "slot3" | "slot4" | "slot5" | "slot6" | "slot7" | "slot8" | "slot9"

type WidgetVisualEditorBinding = WidgetTemplateVisualEditorBinding<TConfig>

type WidgetExpandAction = { type: "expanded-view"; } | { type: "open-plugin"; pluginId: string; }

function stackLayout(sections: SectionConfig[], options?: { gap?: LayoutGap; } | undefined): StackLayoutConfig

function gridLayout(sections: SectionConfig[], options: { columns: 1 | 2 | 3 | 4; gap?: LayoutGap; }): GridLayoutConfig

function splitLayout(options: { left?: SectionConfig[]; right: SectionConfig[]; leftWidth?: number; gap?: LayoutGap; divider?: boolean; }): SplitLayoutConfig

function createSummaryContentRecipe(config: { summary: SectionConfig[]; content?: SectionConfig | SectionConfig[]; gap?: LayoutGap; }): SectionConfig[]

function createSummaryOnlyRecipe(config: { summary: SectionConfig[]; gap?: LayoutGap; }): SectionConfig[]

function createContentOnlyRecipe(config: { content: SectionConfig | SectionConfig[]; gap?: LayoutGap; }): SectionConfig[]

function createSummaryListRecipe(config: { summary: SectionConfig[]; list: SectionConfig; gap?: LayoutGap; }): SectionConfig[]

function createSummaryChartListRecipe(config: { summary: SectionConfig[]; chart: SectionConfig; list: SectionConfig; gap?: LayoutGap; }): SectionConfig[]

function createRailContentRecipe(config: { rail?: SectionConfig[]; content: SectionConfig | SectionConfig[]; railWidth?: number; gap?: LayoutGap; divider?: boolean; }): SectionConfig[]

function createRailListRecipe(config: { rail?: SectionConfig[]; list: SectionConfig; railWidth?: number; gap?: LayoutGap; divider?: boolean; }): SectionConfig[]

function createFeedListRecipe(config: { content: SectionConfig | SectionConfig[]; gap?: LayoutGap; }): SectionConfig[]

function kpiRow(sourceId: string, metrics: { label: string; field: string; format?: DataSourceFormat; changeField?: string; sparklineField?: string; }[], options?: { columns?: KPIRowSectionConfig["columns"]; variant?: KPIRowSectionConfig["variant"]; } | undefined): KPIRowSectionConfig

kpiRow("revenue", [
  { label: "MRR", field: "mrr", format: "currency" },
  { label: "Subscribers", field: "subscriberCount" },
])

function headlineStat(sourceId: string, field: string, label: string, options?: { format?: DataSourceFormat; indicatorColor?: string; } | undefined): HeadlineStatSectionConfig

headlineStat("health", "uptimePercent", "Uptime", { format: "percent" })

function list(sourceId: string, field: string, template: { title: string; subtitle?: string; value?: string; timestamp?: string; badge?: string; emptyMessage?: string; maxItems?: number; }): ListSectionConfig

list("github", "pullRequests", {
  title: "title",
  subtitle: "author",
  badge: "status",
  emptyMessage: "No open PRs",
})

function rowList(sourceId: string, field: string, template: { title: string; subtitle?: string; badge?: string; value?: string; timestamp?: string; emptyMessage?: string; maxItems?: number; }): RowListSectionConfig

rowList("sentry", "issues", {
  title: "title",
  subtitle: "culprit",
  badge: "level",
  timestamp: "lastSeen",
})

function chart(sourceId: string, field: string, options?: { variant?: ChartSectionConfig["variant"]; height?: number; xKey?: string; yKey?: string; color?: string; series?: ChartSectionConfig["series"]; fillHeight?: boolean; } | undefined): ChartSectionConfig

chart("analytics", "dailyVisitors", { variant: "area", height: 200, color: "var(--accent)" })

function cardList(sourceId: string, field: string, template: { title: string; subtitle?: string; description?: string; image?: string; badge?: string; columns?: CardListSectionConfig["columns"]; emptyMessage?: string; maxItems?: number; searchable?: boolean; }): CardListSectionConfig

cardList("store", "apps", {
  title: "name",
  subtitle: "developer",
  description: "summary",
  image: "iconUrl",
  columns: 2,
})

function summaryQuad(sourceId: string, slots: ({ label: string; field: string; format?: DataSourceFormat; changeField?: string; sparklineField?: string; } | { kind: "empty"; })[]): SummaryQuadSectionConfig

summaryQuad("revenue", [
  { label: "MRR", field: "mrr" },
  { label: "ARR", field: "arr" },
  { label: "Churn", field: "churnRate" },
  { label: "LTV", field: "ltv" },
])

function alert(severity: "error" | "warning" | "info" | "success" | "setup", message: string, options?: { source?: DataSource; dismissible?: boolean; action?: { label: string; href?: string; }; } | undefined): AlertSectionConfig

alert("warning", "API rate limit approaching 80%", { dismissible: true })

function tabs(tabConfigs: { id: string; label: string; sections: SectionConfig[]; countSource?: DataSource; }[], options?: { defaultTab?: string; variant?: "compact" | "expanded"; } | undefined): TabsSectionConfig

tabs([
  { id: "issues", label: "Issues", sections: [list("github", "issues", { title: "title" })] },
  { id: "prs", label: "Pull Requests", sections: [list("github", "prs", { title: "title" })] },
])

function extractDataSources(sections: SectionConfig[]): Map<string, Set<string>>

function createMockWidgetData(config: WidgetTemplateConfig, itemCount?: number): Record<string, MockDataShape>

const mockData = createMockWidgetData(MY_TEMPLATE_CONFIG);
// { totalCount: 42, activeCount: 28, items: [{ title: "Item 1", ... }, ...] }

function createEmptyWidgetData(config: WidgetTemplateConfig): Record<string, MockDataShape>

function createWidgetPreviewStates(config: WidgetTemplateConfig, overrides?: { happy?: T; } | undefined): WidgetPreviewStates<T>

const states = createWidgetPreviewStates(MY_CONFIG, {
  happy: myFetchedData,
});
// Iterate over states to render previews
for (const [name, data] of Object.entries(states)) {
  console.log(`${name}:`, data);
}