@kanso-protocol/mcp 0.1.0 → 0.5.3

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 CHANGED
@@ -23,8 +23,8 @@ Eleven tools, all running locally over stdio.
23
23
  | Tool | What it returns |
24
24
  | --- | --- |
25
25
  | `figma_context` | File key + URL of the Kanso Figma library, IDs of the Components / Patterns / Foundations / Examples pages, and the linked Tabler Icon Pack file. |
26
- | `figma_for_component` | `{ fileKey, nodeId, url }` for the component's master frame — feed straight into Figma MCP's `get_design_context` or `get_screenshot`. |
27
- | `figma_for_pattern` | Same shape for higher-level patterns. |
26
+ | `figma_for_component` | `{ fileKey, nodeId, url, codeConnect }` for the component's master frame — feed `nodeId` into Figma MCP's `get_design_context` / `get_screenshot`, and `codeConnect` (`{ npm, primaryClass, selector, import, docs, storybook }`) into your code-generation step so the assistant emits the right import statement and selector without a second lookup. |
27
+ | `figma_for_pattern` | Same shape for higher-level patterns; includes the same `codeConnect` block. |
28
28
  | `figma_for_icon` | Tabler icon library context + a search hint the assistant uses with Figma MCP's `search_design_system`. |
29
29
 
30
30
  The data comes from a manifest baked at build time — no network calls, deterministic, fast.
package/dist/index.js CHANGED
@@ -249,6 +249,7 @@ const tools = [
249
249
  fileKey: figma.fileKey,
250
250
  nodeId: hit.figma.nodeId,
251
251
  url: nodeUrl(figma.fileKey, hit.figma.nodeId),
252
+ codeConnect: hit.codeConnect ?? null,
252
253
  relatedFigmaTools: [
253
254
  { tool: 'get_design_context', purpose: 'Pull the master frame as code + screenshot.' },
254
255
  { tool: 'get_screenshot', purpose: 'Plain PNG of the master frame (no code).' },
@@ -283,6 +284,7 @@ const tools = [
283
284
  fileKey: figma.fileKey,
284
285
  nodeId: hit.figma.nodeId,
285
286
  url: nodeUrl(figma.fileKey, hit.figma.nodeId),
287
+ codeConnect: hit.codeConnect ?? null,
286
288
  }, null, 2);
287
289
  },
288
290
  },
@@ -3,6 +3,7 @@
3
3
  "fileKey": "ahRfe4BdMAyoK0I3lnicp6",
4
4
  "fileName": "Design-System",
5
5
  "url": "https://www.figma.com/design/ahRfe4BdMAyoK0I3lnicp6/Design-System",
6
+ "communityUrl": "https://www.figma.com/community/file/1633266134559104948",
6
7
  "pages": {
7
8
  "components": { "id": "0:1", "name": "🧩 Components" },
8
9
  "patterns": { "id": "3612:2", "name": "📐 Patterns" },
@@ -13,9 +14,7 @@
13
14
  "cover": { "id": "6:2", "name": "📖 Cover" }
14
15
  },
15
16
  "iconLibrary": {
16
- "fileKey": "0bgkes9nJYbk0vonduKaVZ",
17
- "name": "Tabler Icon Pack",
18
- "$comment": "Single source of icon glyphs for Kanso. The Icon component wraps an instance from this library."
17
+ "$comment": "Tabler icons used in this library are now detached (inlined into the Kanso file) so community duplicators don't need an external library subscription. To add NEW icons inside Figma, use the official Tabler Icons plugin and drag glyphs in directly. The previous external file ref (0bgkes9nJYbk0vonduKaVZ) has been removed — every icon node now lives locally."
19
18
  },
20
19
  "components": {
21
20
  "button": "3805:10993",
@@ -53,7 +52,10 @@
53
52
  "tree": "3805:11135",
54
53
  "avatar": "3805:11139",
55
54
  "avatar-group": "3805:11139",
56
- "rich-text-editor": "3849:11648"
55
+ "rich-text-editor": "3849:11648",
56
+ "markdown-viewer": "4109:11282",
57
+ "file-upload": "4110:11270",
58
+ "command-palette": "4111:11234"
57
59
  },
58
60
  "patterns": {
59
61
  "app-shell": "3822:7265",
@@ -87,5 +89,73 @@
87
89
  "overlays": "3881:30",
88
90
  "foreground-on-dark": "3881:73",
89
91
  "motion": "3881:93"
92
+ },
93
+ "codeConnect": {
94
+ "$comment": "Static Code Connect map: round-trip resolution from Figma component name → npm package + Angular import + selector + docs + Storybook URL slug. Consumed by the MCP server (figma_for_component / get_component) and any external tool that wants to translate a Figma node ref into actual code. Add an entry here when adding a new component or pattern; the manifest generator merges these fields into each catalog item alongside the figma node ref.",
95
+ "components": {
96
+ "button": { "npm": "@kanso-protocol/button", "primaryClass": "KpButtonComponent", "selector": "kp-button", "import": "import { KpButtonComponent } from '@kanso-protocol/button';", "docs": "docs/components/button.md", "storybook": "components-button--docs" },
97
+ "input": { "npm": "@kanso-protocol/input", "primaryClass": "KpInputComponent", "selector": "kp-input", "import": "import { KpInputComponent } from '@kanso-protocol/input';", "docs": "docs/components/input.md", "storybook": "components-input--docs" },
98
+ "checkbox": { "npm": "@kanso-protocol/checkbox", "primaryClass": "KpCheckboxComponent", "selector": "kp-checkbox", "import": "import { KpCheckboxComponent } from '@kanso-protocol/checkbox';", "docs": "docs/components/checkbox.md", "storybook": "components-checkbox--docs" },
99
+ "radio": { "npm": "@kanso-protocol/radio", "primaryClass": "KpRadioComponent", "selector": "kp-radio", "import": "import { KpRadioComponent } from '@kanso-protocol/radio';", "docs": "docs/components/radio.md", "storybook": "components-radio--docs" },
100
+ "toggle": { "npm": "@kanso-protocol/toggle", "primaryClass": "KpToggleComponent", "selector": "kp-toggle", "import": "import { KpToggleComponent } from '@kanso-protocol/toggle';", "docs": "docs/components/toggle.md", "storybook": "components-toggle--docs" },
101
+ "form-field": { "npm": "@kanso-protocol/form-field", "primaryClass": "KpFormFieldComponent", "selector": "kp-form-field", "import": "import { KpFormFieldComponent } from '@kanso-protocol/form-field';", "docs": "docs/components/form-field.md", "storybook": "components-formfield--docs" },
102
+ "menu": { "npm": "@kanso-protocol/menu", "primaryClass": "KpDropdownMenuComponent", "selector": "kp-dropdown-menu", "import": "import { KpDropdownMenuComponent } from '@kanso-protocol/menu';", "docs": "docs/components/dropdown-menu.md", "storybook": "components-dropdownmenu--docs" },
103
+ "textarea": { "npm": "@kanso-protocol/textarea", "primaryClass": "KpTextareaComponent", "selector": "kp-textarea", "import": "import { KpTextareaComponent } from '@kanso-protocol/textarea';", "docs": "docs/components/textarea.md", "storybook": "components-textarea--docs" },
104
+ "select": { "npm": "@kanso-protocol/select", "primaryClass": "KpSelectComponent", "selector": "kp-select", "import": "import { KpSelectComponent } from '@kanso-protocol/select';", "docs": "docs/components/select.md", "storybook": "components-select--docs" },
105
+ "number-stepper": { "npm": "@kanso-protocol/number-stepper", "primaryClass": "KpNumberStepperComponent", "selector": "kp-number-stepper", "import": "import { KpNumberStepperComponent } from '@kanso-protocol/number-stepper';", "docs": "docs/components/number-stepper.md", "storybook": "components-numberstepper--docs" },
106
+ "segmented-control": { "npm": "@kanso-protocol/segmented-control", "primaryClass": "KpSegmentedControlComponent", "selector": "kp-segmented-control", "import": "import { KpSegmentedControlComponent } from '@kanso-protocol/segmented-control';", "docs": "docs/components/segmented-control.md", "storybook": "components-segmentedcontrol--docs" },
107
+ "badge": { "npm": "@kanso-protocol/badge", "primaryClass": "KpBadgeComponent", "selector": "kp-badge", "import": "import { KpBadgeComponent } from '@kanso-protocol/badge';", "docs": "docs/components/badge.md", "storybook": "components-badge--docs" },
108
+ "alert": { "npm": "@kanso-protocol/alert", "primaryClass": "KpAlertComponent", "selector": "kp-alert", "import": "import { KpAlertComponent } from '@kanso-protocol/alert';", "docs": "docs/components/alert.md", "storybook": "components-alert--docs" },
109
+ "tooltip": { "npm": "@kanso-protocol/tooltip", "primaryClass": "KpTooltipComponent", "selector": "kp-tooltip", "import": "import { KpTooltipComponent } from '@kanso-protocol/tooltip';", "docs": "docs/components/tooltip.md", "storybook": "components-tooltip--docs" },
110
+ "popover": { "npm": "@kanso-protocol/popover", "primaryClass": "KpPopoverComponent", "selector": "kp-popover", "import": "import { KpPopoverComponent } from '@kanso-protocol/popover';", "docs": "docs/components/popover.md", "storybook": "components-popover--docs" },
111
+ "progress": { "npm": "@kanso-protocol/progress", "primaryClass": "KpProgressLinearComponent", "selector": "kp-progress-linear", "import": "import { KpProgressLinearComponent } from '@kanso-protocol/progress';", "docs": "docs/components/progress.md", "storybook": "components-progress-linear--docs" },
112
+ "tabs": { "npm": "@kanso-protocol/tabs", "primaryClass": "KpTabsComponent", "selector": "kp-tabs", "import": "import { KpTabsComponent } from '@kanso-protocol/tabs';", "docs": "docs/components/tabs.md", "storybook": "components-tabs--docs" },
113
+ "breadcrumbs": { "npm": "@kanso-protocol/breadcrumbs", "primaryClass": "KpBreadcrumbsComponent", "selector": "kp-breadcrumbs", "import": "import { KpBreadcrumbsComponent } from '@kanso-protocol/breadcrumbs';", "docs": "docs/components/breadcrumbs.md", "storybook": "components-breadcrumbs--docs" },
114
+ "pagination": { "npm": "@kanso-protocol/pagination", "primaryClass": "KpPaginationComponent", "selector": "kp-pagination", "import": "import { KpPaginationComponent } from '@kanso-protocol/pagination';", "docs": "docs/components/pagination.md", "storybook": "components-pagination--docs" },
115
+ "dialog": { "npm": "@kanso-protocol/dialog", "primaryClass": "KpDialogComponent", "selector": "kp-dialog", "import": "import { KpDialogComponent } from '@kanso-protocol/dialog';", "docs": "docs/components/dialog.md", "storybook": "components-dialog--docs" },
116
+ "divider": { "npm": "@kanso-protocol/divider", "primaryClass": "KpDividerComponent", "selector": "kp-divider", "import": "import { KpDividerComponent } from '@kanso-protocol/divider';", "docs": "docs/components/divider.md", "storybook": "components-divider--docs" },
117
+ "card": { "npm": "@kanso-protocol/card", "primaryClass": "KpCardComponent", "selector": "kp-card", "import": "import { KpCardComponent } from '@kanso-protocol/card';", "docs": "docs/components/card.md", "storybook": "components-card--docs" },
118
+ "empty-state": { "npm": "@kanso-protocol/empty-state", "primaryClass": "KpEmptyStateComponent", "selector": "kp-empty-state", "import": "import { KpEmptyStateComponent } from '@kanso-protocol/empty-state';", "docs": "docs/components/empty-state.md", "storybook": "components-emptystate--docs" },
119
+ "drawer": { "npm": "@kanso-protocol/drawer", "primaryClass": "KpDrawerComponent", "selector": "kp-drawer", "import": "import { KpDrawerComponent } from '@kanso-protocol/drawer';", "docs": "docs/components/drawer.md", "storybook": "components-drawer--docs" },
120
+ "accordion": { "npm": "@kanso-protocol/accordion", "primaryClass": "KpAccordionComponent", "selector": "kp-accordion", "import": "import { KpAccordionComponent } from '@kanso-protocol/accordion';", "docs": "docs/components/accordion.md", "storybook": "components-accordion--docs" },
121
+ "skeleton": { "npm": "@kanso-protocol/skeleton", "primaryClass": "KpSkeletonComponent", "selector": "kp-skeleton", "import": "import { KpSkeletonComponent } from '@kanso-protocol/skeleton';", "docs": "docs/components/skeleton.md", "storybook": "components-skeleton--docs" },
122
+ "slider": { "npm": "@kanso-protocol/slider", "primaryClass": "KpSliderComponent", "selector": "kp-slider", "import": "import { KpSliderComponent } from '@kanso-protocol/slider';", "docs": "docs/components/slider.md", "storybook": "components-slider--docs" },
123
+ "combobox": { "npm": "@kanso-protocol/combobox", "primaryClass": "KpComboboxComponent", "selector": "kp-combobox", "import": "import { KpComboboxComponent } from '@kanso-protocol/combobox';", "docs": "docs/components/combobox.md", "storybook": "components-combobox--docs" },
124
+ "datepicker": { "npm": "@kanso-protocol/datepicker", "primaryClass": "KpDatePickerComponent", "selector": "kp-datepicker", "import": "import { KpDatePickerComponent } from '@kanso-protocol/datepicker';", "docs": "docs/components/datepicker.md", "storybook": "components-datepicker--docs" },
125
+ "timepicker": { "npm": "@kanso-protocol/timepicker", "primaryClass": "KpTimePickerComponent", "selector": "kp-timepicker", "import": "import { KpTimePickerComponent } from '@kanso-protocol/timepicker';", "docs": "docs/components/timepicker.md", "storybook": "components-timepicker--docs" },
126
+ "toast": { "npm": "@kanso-protocol/toast", "primaryClass": "KpToastHostComponent", "selector": "kp-toast-host", "import": "import { KpToastHostComponent } from '@kanso-protocol/toast';", "docs": "docs/components/toast.md", "storybook": "components-toast--docs" },
127
+ "table": { "npm": "@kanso-protocol/table", "primaryClass": "KpTableComponent", "selector": "kp-table", "import": "import { KpTableComponent } from '@kanso-protocol/table';", "docs": "docs/components/table.md", "storybook": "components-table--docs" },
128
+ "tree": { "npm": "@kanso-protocol/tree", "primaryClass": "KpTreeComponent", "selector": "kp-tree", "import": "import { KpTreeComponent } from '@kanso-protocol/tree';", "docs": "docs/components/tree.md", "storybook": "components-tree--docs" },
129
+ "avatar": { "npm": "@kanso-protocol/avatar", "primaryClass": "KpAvatarComponent", "selector": "kp-avatar", "import": "import { KpAvatarComponent } from '@kanso-protocol/avatar';", "docs": "docs/components/avatar.md", "storybook": "components-avatar--docs" },
130
+ "avatar-group": { "npm": "@kanso-protocol/avatar-group", "primaryClass": "KpAvatarGroupComponent", "selector": "kp-avatar-group", "import": "import { KpAvatarGroupComponent } from '@kanso-protocol/avatar-group';", "docs": "docs/components/avatar-group.md", "storybook": "components-avatargroup--docs" },
131
+ "rich-text-editor": { "npm": "@kanso-protocol/rich-text-editor", "primaryClass": "KpRichTextEditorComponent", "selector": "kp-rich-text-editor", "import": "import { KpRichTextEditorComponent } from '@kanso-protocol/rich-text-editor';", "docs": "docs/components/rich-text-editor.md", "storybook": "components-richtexteditor--docs" },
132
+ "markdown-viewer": { "npm": "@kanso-protocol/markdown-viewer", "primaryClass": "KpMarkdownViewerComponent", "selector": "kp-markdown-viewer", "import": "import { KpMarkdownViewerComponent } from '@kanso-protocol/markdown-viewer';", "docs": "docs/components/markdown-viewer.md", "storybook": "components-markdownviewer--docs" },
133
+ "file-upload": { "npm": "@kanso-protocol/file-upload", "primaryClass": "KpFileUploadComponent", "selector": "kp-file-upload", "import": "import { KpFileUploadComponent } from '@kanso-protocol/file-upload';", "docs": "docs/components/file-upload.md", "storybook": "components-fileupload--docs" },
134
+ "command-palette": { "npm": "@kanso-protocol/command-palette", "primaryClass": "KpCommandPaletteComponent", "selector": "kp-command-palette", "import": "import { KpCommandPaletteComponent } from '@kanso-protocol/command-palette';", "docs": "docs/components/command-palette.md", "storybook": "components-commandpalette--docs" },
135
+ "icon": { "npm": "@kanso-protocol/icon", "primaryClass": "KpIconComponent", "selector": "kp-icon", "import": "import { KpIconComponent } from '@kanso-protocol/icon';", "docs": "docs/components/icon.md", "storybook": "components-icon--docs" },
136
+ "virtual-list": { "npm": "@kanso-protocol/virtual-list", "primaryClass": "KpVirtualListComponent", "selector": "kp-virtual-list", "import": "import { KpVirtualListComponent } from '@kanso-protocol/virtual-list';", "docs": "docs/components/virtual-list.md", "storybook": "components-virtuallist--docs" }
137
+ },
138
+ "patterns": {
139
+ "app-shell": { "npm": "@kanso-protocol/app-shell", "primaryClass": "KpAppShellComponent", "selector": "kp-app-shell", "import": "import { KpAppShellComponent } from '@kanso-protocol/app-shell';", "docs": "docs/patterns/app-shell.md", "storybook": "patterns-appshell--docs" },
140
+ "banner": { "npm": "@kanso-protocol/banner", "primaryClass": "KpBannerComponent", "selector": "kp-banner", "import": "import { KpBannerComponent } from '@kanso-protocol/banner';", "docs": "docs/patterns/banner.md", "storybook": "patterns-banner--docs" },
141
+ "container": { "npm": "@kanso-protocol/container", "primaryClass": "KpContainerComponent", "selector": "kp-container", "import": "import { KpContainerComponent } from '@kanso-protocol/container';", "docs": "docs/patterns/container.md", "storybook": "patterns-container--docs" },
142
+ "filter-bar": { "npm": "@kanso-protocol/filter-bar", "primaryClass": "KpFilterBarComponent", "selector": "kp-filter-bar", "import": "import { KpFilterBarComponent } from '@kanso-protocol/filter-bar';", "docs": "docs/patterns/filter-bar.md", "storybook": "patterns-filterbar--docs" },
143
+ "form-section": { "npm": "@kanso-protocol/form-section", "primaryClass": "KpFormSectionComponent", "selector": "kp-form-section", "import": "import { KpFormSectionComponent } from '@kanso-protocol/form-section';", "docs": "docs/patterns/form-section.md", "storybook": "patterns-formsection--docs" },
144
+ "grid": { "npm": "@kanso-protocol/grid", "primaryClass": "KpGridComponent", "selector": "kp-grid", "import": "import { KpGridComponent } from '@kanso-protocol/grid';", "docs": "docs/patterns/grid.md", "storybook": "patterns-grid--docs" },
145
+ "header": { "npm": "@kanso-protocol/header", "primaryClass": "KpHeaderComponent", "selector": "kp-header", "import": "import { KpHeaderComponent } from '@kanso-protocol/header';", "docs": "docs/patterns/header.md", "storybook": "patterns-header--docs" },
146
+ "nav-item": { "npm": "@kanso-protocol/nav-item", "primaryClass": "KpNavItemComponent", "selector": "kp-nav-item", "import": "import { KpNavItemComponent } from '@kanso-protocol/nav-item';", "docs": "docs/patterns/nav-item.md", "storybook": "patterns-navitem--docs" },
147
+ "notification-center": { "npm": "@kanso-protocol/notification-center", "primaryClass": "KpNotificationCenterComponent", "selector": "kp-notification-center", "import": "import { KpNotificationCenterComponent } from '@kanso-protocol/notification-center';", "docs": "docs/patterns/notification-center.md", "storybook": "patterns-notificationcenter--docs" },
148
+ "page-error": { "npm": "@kanso-protocol/page-error", "primaryClass": "KpPageErrorComponent", "selector": "kp-page-error", "import": "import { KpPageErrorComponent } from '@kanso-protocol/page-error';", "docs": "docs/patterns/page-error.md", "storybook": "patterns-pageerror--docs" },
149
+ "page-header": { "npm": "@kanso-protocol/page-header", "primaryClass": "KpPageHeaderComponent", "selector": "kp-page-header", "import": "import { KpPageHeaderComponent } from '@kanso-protocol/page-header';", "docs": "docs/patterns/page-header.md", "storybook": "patterns-pageheader--docs" },
150
+ "search-bar": { "npm": "@kanso-protocol/search-bar", "primaryClass": "KpSearchBarComponent", "selector": "kp-search-bar", "import": "import { KpSearchBarComponent } from '@kanso-protocol/search-bar';", "docs": "docs/patterns/search-bar.md", "storybook": "patterns-searchbar--docs" },
151
+ "settings-panel": { "npm": "@kanso-protocol/settings-panel", "primaryClass": "KpSettingsPanelComponent", "selector": "kp-settings-panel", "import": "import { KpSettingsPanelComponent } from '@kanso-protocol/settings-panel';", "docs": "docs/patterns/settings-panel.md", "storybook": "patterns-settingspanel--docs" },
152
+ "sidebar": { "npm": "@kanso-protocol/sidebar", "primaryClass": "KpSidebarComponent", "selector": "kp-sidebar", "import": "import { KpSidebarComponent } from '@kanso-protocol/sidebar';", "docs": "docs/patterns/sidebar.md", "storybook": "patterns-sidebar--docs" },
153
+ "stat-card": { "npm": "@kanso-protocol/stat-card", "primaryClass": "KpStatCardComponent", "selector": "kp-stat-card", "import": "import { KpStatCardComponent } from '@kanso-protocol/stat-card';", "docs": "docs/patterns/stat-card.md", "storybook": "patterns-statcard--docs" },
154
+ "table-toolbar": { "npm": "@kanso-protocol/table-toolbar", "primaryClass": "KpTableToolbarComponent", "selector": "kp-table-toolbar", "import": "import { KpTableToolbarComponent } from '@kanso-protocol/table-toolbar';", "docs": "docs/patterns/table-toolbar.md", "storybook": "patterns-tabletoolbar--docs" },
155
+ "theme-toggle": { "npm": "@kanso-protocol/theme-toggle", "primaryClass": "KpThemeToggleComponent", "selector": "kp-theme-toggle", "import": "import { KpThemeToggleComponent } from '@kanso-protocol/theme-toggle';", "docs": "docs/patterns/theme-toggle.md", "storybook": "patterns-themetoggle--docs" },
156
+ "user-menu": { "npm": "@kanso-protocol/user-menu", "primaryClass": "KpUserMenuComponent", "selector": "kp-user-menu", "import": "import { KpUserMenuComponent } from '@kanso-protocol/user-menu';", "docs": "docs/patterns/user-menu.md", "storybook": "patterns-usermenu--docs" },
157
+ "stack": { "npm": "@kanso-protocol/stack", "primaryClass": "KpStackComponent", "selector": "kp-stack", "import": "import { KpStackComponent } from '@kanso-protocol/stack';", "docs": "docs/patterns/stack.md", "storybook": "patterns-stack--docs" },
158
+ "row": { "npm": "@kanso-protocol/row", "primaryClass": "KpRowComponent", "selector": "kp-row", "import": "import { KpRowComponent } from '@kanso-protocol/row';", "docs": "docs/patterns/row.md", "storybook": "patterns-row--docs" }
159
+ }
90
160
  }
91
161
  }