{ "schemaVersion": 1, "source": "design/feedback.pen", "components": { "alert": { "frameId": "alertFrame", "title": "Alert", "description": "Displays a callout for user attention.", "variants": [ { "id": "alertDefault", "name": "Alert/Default", "key": "default", "type": "frame", "width": 320, "height": null, "padding": [ 12, 16, 12, 16 ], "gap": 4, "cornerRadius": 8, "fill": "#FFFFFF", "stroke": { "align": "inside", "fill": "#e2e8f0", "thickness": 1 }, "iconFontFamily": null, "iconFontName": null, "text": { "id": "alertDefaultTitle", "content": "Heads up!", "fontSize": 14, "fontWeight": "500", "fill": "#0c0c12", "underline": false }, "texts": [ { "id": "alertDefaultTitle", "content": "Heads up!", "fontSize": 14, "fontWeight": "500", "fill": "#0c0c12", "underline": false }, { "id": "alertDefaultBody", "content": "You can add components using the cli.", "fontSize": 14, "fontWeight": "normal", "fill": "#64748b", "underline": false } ], "reusable": true }, { "id": "alertDestructive", "name": "Alert/Destructive", "key": "destructive", "type": "frame", "width": 320, "height": null, "padding": [ 12, 16, 12, 16 ], "gap": 4, "cornerRadius": 8, "fill": "#fef2f2", "stroke": { "align": "inside", "fill": "#fecaca", "thickness": 1 }, "iconFontFamily": null, "iconFontName": null, "text": { "id": "alertDestructiveTitle", "content": "Error", "fontSize": 14, "fontWeight": "500", "fill": "#991b1b", "underline": false }, "texts": [ { "id": "alertDestructiveTitle", "content": "Error", "fontSize": 14, "fontWeight": "500", "fill": "#991b1b", "underline": false }, { "id": "alertDestructiveBody", "content": "Your session has expired. Please log in again.", "fontSize": 14, "fontWeight": "normal", "fill": "#b91c1c", "underline": false } ], "reusable": true }, { "id": "synthetic:info", "name": "Alert/Info", "key": "info", "type": "frame", "width": 320, "height": null, "padding": [ 12, 16, 12, 16 ], "gap": 4, "cornerRadius": 8, "fill": "#eff6ff", "stroke": { "align": "inside", "fill": "#bfdbfe", "thickness": 1 }, "iconFontFamily": null, "iconFontName": null, "text": { "id": "synthetic:alertInfoTitle", "content": "Information", "fontSize": 14, "fontWeight": "500", "fill": "#1e40af", "underline": false }, "texts": [ { "id": "synthetic:alertInfoTitle", "content": "Information", "fontSize": 14, "fontWeight": "500", "fill": "#1e40af", "underline": false }, { "id": "synthetic:alertInfoBody", "content": "Review the latest workspace update.", "fontSize": 14, "fontWeight": "normal", "fill": "#1e3a8a", "underline": false } ], "reusable": true }, { "id": "synthetic:success", "name": "Alert/Success", "key": "success", "type": "frame", "width": 320, "height": null, "padding": [ 12, 16, 12, 16 ], "gap": 4, "cornerRadius": 8, "fill": "#f0fdf4", "stroke": { "align": "inside", "fill": "#bbf7d0", "thickness": 1 }, "iconFontFamily": null, "iconFontName": null, "text": { "id": "synthetic:alertSuccessTitle", "content": "Complete", "fontSize": 14, "fontWeight": "500", "fill": "#166534", "underline": false }, "texts": [ { "id": "synthetic:alertSuccessTitle", "content": "Complete", "fontSize": 14, "fontWeight": "500", "fill": "#166534", "underline": false }, { "id": "synthetic:alertSuccessBody", "content": "The workspace is ready.", "fontSize": 14, "fontWeight": "normal", "fill": "#14532d", "underline": false } ], "reusable": true }, { "id": "synthetic:warning", "name": "Alert/Warning", "key": "warning", "type": "frame", "width": 320, "height": null, "padding": [ 12, 16, 12, 16 ], "gap": 4, "cornerRadius": 8, "fill": "#fef3c7", "stroke": { "align": "inside", "fill": "#fcd34d", "thickness": 1 }, "iconFontFamily": null, "iconFontName": null, "text": { "id": "synthetic:alertWarningTitle", "content": "Attention", "fontSize": 14, "fontWeight": "500", "fill": "#78350f", "underline": false }, "texts": [ { "id": "synthetic:alertWarningTitle", "content": "Attention", "fontSize": 14, "fontWeight": "500", "fill": "#78350f", "underline": false }, { "id": "synthetic:alertWarningBody", "content": "Confirm the setting before continuing.", "fontSize": 14, "fontWeight": "normal", "fill": "#78350f", "underline": false } ], "reusable": true } ] }, "progress": { "frameId": "progressFrame", "title": "Progress", "description": "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.", "variants": [ { "id": "progressBar", "name": "Progress/Bar", "key": "bar", "type": "frame", "width": 200, "height": 16, "padding": null, "gap": null, "cornerRadius": 9999, "fill": "#f1f5f9", "stroke": null, "iconFontFamily": null, "iconFontName": null, "text": null, "texts": [], "reusable": true } ] }, "statusScreen": { "frameId": "synthetic:statusScreen", "title": "StatusScreen", "description": "Full-page status feedback for not-found, error, offline, forbidden, maintenance, and coming-soon states.", "variants": [ { "id": "synthetic:not-found", "name": "StatusScreen/Not found", "key": "not-found", "type": "frame", "width": "fill_container", "height": null, "padding": [ 32, 32, 32, 32 ], "gap": null, "cornerRadius": null, "fill": null, "stroke": null, "iconFontFamily": null, "iconFontName": null, "text": null, "texts": [ { "id": "synthetic:statusScreenNotFoundCode", "content": "404", "fontSize": 72, "fontWeight": "800", "fill": "hsl(var(--foreground))", "underline": false }, { "id": "synthetic:statusScreenNotFoundTitle", "content": "Page not found", "fontSize": 24, "fontWeight": "600", "fill": "hsl(var(--foreground))", "underline": false } ], "reusable": true }, { "id": "synthetic:error", "name": "StatusScreen/Error", "key": "error", "type": "frame", "width": "fill_container", "height": null, "padding": [ 32, 32, 32, 32 ], "gap": null, "cornerRadius": null, "fill": null, "stroke": null, "iconFontFamily": null, "iconFontName": null, "text": null, "texts": [ { "id": "synthetic:statusScreenErrorCode", "content": "500", "fontSize": 72, "fontWeight": "800", "fill": "hsl(var(--destructive))", "underline": false }, { "id": "synthetic:statusScreenErrorTitle", "content": "Something went wrong", "fontSize": 24, "fontWeight": "600", "fill": "hsl(var(--foreground))", "underline": false } ], "reusable": true }, { "id": "synthetic:offline", "name": "StatusScreen/Offline", "key": "offline", "type": "frame", "width": "fill_container", "height": null, "padding": [ 32, 32, 32, 32 ], "gap": null, "cornerRadius": null, "fill": null, "stroke": null, "iconFontFamily": null, "iconFontName": null, "text": null, "texts": [], "reusable": true }, { "id": "synthetic:forbidden", "name": "StatusScreen/Forbidden", "key": "forbidden", "type": "frame", "width": "fill_container", "height": null, "padding": [ 32, 32, 32, 32 ], "gap": null, "cornerRadius": null, "fill": null, "stroke": null, "iconFontFamily": null, "iconFontName": null, "text": null, "texts": [], "reusable": true }, { "id": "synthetic:maintenance", "name": "StatusScreen/Maintenance", "key": "maintenance", "type": "frame", "width": "fill_container", "height": null, "padding": [ 32, 32, 32, 32 ], "gap": null, "cornerRadius": null, "fill": null, "stroke": null, "iconFontFamily": null, "iconFontName": null, "text": null, "texts": [], "reusable": true }, { "id": "synthetic:coming-soon", "name": "StatusScreen/Coming soon", "key": "coming-soon", "type": "frame", "width": "fill_container", "height": null, "padding": [ 32, 32, 32, 32 ], "gap": null, "cornerRadius": null, "fill": null, "stroke": null, "iconFontFamily": null, "iconFontName": null, "text": null, "texts": [], "reusable": true } ] }, "spinner": { "frameId": "spinnerFrame", "title": "Spinner", "description": "A visual indicator that content is being loaded.", "variants": [ { "id": "spinnerSm", "name": "Spinner/Sm", "key": "sm", "type": "icon_font", "width": 12, "height": 12, "padding": null, "gap": null, "cornerRadius": null, "fill": "#64748b", "stroke": null, "iconFontFamily": "lucide", "iconFontName": "refresh-cw", "text": null, "texts": [], "reusable": true }, { "id": "spinnerDefault", "name": "Spinner/Default", "key": "default", "type": "icon_font", "width": 16, "height": 16, "padding": null, "gap": null, "cornerRadius": null, "fill": "#64748b", "stroke": null, "iconFontFamily": "lucide", "iconFontName": "refresh-cw", "text": null, "texts": [], "reusable": true }, { "id": "spinnerLg", "name": "Spinner/Lg", "key": "lg", "type": "icon_font", "width": 24, "height": 24, "padding": null, "gap": null, "cornerRadius": null, "fill": "#64748b", "stroke": null, "iconFontFamily": "lucide", "iconFontName": "refresh-cw", "text": null, "texts": [], "reusable": true } ] }, "toast": { "frameId": "toastFrame", "title": "Toast", "description": "Transient feedback message with semantic variants.", "variants": [ { "id": "toastSuccess", "name": "Toast/Success", "key": "success", "type": "frame", "width": 384, "height": null, "padding": [ 12, 16, 12, 16 ], "gap": 12, "cornerRadius": 12, "fill": "#ffffff", "stroke": { "align": "inside", "fill": "#22c55e33", "thickness": 1 }, "reusable": true, "children": [ "toastSuccessIcon", "toastSuccessText", "toastSuccessClose" ] }, { "id": "toastError", "name": "Toast/Error", "key": "error", "type": "frame", "width": 384, "height": null, "padding": [ 12, 16, 12, 16 ], "gap": 12, "cornerRadius": 12, "fill": "#ffffff", "stroke": { "align": "inside", "fill": "#ef444433", "thickness": 1 }, "reusable": true, "children": [ "toastErrorIcon", "toastErrorText" ] }, { "id": "toastInfo", "name": "Toast/Info", "key": "info", "type": "frame", "width": 384, "height": null, "padding": [ 12, 16, 12, 16 ], "gap": 12, "cornerRadius": 12, "fill": "#ffffff", "stroke": { "align": "inside", "fill": "#3b82f633", "thickness": 1 }, "reusable": true, "children": [ "toastInfoIcon", "toastInfoText" ] } ], "nodes": { "success": { "id": "toastSuccess", "type": "frame", "name": "Toast/Success", "width": 384, "height": null, "padding": [ 12, 16, 12, 16 ], "gap": 12, "cornerRadius": 12, "fill": "#ffffff", "stroke": { "align": "inside", "fill": "#22c55e33", "thickness": 1 }, "justifyContent": null, "alignItems": "center", "fontSize": null, "fontWeight": null, "content": null, "iconFontFamily": null, "iconFontName": null, "textGrowth": null, "children": [ "toastSuccessIcon", "toastSuccessText", "toastSuccessClose" ] }, "successIcon": { "id": "toastSuccessIcon", "type": "icon_font", "name": null, "width": 20, "height": 20, "padding": null, "gap": null, "cornerRadius": null, "fill": "#4ade80", "stroke": null, "justifyContent": null, "alignItems": null, "fontSize": null, "fontWeight": null, "content": null, "iconFontFamily": "lucide", "iconFontName": "circle-check", "textGrowth": null, "children": [] }, "successText": { "id": "toastSuccessText", "type": "text", "name": null, "width": null, "height": null, "padding": null, "gap": null, "cornerRadius": null, "fill": "#0f172a", "stroke": null, "justifyContent": null, "alignItems": null, "fontSize": 14, "fontWeight": "500", "content": "Saved successfully", "iconFontFamily": null, "iconFontName": null, "textGrowth": null, "children": [] }, "successClose": { "id": "toastSuccessClose", "type": "icon_font", "name": null, "width": 14, "height": 14, "padding": null, "gap": null, "cornerRadius": null, "fill": "#6b7280", "stroke": null, "justifyContent": null, "alignItems": null, "fontSize": null, "fontWeight": null, "content": null, "iconFontFamily": "lucide", "iconFontName": "x", "textGrowth": null, "children": [] }, "error": { "id": "toastError", "type": "frame", "name": "Toast/Error", "width": 384, "height": null, "padding": [ 12, 16, 12, 16 ], "gap": 12, "cornerRadius": 12, "fill": "#ffffff", "stroke": { "align": "inside", "fill": "#ef444433", "thickness": 1 }, "justifyContent": null, "alignItems": "center", "fontSize": null, "fontWeight": null, "content": null, "iconFontFamily": null, "iconFontName": null, "textGrowth": null, "children": [ "toastErrorIcon", "toastErrorText" ] }, "errorIcon": { "id": "toastErrorIcon", "type": "icon_font", "name": null, "width": 20, "height": 20, "padding": null, "gap": null, "cornerRadius": null, "fill": "#f87171", "stroke": null, "justifyContent": null, "alignItems": null, "fontSize": null, "fontWeight": null, "content": null, "iconFontFamily": "lucide", "iconFontName": "circle-x", "textGrowth": null, "children": [] }, "errorText": { "id": "toastErrorText", "type": "text", "name": null, "width": null, "height": null, "padding": null, "gap": null, "cornerRadius": null, "fill": "#0f172a", "stroke": null, "justifyContent": null, "alignItems": null, "fontSize": 14, "fontWeight": "500", "content": "Operation failed", "iconFontFamily": null, "iconFontName": null, "textGrowth": null, "children": [] }, "info": { "id": "toastInfo", "type": "frame", "name": "Toast/Info", "width": 384, "height": null, "padding": [ 12, 16, 12, 16 ], "gap": 12, "cornerRadius": 12, "fill": "#ffffff", "stroke": { "align": "inside", "fill": "#3b82f633", "thickness": 1 }, "justifyContent": null, "alignItems": "center", "fontSize": null, "fontWeight": null, "content": null, "iconFontFamily": null, "iconFontName": null, "textGrowth": null, "children": [ "toastInfoIcon", "toastInfoText" ] }, "infoIcon": { "id": "toastInfoIcon", "type": "icon_font", "name": null, "width": 20, "height": 20, "padding": null, "gap": null, "cornerRadius": null, "fill": "#60a5fa", "stroke": null, "justifyContent": null, "alignItems": null, "fontSize": null, "fontWeight": null, "content": null, "iconFontFamily": "lucide", "iconFontName": "info", "textGrowth": null, "children": [] }, "infoText": { "id": "toastInfoText", "type": "text", "name": null, "width": null, "height": null, "padding": null, "gap": null, "cornerRadius": null, "fill": "#0f172a", "stroke": null, "justifyContent": null, "alignItems": null, "fontSize": 14, "fontWeight": "500", "content": "New update available", "iconFontFamily": null, "iconFontName": null, "textGrowth": null, "children": [] } } }, "notificationCenter": { "frameId": "notificationCenterFrame", "title": "Notification Center", "description": "Popover-based inbox for unread activity and quick actions.", "variants": [ { "id": "notificationCenterDefault", "name": "NotificationCenter/Default", "key": "default", "type": "frame", "width": 320, "height": null, "padding": null, "gap": null, "cornerRadius": null, "fill": null, "stroke": null, "reusable": true, "children": [ "notificationCenterTrigger", "notificationCenterPanel" ] } ], "nodes": { "default": { "id": "notificationCenterDefault", "type": "frame", "name": "NotificationCenter/Default", "width": 320, "height": null, "padding": null, "gap": null, "cornerRadius": null, "fill": null, "stroke": null, "justifyContent": null, "alignItems": null, "fontSize": null, "fontWeight": null, "content": null, "iconFontFamily": null, "iconFontName": null, "textGrowth": null, "children": [ "notificationCenterTrigger", "notificationCenterPanel" ] }, "trigger": { "id": "notificationCenterTrigger", "type": "frame", "name": null, "width": 36, "height": 36, "padding": null, "gap": null, "cornerRadius": null, "fill": "transparent", "stroke": null, "justifyContent": "center", "alignItems": "center", "fontSize": null, "fontWeight": null, "content": null, "iconFontFamily": null, "iconFontName": null, "textGrowth": null, "children": [ "notificationCenterBellIcon", "notificationCenterUnreadDot" ] }, "bellIcon": { "id": "notificationCenterBellIcon", "type": "icon_font", "name": null, "width": 20, "height": 20, "padding": null, "gap": null, "cornerRadius": null, "fill": "#6b7280", "stroke": null, "justifyContent": null, "alignItems": null, "fontSize": null, "fontWeight": null, "content": null, "iconFontFamily": "lucide", "iconFontName": "bell", "textGrowth": null, "children": [] }, "unreadDot": { "id": "notificationCenterUnreadDot", "type": "frame", "name": null, "width": 8, "height": 8, "padding": null, "gap": null, "cornerRadius": 999, "fill": "#dc2626", "stroke": null, "justifyContent": null, "alignItems": null, "fontSize": null, "fontWeight": null, "content": null, "iconFontFamily": null, "iconFontName": null, "textGrowth": null, "children": [] }, "panel": { "id": "notificationCenterPanel", "type": "frame", "name": null, "width": 320, "height": null, "padding": null, "gap": null, "cornerRadius": null, "fill": "#ffffff", "stroke": { "align": "inside", "fill": "#e2e8f0", "thickness": 1 }, "justifyContent": null, "alignItems": null, "fontSize": null, "fontWeight": null, "content": null, "iconFontFamily": null, "iconFontName": null, "textGrowth": null, "children": [ "notificationCenterHeader", "notificationCenterListItem", "notificationCenterFooterButton" ] }, "header": { "id": "notificationCenterHeader", "type": "frame", "name": null, "width": null, "height": null, "padding": [ 12, 16, 12, 16 ], "gap": null, "cornerRadius": null, "fill": "#f9fafb80", "stroke": { "align": "inside", "fill": "#e2e8f0", "thickness": 1 }, "justifyContent": "space_between", "alignItems": "center", "fontSize": null, "fontWeight": null, "content": null, "iconFontFamily": null, "iconFontName": null, "textGrowth": null, "children": [ "notificationCenterHeaderTitleText", "notificationCenterHeaderMetaText" ] }, "listItem": { "id": "notificationCenterListItem", "type": "frame", "name": null, "width": null, "height": null, "padding": [ 16, 16, 16, 16 ], "gap": 4, "cornerRadius": null, "fill": null, "stroke": { "align": "inside", "fill": "#e2e8f0", "thickness": 1 }, "justifyContent": null, "alignItems": null, "fontSize": null, "fontWeight": null, "content": null, "iconFontFamily": null, "iconFontName": null, "textGrowth": null, "children": [ "notificationCenterItemTitleText", "notificationCenterItemBodyText", "notificationCenterItemTimeText" ] }, "footerButton": { "id": "notificationCenterFooterButton", "type": "frame", "name": null, "width": null, "height": 32, "padding": [ 8, 12, 8, 12 ], "gap": null, "cornerRadius": null, "fill": null, "stroke": null, "justifyContent": "center", "alignItems": "center", "fontSize": null, "fontWeight": null, "content": null, "iconFontFamily": null, "iconFontName": null, "textGrowth": null, "children": [ "notificationCenterFooterButtonText" ] } } }, "statusBar": { "frameId": "statusBarFrame", "title": "StatusBar", "description": "Bottom fixed utility bar with left, center and right regions.", "variants": [ { "id": "statusBarDefault", "name": "StatusBar/Fixed", "key": "fixed", "type": "frame", "width": 640, "height": null, "padding": [ 4, 16, 4, 16 ], "gap": null, "cornerRadius": null, "fill": "#2563eb", "stroke": null, "reusable": true, "children": [ "statusBarLeft", "statusBarCenter", "statusBarRight" ] } ], "nodes": { "default": { "id": "statusBarDefault", "type": "frame", "name": "StatusBar/Fixed", "width": 640, "height": null, "padding": [ 4, 16, 4, 16 ], "gap": null, "cornerRadius": null, "fill": "#2563eb", "stroke": null, "justifyContent": "space_between", "alignItems": "center", "fontSize": null, "fontWeight": null, "content": null, "iconFontFamily": null, "iconFontName": null, "textGrowth": null, "children": [ "statusBarLeft", "statusBarCenter", "statusBarRight" ] }, "left": { "id": "statusBarLeft", "type": "frame", "name": null, "width": null, "height": null, "padding": null, "gap": 16, "cornerRadius": null, "fill": null, "stroke": null, "justifyContent": null, "alignItems": "center", "fontSize": null, "fontWeight": null, "content": null, "iconFontFamily": null, "iconFontName": null, "textGrowth": null, "children": [ "statusBarLeftText" ] }, "center": { "id": "statusBarCenter", "type": "frame", "name": null, "width": null, "height": null, "padding": null, "gap": 8, "cornerRadius": null, "fill": null, "stroke": null, "justifyContent": null, "alignItems": "center", "fontSize": null, "fontWeight": null, "content": null, "iconFontFamily": null, "iconFontName": null, "textGrowth": null, "children": [ "statusBarCenterText" ] }, "right": { "id": "statusBarRight", "type": "frame", "name": null, "width": null, "height": null, "padding": null, "gap": 16, "cornerRadius": null, "fill": null, "stroke": null, "justifyContent": null, "alignItems": "center", "fontSize": null, "fontWeight": null, "content": null, "iconFontFamily": null, "iconFontName": null, "textGrowth": null, "children": [ "statusBarRightText" ] } } }, "progressWidget": { "frameId": "progressWidgetFrame", "title": "ProgressWidget", "description": "Metric card showing title, value, progress bar, and optional subtext.", "variants": [ { "id": "progressWidgetDefault", "name": "ProgressWidget/Default", "key": "default", "type": "frame", "width": 320, "height": null, "padding": null, "gap": null, "cornerRadius": 8, "fill": "#ffffff", "stroke": { "align": "inside", "fill": "#e2e8f0", "thickness": 1 }, "reusable": true, "children": [ "progressWidgetHeader", "progressWidgetContent" ] } ], "nodes": { "default": { "id": "progressWidgetDefault", "type": "frame", "name": "ProgressWidget/Default", "width": 320, "height": null, "padding": null, "gap": null, "cornerRadius": 8, "fill": "#ffffff", "stroke": { "align": "inside", "fill": "#e2e8f0", "thickness": 1 }, "justifyContent": null, "alignItems": null, "fontSize": null, "fontWeight": null, "content": null, "iconFontFamily": null, "iconFontName": null, "textGrowth": null, "children": [ "progressWidgetHeader", "progressWidgetContent" ] }, "header": { "id": "progressWidgetHeader", "type": "frame", "name": null, "width": null, "height": null, "padding": [ 16, 24, 8, 24 ], "gap": null, "cornerRadius": null, "fill": null, "stroke": null, "justifyContent": "space_between", "alignItems": "center", "fontSize": null, "fontWeight": null, "content": null, "iconFontFamily": null, "iconFontName": null, "textGrowth": null, "children": [ "progressWidgetHeaderTitle" ] }, "headerTitle": { "id": "progressWidgetHeaderTitle", "type": "text", "name": null, "width": null, "height": null, "padding": null, "gap": null, "cornerRadius": null, "fill": "#0f172a", "stroke": null, "justifyContent": null, "alignItems": null, "fontSize": 14, "fontWeight": "500", "content": "Revenue Progress", "iconFontFamily": null, "iconFontName": null, "textGrowth": null, "children": [] }, "content": { "id": "progressWidgetContent", "type": "frame", "name": null, "width": null, "height": null, "padding": [ 0, 24, 24, 24 ], "gap": 8, "cornerRadius": null, "fill": null, "stroke": null, "justifyContent": null, "alignItems": null, "fontSize": null, "fontWeight": null, "content": null, "iconFontFamily": null, "iconFontName": null, "textGrowth": null, "children": [ "progressWidgetValue", "progressWidgetProgress", "progressWidgetSubtext" ] }, "value": { "id": "progressWidgetValue", "type": "text", "name": null, "width": null, "height": null, "padding": null, "gap": null, "cornerRadius": null, "fill": "#0f172a", "stroke": null, "justifyContent": null, "alignItems": null, "fontSize": 24, "fontWeight": "700", "content": "72%", "iconFontFamily": null, "iconFontName": null, "textGrowth": null, "children": [] }, "progress": { "id": "progressWidgetProgress", "type": "frame", "name": null, "width": "fit_content(0)", "height": 8, "padding": null, "gap": null, "cornerRadius": 999, "fill": "#e2e8f0", "stroke": null, "justifyContent": null, "alignItems": null, "fontSize": null, "fontWeight": null, "content": null, "iconFontFamily": null, "iconFontName": null, "textGrowth": null, "children": [] }, "subtext": { "id": "progressWidgetSubtext", "type": "text", "name": null, "width": null, "height": null, "padding": null, "gap": null, "cornerRadius": null, "fill": "#64748b", "stroke": null, "justifyContent": null, "alignItems": null, "fontSize": 12, "fontWeight": "normal", "content": "12% increase this week", "iconFontFamily": null, "iconFontName": null, "textGrowth": null, "children": [] } } }, "stepper": { "frameId": "SZumS", "title": "Stepper", "description": "A multi-step progress indicator with completed, current, and upcoming states.", "variants": [], "nodes": {} }, "banner": { "frameId": "DDYIe", "title": "Banner", "description": "Page-wide announcement bar, optionally dismissible.", "variants": [], "nodes": {} }, "toastProvider": { "frameId": "toastProviderFrame", "title": "Toast Provider", "description": "Global toast stack manager for showing transient feedback messages.", "variants": [ { "id": "toastProviderDefault", "name": "ToastProvider/Default", "key": "default", "type": "frame", "width": 320, "height": null, "padding": null, "gap": 8, "cornerRadius": null, "fill": null, "stroke": null, "reusable": true, "children": [ "toastProviderStack", "toastProviderDefaultDuration", "toastProviderExitDelay" ] } ], "nodes": { "default": { "id": "toastProviderDefault", "type": "frame", "name": "ToastProvider/Default", "width": 320, "height": null, "padding": null, "gap": 8, "cornerRadius": null, "fill": null, "stroke": null, "justifyContent": null, "alignItems": null, "fontSize": null, "fontWeight": null, "content": null, "iconFontFamily": null, "iconFontName": null, "textGrowth": null, "children": [ "toastProviderStack", "toastProviderDefaultDuration", "toastProviderExitDelay" ] }, "stack": { "id": "toastProviderStack", "type": "frame", "name": null, "width": null, "height": null, "padding": null, "gap": 8, "cornerRadius": null, "fill": null, "stroke": null, "justifyContent": null, "alignItems": null, "fontSize": null, "fontWeight": null, "content": null, "iconFontFamily": null, "iconFontName": null, "textGrowth": null, "children": [ "toastProviderItem" ] }, "item": { "id": "toastProviderItem", "type": "frame", "name": null, "width": null, "height": null, "padding": [ 12, 16, 12, 16 ], "gap": 12, "cornerRadius": 12, "fill": "#ffffff", "stroke": { "align": "inside", "fill": "#d1d5db", "thickness": 1 }, "justifyContent": null, "alignItems": "center", "fontSize": null, "fontWeight": null, "content": null, "iconFontFamily": null, "iconFontName": null, "textGrowth": null, "children": [ "toastProviderItemIcon", "toastProviderItemText" ] }, "itemText": { "id": "toastProviderItemText", "type": "text", "name": null, "width": null, "height": null, "padding": null, "gap": null, "cornerRadius": null, "fill": "#0f172a", "stroke": null, "justifyContent": null, "alignItems": null, "fontSize": 14, "fontWeight": "500", "content": "Upload completed", "iconFontFamily": null, "iconFontName": null, "textGrowth": null, "children": [] }, "defaultDuration": { "id": "toastProviderDefaultDuration", "type": "text", "name": null, "width": null, "height": null, "padding": null, "gap": null, "cornerRadius": null, "fill": "#64748b", "stroke": null, "justifyContent": null, "alignItems": null, "fontSize": 12, "fontWeight": "normal", "content": "3000", "iconFontFamily": null, "iconFontName": null, "textGrowth": null, "children": [] }, "exitDelay": { "id": "toastProviderExitDelay", "type": "text", "name": null, "width": null, "height": null, "padding": null, "gap": null, "cornerRadius": null, "fill": "#64748b", "stroke": null, "justifyContent": null, "alignItems": null, "fontSize": 12, "fontWeight": "normal", "content": "300", "iconFontFamily": null, "iconFontName": null, "textGrowth": null, "children": [] } } } } }