{
"name": "kanban-page-shell",
"kind": "page",
"primary": "article",
"page": "/catalog/page-shells/app/kanban-page/kanban-page.contents.html",
"slots": [
{
"name": "header",
"tagName": "header",
"html": "\n Sprint 42\n \n \n \n \n \n \n "
},
{
"name": "board",
"tagName": "section",
"html": "\n \n \n To do\n \n \n \n \n \n Design review\n Due tomorrow\n \n \n \n \n \n \n \n \n \n \n API spec\n Due Friday\n \n \n \n \n \n \n \n \n \n \n Write tests\n No due date\n \n \n \n \n \n \n \n \n\n \n \n In progress\n \n \n \n \n \n Implement auth\n 2 days left\n \n \n \n \n \n \n \n \n\n \n \n Done\n \n \n \n \n \n Setup repo\n Completed yesterday\n \n \n \n \n "
},
{
"name": "detail-drawer",
"tagName": "drawer-ui",
"html": "\n \n \n \n Title\n \n \n \n Description\n \n \n \n \n "
}
],
"nested": [],
"attrs": {},
"html": "\n \n \n Sprint 42\n \n \n \n \n \n \n \n \n\n \n \n \n \n To do\n \n \n \n \n \n Design review\n Due tomorrow\n \n \n \n \n \n \n \n \n \n \n API spec\n Due Friday\n \n \n \n \n \n \n \n \n \n \n Write tests\n No due date\n \n \n \n \n \n \n \n \n\n \n \n In progress\n \n \n \n \n \n Implement auth\n 2 days left\n \n \n \n \n \n \n \n \n\n \n \n Done\n \n \n \n \n \n Setup repo\n Completed yesterday\n \n \n \n \n \n \n\n \n \n \n \n \n Title\n \n \n \n Description\n \n \n \n \n \n \n",
"source": "catalog/page-shells/app/kanban-page/kanban-page.contents.html",
"metadata": {
"domain": "layout",
"description": "Kanban board page with sticky header (title + filters + add-task) and a 3-column draggable board surface.",
"keywords": [
"kanban",
"page",
"board",
"columns",
"tasks",
"header",
"filters",
"drag-drop",
"project-management",
"workflow"
]
},
"captured_at": "2026-06-07T19:28:13.657Z",
"template": [
{
"id": "text",
"component": "Text",
"size": "lg",
"strong": true,
"textContent": "Sprint 42"
},
{
"id": "badge",
"component": "Badge",
"size": "sm",
"text": "3 open",
"variant": "info"
},
{
"id": "row",
"component": "Row",
"align": "center",
"gap": "2",
"children": [
"text",
"badge"
]
},
{
"id": "input",
"component": "Input",
"placeholder": "Search tasks…"
},
{
"id": "button",
"component": "Button",
"icon": "filter",
"size": "sm",
"variant": "ghost"
},
{
"id": "button-2",
"component": "Button",
"icon": "plus",
"size": "sm",
"text": "New task",
"variant": "primary"
},
{
"id": "row-2",
"component": "Row",
"gap": "2",
"children": [
"input",
"button",
"button-2"
]
},
{
"id": "header",
"component": "Header",
"data-chunk-slot": "header",
"children": [
"row",
"row-2"
]
},
{
"id": "text-2",
"component": "Text",
"size": "sm",
"strong": true,
"textContent": "To do"
},
{
"id": "badge-2",
"component": "Badge",
"size": "sm",
"text": "3",
"variant": "muted"
},
{
"id": "row-4",
"component": "Row",
"align": "center",
"gap": "2",
"justify": "between",
"children": [
"text-2",
"badge-2"
]
},
{
"id": "text-3",
"component": "Text",
"size": "sm",
"strong": true,
"textContent": "Design review"
},
{
"id": "text-4",
"component": "Text",
"color": "subtle",
"size": "sm",
"textContent": "Due tomorrow"
},
{
"id": "badge-3",
"component": "Badge",
"size": "sm",
"text": "P1",
"variant": "danger"
},
{
"id": "avatar",
"component": "Avatar",
"size": "xs",
"src": "/avatar-1.png"
},
{
"id": "row-5",
"component": "Row",
"align": "center",
"gap": "1",
"children": [
"badge-3",
"avatar"
]
},
{
"id": "stack-2",
"component": "Stack",
"children": [
"text-3",
"text-4",
"row-5"
]
},
{
"id": "section-2",
"component": "Section",
"children": [
"column"
]
},
{
"id": "column",
"component": "Column",
"children": [
"stack-2"
]
},
{
"id": "card",
"component": "Card",
"padding": "sm",
"children": [
"section-2"
]
},
{
"id": "text-5",
"component": "Text",
"size": "sm",
"strong": true,
"textContent": "API spec"
},
{
"id": "text-6",
"component": "Text",
"color": "subtle",
"size": "sm",
"textContent": "Due Friday"
},
{
"id": "badge-4",
"component": "Badge",
"size": "sm",
"text": "P2",
"variant": "warning"
},
{
"id": "avatar-2",
"component": "Avatar",
"size": "xs",
"src": "/avatar-2.png"
},
{
"id": "row-6",
"component": "Row",
"align": "center",
"gap": "1",
"children": [
"badge-4",
"avatar-2"
]
},
{
"id": "stack-3",
"component": "Stack",
"children": [
"text-5",
"text-6",
"row-6"
]
},
{
"id": "section-3",
"component": "Section",
"children": [
"column-2"
]
},
{
"id": "column-2",
"component": "Column",
"children": [
"stack-3"
]
},
{
"id": "card-2",
"component": "Card",
"padding": "sm",
"children": [
"section-3"
]
},
{
"id": "text-7",
"component": "Text",
"size": "sm",
"strong": true,
"textContent": "Write tests"
},
{
"id": "text-8",
"component": "Text",
"color": "subtle",
"size": "sm",
"textContent": "No due date"
},
{
"id": "badge-5",
"component": "Badge",
"size": "sm",
"text": "P3",
"variant": "info"
},
{
"id": "avatar-3",
"component": "Avatar",
"size": "xs",
"src": "/avatar-3.png"
},
{
"id": "row-7",
"component": "Row",
"align": "center",
"gap": "1",
"children": [
"badge-5",
"avatar-3"
]
},
{
"id": "stack-4",
"component": "Stack",
"children": [
"text-7",
"text-8",
"row-7"
]
},
{
"id": "section-4",
"component": "Section",
"children": [
"column-3"
]
},
{
"id": "column-3",
"component": "Column",
"children": [
"stack-4"
]
},
{
"id": "card-3",
"component": "Card",
"padding": "sm",
"children": [
"section-4"
]
},
{
"id": "stack",
"component": "Stack",
"children": [
"row-4",
"card",
"card-2",
"card-3"
]
},
{
"id": "text-9",
"component": "Text",
"size": "sm",
"strong": true,
"textContent": "In progress"
},
{
"id": "badge-6",
"component": "Badge",
"size": "sm",
"text": "2",
"variant": "muted"
},
{
"id": "row-8",
"component": "Row",
"align": "center",
"gap": "2",
"justify": "between",
"children": [
"text-9",
"badge-6"
]
},
{
"id": "text-10",
"component": "Text",
"size": "sm",
"strong": true,
"textContent": "Implement auth"
},
{
"id": "text-11",
"component": "Text",
"color": "subtle",
"size": "sm",
"textContent": "2 days left"
},
{
"id": "badge-7",
"component": "Badge",
"size": "sm",
"text": "P1",
"variant": "danger"
},
{
"id": "avatar-4",
"component": "Avatar",
"size": "xs",
"src": "/avatar-1.png"
},
{
"id": "row-9",
"component": "Row",
"align": "center",
"gap": "1",
"children": [
"badge-7",
"avatar-4"
]
},
{
"id": "stack-6",
"component": "Stack",
"children": [
"text-10",
"text-11",
"row-9"
]
},
{
"id": "section-5",
"component": "Section",
"children": [
"column-4"
]
},
{
"id": "column-4",
"component": "Column",
"children": [
"stack-6"
]
},
{
"id": "card-4",
"component": "Card",
"padding": "sm",
"children": [
"section-5"
]
},
{
"id": "stack-5",
"component": "Stack",
"children": [
"row-8",
"card-4"
]
},
{
"id": "text-12",
"component": "Text",
"size": "sm",
"strong": true,
"textContent": "Done"
},
{
"id": "badge-8",
"component": "Badge",
"size": "sm",
"text": "5",
"variant": "muted"
},
{
"id": "row-10",
"component": "Row",
"align": "center",
"gap": "2",
"justify": "between",
"children": [
"text-12",
"badge-8"
]
},
{
"id": "text-13",
"component": "Text",
"color": "subtle",
"size": "sm",
"strong": true,
"textContent": "Setup repo"
},
{
"id": "text-14",
"component": "Text",
"color": "subtle",
"size": "sm",
"textContent": "Completed yesterday"
},
{
"id": "stack-8",
"component": "Stack",
"children": [
"text-13",
"text-14"
]
},
{
"id": "section-6",
"component": "Section",
"children": [
"column-5"
]
},
{
"id": "column-5",
"component": "Column",
"children": [
"stack-8"
]
},
{
"id": "card-5",
"component": "Card",
"padding": "sm",
"variant": "soft",
"children": [
"section-6"
]
},
{
"id": "stack-7",
"component": "Stack",
"children": [
"row-10",
"card-5"
]
},
{
"id": "row-3",
"component": "Row",
"align": "start",
"gap": "3",
"children": [
"stack",
"stack-5",
"stack-7"
]
},
{
"id": "section",
"component": "Section",
"data-chunk-slot": "board",
"children": [
"row-3"
]
},
{
"id": "text-15",
"component": "Text",
"variant": "body",
"slot": "heading",
"textContent": "Task detail"
},
{
"id": "header-2",
"component": "Header",
"children": [
"text-15"
]
},
{
"id": "text-16",
"component": "Text",
"textContent": "Title",
"variant": "body"
},
{
"id": "input-2",
"component": "Input",
"value": "Design review"
},
{
"id": "stack-10",
"component": "Stack",
"children": [
"text-16",
"input-2"
]
},
{
"id": "text-17",
"component": "Text",
"textContent": "Description",
"variant": "body"
},
{
"id": "text-area",
"component": "TextArea",
"placeholder": "Add details…"
},
{
"id": "stack-11",
"component": "Stack",
"children": [
"text-17",
"text-area"
]
},
{
"id": "stack-9",
"component": "Stack",
"children": [
"stack-10",
"stack-11"
]
},
{
"id": "section-7",
"component": "Section",
"children": [
"stack-9"
]
},
{
"id": "button-3",
"component": "Button",
"slot": "action",
"size": "sm",
"text": "Cancel",
"variant": "ghost"
},
{
"id": "button-4",
"component": "Button",
"slot": "action",
"size": "sm",
"text": "Save",
"variant": "primary"
},
{
"id": "footer",
"component": "Footer",
"children": [
"button-3",
"button-4"
]
},
{
"id": "task-detail",
"component": "Drawer",
"data-chunk-slot": "detail-drawer",
"children": [
"header-2",
"section-7",
"footer"
]
},
{
"id": "column-8",
"component": "Column",
"children": [
"section",
"task-detail"
]
},
{
"id": "section-8",
"component": "Section",
"children": [
"column-8"
]
},
{
"id": "root",
"component": "Card",
"children": [
"header",
"section-8"
]
}
]
}