| 1 | "use client"; |
| 2 | |
| 3 | import { ColumnItemPlugin, ColumnPlugin } from "@platejs/layout/react"; |
| 4 | import { KEYS, type TElement, type TText } from "platejs"; |
| 5 | |
| 6 | import { |
| 7 | ANTV_INFOGRAPHIC, |
| 8 | AREA_CHART_ELEMENT, |
| 9 | ARROW_LIST, |
| 10 | ARROW_LIST_ITEM, |
| 11 | BAR_CHART_ELEMENT, |
| 12 | BEFORE_AFTER_GROUP, |
| 13 | BEFORE_AFTER_SIDE, |
| 14 | BOX_GROUP, |
| 15 | BOX_ITEM, |
| 16 | BOX_PLOT_CHART_ELEMENT, |
| 17 | BUBBLE_CHART_ELEMENT, |
| 18 | BULLET_GROUP, |
| 19 | BULLET_ITEM, |
| 20 | BUTTON_ELEMENT, |
| 21 | CANDLESTICK_CHART_ELEMENT, |
| 22 | CHORD_CHART_ELEMENT, |
| 23 | CIRCULAR_GRID_GROUP, |
| 24 | CIRCULAR_GRID_ITEM, |
| 25 | COMPARE_GROUP, |
| 26 | COMPARE_SIDE, |
| 27 | COMPOSED_CHART_ELEMENT, |
| 28 | CONE_FUNNEL_CHART_ELEMENT, |
| 29 | CONNECTED_CIRCLES_GROUP, |
| 30 | CONNECTED_CIRCLES_ITEM, |
| 31 | CONS_ITEM, |
| 32 | CONTRIBUTOR_ELEMENT, |
| 33 | CYCLE_GROUP, |
| 34 | CYCLE_ITEM, |
| 35 | DEFAULT_CHART_DATA, |
| 36 | DONUT_CHART_ELEMENT, |
| 37 | FUNNEL_CHART_ELEMENT, |
| 38 | HEATMAP_CHART_ELEMENT, |
| 39 | HISTOGRAM_CHART_ELEMENT, |
| 40 | ICON_LIST, |
| 41 | ICON_LIST_ITEM, |
| 42 | LABEL_ELEMENT, |
| 43 | LINE_CHART_ELEMENT, |
| 44 | LINEAR_GAUGE_ELEMENT, |
| 45 | NIGHTINGALE_CHART_ELEMENT, |
| 46 | OHLC_CHART_ELEMENT, |
| 47 | PIE_CHART_ELEMENT, |
| 48 | PRESENTATION_TITLE_ELEMENT, |
| 49 | PROS_CONS_GROUP, |
| 50 | PROS_ITEM, |
| 51 | PYRAMID_CHART_ELEMENT, |
| 52 | PYRAMID_GROUP, |
| 53 | PYRAMID_ITEM, |
| 54 | QUOTE_ELEMENT, |
| 55 | RADAR_CHART_ELEMENT, |
| 56 | RADIAL_BAR_CHART_ELEMENT, |
| 57 | RADIAL_COLUMN_CHART_ELEMENT, |
| 58 | RADIAL_GAUGE_ELEMENT, |
| 59 | RANGE_AREA_CHART_ELEMENT, |
| 60 | RANGE_BAR_CHART_ELEMENT, |
| 61 | SANKEY_CHART_ELEMENT, |
| 62 | SCATTER_CHART_ELEMENT, |
| 63 | SEQUENCE_ARROW_GROUP, |
| 64 | SEQUENCE_ARROW_ITEM, |
| 65 | SLOPE_GROUP, |
| 66 | SLOPE_ITEM, |
| 67 | SNAKE_GROUP, |
| 68 | SNAKE_ITEM, |
| 69 | STAIR_ITEM, |
| 70 | STAIRCASE_GROUP, |
| 71 | STATS_GROUP, |
| 72 | STATS_ITEM, |
| 73 | STEPS_GROUP, |
| 74 | STEPS_ITEM, |
| 75 | SUNBURST_CHART_ELEMENT, |
| 76 | TIMELINE_GROUP, |
| 77 | TIMELINE_ITEM, |
| 78 | TREEMAP_CHART_ELEMENT, |
| 79 | WATERFALL_CHART_ELEMENT, |
| 80 | } from "@/components/notebook/presentation/editor/lib"; |
| 81 | import { CALLOUT_VARIANTS } from "@/components/plate/ui/callout-variants"; |
| 82 | |
| 83 | export type PaletteItem = { |
| 84 | category?: string; |
| 85 | description?: string; |
| 86 | key: string; |
| 87 | label: string; |
| 88 | node: TElement; |
| 89 | }; |
| 90 | |
| 91 | const text = (value: string): TText => ({ text: value }) as const; |
| 92 | |
| 93 | const paragraph = (children: Array<TElement | TText> = [text("")]): TElement => |
| 94 | ({ type: KEYS.p, children }) as unknown as TElement; |
| 95 | |
| 96 | const h3 = (content: string): TElement => |
| 97 | ({ type: "h3", children: [text(content)] }) as unknown as TElement; |
| 98 | |
| 99 | const h4 = (content: string): TElement => |
| 100 | ({ type: "h4", children: [text(content)] }) as unknown as TElement; |
| 101 | |
| 102 | const heading = ( |
| 103 | type: "h1" | "h2" | "h3" | "h4" | "h5" | "h6", |
| 104 | content: string, |
| 105 | ): TElement => ({ type, children: [text(content)] }) as unknown as TElement; |
| 106 | |
| 107 | const codeBlock = (code: string, language = "tsx"): TElement => { |
| 108 | const lines = code |
| 109 | .split("\n") |
| 110 | .map((l) => ({ type: KEYS.codeLine, children: [text(l)] })); |
| 111 | return { |
| 112 | type: KEYS.codeBlock, |
| 113 | lang: language, |
| 114 | children: lines as unknown as TElement["children"], |
| 115 | } as unknown as TElement; |
| 116 | }; |
| 117 | |
| 118 | const callout = ( |
| 119 | icon: string, |
| 120 | bg: string, |
| 121 | content: string, |
| 122 | variant: string, |
| 123 | ): TElement => |
| 124 | ({ |
| 125 | type: KEYS.callout, |
| 126 | alignment: "left", |
| 127 | icon, |
| 128 | backgroundColor: bg, |
| 129 | variant, |
| 130 | children: [paragraph([text(content)])], |
| 131 | }) as unknown as TElement; |
| 132 | |
| 133 | const _table = (headers: string[], rows: string[][]): TElement => |
| 134 | ({ |
| 135 | type: KEYS.table, |
| 136 | children: [ |
| 137 | { |
| 138 | type: KEYS.tr, |
| 139 | children: headers.map((h) => ({ |
| 140 | type: KEYS.td, |
| 141 | header: true, |
| 142 | children: [paragraph([text(h)])], |
| 143 | })), |
| 144 | }, |
| 145 | ...rows.map((r) => ({ |
| 146 | type: KEYS.tr, |
| 147 | children: r.map((c) => ({ |
| 148 | type: KEYS.td, |
| 149 | children: [paragraph([text(c)])], |
| 150 | })), |
| 151 | })), |
| 152 | ], |
| 153 | }) as unknown as TElement; |
| 154 | |
| 155 | const blankTable = (rows: number, cols: number): TElement => |
| 156 | ({ |
| 157 | type: KEYS.table, |
| 158 | children: Array.from({ length: rows }, () => ({ |
| 159 | type: KEYS.tr, |
| 160 | children: Array.from({ length: cols }, () => ({ |
| 161 | type: KEYS.td, |
| 162 | children: [paragraph()], |
| 163 | })), |
| 164 | })), |
| 165 | }) as unknown as TElement; |
| 166 | |
| 167 | const columns = (cols: Array<{ title: string; body: string[] }>): TElement => |
| 168 | ({ |
| 169 | type: ColumnPlugin.key, |
| 170 | children: cols.map((c) => ({ |
| 171 | type: ColumnItemPlugin.key, |
| 172 | width: "M", |
| 173 | children: [h3(c.title), ...c.body.map((b) => paragraph([text(b)]))], |
| 174 | })), |
| 175 | }) as unknown as TElement; |
| 176 | |
| 177 | const simple = { |
| 178 | hr: (): TElement => |
| 179 | ({ type: KEYS.hr, children: [{ text: "" }] }) as unknown as TElement, |
| 180 | toc: (): TElement => |
| 181 | ({ type: KEYS.toc, children: [{ text: "" }] }) as unknown as TElement, |
| 182 | blockquote: (content: string): TElement => |
| 183 | ({ |
| 184 | type: KEYS.blockquote, |
| 185 | children: [paragraph([text(content)])], |
| 186 | }) as unknown as TElement, |
| 187 | }; |
| 188 | |
| 189 | const listBlock = ( |
| 190 | listStyleType: typeof KEYS.ul | typeof KEYS.ol | typeof KEYS.listTodo, |
| 191 | content: string, |
| 192 | ): TElement => |
| 193 | ({ |
| 194 | type: KEYS.p, |
| 195 | indent: 1, |
| 196 | listStyleType, |
| 197 | children: [text(content)], |
| 198 | }) as unknown as TElement; |
| 199 | |
| 200 | // ============================================================================ |
| 201 | // HELPER FUNCTIONS - List & Group Builders |
| 202 | // ============================================================================ |
| 203 | |
| 204 | const createList = ( |
| 205 | type: string, |
| 206 | itemType: string, |
| 207 | items: Array<{ heading?: string; content: string }>, |
| 208 | ): TElement => |
| 209 | ({ |
| 210 | type, |
| 211 | ...(type === BULLET_GROUP && { columnSize: "md" }), // Add default columnSize for bullet groups |
| 212 | children: items.map((item) => ({ |
| 213 | type: itemType, |
| 214 | children: item.heading |
| 215 | ? [h4(item.heading), paragraph([text(item.content)])] |
| 216 | : [paragraph([text(item.content)])], |
| 217 | })), |
| 218 | }) as unknown as TElement; |
| 219 | |
| 220 | const createIconListItem = (iconName: string, content: string) => ({ |
| 221 | type: ICON_LIST_ITEM, |
| 222 | icon: iconName, |
| 223 | children: [paragraph([text(content)])], |
| 224 | }); |
| 225 | |
| 226 | const createBoxItem = (title: string, content: string) => ({ |
| 227 | type: BOX_ITEM, |
| 228 | children: [h3(title), paragraph([text(content)])], |
| 229 | }); |
| 230 | |
| 231 | const createCompareSide = ( |
| 232 | title: string, |
| 233 | items: string[], |
| 234 | type: typeof COMPARE_SIDE | typeof BEFORE_AFTER_SIDE = COMPARE_SIDE, |
| 235 | ) => ({ |
| 236 | type, |
| 237 | children: [h3(title), ...items.map((item) => paragraph([text(item)]))], |
| 238 | }); |
| 239 | |
| 240 | const createDiagramItem = (type: string, title: string, content: string) => ({ |
| 241 | type, |
| 242 | children: [h3(title), paragraph([text(content)])], |
| 243 | }); |
| 244 | |
| 245 | const createDiagramTitleItem = (type: string, title: string) => ({ |
| 246 | type, |
| 247 | children: [h3(title)], |
| 248 | }); |
| 249 | |
| 250 | const createStatsItem = (stat: string, label: string) => ({ |
| 251 | type: STATS_ITEM, |
| 252 | stat, |
| 253 | children: [paragraph([text(label)])], |
| 254 | }); |
| 255 | |
| 256 | // ============================================================================ |
| 257 | // CHART BUILDERS |
| 258 | // ============================================================================ |
| 259 | |
| 260 | // Helper to create a chart node with disableAnimation |
| 261 | const createChartNode = ( |
| 262 | type: string, |
| 263 | data: unknown, |
| 264 | options?: Record<string, unknown>, |
| 265 | ): TElement => |
| 266 | ({ |
| 267 | type, |
| 268 | data, |
| 269 | disableAnimation: false, |
| 270 | ...options, |
| 271 | children: [{ text: "" }], |
| 272 | }) as unknown as TElement; |
| 273 | |
| 274 | export const chartItems: PaletteItem[] = [ |
| 275 | { |
| 276 | key: "chart-pie", |
| 277 | label: "Pie Chart", |
| 278 | node: createChartNode(PIE_CHART_ELEMENT, [ |
| 279 | { label: "Enterprise", value: 42 }, |
| 280 | { label: "Small Business", value: 28 }, |
| 281 | { label: "Mid-Market", value: 18 }, |
| 282 | { label: "Consumer", value: 8 }, |
| 283 | { label: "Government", value: 4 }, |
| 284 | ]), |
| 285 | }, |
| 286 | // Donut Chart - dedicated donut type |
| 287 | { |
| 288 | key: "chart-donut", |
| 289 | label: "Donut Chart", |
| 290 | node: createChartNode(DONUT_CHART_ELEMENT, [ |
| 291 | { label: "Completed", value: 65 }, |
| 292 | { label: "In Progress", value: 20 }, |
| 293 | { label: "Pending", value: 10 }, |
| 294 | { label: "Cancelled", value: 5 }, |
| 295 | ]), |
| 296 | }, |
| 297 | // Bar Chart - with more data points |
| 298 | { |
| 299 | key: "chart-bar", |
| 300 | label: "Bar Chart", |
| 301 | node: createChartNode(BAR_CHART_ELEMENT, [ |
| 302 | { label: "Q1 2023", value: 320 }, |
| 303 | { label: "Q2 2023", value: 410 }, |
| 304 | { label: "Q3 2023", value: 570 }, |
| 305 | { label: "Q4 2023", value: 680 }, |
| 306 | { label: "Q1 2024", value: 720 }, |
| 307 | { label: "Q2 2024", value: 850 }, |
| 308 | { label: "Q3 2024", value: 920 }, |
| 309 | { label: "Q4 2024", value: 1050 }, |
| 310 | ]), |
| 311 | }, |
| 312 | // Line Chart - with more data points |
| 313 | { |
| 314 | key: "chart-line", |
| 315 | label: "Line Chart", |
| 316 | node: createChartNode(LINE_CHART_ELEMENT, [ |
| 317 | { name: "Jan", value: 120 }, |
| 318 | { name: "Feb", value: 190 }, |
| 319 | { name: "Mar", value: 170 }, |
| 320 | { name: "Apr", value: 230 }, |
| 321 | { name: "May", value: 290 }, |
| 322 | { name: "Jun", value: 310 }, |
| 323 | { name: "Jul", value: 280 }, |
| 324 | { name: "Aug", value: 350 }, |
| 325 | { name: "Sep", value: 420 }, |
| 326 | { name: "Oct", value: 390 }, |
| 327 | { name: "Nov", value: 450 }, |
| 328 | { name: "Dec", value: 520 }, |
| 329 | ]), |
| 330 | }, |
| 331 | // Area Chart - with gradient fill |
| 332 | { |
| 333 | key: "chart-area", |
| 334 | label: "Area Chart", |
| 335 | node: createChartNode(AREA_CHART_ELEMENT, [ |
| 336 | { name: "Week 1", value: 1200 }, |
| 337 | { name: "Week 2", value: 1900 }, |
| 338 | { name: "Week 3", value: 1700 }, |
| 339 | { name: "Week 4", value: 2300 }, |
| 340 | { name: "Week 5", value: 2900 }, |
| 341 | { name: "Week 6", value: 3100 }, |
| 342 | { name: "Week 7", value: 2800 }, |
| 343 | { name: "Week 8", value: 3500 }, |
| 344 | ]), |
| 345 | }, |
| 346 | // Scatter Chart - with X/Y coordinates |
| 347 | { |
| 348 | key: "chart-scatter", |
| 349 | label: "Scatter Chart", |
| 350 | node: createChartNode(SCATTER_CHART_ELEMENT, [ |
| 351 | { x: 10, y: 30 }, |
| 352 | { x: 25, y: 45 }, |
| 353 | { x: 35, y: 20 }, |
| 354 | { x: 45, y: 55 }, |
| 355 | { x: 55, y: 40 }, |
| 356 | { x: 65, y: 70 }, |
| 357 | { x: 75, y: 50 }, |
| 358 | { x: 85, y: 85 }, |
| 359 | { x: 95, y: 60 }, |
| 360 | { x: 40, y: 35 }, |
| 361 | { x: 60, y: 48 }, |
| 362 | { x: 80, y: 72 }, |
| 363 | ]), |
| 364 | }, |
| 365 | // Bubble Chart - 3D scatter with z-axis for size |
| 366 | { |
| 367 | key: "chart-bubble", |
| 368 | label: "Bubble Chart", |
| 369 | node: createChartNode(BUBBLE_CHART_ELEMENT, [ |
| 370 | { x: 10, y: 30, z: 200 }, |
| 371 | { x: 25, y: 45, z: 350 }, |
| 372 | { x: 35, y: 20, z: 150 }, |
| 373 | { x: 45, y: 55, z: 400 }, |
| 374 | { x: 55, y: 40, z: 280 }, |
| 375 | { x: 65, y: 70, z: 520 }, |
| 376 | { x: 75, y: 50, z: 180 }, |
| 377 | { x: 85, y: 85, z: 600 }, |
| 378 | ]), |
| 379 | }, |
| 380 | // Radar Chart - skills/attributes comparison |
| 381 | { |
| 382 | key: "chart-radar", |
| 383 | label: "Radar Chart", |
| 384 | node: createChartNode(RADAR_CHART_ELEMENT, [ |
| 385 | { name: "Speed", value: 85 }, |
| 386 | { name: "Reliability", value: 90 }, |
| 387 | { name: "Usability", value: 78 }, |
| 388 | { name: "Performance", value: 92 }, |
| 389 | { name: "Security", value: 88 }, |
| 390 | { name: "Scalability", value: 75 }, |
| 391 | ]), |
| 392 | }, |
| 393 | // Radial Bar Chart - progress indicators |
| 394 | { |
| 395 | key: "chart-radial-bar", |
| 396 | label: "Radial Bar", |
| 397 | node: createChartNode(RADIAL_BAR_CHART_ELEMENT, [ |
| 398 | { label: "Marketing", value: 85 }, |
| 399 | { label: "Sales", value: 72 }, |
| 400 | { label: "Engineering", value: 94 }, |
| 401 | { label: "Design", value: 68 }, |
| 402 | { label: "Support", value: 81 }, |
| 403 | ]), |
| 404 | }, |
| 405 | // Radial Column - circular columns |
| 406 | { |
| 407 | key: "chart-radial-column", |
| 408 | label: "Radial Column", |
| 409 | node: createChartNode(RADIAL_COLUMN_CHART_ELEMENT, [ |
| 410 | { label: "Jan", value: 45 }, |
| 411 | { label: "Feb", value: 52 }, |
| 412 | { label: "Mar", value: 48 }, |
| 413 | { label: "Apr", value: 61 }, |
| 414 | { label: "May", value: 55 }, |
| 415 | { label: "Jun", value: 67 }, |
| 416 | ]), |
| 417 | }, |
| 418 | // Composed Chart - multi-series with bar, line, area |
| 419 | { |
| 420 | key: "chart-composed", |
| 421 | label: "Composed Chart", |
| 422 | node: createChartNode(COMPOSED_CHART_ELEMENT, [ |
| 423 | { label: "Jan", revenue: 4500, expenses: 3200, profit: 1300 }, |
| 424 | { label: "Feb", revenue: 5200, expenses: 3400, profit: 1800 }, |
| 425 | { label: "Mar", revenue: 4800, expenses: 3100, profit: 1700 }, |
| 426 | { label: "Apr", revenue: 6100, expenses: 3800, profit: 2300 }, |
| 427 | { label: "May", revenue: 5900, expenses: 3500, profit: 2400 }, |
| 428 | { label: "Jun", revenue: 6800, expenses: 4000, profit: 2800 }, |
| 429 | ]), |
| 430 | }, |
| 431 | // Treemap Chart - hierarchical data |
| 432 | { |
| 433 | key: "chart-treemap", |
| 434 | label: "Treemap", |
| 435 | node: createChartNode(TREEMAP_CHART_ELEMENT, [ |
| 436 | { label: "North America", value: 45000 }, |
| 437 | { label: "Europe", value: 32000 }, |
| 438 | { label: "Asia Pacific", value: 28000 }, |
| 439 | { label: "Latin America", value: 12000 }, |
| 440 | { label: "Middle East", value: 8000 }, |
| 441 | { label: "Africa", value: 5000 }, |
| 442 | ]), |
| 443 | }, |
| 444 | // Histogram - frequency distribution |
| 445 | { |
| 446 | key: "chart-histogram", |
| 447 | label: "Histogram", |
| 448 | node: createChartNode(HISTOGRAM_CHART_ELEMENT, [ |
| 449 | { label: "15-25", value: 3 }, |
| 450 | { label: "25-35", value: 7 }, |
| 451 | { label: "35-45", value: 15 }, |
| 452 | { label: "45-55", value: 25 }, |
| 453 | { label: "55-65", value: 20 }, |
| 454 | { label: "65-75", value: 12 }, |
| 455 | { label: "75-85", value: 5 }, |
| 456 | ]), |
| 457 | }, |
| 458 | // Heatmap - matrix data |
| 459 | { |
| 460 | key: "chart-heatmap", |
| 461 | label: "Heatmap", |
| 462 | node: createChartNode(HEATMAP_CHART_ELEMENT, [ |
| 463 | { x: "Mon", y: "Morning", value: 75 }, |
| 464 | { x: "Mon", y: "Afternoon", value: 85 }, |
| 465 | { x: "Mon", y: "Evening", value: 45 }, |
| 466 | { x: "Tue", y: "Morning", value: 65 }, |
| 467 | { x: "Tue", y: "Afternoon", value: 92 }, |
| 468 | { x: "Tue", y: "Evening", value: 55 }, |
| 469 | { x: "Wed", y: "Morning", value: 80 }, |
| 470 | { x: "Wed", y: "Afternoon", value: 78 }, |
| 471 | { x: "Wed", y: "Evening", value: 40 }, |
| 472 | ]), |
| 473 | }, |
| 474 | // Range Bar - value ranges |
| 475 | { |
| 476 | key: "chart-range-bar", |
| 477 | label: "Range Bar", |
| 478 | node: createChartNode(RANGE_BAR_CHART_ELEMENT, [ |
| 479 | { category: "Project A", low: 10, high: 45 }, |
| 480 | { category: "Project B", low: 20, high: 65 }, |
| 481 | { category: "Project C", low: 15, high: 55 }, |
| 482 | { category: "Project D", low: 30, high: 80 }, |
| 483 | { category: "Project E", low: 5, high: 35 }, |
| 484 | ]), |
| 485 | }, |
| 486 | // Range Area - area with ranges |
| 487 | { |
| 488 | key: "chart-range-area", |
| 489 | label: "Range Area", |
| 490 | node: createChartNode(RANGE_AREA_CHART_ELEMENT, [ |
| 491 | { date: "Jan", low: 20, high: 45 }, |
| 492 | { date: "Feb", low: 25, high: 52 }, |
| 493 | { date: "Mar", low: 22, high: 48 }, |
| 494 | { date: "Apr", low: 28, high: 58 }, |
| 495 | { date: "May", low: 32, high: 65 }, |
| 496 | { date: "Jun", low: 35, high: 70 }, |
| 497 | ]), |
| 498 | }, |
| 499 | // Waterfall - cumulative effects |
| 500 | { |
| 501 | key: "chart-waterfall", |
| 502 | label: "Waterfall", |
| 503 | node: createChartNode(WATERFALL_CHART_ELEMENT, [ |
| 504 | { category: "Start", amount: 100 }, |
| 505 | { category: "Revenue", amount: 50 }, |
| 506 | { category: "Costs", amount: -30 }, |
| 507 | { category: "Marketing", amount: -15 }, |
| 508 | { category: "Tax", amount: -10 }, |
| 509 | { category: "Net", amount: 95 }, |
| 510 | ]), |
| 511 | }, |
| 512 | // Box Plot - statistical distribution |
| 513 | { |
| 514 | key: "chart-box-plot", |
| 515 | label: "Box Plot", |
| 516 | node: createChartNode(BOX_PLOT_CHART_ELEMENT, [ |
| 517 | { category: "Q1", min: 10, q1: 25, median: 35, q3: 48, max: 65 }, |
| 518 | { category: "Q2", min: 15, q1: 30, median: 42, q3: 55, max: 72 }, |
| 519 | { category: "Q3", min: 12, q1: 28, median: 38, q3: 52, max: 68 }, |
| 520 | { category: "Q4", min: 18, q1: 35, median: 48, q3: 62, max: 78 }, |
| 521 | ]), |
| 522 | }, |
| 523 | // Candlestick - financial OHLC |
| 524 | { |
| 525 | key: "chart-candlestick", |
| 526 | label: "Candlestick", |
| 527 | node: createChartNode(CANDLESTICK_CHART_ELEMENT, [ |
| 528 | { date: "Mon", open: 100, high: 115, low: 95, close: 110 }, |
| 529 | { date: "Tue", open: 110, high: 125, low: 105, close: 120 }, |
| 530 | { date: "Wed", open: 120, high: 130, low: 112, close: 115 }, |
| 531 | { date: "Thu", open: 115, high: 128, low: 108, close: 125 }, |
| 532 | { date: "Fri", open: 125, high: 140, low: 118, close: 135 }, |
| 533 | ]), |
| 534 | }, |
| 535 | // OHLC - Open-High-Low-Close |
| 536 | { |
| 537 | key: "chart-ohlc", |
| 538 | label: "OHLC", |
| 539 | node: createChartNode(OHLC_CHART_ELEMENT, [ |
| 540 | { date: "Week 1", open: 50, high: 58, low: 48, close: 55 }, |
| 541 | { date: "Week 2", open: 55, high: 62, low: 52, close: 60 }, |
| 542 | { date: "Week 3", open: 60, high: 68, low: 55, close: 58 }, |
| 543 | { date: "Week 4", open: 58, high: 72, low: 56, close: 70 }, |
| 544 | ]), |
| 545 | }, |
| 546 | // Nightingale - rose/wind chart |
| 547 | { |
| 548 | key: "chart-nightingale", |
| 549 | label: "Nightingale", |
| 550 | node: createChartNode(NIGHTINGALE_CHART_ELEMENT, [ |
| 551 | { label: "North", value: 85 }, |
| 552 | { label: "Northeast", value: 65 }, |
| 553 | { label: "East", value: 45 }, |
| 554 | { label: "Southeast", value: 35 }, |
| 555 | { label: "South", value: 55 }, |
| 556 | { label: "Southwest", value: 75 }, |
| 557 | { label: "West", value: 90 }, |
| 558 | { label: "Northwest", value: 70 }, |
| 559 | ]), |
| 560 | }, |
| 561 | // Sunburst - hierarchical radial |
| 562 | { |
| 563 | key: "chart-sunburst", |
| 564 | label: "Sunburst", |
| 565 | node: createChartNode(SUNBURST_CHART_ELEMENT, DEFAULT_CHART_DATA.hierarchy), |
| 566 | }, |
| 567 | // Sankey - flow visualization |
| 568 | { |
| 569 | key: "chart-sankey", |
| 570 | label: "Sankey", |
| 571 | node: createChartNode(SANKEY_CHART_ELEMENT, [ |
| 572 | { from: "Website", to: "Signup", size: 100 }, |
| 573 | { from: "Referral", to: "Signup", size: 40 }, |
| 574 | { from: "Signup", to: "Trial", size: 80 }, |
| 575 | { from: "Trial", to: "Paid", size: 50 }, |
| 576 | { from: "Trial", to: "Churn", size: 30 }, |
| 577 | ]), |
| 578 | }, |
| 579 | // Chord - relationship visualization |
| 580 | { |
| 581 | key: "chart-chord", |
| 582 | label: "Chord", |
| 583 | node: createChartNode(CHORD_CHART_ELEMENT, [ |
| 584 | { from: "Sales", to: "Marketing", size: 30 }, |
| 585 | { from: "Marketing", to: "Engineering", size: 20 }, |
| 586 | { from: "Engineering", to: "Sales", size: 25 }, |
| 587 | { from: "Sales", to: "Support", size: 15 }, |
| 588 | { from: "Support", to: "Engineering", size: 10 }, |
| 589 | ]), |
| 590 | }, |
| 591 | // Funnel - pipeline visualization |
| 592 | { |
| 593 | key: "chart-funnel", |
| 594 | label: "Funnel", |
| 595 | node: createChartNode(FUNNEL_CHART_ELEMENT, [ |
| 596 | { label: "Visitors", value: 10000 }, |
| 597 | { label: "Prospects", value: 5000 }, |
| 598 | { label: "Leads", value: 2500 }, |
| 599 | { label: "Opportunities", value: 1000 }, |
| 600 | { label: "Customers", value: 500 }, |
| 601 | ]), |
| 602 | }, |
| 603 | // Cone Funnel - funnel variant |
| 604 | { |
| 605 | key: "chart-cone-funnel", |
| 606 | label: "Cone Funnel", |
| 607 | node: createChartNode(CONE_FUNNEL_CHART_ELEMENT, [ |
| 608 | { label: "Awareness", value: 8000 }, |
| 609 | { label: "Interest", value: 4500 }, |
| 610 | { label: "Consideration", value: 2200 }, |
| 611 | { label: "Intent", value: 1100 }, |
| 612 | { label: "Purchase", value: 600 }, |
| 613 | ]), |
| 614 | }, |
| 615 | // Pyramid Chart - triangular visualization |
| 616 | { |
| 617 | key: "chart-pyramid", |
| 618 | label: "Pyramid Chart", |
| 619 | node: createChartNode(PYRAMID_CHART_ELEMENT, [ |
| 620 | { label: "Executive", value: 5 }, |
| 621 | { label: "Management", value: 20 }, |
| 622 | { label: "Specialists", value: 50 }, |
| 623 | { label: "Staff", value: 100 }, |
| 624 | ]), |
| 625 | }, |
| 626 | // Radial Gauge - circular gauge |
| 627 | { |
| 628 | key: "chart-radial-gauge", |
| 629 | label: "Radial Gauge", |
| 630 | node: createChartNode(RADIAL_GAUGE_ELEMENT, 75), |
| 631 | }, |
| 632 | // Linear Gauge - linear gauge |
| 633 | { |
| 634 | key: "chart-linear-gauge", |
| 635 | label: "Linear Gauge", |
| 636 | node: createChartNode(LINEAR_GAUGE_ELEMENT, 65), |
| 637 | }, |
| 638 | ]; |
| 639 | |
| 640 | export const basicBlockItems: PaletteItem[] = [ |
| 641 | { |
| 642 | category: "Text", |
| 643 | key: "title", |
| 644 | label: "Title", |
| 645 | description: "! Title", |
| 646 | node: { |
| 647 | type: PRESENTATION_TITLE_ELEMENT, |
| 648 | alignment: "left", |
| 649 | variant: "title", |
| 650 | children: [text("Title")], |
| 651 | } as unknown as TElement, |
| 652 | }, |
| 653 | { |
| 654 | category: "Text", |
| 655 | key: "heading-1", |
| 656 | label: "Heading 1", |
| 657 | description: "# Heading 1", |
| 658 | node: heading("h1", "Heading 1"), |
| 659 | }, |
| 660 | { |
| 661 | category: "Text", |
| 662 | key: "heading-2", |
| 663 | label: "Heading 2", |
| 664 | description: "## Heading 2", |
| 665 | node: heading("h2", "Heading 2"), |
| 666 | }, |
| 667 | { |
| 668 | category: "Text", |
| 669 | key: "heading-3", |
| 670 | label: "Heading 3", |
| 671 | description: "### Heading 3", |
| 672 | node: heading("h3", "Heading 3"), |
| 673 | }, |
| 674 | { |
| 675 | category: "Text", |
| 676 | key: "heading-4", |
| 677 | label: "Heading 4", |
| 678 | description: "#### Heading 4", |
| 679 | node: heading("h4", "Heading 4"), |
| 680 | }, |
| 681 | { |
| 682 | category: "Text", |
| 683 | key: "paragraph", |
| 684 | label: "Text", |
| 685 | description: "Paragraph", |
| 686 | node: paragraph([text("Add a paragraph here.")]), |
| 687 | }, |
| 688 | { |
| 689 | category: "Text", |
| 690 | key: "blockquote", |
| 691 | label: "Blockquote", |
| 692 | description: "> Quote", |
| 693 | node: simple.blockquote("Add a quote here."), |
| 694 | }, |
| 695 | { |
| 696 | category: "Text", |
| 697 | key: "label", |
| 698 | label: "Label", |
| 699 | description: "Label", |
| 700 | node: { |
| 701 | type: LABEL_ELEMENT, |
| 702 | alignment: "left", |
| 703 | children: [text("Label")], |
| 704 | } as unknown as TElement, |
| 705 | }, |
| 706 | { |
| 707 | category: "Tables", |
| 708 | key: "table-2x2", |
| 709 | label: "2x2 table", |
| 710 | description: "/table", |
| 711 | node: blankTable(2, 2), |
| 712 | }, |
| 713 | { |
| 714 | category: "Tables", |
| 715 | key: "table-3x3", |
| 716 | label: "3x3 table", |
| 717 | node: blankTable(3, 3), |
| 718 | }, |
| 719 | { |
| 720 | category: "Tables", |
| 721 | key: "table-4x4", |
| 722 | label: "4x4 table", |
| 723 | node: blankTable(4, 4), |
| 724 | }, |
| 725 | { |
| 726 | category: "Lists", |
| 727 | key: "bulleted-list", |
| 728 | label: "Bulleted list", |
| 729 | description: "- Item", |
| 730 | node: listBlock(KEYS.ul, "Item"), |
| 731 | }, |
| 732 | { |
| 733 | category: "Lists", |
| 734 | key: "numbered-list", |
| 735 | label: "Numbered list", |
| 736 | description: "1. Item", |
| 737 | node: listBlock(KEYS.ol, "Item"), |
| 738 | }, |
| 739 | { |
| 740 | category: "Lists", |
| 741 | key: "todo-list", |
| 742 | label: "Todo list", |
| 743 | description: "[] Item", |
| 744 | node: listBlock(KEYS.listTodo, "Item"), |
| 745 | }, |
| 746 | { |
| 747 | category: "Callout boxes", |
| 748 | key: "callout-note", |
| 749 | label: "Note box", |
| 750 | description: "/note", |
| 751 | node: callout( |
| 752 | "FiFileText", |
| 753 | CALLOUT_VARIANTS.note.backgroundColor, |
| 754 | "Add a note here.", |
| 755 | "note", |
| 756 | ), |
| 757 | }, |
| 758 | { |
| 759 | category: "Callout boxes", |
| 760 | key: "callout-info", |
| 761 | label: "Info box", |
| 762 | description: "/info", |
| 763 | node: callout( |
| 764 | "FiInfo", |
| 765 | CALLOUT_VARIANTS.info.backgroundColor, |
| 766 | "Add useful information here.", |
| 767 | "info", |
| 768 | ), |
| 769 | }, |
| 770 | { |
| 771 | category: "Callout boxes", |
| 772 | key: "callout-warning", |
| 773 | label: "Warning box", |
| 774 | description: "/warning", |
| 775 | node: callout( |
| 776 | "FiAlertTriangle", |
| 777 | "#FFF7ED", |
| 778 | "Add a warning here.", |
| 779 | "warning", |
| 780 | ), |
| 781 | }, |
| 782 | { |
| 783 | category: "Callout boxes", |
| 784 | key: "callout-caution", |
| 785 | label: "Caution box", |
| 786 | description: "/caution", |
| 787 | node: callout("FiXCircle", "#FEF2F2", "Add a caution here.", "caution"), |
| 788 | }, |
| 789 | { |
| 790 | category: "Callout boxes", |
| 791 | key: "callout-success", |
| 792 | label: "Success box", |
| 793 | description: "/success", |
| 794 | node: callout( |
| 795 | "FiCheckCircle", |
| 796 | "#F0FDF4", |
| 797 | "Add a success note here.", |
| 798 | "success", |
| 799 | ), |
| 800 | }, |
| 801 | { |
| 802 | category: "Callout boxes", |
| 803 | key: "callout-question", |
| 804 | label: "Question box", |
| 805 | description: "/question", |
| 806 | node: callout( |
| 807 | "FiHelpCircle", |
| 808 | CALLOUT_VARIANTS.question.backgroundColor, |
| 809 | "Add a question here.", |
| 810 | "question", |
| 811 | ), |
| 812 | }, |
| 813 | { |
| 814 | category: "Interactive", |
| 815 | key: "button", |
| 816 | label: "Button", |
| 817 | node: { |
| 818 | type: BUTTON_ELEMENT, |
| 819 | alignment: "left", |
| 820 | variant: "filled", |
| 821 | size: "md", |
| 822 | children: [paragraph([text("Get Started")])], |
| 823 | } as unknown as TElement, |
| 824 | }, |
| 825 | { |
| 826 | category: "Interactive", |
| 827 | key: "toggle", |
| 828 | label: "Toggle", |
| 829 | node: { |
| 830 | type: KEYS.toggle, |
| 831 | children: [text("Toggle content")], |
| 832 | } as unknown as TElement, |
| 833 | }, |
| 834 | { |
| 835 | category: "Other", |
| 836 | key: "code", |
| 837 | label: "Code block", |
| 838 | description: "```", |
| 839 | node: codeBlock(`// Your code here\nconst hello = "world";`, "typescript"), |
| 840 | }, |
| 841 | { |
| 842 | category: "Other", |
| 843 | key: "math", |
| 844 | label: "Math block", |
| 845 | node: { |
| 846 | type: KEYS.equation, |
| 847 | texExpression: "f(x)=x^2", |
| 848 | children: [{ text: "" }], |
| 849 | } as unknown as TElement, |
| 850 | }, |
| 851 | { |
| 852 | category: "Other", |
| 853 | key: "contributors", |
| 854 | label: "Contributors", |
| 855 | node: { |
| 856 | type: CONTRIBUTOR_ELEMENT, |
| 857 | alignment: "left", |
| 858 | children: [text("")], |
| 859 | } as unknown as TElement, |
| 860 | }, |
| 861 | { |
| 862 | category: "Other", |
| 863 | key: "toc", |
| 864 | label: "Table of contents", |
| 865 | node: simple.toc(), |
| 866 | }, |
| 867 | ]; |
| 868 | |
| 869 | export const statsItems: PaletteItem[] = [ |
| 870 | { |
| 871 | key: "stats-plain", |
| 872 | label: "Stats", |
| 873 | node: { |
| 874 | type: STATS_GROUP, |
| 875 | statsType: "plain", |
| 876 | columnSize: "md", |
| 877 | children: [ |
| 878 | createStatsItem("64", "Completion rate"), |
| 879 | createStatsItem("28", "Active teams"), |
| 880 | createStatsItem("91", "Satisfaction score"), |
| 881 | ], |
| 882 | } as unknown as TElement, |
| 883 | }, |
| 884 | { |
| 885 | key: "stats-circle", |
| 886 | label: "Circle Stats", |
| 887 | node: { |
| 888 | type: STATS_GROUP, |
| 889 | statsType: "circle", |
| 890 | columnSize: "md", |
| 891 | children: [ |
| 892 | createStatsItem("72", "Progress"), |
| 893 | createStatsItem("48", "Adoption"), |
| 894 | createStatsItem("88", "Quality"), |
| 895 | ], |
| 896 | } as unknown as TElement, |
| 897 | }, |
| 898 | { |
| 899 | key: "stats-star", |
| 900 | label: "Star Rating", |
| 901 | node: { |
| 902 | type: STATS_GROUP, |
| 903 | statsType: "star", |
| 904 | columnSize: "md", |
| 905 | children: [ |
| 906 | createStatsItem("4", "Customer rating"), |
| 907 | createStatsItem("5", "Product fit"), |
| 908 | createStatsItem("4", "Team confidence"), |
| 909 | ], |
| 910 | } as unknown as TElement, |
| 911 | }, |
| 912 | { |
| 913 | key: "stats-bar", |
| 914 | label: "Bar Stats", |
| 915 | node: { |
| 916 | type: STATS_GROUP, |
| 917 | statsType: "bar", |
| 918 | columnSize: "md", |
| 919 | children: [ |
| 920 | createStatsItem("74", "Pipeline"), |
| 921 | createStatsItem("52", "Usage"), |
| 922 | createStatsItem("89", "Retention"), |
| 923 | ], |
| 924 | } as unknown as TElement, |
| 925 | }, |
| 926 | { |
| 927 | key: "stats-dot-grid", |
| 928 | label: "Dot Grid Stats", |
| 929 | node: { |
| 930 | type: STATS_GROUP, |
| 931 | statsType: "dot-grid", |
| 932 | columnSize: "md", |
| 933 | children: [ |
| 934 | createStatsItem("68", "Coverage"), |
| 935 | createStatsItem("41", "Reach"), |
| 936 | createStatsItem("96", "Reliability"), |
| 937 | ], |
| 938 | } as unknown as TElement, |
| 939 | }, |
| 940 | { |
| 941 | key: "stats-dot-line", |
| 942 | label: "Dot Line Stats", |
| 943 | node: { |
| 944 | type: STATS_GROUP, |
| 945 | statsType: "dot-line", |
| 946 | columnSize: "md", |
| 947 | children: [ |
| 948 | createStatsItem("60", "Baseline"), |
| 949 | createStatsItem("75", "Target"), |
| 950 | createStatsItem("90", "Stretch"), |
| 951 | ], |
| 952 | } as unknown as TElement, |
| 953 | }, |
| 954 | ]; |
| 955 | |
| 956 | export const quoteItems: PaletteItem[] = [ |
| 957 | { |
| 958 | key: "quote-large", |
| 959 | label: "Large Quote", |
| 960 | node: { |
| 961 | type: QUOTE_ELEMENT, |
| 962 | variant: "large", |
| 963 | author: "Author name", |
| 964 | children: [text("Add a memorable quote or testimonial here.")], |
| 965 | } as unknown as TElement, |
| 966 | }, |
| 967 | { |
| 968 | key: "quote-side-icon", |
| 969 | label: "Quote with Icon", |
| 970 | node: { |
| 971 | type: QUOTE_ELEMENT, |
| 972 | variant: "sidequote-icon", |
| 973 | author: "Author name", |
| 974 | children: [text("Add a short supporting quote here.")], |
| 975 | } as unknown as TElement, |
| 976 | }, |
| 977 | { |
| 978 | key: "quote-side", |
| 979 | label: "Side Quote", |
| 980 | node: { |
| 981 | type: QUOTE_ELEMENT, |
| 982 | variant: "sidequote", |
| 983 | author: "Author name", |
| 984 | children: [text("Add a concise quote here.")], |
| 985 | } as unknown as TElement, |
| 986 | }, |
| 987 | ]; |
| 988 | |
| 989 | export const embedItems: PaletteItem[] = [ |
| 990 | { |
| 991 | key: "media-embed", |
| 992 | label: "Media Embed", |
| 993 | node: { |
| 994 | type: KEYS.mediaEmbed, |
| 995 | provider: "youtube", |
| 996 | url: "", |
| 997 | alignment: "center", |
| 998 | width: "100%", |
| 999 | children: [{ text: "" }], |
| 1000 | } as unknown as TElement, |
| 1001 | }, |
| 1002 | { |
| 1003 | key: "infographic", |
| 1004 | label: "AI Infographic", |
| 1005 | node: { |
| 1006 | type: ANTV_INFOGRAPHIC, |
| 1007 | syntax: "", |
| 1008 | isLoading: false, |
| 1009 | align: "center", |
| 1010 | children: [{ text: "" }], |
| 1011 | } as unknown as TElement, |
| 1012 | }, |
| 1013 | ]; |
| 1014 | |
| 1015 | export const paletteItems: PaletteItem[] = [ |
| 1016 | { |
| 1017 | key: "bullets", |
| 1018 | label: "Bullet Points", |
| 1019 | node: createList(BULLET_GROUP, BULLET_ITEM, [ |
| 1020 | { heading: "Point one", content: "Add your first key point here." }, |
| 1021 | { heading: "Point two", content: "Add your second key point here." }, |
| 1022 | { heading: "Point three", content: "Add your third key point here." }, |
| 1023 | ]), |
| 1024 | }, |
| 1025 | |
| 1026 | { |
| 1027 | key: "timeline", |
| 1028 | label: "Timeline", |
| 1029 | node: createList(TIMELINE_GROUP, TIMELINE_ITEM, [ |
| 1030 | { heading: "Step one", content: "Describe what happened at this stage." }, |
| 1031 | { heading: "Step two", content: "Describe what happened at this stage." }, |
| 1032 | { |
| 1033 | heading: "Step three", |
| 1034 | content: "Describe what happened at this stage.", |
| 1035 | }, |
| 1036 | ]), |
| 1037 | }, |
| 1038 | { |
| 1039 | key: "steps", |
| 1040 | label: "Steps", |
| 1041 | node: { |
| 1042 | type: STEPS_GROUP, |
| 1043 | variant: "arrow", |
| 1044 | columnSize: "md", |
| 1045 | children: [ |
| 1046 | { |
| 1047 | type: STEPS_ITEM, |
| 1048 | children: [ |
| 1049 | h4("Step one"), |
| 1050 | paragraph([text("Describe the first step here.")]), |
| 1051 | ], |
| 1052 | }, |
| 1053 | { |
| 1054 | type: STEPS_ITEM, |
| 1055 | children: [ |
| 1056 | h4("Step two"), |
| 1057 | paragraph([text("Describe the second step here.")]), |
| 1058 | ], |
| 1059 | }, |
| 1060 | { |
| 1061 | type: STEPS_ITEM, |
| 1062 | children: [ |
| 1063 | h4("Step three"), |
| 1064 | paragraph([text("Describe the third step here.")]), |
| 1065 | ], |
| 1066 | }, |
| 1067 | ], |
| 1068 | } as unknown as TElement, |
| 1069 | }, |
| 1070 | { |
| 1071 | key: "arrows", |
| 1072 | label: "Process (Arrows)", |
| 1073 | node: createList(ARROW_LIST, ARROW_LIST_ITEM, [ |
| 1074 | { heading: "Step one", content: "Describe this step." }, |
| 1075 | { heading: "Step two", content: "Describe this step." }, |
| 1076 | { heading: "Step three", content: "Describe this step." }, |
| 1077 | ]), |
| 1078 | }, |
| 1079 | { |
| 1080 | key: "arrow-vertical", |
| 1081 | label: "Vertical Steps", |
| 1082 | node: createList(SEQUENCE_ARROW_GROUP, SEQUENCE_ARROW_ITEM, [ |
| 1083 | { heading: "Step one", content: "Describe this step." }, |
| 1084 | { heading: "Step two", content: "Describe this step." }, |
| 1085 | { heading: "Step three", content: "Describe this step." }, |
| 1086 | ]), |
| 1087 | }, |
| 1088 | { |
| 1089 | key: "slope", |
| 1090 | label: "Slope", |
| 1091 | node: { |
| 1092 | type: SLOPE_GROUP, |
| 1093 | children: [ |
| 1094 | { |
| 1095 | ...createDiagramTitleItem(SLOPE_ITEM, "Ideate"), |
| 1096 | icon: "FaLightbulb", |
| 1097 | }, |
| 1098 | { |
| 1099 | ...createDiagramTitleItem(SLOPE_ITEM, "Prototype"), |
| 1100 | icon: "FaFlask", |
| 1101 | }, |
| 1102 | { |
| 1103 | ...createDiagramTitleItem(SLOPE_ITEM, "Validate"), |
| 1104 | icon: "FaCheck", |
| 1105 | }, |
| 1106 | { |
| 1107 | ...createDiagramTitleItem(SLOPE_ITEM, "Scale"), |
| 1108 | icon: "FaChartLine", |
| 1109 | }, |
| 1110 | ], |
| 1111 | } as unknown as TElement, |
| 1112 | }, |
| 1113 | { |
| 1114 | key: "snake", |
| 1115 | label: "Snake Flow", |
| 1116 | node: { |
| 1117 | type: SNAKE_GROUP, |
| 1118 | children: [ |
| 1119 | createDiagramItem(SNAKE_ITEM, "Assess", "Evaluate the current state."), |
| 1120 | createDiagramItem(SNAKE_ITEM, "Plan", "Define the roadmap."), |
| 1121 | createDiagramItem(SNAKE_ITEM, "Build", "Develop the solution."), |
| 1122 | createDiagramItem(SNAKE_ITEM, "Validate", "Test and refine."), |
| 1123 | createDiagramItem(SNAKE_ITEM, "Scale", "Deploy and optimize."), |
| 1124 | ], |
| 1125 | } as unknown as TElement, |
| 1126 | }, |
| 1127 | |
| 1128 | // HIERARCHIES |
| 1129 | { |
| 1130 | key: "pyramid", |
| 1131 | label: "Pyramid", |
| 1132 | node: createList(PYRAMID_GROUP, PYRAMID_ITEM, [ |
| 1133 | { content: "Top level." }, |
| 1134 | { content: "Middle level." }, |
| 1135 | { content: "Base level." }, |
| 1136 | ]), |
| 1137 | }, |
| 1138 | { |
| 1139 | key: "staircase", |
| 1140 | label: "Staircase", |
| 1141 | node: createList(STAIRCASE_GROUP, STAIR_ITEM, [ |
| 1142 | { content: "Level one." }, |
| 1143 | { content: "Level two." }, |
| 1144 | { content: "Level three." }, |
| 1145 | ]), |
| 1146 | }, |
| 1147 | { |
| 1148 | key: "cycle", |
| 1149 | label: "Cycle", |
| 1150 | node: createList(CYCLE_GROUP, CYCLE_ITEM, [ |
| 1151 | { heading: "Discover", content: "Identify the opportunity." }, |
| 1152 | { heading: "Plan", content: "Define the next move." }, |
| 1153 | { heading: "Build", content: "Create the first version." }, |
| 1154 | { heading: "Improve", content: "Refine from feedback." }, |
| 1155 | ]), |
| 1156 | }, |
| 1157 | { |
| 1158 | key: "connected-circles", |
| 1159 | label: "Connected Circles", |
| 1160 | node: { |
| 1161 | type: CONNECTED_CIRCLES_GROUP, |
| 1162 | children: [ |
| 1163 | createDiagramItem( |
| 1164 | CONNECTED_CIRCLES_ITEM, |
| 1165 | "Shared Moments", |
| 1166 | "Center the message on emotional occasions.", |
| 1167 | ), |
| 1168 | createDiagramItem( |
| 1169 | CONNECTED_CIRCLES_ITEM, |
| 1170 | "Consistent Voice", |
| 1171 | "Keep the message stable and recognizable.", |
| 1172 | ), |
| 1173 | createDiagramItem( |
| 1174 | CONNECTED_CIRCLES_ITEM, |
| 1175 | "Emotion First", |
| 1176 | "Connect the brand to feelings.", |
| 1177 | ), |
| 1178 | createDiagramItem( |
| 1179 | CONNECTED_CIRCLES_ITEM, |
| 1180 | "Long Memory", |
| 1181 | "Make the brand easy to recognize later.", |
| 1182 | ), |
| 1183 | ], |
| 1184 | } as unknown as TElement, |
| 1185 | }, |
| 1186 | { |
| 1187 | key: "circular-grid", |
| 1188 | label: "Circular Grid", |
| 1189 | node: { |
| 1190 | type: CIRCULAR_GRID_GROUP, |
| 1191 | centerText: "Smart Diagram", |
| 1192 | children: [ |
| 1193 | createDiagramItem(CIRCULAR_GRID_ITEM, "Objective", "Define the goal."), |
| 1194 | createDiagramItem(CIRCULAR_GRID_ITEM, "Signals", "Capture inputs."), |
| 1195 | createDiagramItem(CIRCULAR_GRID_ITEM, "Actions", "Move into work."), |
| 1196 | createDiagramItem(CIRCULAR_GRID_ITEM, "Metrics", "Track progress."), |
| 1197 | createDiagramItem(CIRCULAR_GRID_ITEM, "Risks", "Surface assumptions."), |
| 1198 | createDiagramItem(CIRCULAR_GRID_ITEM, "Learning", "Feed results back."), |
| 1199 | ], |
| 1200 | } as unknown as TElement, |
| 1201 | }, |
| 1202 | // COMPARISON & EVALUATION |
| 1203 | { |
| 1204 | key: "boxes", |
| 1205 | label: "Feature Boxes", |
| 1206 | node: { |
| 1207 | type: BOX_GROUP, |
| 1208 | children: [ |
| 1209 | createBoxItem("Feature one", "Describe this feature."), |
| 1210 | createBoxItem("Feature two", "Describe this feature."), |
| 1211 | createBoxItem("Feature three", "Describe this feature."), |
| 1212 | ], |
| 1213 | } as unknown as TElement, |
| 1214 | }, |
| 1215 | { |
| 1216 | key: "compare", |
| 1217 | label: "Comparison", |
| 1218 | node: { |
| 1219 | type: COMPARE_GROUP, |
| 1220 | children: [ |
| 1221 | createCompareSide("Option A", [ |
| 1222 | "Point one", |
| 1223 | "Point two", |
| 1224 | "Point three", |
| 1225 | ]), |
| 1226 | createCompareSide("Option B", [ |
| 1227 | "Point one", |
| 1228 | "Point two", |
| 1229 | "Point three", |
| 1230 | ]), |
| 1231 | ], |
| 1232 | } as unknown as TElement, |
| 1233 | }, |
| 1234 | { |
| 1235 | key: "before-after", |
| 1236 | label: "Before / After", |
| 1237 | node: { |
| 1238 | type: BEFORE_AFTER_GROUP, |
| 1239 | children: [ |
| 1240 | createCompareSide( |
| 1241 | "Before", |
| 1242 | ["Point one", "Point two", "Point three"], |
| 1243 | BEFORE_AFTER_SIDE, |
| 1244 | ), |
| 1245 | createCompareSide( |
| 1246 | "After", |
| 1247 | ["Point one", "Point two", "Point three"], |
| 1248 | BEFORE_AFTER_SIDE, |
| 1249 | ), |
| 1250 | ], |
| 1251 | } as unknown as TElement, |
| 1252 | }, |
| 1253 | { |
| 1254 | key: "pros-cons", |
| 1255 | label: "Pros & Cons", |
| 1256 | node: { |
| 1257 | type: PROS_CONS_GROUP, |
| 1258 | children: [ |
| 1259 | { |
| 1260 | type: PROS_ITEM, |
| 1261 | children: [paragraph([text("Strength or advantage.")])], |
| 1262 | }, |
| 1263 | { |
| 1264 | type: PROS_ITEM, |
| 1265 | children: [paragraph([text("Strength or advantage.")])], |
| 1266 | }, |
| 1267 | { |
| 1268 | type: CONS_ITEM, |
| 1269 | children: [paragraph([text("Weakness or limitation.")])], |
| 1270 | }, |
| 1271 | { |
| 1272 | type: CONS_ITEM, |
| 1273 | children: [paragraph([text("Weakness or limitation.")])], |
| 1274 | }, |
| 1275 | ], |
| 1276 | } as unknown as TElement, |
| 1277 | }, |
| 1278 | |
| 1279 | // ICONS |
| 1280 | { |
| 1281 | key: "icon-list", |
| 1282 | label: "Icon List", |
| 1283 | node: { |
| 1284 | type: ICON_LIST, |
| 1285 | orientation: "side", |
| 1286 | variant: "icon", |
| 1287 | children: [ |
| 1288 | createIconListItem("activity", "Describe this point."), |
| 1289 | createIconListItem("shield", "Describe this point."), |
| 1290 | createIconListItem("bolt", "Describe this point."), |
| 1291 | ], |
| 1292 | } as unknown as TElement, |
| 1293 | }, |
| 1294 | |
| 1295 | // INTERACTIVE & MEDIA |
| 1296 | { |
| 1297 | key: "image", |
| 1298 | label: "Image", |
| 1299 | node: { |
| 1300 | type: "img", |
| 1301 | url: "", |
| 1302 | query: "", |
| 1303 | children: [], |
| 1304 | } as unknown as TElement, |
| 1305 | }, |
| 1306 | { |
| 1307 | key: "columns", |
| 1308 | label: "Columns", |
| 1309 | node: columns([ |
| 1310 | { |
| 1311 | title: "Column one", |
| 1312 | body: ["Add your content here.", "Add more points."], |
| 1313 | }, |
| 1314 | { |
| 1315 | title: "Column two", |
| 1316 | body: ["Add your content here.", "Add more points."], |
| 1317 | }, |
| 1318 | { |
| 1319 | title: "Column three", |
| 1320 | body: ["Add your content here.", "Add more points."], |
| 1321 | }, |
| 1322 | ]), |
| 1323 | }, |
| 1324 | |
| 1325 | ...statsItems, |
| 1326 | ...quoteItems, |
| 1327 | ...embedItems, |
| 1328 | ]; |
| 1329 | |
| 1330 | const HIDDEN_PALETTE_ITEM_KEYS = new Set<string>(); |
| 1331 | |
| 1332 | export const visiblePaletteItems = paletteItems.filter( |
| 1333 | (item) => !HIDDEN_PALETTE_ITEM_KEYS.has(item.key), |
| 1334 | ); |
| 1335 |