canvas-ui-sdk 4.0.0 → 4.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +41 -3
- package/dist/index.js +73 -79
- package/dist/index.js.map +1 -1
- package/mcp/dist/index.js +20 -13
- package/package.json +3 -2
- package/registry/blocks/sidebar-profile-card.json +1 -1
package/README.md
CHANGED
|
@@ -64,7 +64,47 @@ See `styles/tokens.reference.css` for the full list of available CSS variables.
|
|
|
64
64
|
|
|
65
65
|
## MCP Server
|
|
66
66
|
|
|
67
|
-
Connect the MCP server so your AI editor can discover all components, templates, and design tokens.
|
|
67
|
+
Connect the MCP server so your AI editor can discover all components, templates, and design tokens.
|
|
68
|
+
|
|
69
|
+
### Claude Code
|
|
70
|
+
|
|
71
|
+
Add a `.mcp.json` to your project root:
|
|
72
|
+
|
|
73
|
+
```json
|
|
74
|
+
{
|
|
75
|
+
"mcpServers": {
|
|
76
|
+
"canvas-ui-sdk": {
|
|
77
|
+
"command": "npx",
|
|
78
|
+
"args": ["canvas-ui-mcp"]
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
Or via CLI: `claude mcp add canvas-ui-sdk npx canvas-ui-mcp`
|
|
85
|
+
|
|
86
|
+
### Cursor
|
|
87
|
+
|
|
88
|
+
Add a `.cursor/mcp.json` to your project root:
|
|
89
|
+
|
|
90
|
+
```json
|
|
91
|
+
{
|
|
92
|
+
"mcpServers": {
|
|
93
|
+
"canvas-ui-sdk": {
|
|
94
|
+
"command": "npx",
|
|
95
|
+
"args": ["canvas-ui-mcp"]
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
### Windsurf
|
|
102
|
+
|
|
103
|
+
Add an MCP server in Windsurf settings (Cascade > MCP) with command `npx` and arg `canvas-ui-mcp`.
|
|
104
|
+
|
|
105
|
+
### Alternative (direct node invocation)
|
|
106
|
+
|
|
107
|
+
If `npx` doesn't work in your environment:
|
|
68
108
|
|
|
69
109
|
```json
|
|
70
110
|
{
|
|
@@ -77,8 +117,6 @@ Connect the MCP server so your AI editor can discover all components, templates,
|
|
|
77
117
|
}
|
|
78
118
|
```
|
|
79
119
|
|
|
80
|
-
Or with the Claude Code CLI: `claude mcp add canvas-ui-sdk node node_modules/canvas-ui-sdk/mcp/dist/index.js`
|
|
81
|
-
|
|
82
120
|
## AI Instructions
|
|
83
121
|
|
|
84
122
|
Copy the SDK instructions file into your project so your AI editor knows how to use the CLI, design tokens, and component patterns:
|
package/dist/index.js
CHANGED
|
@@ -11417,85 +11417,79 @@ function SidebarProfileCard({
|
|
|
11417
11417
|
onHireClick,
|
|
11418
11418
|
className
|
|
11419
11419
|
}) {
|
|
11420
|
-
return /* @__PURE__ */
|
|
11421
|
-
|
|
11422
|
-
|
|
11423
|
-
|
|
11424
|
-
|
|
11425
|
-
|
|
11426
|
-
|
|
11427
|
-
|
|
11428
|
-
|
|
11429
|
-
|
|
11430
|
-
|
|
11431
|
-
|
|
11432
|
-
|
|
11433
|
-
"div",
|
|
11434
|
-
|
|
11435
|
-
|
|
11436
|
-
|
|
11437
|
-
|
|
11438
|
-
|
|
11439
|
-
|
|
11440
|
-
|
|
11441
|
-
|
|
11442
|
-
|
|
11443
|
-
|
|
11444
|
-
|
|
11445
|
-
|
|
11446
|
-
|
|
11447
|
-
|
|
11448
|
-
|
|
11449
|
-
|
|
11450
|
-
|
|
11451
|
-
|
|
11452
|
-
|
|
11453
|
-
|
|
11454
|
-
|
|
11455
|
-
|
|
11456
|
-
|
|
11457
|
-
|
|
11458
|
-
|
|
11459
|
-
|
|
11460
|
-
|
|
11461
|
-
|
|
11462
|
-
|
|
11463
|
-
|
|
11464
|
-
|
|
11465
|
-
|
|
11466
|
-
|
|
11467
|
-
|
|
11468
|
-
|
|
11469
|
-
|
|
11470
|
-
|
|
11471
|
-
|
|
11472
|
-
|
|
11473
|
-
|
|
11474
|
-
|
|
11475
|
-
|
|
11476
|
-
|
|
11477
|
-
|
|
11478
|
-
|
|
11479
|
-
|
|
11480
|
-
|
|
11481
|
-
|
|
11482
|
-
|
|
11483
|
-
|
|
11484
|
-
|
|
11485
|
-
|
|
11486
|
-
|
|
11487
|
-
|
|
11488
|
-
|
|
11489
|
-
|
|
11490
|
-
|
|
11491
|
-
|
|
11492
|
-
|
|
11493
|
-
]
|
|
11494
|
-
}
|
|
11495
|
-
)
|
|
11496
|
-
}
|
|
11497
|
-
)
|
|
11498
|
-
] });
|
|
11420
|
+
return /* @__PURE__ */ jsx(
|
|
11421
|
+
"div",
|
|
11422
|
+
{
|
|
11423
|
+
className: cn(
|
|
11424
|
+
"bg-[var(--canvas-background)] border border-[var(--canvas-border)] rounded-[var(--radius-md)] flex flex-col w-full",
|
|
11425
|
+
className
|
|
11426
|
+
),
|
|
11427
|
+
children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-[var(--spacing-2xl)] px-[var(--spacing-4xl)] pt-[var(--spacing-4xl)]", children: [
|
|
11428
|
+
/* @__PURE__ */ jsxs("div", { className: "relative", children: [
|
|
11429
|
+
/* @__PURE__ */ jsxs(Avatar, { className: "size-[120px]", children: [
|
|
11430
|
+
/* @__PURE__ */ jsx(AvatarImage, { src: avatarUrl, alt: name }),
|
|
11431
|
+
/* @__PURE__ */ jsx(AvatarFallback, { className: "font-semibold bg-[var(--canvas-surface)] text-[var(--canvas-text-muted)]", style: { fontSize: "var(--typo-h6-size)" }, children: avatarFallback })
|
|
11432
|
+
] }),
|
|
11433
|
+
showStatus && /* @__PURE__ */ jsx("div", { className: "absolute bottom-[10px] right-[10px] size-5 rounded-full bg-[var(--canvas-success)] border-[3px] border-[var(--canvas-background)]" })
|
|
11434
|
+
] }),
|
|
11435
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-[var(--spacing-xs)]", children: [
|
|
11436
|
+
/* @__PURE__ */ jsx(Typography, { variant: "body-xl", className: "text-center", style: { fontWeight: 600 }, children: name }),
|
|
11437
|
+
role && /* @__PURE__ */ jsx(Typography, { variant: "body-s", color: "muted", className: "text-center", children: role })
|
|
11438
|
+
] }),
|
|
11439
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 justify-center", children: [
|
|
11440
|
+
/* @__PURE__ */ jsx(Star$1, { className: "size-4 fill-[var(--canvas-primary)] text-[var(--canvas-primary)]" }),
|
|
11441
|
+
/* @__PURE__ */ jsx(Typography, { variant: "body-xs", className: "font-semibold", children: rating }),
|
|
11442
|
+
/* @__PURE__ */ jsx(Typography, { variant: "body-xs", color: "muted", children: reviewCount })
|
|
11443
|
+
] }),
|
|
11444
|
+
/* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--spacing-xl)] w-full", children: [
|
|
11445
|
+
/* @__PURE__ */ jsx(
|
|
11446
|
+
Button,
|
|
11447
|
+
{
|
|
11448
|
+
variant: "neutral",
|
|
11449
|
+
className: "flex-1",
|
|
11450
|
+
onClick: onContactClick,
|
|
11451
|
+
children: "Contact"
|
|
11452
|
+
}
|
|
11453
|
+
),
|
|
11454
|
+
/* @__PURE__ */ jsx(
|
|
11455
|
+
Button,
|
|
11456
|
+
{
|
|
11457
|
+
variant: "primary",
|
|
11458
|
+
className: "flex-1",
|
|
11459
|
+
onClick: onHireClick,
|
|
11460
|
+
children: "Hire me"
|
|
11461
|
+
}
|
|
11462
|
+
)
|
|
11463
|
+
] }),
|
|
11464
|
+
/* @__PURE__ */ jsx("div", { className: "w-full h-px bg-[var(--canvas-border)]" }),
|
|
11465
|
+
certification && /* @__PURE__ */ jsx(Typography, { variant: "body-s", color: "muted", className: "text-center", children: certification }),
|
|
11466
|
+
infoRows.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[var(--spacing-lg)] w-full", children: infoRows.map((row, index) => {
|
|
11467
|
+
const IconComponent = infoIcons[row.icon];
|
|
11468
|
+
return /* @__PURE__ */ jsxs(
|
|
11469
|
+
"div",
|
|
11470
|
+
{
|
|
11471
|
+
className: "flex items-center justify-between w-full",
|
|
11472
|
+
children: [
|
|
11473
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--spacing-sm)]", children: [
|
|
11474
|
+
/* @__PURE__ */ jsx(IconComponent, { className: "size-4 text-[var(--canvas-text-muted)]" }),
|
|
11475
|
+
/* @__PURE__ */ jsx(Typography, { variant: "body-s", color: "muted", children: row.label })
|
|
11476
|
+
] }),
|
|
11477
|
+
/* @__PURE__ */ jsx(Typography, { variant: "body-s", className: "font-semibold text-[var(--canvas-neutral-text)]", children: row.value })
|
|
11478
|
+
]
|
|
11479
|
+
},
|
|
11480
|
+
index
|
|
11481
|
+
);
|
|
11482
|
+
}) }),
|
|
11483
|
+
/* @__PURE__ */ jsx("div", { className: "w-full h-px bg-[var(--canvas-border)]" }),
|
|
11484
|
+
/* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--spacing-xl)] pb-[var(--spacing-3xl)]", children: [
|
|
11485
|
+
/* @__PURE__ */ jsx(Eye, { className: "size-4 text-[var(--canvas-text-muted)] hover:text-[var(--canvas-text)] transition-colors cursor-pointer" }),
|
|
11486
|
+
/* @__PURE__ */ jsx(Facebook, { className: "size-4 text-[var(--canvas-text-muted)] hover:text-[var(--canvas-text)] transition-colors cursor-pointer" }),
|
|
11487
|
+
/* @__PURE__ */ jsx(Twitter, { className: "size-4 text-[var(--canvas-text-muted)] hover:text-[var(--canvas-text)] transition-colors cursor-pointer" }),
|
|
11488
|
+
/* @__PURE__ */ jsx(Instagram, { className: "size-4 text-[var(--canvas-text-muted)] hover:text-[var(--canvas-text)] transition-colors cursor-pointer" })
|
|
11489
|
+
] })
|
|
11490
|
+
] })
|
|
11491
|
+
}
|
|
11492
|
+
);
|
|
11499
11493
|
}
|
|
11500
11494
|
function CardWrapper({ children, className }) {
|
|
11501
11495
|
return /* @__PURE__ */ jsx(
|