npm - @triptease/design-system-mcp - Versions diffs - 1.1.8 → 1.2.1 - Mend

@triptease/design-system-mcp 1.1.8 → 1.2.1

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.

Files changed (3) hide show

package/README.md CHANGED Viewed

@@ -246,41 +246,100 @@ Claude: [Reads designsystem://components, filters results]
 - **Transport**: StdioServerTransport (local, on-demand)
 - **Token Source**: `../../packages/stylesheet/dist/web/tokens.json` (relative to compiled dist directory)
-- **Components**: Component manifest in `src/componentManifest.ts` (button, input, badge, checkbox, card)
+- **Components**: Individual manifest entries in `src/manifests/components/entries/`, aggregated by `src/manifests/components/index.ts`
 - **Response Format**: JSON for all tool responses
 ## Maintenance
 ### Adding New Components
-Edit `src/componentManifest.ts` and add new component definitions to the `componentManifest` object. Each component should include:
+Each component has its own manifest entry file. Follow these steps:
+**1. Create an entry file** at `src/manifests/components/entries/<componentName>.ts`:
 ```typescript
-componentName: {
-  name: "Component Name",
-  description: "Brief description",
-  element: "html-element",
-  usageGuidance: {
-    whenToUse: ["..."],
-    bestPractices: ["..."],
-    accessibility: ["..."],
-    avoid: ["..."]
+import { ComponentManifest } from '@/manifests/components/types.js';
+export default {
+  componentName: {
+    name: 'Component Name',
+    description: 'Brief description',
+    element: 'html-element',
+    usageGuidance: {
+      whenToUse: ['...'],
+      bestPractices: ['...'],
+      accessibility: ['...'],
+      avoid: ['...'],
+    },
+    attributes: {
+      /* optional */
+    },
+    dataAttributes: {
+      /* optional */
+    },
+    classes: {
+      /* optional */
+    },
+    events: {
+      /* optional */
+    },
+    states: [
+      /* optional */
+    ],
+    examples: [
+      {
+        title: 'Example name',
+        code: `<html example code>`,
+      },
+    ],
   },
-  dataAttributes: { /* optional */ },
-  classes: { /* optional */ },
-  attributes: { /* optional */ },
-  states: [ /* optional */ ],
-  examples: [
-    {
-      title: "Example name",
-      code: `<html example code>`
-    }
-  ],
-  tokens: ["--token-1", "--token-2"]
+} satisfies ComponentManifest;
+```
+For web components distributed via CDN, also add installation options with versioned URLs:
+```typescript
+import packageJson from '@/../package.json' with { type: 'json' };
+import { buildCDNUrl, buildMajorVersion } from '@/utils/buildCDNUrls.js';
+const version = packageJson.componentVersions['@triptease/tt-my-component'];
+// Then in the manifest entry:
+installationOptions: {
+  npm: [{ name: '@triptease/tt-my-component', includesTypes: true, optional: false }],
+  cdn: [{
+    name: 'tt-my-component',
+    includesTypes: false,
+    optional: false,
+    moduleFormat: 'esm',
+    pinnedVersionUrl: buildCDNUrl('tt-my-component', version),
+    pinnedMajorVersionUrl: buildCDNUrl('tt-my-component', buildMajorVersion(version)),
+    latestVersionUrl: buildCDNUrl('tt-my-component', 'latest'),
+    guidance: 'Prefer pinned major version URL to avoid unexpected breaking changes.',
+  }],
+},
+```
+**2. Register the entry** in `src/manifests/components/index.ts`:
+```typescript
+import myComponent from '@/manifests/components/entries/myComponent.js';
+export const componentManifest: ComponentManifest = {
+  // ...existing entries
+  ...myComponent,
+};
+```
+**3. Add the version** (web components only) to `componentVersions` in `package.json`:
+```json
+"componentVersions": {
+  "@triptease/tt-my-component": "1.0.0"
 }
 ```
-After making changes:
+**4. Build and verify:**
 ```bash
 yarn build
@@ -325,7 +384,17 @@ _For project-level installation:_
 - Check Node.js version is 18+
 - Verify no TypeScript compilation errors
+## Distribution
+This MCP server is distributed through two channels:
+1. **npm** (`@triptease/design-system-mcp`): Published via Changesets on release. Users with `npx -y` get the latest version automatically on each Claude session.
+2. **Claude Code plugin** (`triptease-design-system` in the `triptease-plugins` marketplace): The plugin bundles an `.mcp.json` that points to this npm package. The plugin provides design guidance (SKILL.md) while this server provides structured component data.
+Changes to component manifests, tokens, or setup guides in this repo propagate to users automatically after an npm release — no plugin update is needed. The plugin only needs updating when its own files change (SKILL.md, .mcp.json).
 ## Related
+- **Design System Plugin**: [triptease/claude-plugins](https://github.com/triptease/claude-plugins) — `triptease-design-system` marketplace plugin
 - **Design System Documentation**: For design system patterns and usage, see the main component library README
 - **MCP Protocol**: https://modelcontextprotocol.io/

package/dist/index.js CHANGED Viewed

@@ -7656,11 +7656,11 @@ function datetimeRegex(args) {
   regex = `${regex}(${opts.join("|")})`;
   return new RegExp(`^${regex}$`);
 }
-function isValidIP(ip, version7) {
-  if ((version7 === "v4" || !version7) && ipv4Regex.test(ip)) {
+function isValidIP(ip, version8) {
+  if ((version8 === "v4" || !version8) && ipv4Regex.test(ip)) {
     return true;
   }
-  if ((version7 === "v6" || !version7) && ipv6Regex.test(ip)) {
+  if ((version8 === "v6" || !version8) && ipv6Regex.test(ip)) {
     return true;
   }
   return false;
@@ -7687,11 +7687,11 @@ function isValidJWT(jwt2, alg) {
     return false;
   }
 }
-function isValidCidr(ip, version7) {
-  if ((version7 === "v4" || !version7) && ipv4CidrRegex.test(ip)) {
+function isValidCidr(ip, version8) {
+  if ((version8 === "v4" || !version8) && ipv4CidrRegex.test(ip)) {
     return true;
   }
-  if ((version7 === "v6" || !version7) && ipv6CidrRegex.test(ip)) {
+  if ((version8 === "v6" || !version8) && ipv6CidrRegex.test(ip)) {
     return true;
   }
   return false;
@@ -11644,10 +11644,10 @@ var nanoid = /^[a-zA-Z0-9_-]{21}$/;
 var duration = /^P(?:(\d+W)|(?!.*W)(?=\d|T\d)(\d+Y)?(\d+M)?(\d+D)?(T(?=\d)(\d+H)?(\d+M)?(\d+([.,]\d+)?S)?)?)$/;
 var extendedDuration = /^[-+]?P(?!$)(?:(?:[-+]?\d+Y)|(?:[-+]?\d+[.,]\d+Y$))?(?:(?:[-+]?\d+M)|(?:[-+]?\d+[.,]\d+M$))?(?:(?:[-+]?\d+W)|(?:[-+]?\d+[.,]\d+W$))?(?:(?:[-+]?\d+D)|(?:[-+]?\d+[.,]\d+D$))?(?:T(?=[\d+-])(?:(?:[-+]?\d+H)|(?:[-+]?\d+[.,]\d+H$))?(?:(?:[-+]?\d+M)|(?:[-+]?\d+[.,]\d+M$))?(?:[-+]?\d+(?:[.,]\d+)?S)?)??$/;
 var guid = /^([0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12})$/;
-var uuid = (version7) => {
-  if (!version7)
+var uuid = (version8) => {
+  if (!version8)
     return /^([0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-8][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}|00000000-0000-0000-0000-000000000000|ffffffff-ffff-ffff-ffff-ffffffffffff)$/;
-  return new RegExp(`^([0-9a-fA-F]{8}-[0-9a-fA-F]{4}-${version7}[0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12})$`);
+  return new RegExp(`^([0-9a-fA-F]{8}-[0-9a-fA-F]{4}-${version8}[0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12})$`);
 };
 var uuid4 = /* @__PURE__ */ uuid(4);
 var uuid6 = /* @__PURE__ */ uuid(6);
@@ -23302,7 +23302,7 @@ var StdioServerTransport = class {
 // package.json
 var package_default = {
   name: "@triptease/design-system-mcp",
-  version: "1.1.8",
+  version: "1.2.1",
   description: "MCP server for Triptease design system documentation",
   type: "module",
   main: "dist/index.js",
@@ -23334,6 +23334,8 @@ var package_default = {
     "@triptease/tt-highlight": "1.1.1",
     "@triptease/tt-line-chart": "1.1.2",
     "@triptease/tt-milestone": "1.1.1",
+    "@triptease/tt-paginator": "1.0.4",
+    "@triptease/tt-table-wrapper": "1.0.3",
     "@triptease/tt-tabs": "1.1.0"
   },
   dependencies: {
@@ -23845,35 +23847,119 @@ var card_default = {
   }
 };
+// src/utils/buildCDNUrls.ts
+var buildCDNUrl = (componentName, version8) => {
+  return `https://cdn.design-system.triptease.io/${componentName}/${version8}/${componentName}.js`;
+};
+var buildMajorVersion = (version8) => `${version8.split(".")[0]}.x.x`;
 // src/manifests/components/entries/table.ts
+var tableWrapperVersion = package_default.componentVersions["@triptease/tt-table-wrapper"];
+var paginatorVersion = package_default.componentVersions["@triptease/tt-paginator"];
 var table_default = {
   table: {
     name: "Table",
-    description: "Organize and display data in rows and columns",
+    description: "Display structured data in rows and columns. Wrap in tt-table-wrapper to add sorting and pagination.",
     element: "table",
     usageGuidance: {
       whenToUse: [
-        "Display structured data with multiple attributes",
-        "Enable comparison across data rows",
-        "Present numerical or tabular information",
-        "Show data relationships clearly"
+        "Display structured data with multiple attributes that users need to compare",
+        "Present numerical or tabular information where row-by-row comparison matters",
+        "Show data relationships across a consistent set of columns"
       ],
       avoid: [
-        "For layout purposes (use CSS Grid or Flexbox)",
-        "When data is better visualized as a chart",
-        "For small amounts of data that could be in a list",
-        "On small screens where columns won't fit (consider alternative layouts)"
+        "For layout purposes \u2014 use CSS Grid or Flexbox instead",
+        "When data is better visualised as a chart or graph",
+        "For small amounts of data that would read more naturally as a list",
+        "On small screens where columns cannot fit \u2014 consider alternative layouts"
+      ],
+      accessibility: [
+        'Use th scope="col" on column headers to help screen readers associate cells with their headings',
+        'Sortable column headers receive aria-sort="ascending" or aria-sort="descending" automatically when using tt-table-wrapper',
+        "Add a caption to provide an accessible label for the table, especially when multiple tables appear on the same page",
+        "Do not rely on visual position alone to convey data relationships \u2014 use semantic HTML (th, scope) so the structure is machine-readable"
+      ]
+    },
+    installationOptions: {
+      npm: [
+        {
+          name: "@triptease/tt-table-wrapper",
+          includesTypes: true,
+          optional: true,
+          guidance: "Required for sorting and pagination."
+        },
+        {
+          name: "@triptease/tt-paginator",
+          includesTypes: true,
+          optional: true,
+          guidance: "Peer dependency of tt-table-wrapper \u2014 install alongside it."
+        }
+      ],
+      cdn: [
+        {
+          name: "tt-table-wrapper",
+          includesTypes: false,
+          optional: true,
+          moduleFormat: "esm",
+          pinnedVersionUrl: buildCDNUrl("tt-table-wrapper", tableWrapperVersion),
+          pinnedMajorVersionUrl: buildCDNUrl("tt-table-wrapper", buildMajorVersion(tableWrapperVersion)),
+          latestVersionUrl: buildCDNUrl("tt-table-wrapper", "latest"),
+          guidance: "Optional \u2014 required for sorting and pagination. Prefer pinned major version URL."
+        },
+        {
+          name: "tt-paginator",
+          includesTypes: false,
+          optional: true,
+          moduleFormat: "esm",
+          pinnedVersionUrl: buildCDNUrl("tt-paginator", paginatorVersion),
+          pinnedMajorVersionUrl: buildCDNUrl("tt-paginator", buildMajorVersion(paginatorVersion)),
+          latestVersionUrl: buildCDNUrl("tt-paginator", "latest"),
+          guidance: "Peer dependency of tt-table-wrapper \u2014 must be loaded before it."
+        }
       ]
     },
+    dataAttributes: {
+      "data-sort-key": {
+        type: "string",
+        description: "Add to th elements to make them sortable. The value identifies the column and is included in the sort-change event detail."
+      }
+    },
+    attributes: {
+      "total-rows": {
+        type: "number",
+        default: "0",
+        description: "Set on tt-table-wrapper. Total number of rows in the full dataset, used by the embedded paginator."
+      },
+      "page-size": {
+        type: "number",
+        default: "10",
+        description: "Set on tt-table-wrapper. Number of rows per page, used by the embedded paginator."
+      }
+    },
+    events: {
+      "sort-change": {
+        description: "Fired by tt-table-wrapper when the user clicks a sortable column header.",
+        detail: {
+          key: "string \u2014 the data-sort-key value of the clicked header",
+          direction: "SortDirection \u2014 'asc' | 'desc' | 'none'"
+        },
+        bubbles: true
+      },
+      "page-change": {
+        description: "Fired by tt-table-wrapper when the user navigates pages.",
+        detail: { page: "number \u2014 the 1-indexed page number" },
+        bubbles: true
+      }
+    },
     examples: [
       {
         title: "Basic table",
         code: `<table>
   <thead>
     <tr>
-      <th>Property Name</th>
-      <th>Impressions</th>
-      <th>Revenue</th>
+      <th scope="col">Property Name</th>
+      <th scope="col">Impressions</th>
+      <th scope="col">Revenue</th>
     </tr>
   </thead>
   <tbody>
@@ -23882,8 +23968,81 @@ var table_default = {
       <td>12,450</td>
       <td>$5,760.00</td>
     </tr>
+    <tr>
+      <td>Oceanview Villas</td>
+      <td>9,875</td>
+      <td>$3,420.00</td>
+    </tr>
   </tbody>
 </table>`
+      },
+      {
+        title: "Sortable table",
+        description: "Use sortable columns when the user needs to compare rows by a specific attribute.",
+        code: `<tt-table-wrapper>
+  <table>
+    <thead>
+      <tr>
+        <th scope="col" data-sort-key="name">Property Name</th>
+        <th scope="col" data-sort-key="impressions">Impressions</th>
+        <th scope="col" data-sort-key="revenue">Revenue</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Downtown Suites</td>
+        <td>12,450</td>
+        <td>$5,760.00</td>
+      </tr>
+      <tr>
+        <td>Oceanview Villas</td>
+        <td>9,875</td>
+        <td>$3,420.00</td>
+      </tr>
+    </tbody>
+  </table>
+</tt-table-wrapper>
+<script>
+  const wrapper = document.querySelector('tt-table-wrapper');
+  wrapper.addEventListener('sort-change', (e) => {
+    // re-render tbody with data sorted by e.detail.key in e.detail.direction
+  });
+</script>`
+      },
+      {
+        title: "Paginated table",
+        description: "Use pagination when the dataset is too large to display in a single table.",
+        code: `<tt-table-wrapper total-rows="50" page-size="10">
+  <table>
+    <thead>
+      <tr>
+        <th scope="col">Property Name</th>
+        <th scope="col">Impressions</th>
+        <th scope="col">Revenue</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Downtown Suites</td>
+        <td>12,450</td>
+        <td>$5,760.00</td>
+      </tr>
+      <tr>
+        <td>Oceanview Villas</td>
+        <td>9,875</td>
+        <td>$3,420.00</td>
+      </tr>
+    </tbody>
+  </table>
+</tt-table-wrapper>
+<script>
+  const wrapper = document.querySelector('tt-table-wrapper');
+  wrapper.addEventListener('page-change', (e) => {
+    // re-render tbody with the slice for e.detail.page
+  });
+</script>`
       }
     ]
   }
@@ -23922,12 +24081,6 @@ var typography_default = {
   }
 };
-// src/utils/buildCDNUrls.ts
-var buildCDNUrl = (componentName, version7) => {
-  return `https://cdn.design-system.triptease.io/${componentName}/${version7}/${componentName}.js`;
-};
-var buildMajorVersion = (version7) => `${version7.split(".")[0]}.x.x`;
 // src/manifests/components/entries/dialog.ts
 var version2 = package_default.componentVersions["@triptease/tt-dialog"];
 var dialog_default = {
@@ -24898,6 +25051,86 @@ var tabs_default = {
   }
 };
+// src/manifests/components/entries/paginator.ts
+var version7 = package_default.componentVersions["@triptease/tt-paginator"];
+var paginator_default = {
+  paginator: {
+    name: "Paginator - Web Component",
+    description: "Numeric pagination component for navigating through paged data",
+    ssrSafe: true,
+    element: "tt-paginator",
+    usageGuidance: {
+      whenToUse: [
+        "Navigating through large datasets split into pages",
+        "Providing page controls below tables or lists",
+        "When the total number of items is known upfront"
+      ],
+      bestPractices: [
+        "Set total-rows and page-size attributes to control pagination",
+        "Listen for the page-change event to fetch or display the correct page of data",
+        "The component auto-hides when there is only one page or fewer"
+      ],
+      accessibility: [
+        "Keyboard navigation: ArrowRight/ArrowLeft for next/previous, Home/End for first/last",
+        'Uses role="navigation" with aria-label="Pagination"',
+        'Active page is marked with aria-current="page"'
+      ],
+      avoid: [
+        "When the dataset is small enough to display without pagination",
+        "For infinite scroll patterns (use intersection observers instead)",
+        "Prefer tt-table-wrapper when paginating a table, as it embeds tt-paginator automatically"
+      ]
+    },
+    installationOptions: {
+      npm: [{ name: "@triptease/tt-paginator", includesTypes: true, optional: false }],
+      cdn: [
+        {
+          name: "tt-paginator",
+          includesTypes: false,
+          optional: false,
+          moduleFormat: "esm",
+          pinnedVersionUrl: buildCDNUrl("tt-paginator", version7),
+          pinnedMajorVersionUrl: buildCDNUrl("tt-paginator", buildMajorVersion(version7)),
+          latestVersionUrl: buildCDNUrl("tt-paginator", "latest"),
+          guidance: "Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code."
+        }
+      ]
+    },
+    attributes: {
+      "total-rows": {
+        type: "number",
+        default: "0",
+        description: "Total number of rows in the dataset. Used to calculate total pages."
+      },
+      "page-size": {
+        type: "number",
+        default: "10",
+        description: "Number of rows per page."
+      }
+    },
+    events: {
+      "page-change": {
+        description: "Fired when the user navigates to a different page.",
+        detail: { page: "number \u2014 the 1-indexed page number" },
+        bubbles: true
+      }
+    },
+    examples: [
+      {
+        title: "Basic usage",
+        code: `<tt-paginator total-rows="100" page-size="10"></tt-paginator>
+<script>
+  document.querySelector('tt-paginator')
+    .addEventListener('page-change', (e) => {
+      console.log('Page:', e.detail.page);
+    });
+</script>`
+      }
+    ]
+  }
+};
 // src/manifests/components/index.ts
 var componentManifest = {
   ...button_default,
@@ -24920,7 +25153,8 @@ var componentManifest = {
   ...lineChart_default,
   ...statistic_default,
   ...banner_default,
-  ...tabs_default
+  ...tabs_default,
+  ...paginator_default
 };
 // src/resources/components/list.ts

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@triptease/design-system-mcp",
-  "version": "1.1.8",
+  "version": "1.2.1",
   "description": "MCP server for Triptease design system documentation",
   "type": "module",
   "main": "dist/index.js",
@@ -32,6 +32,8 @@
     "@triptease/tt-highlight": "1.1.1",
     "@triptease/tt-line-chart": "1.1.2",
     "@triptease/tt-milestone": "1.1.1",
+    "@triptease/tt-paginator": "1.0.4",
+    "@triptease/tt-table-wrapper": "1.0.3",
     "@triptease/tt-tabs": "1.1.0"
   },
   "dependencies": {