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/mcp/dist/index.js
CHANGED
|
@@ -18274,13 +18274,13 @@ var zodToJsonSchema = (schema, options) => {
|
|
|
18274
18274
|
}, true) ?? parseAnyDef(refs)
|
|
18275
18275
|
}), {}) : void 0;
|
|
18276
18276
|
const name = typeof options === "string" ? options : options?.nameStrategy === "title" ? void 0 : options?.name;
|
|
18277
|
-
const
|
|
18277
|
+
const main2 = parseDef(schema._def, name === void 0 ? refs : {
|
|
18278
18278
|
...refs,
|
|
18279
18279
|
currentPath: [...refs.basePath, refs.definitionPath, name]
|
|
18280
18280
|
}, false) ?? parseAnyDef(refs);
|
|
18281
18281
|
const title = typeof options === "object" && options.name !== void 0 && options.nameStrategy === "title" ? options.name : void 0;
|
|
18282
18282
|
if (title !== void 0) {
|
|
18283
|
-
|
|
18283
|
+
main2.title = title;
|
|
18284
18284
|
}
|
|
18285
18285
|
if (refs.flags.hasReferencedOpenAiAnyType) {
|
|
18286
18286
|
if (!definitions) {
|
|
@@ -18301,9 +18301,9 @@ var zodToJsonSchema = (schema, options) => {
|
|
|
18301
18301
|
}
|
|
18302
18302
|
}
|
|
18303
18303
|
const combined = name === void 0 ? definitions ? {
|
|
18304
|
-
...
|
|
18304
|
+
...main2,
|
|
18305
18305
|
[refs.definitionPath]: definitions
|
|
18306
|
-
} :
|
|
18306
|
+
} : main2 : {
|
|
18307
18307
|
$ref: [
|
|
18308
18308
|
...refs.$refStrategy === "relative" ? [] : refs.basePath,
|
|
18309
18309
|
refs.definitionPath,
|
|
@@ -18311,7 +18311,7 @@ var zodToJsonSchema = (schema, options) => {
|
|
|
18311
18311
|
].join("/"),
|
|
18312
18312
|
[refs.definitionPath]: {
|
|
18313
18313
|
...definitions,
|
|
18314
|
-
[name]:
|
|
18314
|
+
[name]: main2
|
|
18315
18315
|
}
|
|
18316
18316
|
};
|
|
18317
18317
|
if (refs.target === "jsonSchema7") {
|
|
@@ -18543,11 +18543,11 @@ var Protocol = class {
|
|
|
18543
18543
|
*
|
|
18544
18544
|
* The Protocol object assumes ownership of the Transport, replacing any callbacks that have already been set, and expects that it is the only user of the Transport instance going forward.
|
|
18545
18545
|
*/
|
|
18546
|
-
async connect(
|
|
18546
|
+
async connect(transport) {
|
|
18547
18547
|
if (this._transport) {
|
|
18548
18548
|
throw new Error("Already connected to a transport. Call close() before connecting to a new transport, or use a separate Protocol instance per connection.");
|
|
18549
18549
|
}
|
|
18550
|
-
this._transport =
|
|
18550
|
+
this._transport = transport;
|
|
18551
18551
|
const _onclose = this.transport?.onclose;
|
|
18552
18552
|
this._transport.onclose = () => {
|
|
18553
18553
|
_onclose?.();
|
|
@@ -19990,8 +19990,8 @@ var McpServer = class {
|
|
|
19990
19990
|
*
|
|
19991
19991
|
* The `server` object assumes ownership of the Transport, replacing any callbacks that have already been set, and expects that it is the only user of the Transport instance going forward.
|
|
19992
19992
|
*/
|
|
19993
|
-
async connect(
|
|
19994
|
-
return await this.server.connect(
|
|
19993
|
+
async connect(transport) {
|
|
19994
|
+
return await this.server.connect(transport);
|
|
19995
19995
|
}
|
|
19996
19996
|
/**
|
|
19997
19997
|
* Closes the connection.
|
|
@@ -20744,7 +20744,7 @@ var EMPTY_COMPLETION_RESULT = {
|
|
|
20744
20744
|
};
|
|
20745
20745
|
|
|
20746
20746
|
// node_modules/@modelcontextprotocol/sdk/dist/esm/server/stdio.js
|
|
20747
|
-
import
|
|
20747
|
+
import process2 from "process";
|
|
20748
20748
|
|
|
20749
20749
|
// node_modules/@modelcontextprotocol/sdk/dist/esm/shared/stdio.js
|
|
20750
20750
|
var ReadBuffer = class {
|
|
@@ -20776,7 +20776,7 @@ function serializeMessage(message) {
|
|
|
20776
20776
|
|
|
20777
20777
|
// node_modules/@modelcontextprotocol/sdk/dist/esm/server/stdio.js
|
|
20778
20778
|
var StdioServerTransport = class {
|
|
20779
|
-
constructor(_stdin =
|
|
20779
|
+
constructor(_stdin = process2.stdin, _stdout = process2.stdout) {
|
|
20780
20780
|
this._stdin = _stdin;
|
|
20781
20781
|
this._stdout = _stdout;
|
|
20782
20782
|
this._readBuffer = new ReadBuffer();
|
|
@@ -23309,5 +23309,12 @@ ${resultSections.join("\n---\n\n")}`
|
|
|
23309
23309
|
};
|
|
23310
23310
|
}
|
|
23311
23311
|
);
|
|
23312
|
-
|
|
23313
|
-
|
|
23312
|
+
async function main() {
|
|
23313
|
+
const transport = new StdioServerTransport();
|
|
23314
|
+
await server.connect(transport);
|
|
23315
|
+
}
|
|
23316
|
+
main().catch((error2) => {
|
|
23317
|
+
process.stderr.write(`canvas-ui-sdk MCP server failed to start: ${error2}
|
|
23318
|
+
`);
|
|
23319
|
+
process.exit(1);
|
|
23320
|
+
});
|
package/package.json
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "canvas-ui-sdk",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A comprehensive UI component library with design tokens for building beautiful interfaces",
|
|
6
6
|
"bin": {
|
|
7
|
-
"canvas-ui": "./dist/cli/index.js"
|
|
7
|
+
"canvas-ui": "./dist/cli/index.js",
|
|
8
|
+
"canvas-ui-mcp": "./mcp/dist/index.js"
|
|
8
9
|
},
|
|
9
10
|
"main": "./dist/index.js",
|
|
10
11
|
"module": "./dist/index.js",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
{
|
|
15
15
|
"path": "components/blocks/sidebar-profile-card.tsx",
|
|
16
16
|
"type": "registry:block",
|
|
17
|
-
"content": "\"use client\";\n\nimport { cn } from \"../../lib/utils\";\nimport { Avatar, AvatarImage, AvatarFallback } from \"../ui/avatar\";\nimport { Typography } from \"../ui/typography\";\nimport { Button } from \"../ui/button\";\nimport {\n MapPin,\n BookOpen,\n Video,\n DollarSign,\n Star,\n Globe,\n Facebook,\n Twitter,\n Instagram,\n Eye,\n} from \"lucide-react\";\n\ninterface InfoRow {\n icon: \"location\" | \"education\" | \"sessions\" | \"earnings\";\n label: string;\n value: string;\n}\n\ninterface SidebarProfileCardProps {\n /** Profile avatar image URL */\n avatarUrl?: string;\n /** Avatar fallback initials */\n avatarFallback?: string;\n /** Whether to show online status indicator */\n showStatus?: boolean;\n /** User's display name */\n name: string;\n /** User's role/title */\n role?: string;\n /** Star rating value */\n rating?: number;\n /** Number of reviews */\n reviewCount?: string;\n /** Certification text */\n certification?: string;\n /** Info rows (location, education, sessions, earnings) */\n infoRows?: InfoRow[];\n /** Contact button click handler */\n onContactClick?: () => void;\n /** Hire button click handler */\n onHireClick?: () => void;\n /** Additional class names */\n className?: string;\n}\n\nconst infoIcons = {\n location: MapPin,\n education: BookOpen,\n sessions: Video,\n earnings: DollarSign,\n};\n\n/**\n * Canvas Design System - Sidebar Profile Card Component\n *\n * A profile card designed for sidebar placement with avatar,\n * name, rating, action buttons, info rows, and social icons.\n * The avatar extends above the card body so it can overlap\n * a gradient banner or similar background element.\n */\nexport function SidebarProfileCard({\n avatarUrl,\n avatarFallback = \"JC\",\n showStatus = true,\n name,\n role,\n rating = 4.8,\n reviewCount = \"(2.4k)\",\n certification,\n infoRows = [],\n onContactClick,\n onHireClick,\n className,\n}: SidebarProfileCardProps) {\n return (\n <div
|
|
17
|
+
"content": "\"use client\";\n\nimport { cn } from \"../../lib/utils\";\nimport { Avatar, AvatarImage, AvatarFallback } from \"../ui/avatar\";\nimport { Typography } from \"../ui/typography\";\nimport { Button } from \"../ui/button\";\nimport {\n MapPin,\n BookOpen,\n Video,\n DollarSign,\n Star,\n Globe,\n Facebook,\n Twitter,\n Instagram,\n Eye,\n} from \"lucide-react\";\n\ninterface InfoRow {\n icon: \"location\" | \"education\" | \"sessions\" | \"earnings\";\n label: string;\n value: string;\n}\n\ninterface SidebarProfileCardProps {\n /** Profile avatar image URL */\n avatarUrl?: string;\n /** Avatar fallback initials */\n avatarFallback?: string;\n /** Whether to show online status indicator */\n showStatus?: boolean;\n /** User's display name */\n name: string;\n /** User's role/title */\n role?: string;\n /** Star rating value */\n rating?: number;\n /** Number of reviews */\n reviewCount?: string;\n /** Certification text */\n certification?: string;\n /** Info rows (location, education, sessions, earnings) */\n infoRows?: InfoRow[];\n /** Contact button click handler */\n onContactClick?: () => void;\n /** Hire button click handler */\n onHireClick?: () => void;\n /** Additional class names */\n className?: string;\n}\n\nconst infoIcons = {\n location: MapPin,\n education: BookOpen,\n sessions: Video,\n earnings: DollarSign,\n};\n\n/**\n * Canvas Design System - Sidebar Profile Card Component\n *\n * A profile card designed for sidebar placement with avatar,\n * name, rating, action buttons, info rows, and social icons.\n * The avatar extends above the card body so it can overlap\n * a gradient banner or similar background element.\n */\nexport function SidebarProfileCard({\n avatarUrl,\n avatarFallback = \"JC\",\n showStatus = true,\n name,\n role,\n rating = 4.8,\n reviewCount = \"(2.4k)\",\n certification,\n infoRows = [],\n onContactClick,\n onHireClick,\n className,\n}: SidebarProfileCardProps) {\n return (\n <div\n className={cn(\n \"bg-[var(--canvas-background)] border border-[var(--canvas-border)] rounded-[var(--radius-md)] flex flex-col w-full\",\n className\n )}\n >\n <div className=\"flex flex-col items-center gap-[var(--spacing-2xl)] px-[var(--spacing-4xl)] pt-[var(--spacing-4xl)]\">\n {/* Avatar with Status */}\n <div className=\"relative\">\n <Avatar className=\"size-[120px]\">\n <AvatarImage src={avatarUrl} alt={name} />\n <AvatarFallback className=\"font-semibold bg-[var(--canvas-surface)] text-[var(--canvas-text-muted)]\" style={{ fontSize: \"var(--typo-h6-size)\" }}>\n {avatarFallback}\n </AvatarFallback>\n </Avatar>\n {showStatus && (\n <div className=\"absolute bottom-[10px] right-[10px] size-5 rounded-full bg-[var(--canvas-success)] border-[3px] border-[var(--canvas-background)]\" />\n )}\n </div>\n {/* Name & Role */}\n <div className=\"flex flex-col items-center gap-[var(--spacing-xs)]\">\n <Typography variant=\"body-xl\" className=\"text-center\" style={{ fontWeight: 600 }}>\n {name}\n </Typography>\n {role && (\n <Typography variant=\"body-s\" color=\"muted\" className=\"text-center\">\n {role}\n </Typography>\n )}\n </div>\n\n {/* Star Rating */}\n <div className=\"flex items-center gap-1 justify-center\">\n <Star className=\"size-4 fill-[var(--canvas-primary)] text-[var(--canvas-primary)]\" />\n <Typography variant=\"body-xs\" className=\"font-semibold\">\n {rating}\n </Typography>\n <Typography variant=\"body-xs\" color=\"muted\">\n {reviewCount}\n </Typography>\n </div>\n\n {/* Action Buttons */}\n <div className=\"flex gap-[var(--spacing-xl)] w-full\">\n <Button\n variant=\"neutral\"\n className=\"flex-1\"\n onClick={onContactClick}\n >\n Contact\n </Button>\n <Button\n variant=\"primary\"\n className=\"flex-1\"\n onClick={onHireClick}\n >\n Hire me\n </Button>\n </div>\n\n {/* Divider */}\n <div className=\"w-full h-px bg-[var(--canvas-border)]\" />\n\n {/* Certification */}\n {certification && (\n <Typography variant=\"body-s\" color=\"muted\" className=\"text-center\">\n {certification}\n </Typography>\n )}\n\n {/* Info Rows */}\n {infoRows.length > 0 && (\n <div className=\"flex flex-col gap-[var(--spacing-lg)] w-full\">\n {infoRows.map((row, index) => {\n const IconComponent = infoIcons[row.icon];\n return (\n <div\n key={index}\n className=\"flex items-center justify-between w-full\"\n >\n <div className=\"flex items-center gap-[var(--spacing-sm)]\">\n <IconComponent className=\"size-4 text-[var(--canvas-text-muted)]\" />\n <Typography variant=\"body-s\" color=\"muted\">\n {row.label}\n </Typography>\n </div>\n <Typography variant=\"body-s\" className=\"font-semibold text-[var(--canvas-neutral-text)]\">\n {row.value}\n </Typography>\n </div>\n );\n })}\n </div>\n )}\n\n {/* Divider */}\n <div className=\"w-full h-px bg-[var(--canvas-border)]\" />\n\n {/* Social Icons */}\n <div className=\"flex gap-[var(--spacing-xl)] pb-[var(--spacing-3xl)]\">\n <Eye className=\"size-4 text-[var(--canvas-text-muted)] hover:text-[var(--canvas-text)] transition-colors cursor-pointer\" />\n <Facebook className=\"size-4 text-[var(--canvas-text-muted)] hover:text-[var(--canvas-text)] transition-colors cursor-pointer\" />\n <Twitter className=\"size-4 text-[var(--canvas-text-muted)] hover:text-[var(--canvas-text)] transition-colors cursor-pointer\" />\n <Instagram className=\"size-4 text-[var(--canvas-text-muted)] hover:text-[var(--canvas-text)] transition-colors cursor-pointer\" />\n </div>\n </div>\n </div>\n );\n}\n"
|
|
18
18
|
}
|
|
19
19
|
],
|
|
20
20
|
"dependencies": [
|