1079 lines · 27 KBtext/plain; charset=utf-8
The Coline App SDK: apps, tools, file types and surfaces that run inside Coline workspaces, and public websites with Coline Sites. TypeScript, with an in-memory test workspace. MIT.
| 5 | type: z.string().trim().min(1).max(120), |
| 6 | payload: z.record(z.string(), z.unknown()).optional(), |
| 7 | }); |
| 8 |
| 9 | export type ColineUiAction = z.infer<typeof uiActionSchema>; |
| 10 |
| 11 | // v2 addition (plan §7.1): a typed pointer to a workspace object, rendered |
| 12 | // by the host with its own canonical components (FilePreview, UserChip, |
| 13 | // registered record renderers). Contract-first — renderers adopt it in |
| 14 | // Phases 1-2. |
| 15 | const uiReferenceNodeSchema = z.object({ |
| 16 | type: z.literal("Reference"), |
| 17 | props: z.object({ |
| 18 | reference: colineReferenceSchema, |
| 19 | appearance: z.enum(["inline", "card"]).default("inline"), |
| 20 | }), |
| 21 | }); |
| 22 |
| 23 | const uiTextNodeSchema = z.object({ |
| 24 | type: z.literal("Text"), |
| 25 | props: z.object({ |
| 26 | value: z.string(), |
| 27 | tone: z.enum(["default", "muted", "positive", "warning", "danger"]).optional(), |
| 28 | }), |
| 29 | }); |
| 30 |
| 31 | const uiHeadingNodeSchema = z.object({ |
| 32 | type: z.literal("Heading"), |
| 33 | props: z.object({ |
| 34 | value: z.string().min(1).max(500), |
| 35 | level: z.int().min(1).max(4).default(2), |
| 36 | }), |
| 37 | }); |
| 38 |
| 39 | const uiBadgeNodeSchema = z.object({ |
| 40 | type: z.literal("Badge"), |
| 41 | props: z.object({ |
| 42 | value: z.string().min(1).max(120), |
| 43 | tone: z.enum(["default", "muted", "positive", "warning", "danger"]).default("default"), |
| 44 | }), |
| 45 | }); |
| 46 |
| 47 | const uiButtonNodeSchema = z.object({ |
| 48 | type: z.literal("Button"), |
| 49 | props: z.object({ |
| 50 | label: z.string().min(1).max(120), |
| 51 | variant: z.enum(["primary", "secondary", "ghost", "danger"]).default("primary"), |
| 52 | action: uiActionSchema, |
| 53 | }), |
| 54 | }); |
| 55 |
| 56 | const uiDividerNodeSchema = z.object({ |
| 57 | type: z.literal("Divider"), |
| 58 | props: z.object({}).default({}), |
| 59 | }); |
| 60 |
| 61 | const uiFileCardNodeSchema = z.object({ |
| 62 | type: z.literal("FileCard"), |
| 63 | props: z.object({ |
| 64 | title: z.string().min(1).max(200), |
| 65 | subtitle: z.string().max(500).optional(), |
| 66 | fileId: z.string().trim().min(1).max(200).optional(), |
| 67 | action: uiActionSchema.optional(), |
| 68 | }), |
| 69 | }); |
| 70 |
| 71 | const uiUserChipNodeSchema = z.object({ |
| 72 | type: z.literal("UserChip"), |
| 73 | props: z.object({ |
| 74 | label: z.string().min(1).max(120), |
| 75 | userId: z.string().trim().min(1).max(200).optional(), |
| 76 | }), |
| 77 | }); |
| 78 |
| 79 | const uiEmptyStateNodeSchema = z.object({ |
| 80 | type: z.literal("EmptyState"), |
| 81 | props: z.object({ |
| 82 | title: z.string().min(1).max(160), |
| 83 | description: z.string().max(1000).optional(), |
| 84 | action: uiActionSchema.optional(), |
| 85 | }), |
| 86 | }); |
| 87 |
| 88 | const uiImageNodeSchema = z.object({ |
| 89 | type: z.literal("Image"), |
| 90 | props: z.object({ |
| 91 | src: z.string().url().max(2000), |
| 92 | alt: z.string().max(500).default(""), |
| 93 | width: z.number().int().min(1).max(4096).optional(), |
| 94 | height: z.number().int().min(1).max(4096).optional(), |
| 95 | }), |
| 96 | }); |
| 97 |
| 98 | const uiLinkNodeSchema = z.object({ |
| 99 | type: z.literal("Link"), |
| 100 | props: z.object({ |
| 101 | label: z.string().min(1).max(500), |
| 102 | href: z.string().url().max(2000), |
| 103 | external: z.boolean().default(false), |
| 104 | }), |
| 105 | }); |
| 106 |
| 107 | const uiCodeBlockNodeSchema = z.object({ |
| 108 | type: z.literal("CodeBlock"), |
| 109 | props: z.object({ |
| 110 | code: z.string().max(50000), |
| 111 | language: z.string().max(50).optional(), |
| 112 | }), |
| 113 | }); |
| 114 |
| 115 | const uiInputNodeSchema = z.object({ |
| 116 | type: z.literal("Input"), |
| 117 | props: z.object({ |
| 118 | name: z.string().min(1).max(120), |
| 119 | label: z.string().max(200).optional(), |
| 120 | placeholder: z.string().max(200).optional(), |
| 121 | defaultValue: z.string().max(5000).optional(), |
| 122 | type: z.enum(["text", "number", "email", "url", "textarea"]).default("text"), |
| 123 | required: z.boolean().default(false), |
| 124 | }), |
| 125 | }); |
| 126 |
| 127 | const uiSelectNodeSchema = z.object({ |
| 128 | type: z.literal("Select"), |
| 129 | props: z.object({ |
| 130 | name: z.string().min(1).max(120), |
| 131 | label: z.string().max(200).optional(), |
| 132 | options: z |
| 133 | .array( |
| 134 | z.object({ |
| 135 | value: z.string().min(1).max(200), |
| 136 | label: z.string().min(1).max(200), |
| 137 | }), |
| 138 | ) |
| 139 | .min(1) |
| 140 | .max(100), |
| 141 | defaultValue: z.string().max(200).optional(), |
| 142 | required: z.boolean().default(false), |
| 143 | }), |
| 144 | }); |
| 145 |
| 146 | const uiTableNodeSchema = z.object({ |
| 147 | type: z.literal("Table"), |
| 148 | props: z.object({ |
| 149 | columns: z |
| 150 | .array( |
| 151 | z.object({ |
| 152 | key: z.string().min(1).max(120), |
| 153 | label: z.string().min(1).max(200), |
| 154 | align: z.enum(["left", "center", "right"]).default("left"), |
| 155 | }), |
| 156 | ) |
| 157 | .min(1) |
| 158 | .max(20), |
| 159 | rows: z.array(z.record(z.string(), z.string())).max(200), |
| 160 | }), |
| 161 | }); |
| 162 |
| 163 | // --------------------------------------------------------------------------- |
| 164 | // Extended component schemas |
| 165 | // --------------------------------------------------------------------------- |
| 166 |
| 167 | const uiAvatarNodeSchema = z.object({ |
| 168 | type: z.literal("Avatar"), |
| 169 | props: z.object({ |
| 170 | src: z.string().url().max(2000).optional(), |
| 171 | fallback: z.string().min(1).max(10), |
| 172 | size: z.enum(["sm", "default", "lg"]).default("default"), |
| 173 | }), |
| 174 | }); |
| 175 |
| 176 | const uiCheckboxNodeSchema = z.object({ |
| 177 | type: z.literal("Checkbox"), |
| 178 | props: z.object({ |
| 179 | name: z.string().min(1).max(120), |
| 180 | label: z.string().max(200).optional(), |
| 181 | defaultChecked: z.boolean().default(false), |
| 182 | action: uiActionSchema.optional(), |
| 183 | }), |
| 184 | }); |
| 185 |
| 186 | const uiSwitchNodeSchema = z.object({ |
| 187 | type: z.literal("Switch"), |
| 188 | props: z.object({ |
| 189 | name: z.string().min(1).max(120), |
| 190 | label: z.string().max(200).optional(), |
| 191 | defaultChecked: z.boolean().default(false), |
| 192 | action: uiActionSchema.optional(), |
| 193 | }), |
| 194 | }); |
| 195 |
| 196 | const uiProgressNodeSchema = z.object({ |
| 197 | type: z.literal("Progress"), |
| 198 | props: z.object({ |
| 199 | value: z.number().min(0).max(100), |
| 200 | label: z.string().max(200).optional(), |
| 201 | }), |
| 202 | }); |
| 203 |
| 204 | const uiAlertNodeSchema = z.object({ |
| 205 | type: z.literal("Alert"), |
| 206 | props: z.object({ |
| 207 | title: z.string().min(1).max(200), |
| 208 | description: z.string().max(1000).optional(), |
| 209 | tone: z.enum(["info", "success", "warning", "error"]).default("info"), |
| 210 | }), |
| 211 | }); |
| 212 |
| 213 | const uiRadioGroupNodeSchema = z.object({ |
| 214 | type: z.literal("RadioGroup"), |
| 215 | props: z.object({ |
| 216 | name: z.string().min(1).max(120), |
| 217 | label: z.string().max(200).optional(), |
| 218 | options: z |
| 219 | .array( |
| 220 | z.object({ |
| 221 | value: z.string().min(1).max(200), |
| 222 | label: z.string().min(1).max(200), |
| 223 | }), |
| 224 | ) |
| 225 | .min(1) |
| 226 | .max(50), |
| 227 | defaultValue: z.string().max(200).optional(), |
| 228 | action: uiActionSchema.optional(), |
| 229 | }), |
| 230 | }); |
| 231 |
| 232 | const uiBreadcrumbNodeSchema = z.object({ |
| 233 | type: z.literal("Breadcrumb"), |
| 234 | props: z.object({ |
| 235 | items: z |
| 236 | .array( |
| 237 | z.object({ |
| 238 | label: z.string().min(1).max(200), |
| 239 | href: z.string().max(2000).optional(), |
| 240 | action: uiActionSchema.optional(), |
| 241 | }), |
| 242 | ) |
| 243 | .min(1) |
| 244 | .max(10), |
| 245 | }), |
| 246 | }); |
| 247 |
| 248 | const uiToggleNodeSchema = z.object({ |
| 249 | type: z.literal("Toggle"), |
| 250 | props: z.object({ |
| 251 | label: z.string().min(1).max(120), |
| 252 | defaultPressed: z.boolean().default(false), |
| 253 | variant: z.enum(["default", "outline"]).default("default"), |
| 254 | action: uiActionSchema.optional(), |
| 255 | }), |
| 256 | }); |
| 257 |
| 258 | const uiSliderNodeSchema = z.object({ |
| 259 | type: z.literal("Slider"), |
| 260 | props: z.object({ |
| 261 | name: z.string().min(1).max(120), |
| 262 | label: z.string().max(200).optional(), |
| 263 | min: z.number().default(0), |
| 264 | max: z.number().default(100), |
| 265 | step: z.number().min(0.01).default(1), |
| 266 | defaultValue: z.number().optional(), |
| 267 | }), |
| 268 | }); |
| 269 |
| 270 | const uiSkeletonNodeSchema = z.object({ |
| 271 | type: z.literal("Skeleton"), |
| 272 | props: z.object({ |
| 273 | width: z.string().max(50).optional(), |
| 274 | height: z.string().max(50).optional(), |
| 275 | rounded: z.boolean().default(false), |
| 276 | }), |
| 277 | }); |
| 278 |
| 279 | const uiMenuNodeSchema = z.object({ |
| 280 | type: z.literal("Menu"), |
| 281 | props: z.object({ |
| 282 | trigger: z.string().min(1).max(120), |
| 283 | items: z |
| 284 | .array( |
| 285 | z.object({ |
| 286 | label: z.string().min(1).max(200), |
| 287 | action: uiActionSchema, |
| 288 | tone: z.enum(["default", "danger"]).default("default"), |
| 289 | }), |
| 290 | ) |
| 291 | .min(1) |
| 292 | .max(20), |
| 293 | }), |
| 294 | }); |
| 295 |
| 296 | // --------------------------------------------------------------------------- |
| 297 | // Node types |
| 298 | // --------------------------------------------------------------------------- |
| 299 |
| 300 | type ColineUiNodeBase = |
| 301 | | z.infer<typeof uiTextNodeSchema> |
| 302 | | z.infer<typeof uiHeadingNodeSchema> |
| 303 | | z.infer<typeof uiBadgeNodeSchema> |
| 304 | | z.infer<typeof uiButtonNodeSchema> |
| 305 | | z.infer<typeof uiDividerNodeSchema> |
| 306 | | z.infer<typeof uiFileCardNodeSchema> |
| 307 | | z.infer<typeof uiUserChipNodeSchema> |
| 308 | | z.infer<typeof uiEmptyStateNodeSchema> |
| 309 | | z.infer<typeof uiImageNodeSchema> |
| 310 | | z.infer<typeof uiLinkNodeSchema> |
| 311 | | z.infer<typeof uiCodeBlockNodeSchema> |
| 312 | | z.infer<typeof uiInputNodeSchema> |
| 313 | | z.infer<typeof uiSelectNodeSchema> |
| 314 | | z.infer<typeof uiTableNodeSchema> |
| 315 | | z.infer<typeof uiAvatarNodeSchema> |
| 316 | | z.infer<typeof uiCheckboxNodeSchema> |
| 317 | | z.infer<typeof uiSwitchNodeSchema> |
| 318 | | z.infer<typeof uiProgressNodeSchema> |
| 319 | | z.infer<typeof uiAlertNodeSchema> |
| 320 | | z.infer<typeof uiRadioGroupNodeSchema> |
| 321 | | z.infer<typeof uiBreadcrumbNodeSchema> |
| 322 | | z.infer<typeof uiToggleNodeSchema> |
| 323 | | z.infer<typeof uiSliderNodeSchema> |
| 324 | | z.infer<typeof uiSkeletonNodeSchema> |
| 325 | | z.infer<typeof uiMenuNodeSchema> |
| 326 | | z.infer<typeof uiReferenceNodeSchema>; |
| 327 |
| 328 | export type ColineUiNode = |
| 329 | | ColineUiNodeBase |
| 330 | | ColineUiStackNode |
| 331 | | ColineUiCardNode |
| 332 | | ColineUiTabsNode |
| 333 | | ColineUiFormNode |
| 334 | | ColineUiCollapsibleNode |
| 335 | | ColineUiFieldNode; |
| 336 |
| 337 | export interface ColineUiStackNode { |
| 338 | type: "Stack"; |
| 339 | props: { |
| 340 | direction?: "vertical" | "horizontal" | undefined; |
| 341 | gap?: "xs" | "sm" | "md" | "lg" | undefined; |
| 342 | children: ColineUiNode[]; |
| 343 | }; |
| 344 | } |
| 345 |
| 346 | export interface ColineUiCardNode { |
| 347 | type: "Card"; |
| 348 | props: { |
| 349 | title?: string | undefined; |
| 350 | description?: string | undefined; |
| 351 | children?: ColineUiNode[] | undefined; |
| 352 | footer?: ColineUiNode[] | undefined; |
| 353 | size?: "default" | "sm" | undefined; |
| 354 | }; |
| 355 | } |
| 356 |
| 357 | export interface ColineUiTabsNode { |
| 358 | type: "Tabs"; |
| 359 | props: { |
| 360 | tabs: Array<{ |
| 361 | label: string; |
| 362 | value: string; |
| 363 | content: ColineUiNode[]; |
| 364 | }>; |
| 365 | defaultValue?: string | undefined; |
| 366 | }; |
| 367 | } |
| 368 |
| 369 | export interface ColineUiFormNode { |
| 370 | type: "Form"; |
| 371 | props: { |
| 372 | children: ColineUiNode[]; |
| 373 | submitAction: ColineUiAction; |
| 374 | submitLabel?: string | undefined; |
| 375 | }; |
| 376 | } |
| 377 |
| 378 | export interface ColineUiCollapsibleNode { |
| 379 | type: "Collapsible"; |
| 380 | props: { |
| 381 | title: string; |
| 382 | children: ColineUiNode[]; |
| 383 | defaultOpen?: boolean | undefined; |
| 384 | }; |
| 385 | } |
| 386 |
| 387 | export interface ColineUiFieldNode { |
| 388 | type: "Field"; |
| 389 | props: { |
| 390 | label?: string | undefined; |
| 391 | description?: string | undefined; |
| 392 | error?: string | undefined; |
| 393 | children: ColineUiNode[]; |
| 394 | }; |
| 395 | } |
| 396 |
| 397 | const uiNodeLazySchema: z.ZodType<ColineUiNode> = z.lazy(() => |
| 398 | z.union([ |
| 399 | // Base components |
| 400 | uiTextNodeSchema, |
| 401 | uiHeadingNodeSchema, |
| 402 | uiBadgeNodeSchema, |
| 403 | uiButtonNodeSchema, |
| 404 | uiDividerNodeSchema, |
| 405 | uiFileCardNodeSchema, |
| 406 | uiUserChipNodeSchema, |
| 407 | uiEmptyStateNodeSchema, |
| 408 | uiImageNodeSchema, |
| 409 | uiLinkNodeSchema, |
| 410 | uiCodeBlockNodeSchema, |
| 411 | uiInputNodeSchema, |
| 412 | uiSelectNodeSchema, |
| 413 | uiTableNodeSchema, |
| 414 | // Extended components |
| 415 | uiAvatarNodeSchema, |
| 416 | uiCheckboxNodeSchema, |
| 417 | uiSwitchNodeSchema, |
| 418 | uiProgressNodeSchema, |
| 419 | uiAlertNodeSchema, |
| 420 | uiRadioGroupNodeSchema, |
| 421 | uiBreadcrumbNodeSchema, |
| 422 | uiToggleNodeSchema, |
| 423 | uiSliderNodeSchema, |
| 424 | uiSkeletonNodeSchema, |
| 425 | uiMenuNodeSchema, |
| 426 | uiReferenceNodeSchema, |
| 427 | // Container components (recursive) |
| 428 | z.object({ |
| 429 | type: z.literal("Stack"), |
| 430 | props: z.object({ |
| 431 | direction: z.enum(["vertical", "horizontal"]).default("vertical"), |
| 432 | gap: z.enum(["xs", "sm", "md", "lg"]).default("md"), |
| 433 | children: z.array(uiNodeLazySchema), |
| 434 | }), |
| 435 | }), |
| 436 | z.object({ |
| 437 | type: z.literal("Card"), |
| 438 | props: z.object({ |
| 439 | title: z.string().min(1).max(200).optional(), |
| 440 | description: z.string().max(1000).optional(), |
| 441 | children: z.array(uiNodeLazySchema).optional(), |
| 442 | footer: z.array(uiNodeLazySchema).optional(), |
| 443 | size: z.enum(["default", "sm"]).default("default"), |
| 444 | }), |
| 445 | }), |
| 446 | z.object({ |
| 447 | type: z.literal("Tabs"), |
| 448 | props: z.object({ |
| 449 | tabs: z |
| 450 | .array( |
| 451 | z.object({ |
| 452 | label: z.string().min(1).max(200), |
| 453 | value: z.string().min(1).max(120), |
| 454 | content: z.array(uiNodeLazySchema), |
| 455 | }), |
| 456 | ) |
| 457 | .min(1) |
| 458 | .max(20), |
| 459 | defaultValue: z.string().max(120).optional(), |
| 460 | }), |
| 461 | }), |
| 462 | z.object({ |
| 463 | type: z.literal("Form"), |
| 464 | props: z.object({ |
| 465 | children: z.array(uiNodeLazySchema), |
| 466 | submitAction: uiActionSchema, |
| 467 | submitLabel: z.string().min(1).max(120).default("Submit"), |
| 468 | }), |
| 469 | }), |
| 470 | z.object({ |
| 471 | type: z.literal("Collapsible"), |
| 472 | props: z.object({ |
| 473 | title: z.string().min(1).max(200), |
| 474 | children: z.array(uiNodeLazySchema), |
| 475 | defaultOpen: z.boolean().default(false), |
| 476 | }), |
| 477 | }), |
| 478 | z.object({ |
| 479 | type: z.literal("Field"), |
| 480 | props: z.object({ |
| 481 | label: z.string().max(200).optional(), |
| 482 | description: z.string().max(500).optional(), |
| 483 | error: z.string().max(500).optional(), |
| 484 | children: z.array(uiNodeLazySchema), |
| 485 | }), |
| 486 | }), |
| 487 | ]), |
| 488 | ); |
| 489 |
| 490 | export const colineUiNodeSchema = uiNodeLazySchema; |
| 491 | export const colineUiActionSchema = uiActionSchema; |
| 492 |
| 493 | export const actions = { |
| 494 | openFile(fileId: string, payload: Record<string, unknown> = {}): ColineUiAction { |
| 495 | return colineUiActionSchema.parse({ |
| 496 | type: "open_file", |
| 497 | payload: { |
| 498 | fileId, |
| 499 | ...payload, |
| 500 | }, |
| 501 | }); |
| 502 | }, |
| 503 |
| 504 | openAppHome(payload: Record<string, unknown> = {}): ColineUiAction { |
| 505 | return colineUiActionSchema.parse({ |
| 506 | type: "open_app_home", |
| 507 | payload, |
| 508 | }); |
| 509 | }, |
| 510 |
| 511 | navigate(href: string, payload: Record<string, unknown> = {}): ColineUiAction { |
| 512 | return colineUiActionSchema.parse({ |
| 513 | type: "navigate", |
| 514 | payload: { |
| 515 | href, |
| 516 | ...payload, |
| 517 | }, |
| 518 | }); |
| 519 | }, |
| 520 |
| 521 | createFile(input: { |
| 522 | name: string; |
| 523 | typeKey: string; |
| 524 | driveId?: string; |
| 525 | parentId?: string | null; |
| 526 | document?: Record<string, unknown>; |
| 527 | }): ColineUiAction { |
| 528 | const payload: Record<string, unknown> = { |
| 529 | name: input.name, |
| 530 | typeKey: input.typeKey, |
| 531 | }; |
| 532 |
| 533 | if (input.driveId) { |
| 534 | payload["driveId"] = input.driveId; |
| 535 | } |
| 536 |
| 537 | if (input.parentId !== undefined) { |
| 538 | payload["parentId"] = input.parentId; |
| 539 | } |
| 540 |
| 541 | if (input.document) { |
| 542 | payload["document"] = input.document; |
| 543 | } |
| 544 |
| 545 | return colineUiActionSchema.parse({ |
| 546 | type: "create_file", |
| 547 | payload, |
| 548 | }); |
| 549 | }, |
| 550 |
| 551 | invokeTool(tool: string, input: Record<string, unknown> = {}): ColineUiAction { |
| 552 | return colineUiActionSchema.parse({ type: "invoke_tool", payload: { tool, input } }); |
| 553 | }, |
| 554 |
| 555 | custom(type: string, payload: Record<string, unknown> = {}): ColineUiAction { |
| 556 | return colineUiActionSchema.parse({ |
| 557 | type, |
| 558 | payload, |
| 559 | }); |
| 560 | }, |
| 561 | }; |
| 562 |
| 563 | export const ui = { |
| 564 | text( |
| 565 | value: string, |
| 566 | options: { |
| 567 | tone?: "default" | "muted" | "positive" | "warning" | "danger"; |
| 568 | } = {}, |
| 569 | ): ColineUiNode { |
| 570 | return colineUiNodeSchema.parse({ |
| 571 | type: "Text", |
| 572 | props: { |
| 573 | value, |
| 574 | ...(options.tone ? { tone: options.tone } : {}), |
| 575 | }, |
| 576 | }); |
| 577 | }, |
| 578 |
| 579 | heading( |
| 580 | value: string, |
| 581 | options: { |
| 582 | level?: 1 | 2 | 3 | 4; |
| 583 | } = {}, |
| 584 | ): ColineUiNode { |
| 585 | return colineUiNodeSchema.parse({ |
| 586 | type: "Heading", |
| 587 | props: { |
| 588 | value, |
| 589 | ...(options.level ? { level: options.level } : {}), |
| 590 | }, |
| 591 | }); |
| 592 | }, |
| 593 |
| 594 | badge( |
| 595 | value: string, |
| 596 | options: { |
| 597 | tone?: "default" | "muted" | "positive" | "warning" | "danger"; |
| 598 | } = {}, |
| 599 | ): ColineUiNode { |
| 600 | return colineUiNodeSchema.parse({ |
| 601 | type: "Badge", |
| 602 | props: { |
| 603 | value, |
| 604 | ...(options.tone ? { tone: options.tone } : {}), |
| 605 | }, |
| 606 | }); |
| 607 | }, |
| 608 |
| 609 | button( |
| 610 | label: string, |
| 611 | options: { |
| 612 | variant?: "primary" | "secondary" | "ghost" | "danger"; |
| 613 | action: ColineUiAction; |
| 614 | }, |
| 615 | ): ColineUiNode { |
| 616 | return colineUiNodeSchema.parse({ |
| 617 | type: "Button", |
| 618 | props: { |
| 619 | label, |
| 620 | action: options.action, |
| 621 | ...(options.variant ? { variant: options.variant } : {}), |
| 622 | }, |
| 623 | }); |
| 624 | }, |
| 625 |
| 626 | divider(): ColineUiNode { |
| 627 | return colineUiNodeSchema.parse({ |
| 628 | type: "Divider", |
| 629 | props: {}, |
| 630 | }); |
| 631 | }, |
| 632 |
| 633 | fileCard(input: { |
| 634 | title: string; |
| 635 | subtitle?: string; |
| 636 | fileId?: string; |
| 637 | action?: ColineUiAction; |
| 638 | }): ColineUiNode { |
| 639 | return colineUiNodeSchema.parse({ |
| 640 | type: "FileCard", |
| 641 | props: { |
| 642 | title: input.title, |
| 643 | ...(input.subtitle ? { subtitle: input.subtitle } : {}), |
| 644 | ...(input.fileId ? { fileId: input.fileId } : {}), |
| 645 | ...(input.action ? { action: input.action } : {}), |
| 646 | }, |
| 647 | }); |
| 648 | }, |
| 649 |
| 650 | userChip(input: { label: string; userId?: string }): ColineUiNode { |
| 651 | return colineUiNodeSchema.parse({ |
| 652 | type: "UserChip", |
| 653 | props: { |
| 654 | label: input.label, |
| 655 | ...(input.userId ? { userId: input.userId } : {}), |
| 656 | }, |
| 657 | }); |
| 658 | }, |
| 659 |
| 660 | emptyState(input: { |
| 661 | title: string; |
| 662 | description?: string; |
| 663 | action?: ColineUiAction; |
| 664 | }): ColineUiNode { |
| 665 | return colineUiNodeSchema.parse({ |
| 666 | type: "EmptyState", |
| 667 | props: { |
| 668 | title: input.title, |
| 669 | ...(input.description ? { description: input.description } : {}), |
| 670 | ...(input.action ? { action: input.action } : {}), |
| 671 | }, |
| 672 | }); |
| 673 | }, |
| 674 |
| 675 | stack( |
| 676 | children: ColineUiNode[], |
| 677 | options: { |
| 678 | direction?: "vertical" | "horizontal"; |
| 679 | gap?: "xs" | "sm" | "md" | "lg"; |
| 680 | } = {}, |
| 681 | ): ColineUiNode { |
| 682 | return colineUiNodeSchema.parse({ |
| 683 | type: "Stack", |
| 684 | props: { |
| 685 | children, |
| 686 | ...(options.direction ? { direction: options.direction } : {}), |
| 687 | ...(options.gap ? { gap: options.gap } : {}), |
| 688 | }, |
| 689 | }); |
| 690 | }, |
| 691 |
| 692 | /** Alias for `stack(children, { direction: "horizontal", ...options })`. */ |
| 693 | row( |
| 694 | children: ColineUiNode[], |
| 695 | options: { |
| 696 | gap?: "xs" | "sm" | "md" | "lg"; |
| 697 | } = {}, |
| 698 | ): ColineUiNode { |
| 699 | return colineUiNodeSchema.parse({ |
| 700 | type: "Stack", |
| 701 | props: { |
| 702 | children, |
| 703 | direction: "horizontal", |
| 704 | ...(options.gap ? { gap: options.gap } : {}), |
| 705 | }, |
| 706 | }); |
| 707 | }, |
| 708 |
| 709 | image(input: { src: string; alt?: string; width?: number; height?: number }): ColineUiNode { |
| 710 | return colineUiNodeSchema.parse({ |
| 711 | type: "Image", |
| 712 | props: { |
| 713 | src: input.src, |
| 714 | ...(input.alt ? { alt: input.alt } : {}), |
| 715 | ...(input.width ? { width: input.width } : {}), |
| 716 | ...(input.height ? { height: input.height } : {}), |
| 717 | }, |
| 718 | }); |
| 719 | }, |
| 720 |
| 721 | link(label: string, href: string, options: { external?: boolean } = {}): ColineUiNode { |
| 722 | return colineUiNodeSchema.parse({ |
| 723 | type: "Link", |
| 724 | props: { |
| 725 | label, |
| 726 | href, |
| 727 | ...(options.external ? { external: true } : {}), |
| 728 | }, |
| 729 | }); |
| 730 | }, |
| 731 |
| 732 | codeBlock(code: string, options: { language?: string } = {}): ColineUiNode { |
| 733 | return colineUiNodeSchema.parse({ |
| 734 | type: "CodeBlock", |
| 735 | props: { |
| 736 | code, |
| 737 | ...(options.language ? { language: options.language } : {}), |
| 738 | }, |
| 739 | }); |
| 740 | }, |
| 741 |
| 742 | input(input: { |
| 743 | name: string; |
| 744 | label?: string; |
| 745 | placeholder?: string; |
| 746 | defaultValue?: string; |
| 747 | type?: "text" | "number" | "email" | "url" | "textarea"; |
| 748 | required?: boolean; |
| 749 | }): ColineUiNode { |
| 750 | return colineUiNodeSchema.parse({ |
| 751 | type: "Input", |
| 752 | props: { |
| 753 | name: input.name, |
| 754 | ...(input.label ? { label: input.label } : {}), |
| 755 | ...(input.placeholder ? { placeholder: input.placeholder } : {}), |
| 756 | ...(input.defaultValue ? { defaultValue: input.defaultValue } : {}), |
| 757 | ...(input.type ? { type: input.type } : {}), |
| 758 | ...(input.required ? { required: true } : {}), |
| 759 | }, |
| 760 | }); |
| 761 | }, |
| 762 |
| 763 | select(input: { |
| 764 | name: string; |
| 765 | label?: string; |
| 766 | options: Array<{ value: string; label: string }>; |
| 767 | defaultValue?: string; |
| 768 | required?: boolean; |
| 769 | }): ColineUiNode { |
| 770 | return colineUiNodeSchema.parse({ |
| 771 | type: "Select", |
| 772 | props: { |
| 773 | name: input.name, |
| 774 | options: input.options, |
| 775 | ...(input.label ? { label: input.label } : {}), |
| 776 | ...(input.defaultValue ? { defaultValue: input.defaultValue } : {}), |
| 777 | ...(input.required ? { required: true } : {}), |
| 778 | }, |
| 779 | }); |
| 780 | }, |
| 781 |
| 782 | table(input: { |
| 783 | columns: Array<{ |
| 784 | key: string; |
| 785 | label: string; |
| 786 | align?: "left" | "center" | "right"; |
| 787 | }>; |
| 788 | rows: Array<Record<string, string>>; |
| 789 | }): ColineUiNode { |
| 790 | return colineUiNodeSchema.parse({ |
| 791 | type: "Table", |
| 792 | props: { |
| 793 | columns: input.columns, |
| 794 | rows: input.rows, |
| 795 | }, |
| 796 | }); |
| 797 | }, |
| 798 |
| 799 | // ------------------------------------------------------------------------- |
| 800 | // Extended components |
| 801 | // ------------------------------------------------------------------------- |
| 802 |
| 803 | card( |
| 804 | input: { |
| 805 | title?: string; |
| 806 | description?: string; |
| 807 | children?: ColineUiNode[]; |
| 808 | footer?: ColineUiNode[]; |
| 809 | size?: "default" | "sm"; |
| 810 | } = {}, |
| 811 | ): ColineUiNode { |
| 812 | return colineUiNodeSchema.parse({ |
| 813 | type: "Card", |
| 814 | props: { |
| 815 | ...(input.title ? { title: input.title } : {}), |
| 816 | ...(input.description ? { description: input.description } : {}), |
| 817 | ...(input.children ? { children: input.children } : {}), |
| 818 | ...(input.footer ? { footer: input.footer } : {}), |
| 819 | ...(input.size ? { size: input.size } : {}), |
| 820 | }, |
| 821 | }); |
| 822 | }, |
| 823 |
| 824 | avatar(input: { fallback: string; src?: string; size?: "sm" | "default" | "lg" }): ColineUiNode { |
| 825 | return colineUiNodeSchema.parse({ |
| 826 | type: "Avatar", |
| 827 | props: { |
| 828 | fallback: input.fallback, |
| 829 | ...(input.src ? { src: input.src } : {}), |
| 830 | ...(input.size ? { size: input.size } : {}), |
| 831 | }, |
| 832 | }); |
| 833 | }, |
| 834 |
| 835 | checkbox(input: { |
| 836 | name: string; |
| 837 | label?: string; |
| 838 | defaultChecked?: boolean; |
| 839 | action?: ColineUiAction; |
| 840 | }): ColineUiNode { |
| 841 | return colineUiNodeSchema.parse({ |
| 842 | type: "Checkbox", |
| 843 | props: { |
| 844 | name: input.name, |
| 845 | ...(input.label ? { label: input.label } : {}), |
| 846 | ...(input.defaultChecked ? { defaultChecked: true } : {}), |
| 847 | ...(input.action ? { action: input.action } : {}), |
| 848 | }, |
| 849 | }); |
| 850 | }, |
| 851 |
| 852 | switch(input: { |
| 853 | name: string; |
| 854 | label?: string; |
| 855 | defaultChecked?: boolean; |
| 856 | action?: ColineUiAction; |
| 857 | }): ColineUiNode { |
| 858 | return colineUiNodeSchema.parse({ |
| 859 | type: "Switch", |
| 860 | props: { |
| 861 | name: input.name, |
| 862 | ...(input.label ? { label: input.label } : {}), |
| 863 | ...(input.defaultChecked ? { defaultChecked: true } : {}), |
| 864 | ...(input.action ? { action: input.action } : {}), |
| 865 | }, |
| 866 | }); |
| 867 | }, |
| 868 |
| 869 | tabs(input: { |
| 870 | tabs: Array<{ |
| 871 | label: string; |
| 872 | value: string; |
| 873 | content: ColineUiNode[]; |
| 874 | }>; |
| 875 | defaultValue?: string; |
| 876 | }): ColineUiNode { |
| 877 | return colineUiNodeSchema.parse({ |
| 878 | type: "Tabs", |
| 879 | props: { |
| 880 | tabs: input.tabs, |
| 881 | ...(input.defaultValue ? { defaultValue: input.defaultValue } : {}), |
| 882 | }, |
| 883 | }); |
| 884 | }, |
| 885 |
| 886 | progress(value: number, options: { label?: string } = {}): ColineUiNode { |
| 887 | return colineUiNodeSchema.parse({ |
| 888 | type: "Progress", |
| 889 | props: { |
| 890 | value, |
| 891 | ...(options.label ? { label: options.label } : {}), |
| 892 | }, |
| 893 | }); |
| 894 | }, |
| 895 |
| 896 | alert(input: { |
| 897 | title: string; |
| 898 | description?: string; |
| 899 | tone?: "info" | "success" | "warning" | "error"; |
| 900 | }): ColineUiNode { |
| 901 | return colineUiNodeSchema.parse({ |
| 902 | type: "Alert", |
| 903 | props: { |
| 904 | title: input.title, |
| 905 | ...(input.description ? { description: input.description } : {}), |
| 906 | ...(input.tone ? { tone: input.tone } : {}), |
| 907 | }, |
| 908 | }); |
| 909 | }, |
| 910 |
| 911 | form(input: { |
| 912 | children: ColineUiNode[]; |
| 913 | submitAction: ColineUiAction; |
| 914 | submitLabel?: string; |
| 915 | }): ColineUiNode { |
| 916 | return colineUiNodeSchema.parse({ |
| 917 | type: "Form", |
| 918 | props: { |
| 919 | children: input.children, |
| 920 | submitAction: input.submitAction, |
| 921 | ...(input.submitLabel ? { submitLabel: input.submitLabel } : {}), |
| 922 | }, |
| 923 | }); |
| 924 | }, |
| 925 |
| 926 | radioGroup(input: { |
| 927 | name: string; |
| 928 | label?: string; |
| 929 | options: Array<{ value: string; label: string }>; |
| 930 | defaultValue?: string; |
| 931 | action?: ColineUiAction; |
| 932 | }): ColineUiNode { |
| 933 | return colineUiNodeSchema.parse({ |
| 934 | type: "RadioGroup", |
| 935 | props: { |
| 936 | name: input.name, |
| 937 | options: input.options, |
| 938 | ...(input.label ? { label: input.label } : {}), |
| 939 | ...(input.defaultValue ? { defaultValue: input.defaultValue } : {}), |
| 940 | ...(input.action ? { action: input.action } : {}), |
| 941 | }, |
| 942 | }); |
| 943 | }, |
| 944 |
| 945 | collapsible(input: { |
| 946 | title: string; |
| 947 | children: ColineUiNode[]; |
| 948 | defaultOpen?: boolean; |
| 949 | }): ColineUiNode { |
| 950 | return colineUiNodeSchema.parse({ |
| 951 | type: "Collapsible", |
| 952 | props: { |
| 953 | title: input.title, |
| 954 | children: input.children, |
| 955 | ...(input.defaultOpen ? { defaultOpen: true } : {}), |
| 956 | }, |
| 957 | }); |
| 958 | }, |
| 959 |
| 960 | breadcrumb(input: { |
| 961 | items: Array<{ |
| 962 | label: string; |
| 963 | href?: string; |
| 964 | action?: ColineUiAction; |
| 965 | }>; |
| 966 | }): ColineUiNode { |
| 967 | return colineUiNodeSchema.parse({ |
| 968 | type: "Breadcrumb", |
| 969 | props: { |
| 970 | items: input.items, |
| 971 | }, |
| 972 | }); |
| 973 | }, |
| 974 |
| 975 | toggle(input: { |
| 976 | label: string; |
| 977 | defaultPressed?: boolean; |
| 978 | variant?: "default" | "outline"; |
| 979 | action?: ColineUiAction; |
| 980 | }): ColineUiNode { |
| 981 | return colineUiNodeSchema.parse({ |
| 982 | type: "Toggle", |
| 983 | props: { |
| 984 | label: input.label, |
| 985 | ...(input.defaultPressed ? { defaultPressed: true } : {}), |
| 986 | ...(input.variant ? { variant: input.variant } : {}), |
| 987 | ...(input.action ? { action: input.action } : {}), |
| 988 | }, |
| 989 | }); |
| 990 | }, |
| 991 |
| 992 | field(input: { |
| 993 | children: ColineUiNode[]; |
| 994 | label?: string; |
| 995 | description?: string; |
| 996 | error?: string; |
| 997 | }): ColineUiNode { |
| 998 | return colineUiNodeSchema.parse({ |
| 999 | type: "Field", |
| 1000 | props: { |
| 1001 | children: input.children, |
| 1002 | ...(input.label ? { label: input.label } : {}), |
| 1003 | ...(input.description ? { description: input.description } : {}), |
| 1004 | ...(input.error ? { error: input.error } : {}), |
| 1005 | }, |
| 1006 | }); |
| 1007 | }, |
| 1008 |
| 1009 | slider(input: { |
| 1010 | name: string; |
| 1011 | label?: string; |
| 1012 | min?: number; |
| 1013 | max?: number; |
| 1014 | step?: number; |
| 1015 | defaultValue?: number; |
| 1016 | }): ColineUiNode { |
| 1017 | return colineUiNodeSchema.parse({ |
| 1018 | type: "Slider", |
| 1019 | props: { |
| 1020 | name: input.name, |
| 1021 | ...(input.label ? { label: input.label } : {}), |
| 1022 | ...(input.min !== undefined ? { min: input.min } : {}), |
| 1023 | ...(input.max !== undefined ? { max: input.max } : {}), |
| 1024 | ...(input.step !== undefined ? { step: input.step } : {}), |
| 1025 | ...(input.defaultValue !== undefined ? { defaultValue: input.defaultValue } : {}), |
| 1026 | }, |
| 1027 | }); |
| 1028 | }, |
| 1029 |
| 1030 | skeleton( |
| 1031 | input: { |
| 1032 | width?: string; |
| 1033 | height?: string; |
| 1034 | rounded?: boolean; |
| 1035 | } = {}, |
| 1036 | ): ColineUiNode { |
| 1037 | return colineUiNodeSchema.parse({ |
| 1038 | type: "Skeleton", |
| 1039 | props: { |
| 1040 | ...(input.width ? { width: input.width } : {}), |
| 1041 | ...(input.height ? { height: input.height } : {}), |
| 1042 | ...(input.rounded ? { rounded: true } : {}), |
| 1043 | }, |
| 1044 | }); |
| 1045 | }, |
| 1046 |
| 1047 | menu(input: { |
| 1048 | trigger: string; |
| 1049 | items: Array<{ |
| 1050 | label: string; |
| 1051 | action: ColineUiAction; |
| 1052 | tone?: "default" | "danger"; |
| 1053 | }>; |
| 1054 | }): ColineUiNode { |
| 1055 | return colineUiNodeSchema.parse({ |
| 1056 | type: "Menu", |
| 1057 | props: { |
| 1058 | trigger: input.trigger, |
| 1059 | items: input.items, |
| 1060 | }, |
| 1061 | }); |
| 1062 | }, |
| 1063 |
| 1064 | reference( |
| 1065 | reference: z.infer<typeof colineReferenceSchema>, |
| 1066 | options: { |
| 1067 | appearance?: "inline" | "card"; |
| 1068 | } = {}, |
| 1069 | ): ColineUiNode { |
| 1070 | return colineUiNodeSchema.parse({ |
| 1071 | type: "Reference", |
| 1072 | props: { |
| 1073 | reference, |
| 1074 | ...(options.appearance ? { appearance: options.appearance } : {}), |
| 1075 | }, |
| 1076 | }); |
| 1077 | }, |
| 1078 | }; |
| 1079 |