npm - @ship-ui/core - Versions diffs - 0.19.4 → 0.19.5 - Mend

@ship-ui/core 0.19.4 → 0.19.5

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 (6) hide show

package/assets/mcp/components.json +2423 -2426
package/bin/mcp/index.js +348 -2
package/bin/ship-fg-scanner +0 -0
package/bin/ship-fg.mjs +4 -4
package/package.json +1 -1
package/styles/components/ship-card.scss +1 -0

package/bin/mcp/index.js CHANGED Viewed

@@ -10146,7 +10146,7 @@ function finalize(ctx, schema) {
     result.$schema = "http://json-schema.org/draft-07/schema#";
   } else if (ctx.target === "draft-04") {
     result.$schema = "http://json-schema.org/draft-04/schema#";
-  } else if (ctx.target === "openapi-3.0") {} else {}
+  } else if (ctx.target === "openapi-3.0") {}
   if (ctx.external?.uri) {
     const id = ctx.external.registry.get(schema)?.id;
     if (!id)
@@ -10368,7 +10368,7 @@ var literalProcessor = (schema, ctx, json, _params) => {
     if (val === undefined) {
       if (ctx.unrepresentable === "throw") {
         throw new Error("Literal `undefined` cannot be represented in JSON Schema");
-      } else {}
+      }
     } else if (typeof val === "bigint") {
       if (ctx.unrepresentable === "throw") {
         throw new Error("BigInt literals cannot be represented in JSON Schema");
@@ -13675,6 +13675,38 @@ server.setRequestHandler(ListToolsRequestSchema, async () => {
           },
           required: ["selector"]
         }
+      },
+      {
+        name: "get_setup_instructions",
+        description: "Get step-by-step setup and installation instructions for ShipUI in an Angular 19+ project",
+        inputSchema: {
+          type: "object",
+          properties: {}
+        }
+      },
+      {
+        name: "get_design_tokens",
+        description: "Get a comprehensive guide on ShipUI design tokens including Radix 1-12 colors, typography, shapes, and utility classes",
+        inputSchema: {
+          type: "object",
+          properties: {}
+        }
+      },
+      {
+        name: "get_css_variable_abbreviations",
+        description: "Get the complete cheat sheet for minified CSS variables and abbreviations used in ShipUI components (e.g. btn-c-h)",
+        inputSchema: {
+          type: "object",
+          properties: {}
+        }
+      },
+      {
+        name: "get_icon_guide",
+        description: "Get the setup and usage instructions for custom icon subsetting with Phosphor Icons and ship-fg CLI",
+        inputSchema: {
+          type: "object",
+          properties: {}
+        }
       }
     ]
   };
@@ -13721,6 +13753,233 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
       ]
     };
   }
+  if (name === "get_setup_instructions") {
+    return {
+      content: [
+        {
+          type: "text",
+          text: `# ShipUI Setup & Installation Guide
+To integrate ShipUI in your Angular project, you must be using Angular 19 or newer. Follow these steps:
+## 1. Install Package
+\`\`\`bash
+npm i -S @ship-ui/core
+\`\`\`
+## 2. Import Global Styles
+Add this import at the top of your \`src/styles.scss\` (or main styles file):
+\`\`\`scss
+@use '@ship-ui/core/styles';
+\`\`\`
+## 3. Configure Assets in angular.json
+To enable bundling of default ShipUI fonts and assets, add the assets glob pattern to your project's assets array under \`architect.build.options.assets\` and \`architect.serve.options.assets\`:
+\`\`\`json
+"assets": [
+  "src/assets",
+  {
+    "glob": "**/*",
+    "input": "./node_modules/@ship-ui/core/assets",
+    "output": "./ship-ui-assets/"
+  }
+]
+\`\`\`
+## 4. Setup Icon Font CLI
+Add scripts to \`package.json\` for compilation and watching of the custom Phosphor icon font:
+\`\`\`json
+"scripts": {
+  "gen:font": "ship-fg --src='./src' --out='./src/assets' --rootPath='./'",
+  "watch:font": "ship-fg --src='./src' --out='./src/assets' --rootPath='./' --watch",
+  "start": "npm run watch:font & ng serve",
+  "build": "npm run gen:font & ng build"
+}
+\`\`\`
+Add the generated sheet link inside your \`<head>\` tag in \`index.html\`:
+\`\`\`html
+<link rel="stylesheet" href="/ship.css" />
+\`\`\``
+        }
+      ]
+    };
+  }
+  if (name === "get_design_tokens") {
+    return {
+      content: [
+        {
+          type: "text",
+          text: `# ShipUI Design Tokens Guide
+ShipUI implements a cohesive, highly customizable design system based on modern CSS properties.
+## 1. HSL Color Scale (Radix 1-12 aligned)
+ShipUI uses semantic scales from 1 (lightest background / darkest shadow) to 12 (darkest text / solid foreground).
+Available palettes: \`--primary-\`, \`--accent-\`, \`--warn-\`, \`--error-\`, \`--success-\`, \`--base-\`.
+Example Color CSS Variables:
+- \`--primary-1\`: Base app background
+- \`--primary-2\`: Subtle background
+- \`--primary-3\`: UI element background
+- \`--primary-4\`: Hover state background
+- \`--primary-5\`: Active state background
+- \`--primary-8\`: Brand primary color / solid border
+- \`--primary-9\`: Brand hover primary color
+- \`--primary-12\`: High contrast text
+We also provide gradient scales for backgrounds:
+- \`--primary-g2\` / \`--primary-g3\`
+- \`--accent-g2\` / \`--accent-g3\`
+- \`--warn-g2\` / \`--warn-g3\`
+- \`--error-g2\` / \`--error-g3\`
+- \`--success-g2\` / \`--success-g3\`
+- \`--base-g2\` / \`--base-g3\` / \`--base-g6\` / \`--base-g7\`
+## 2. Typography Scale
+Custom typography definitions utilizing \`Inter Tight\`:
+- \`--display-10\` to \`--display-50\` (Large hero titles)
+- \`--title-10\` to \`--title-30B\` (Section headers)
+- \`--paragraph-10\` to \`--paragraph-40B\` (Body, labels, and micro-copy)
+- \`--code-10\` to \`--code-30\` (Monospace text)
+Usage Example:
+\`\`\`css
+.card-title {
+  font: var(--title-30B);
+}
+\`\`\`
+## 3. Shape Scale
+Used for rounded borders, scaling using \`--shape-scale\` multiplier (default is \`1\`):
+- \`--shape-1\`: 4px border-radius
+- \`--shape-2\`: 8px border-radius
+- \`--shape-3\`: 12px border-radius
+- \`--shape-4\`: 16px border-radius
+- \`--shape-5\`: 20px border-radius
+## 4. Shadows & Borders
+- Shadows: \`--box-shadow-10\` to \`--box-shadow-60\`.
+- Borders: \`--border-10\` (thin base color border), \`--border-20\` (medium base color border).
+## 5. Global CSS Helper Classes
+- \`.spacer\`: Flex-grow spacer helper (\`flex: 1 0;\`).
+- \`.sh-primary\`, \`.sh-accent\`, \`.sh-warn\`, \`.sh-error\`, \`.sh-success\`: Semantic text color helpers.`
+        }
+      ]
+    };
+  }
+  if (name === "get_css_variable_abbreviations") {
+    return {
+      content: [
+        {
+          type: "text",
+          text: `# CSS Variables Abbreviations Guide
+ShipUI minifies all component CSS variables to reduce production bundle size without framework specific parsers.
+Variables follow the structural pattern: \`--[component]-[style]-[state]\`.
+For example, \`--btn-c-h\` represents \`[button]-[color]-[hover]\`.
+## Component Prefix Identifiers
+- \`btn\` : Button component
+- \`btng\`: Button group
+- \`pb\`  : Progress bar
+- \`pbt\` : Progress bar track
+- \`rs\`  : Range slider
+- \`rst\` : Range slider track
+- \`po\`  : Popover
+- \`radio\`: Radio button
+- \`radiod\`: Radio dot / indicator
+- \`table\`: Data table
+- \`tabs\` : Tabs header/body
+- \`toggle\`: Switch toggle
+- \`togglek\`: Switch toggle knob
+- \`dp\`  : Datepicker / datepicker input
+- \`chip\`: Chip component
+## Style Property Infixes
+- \`bs\` : box-shadow
+- \`bg\` : background-color
+- \`c\`  : color (text)
+- \`br\` : border-radius
+- \`bw\` : border-width
+- \`b\`  : border
+- \`s\`  : shape
+- \`si\` : size
+- \`ih\` : icon-height
+- \`iw\` : icon-width
+- \`ic\` : icon-color
+- \`ir\` : icon-rotate
+- \`h\`  : height
+- \`mh\` : max-height
+- \`mih\`: min-height
+- \`w\`  : width
+- \`mw\` : max-width
+- \`miw\`: min-width
+- \`f\`  : font
+- \`d\`  : display
+- \`o\`  : opacity
+- \`ad\` : animation-duration
+## State Suffixes
+- \`h\` : hover
+- \`a\` : active
+- \`d\` : disabled
+- \`s\` : selected
+## Example Usage
+To override button styles on hover, override \`--btn-c-h\`:
+\`\`\`css
+.my-custom-button {
+  --btn-c-h: var(--accent-12);
+  --btn-bg-h: var(--accent-3);
+}
+\`\`\``
+        }
+      ]
+    };
+  }
+  if (name === "get_icon_guide") {
+    return {
+      content: [
+        {
+          type: "text",
+          text: `# ShipUI Icons Integration & Usage Guide
+ShipUI uses Phosphor Icons bundled into a minified custom webfont. Unused icons are automatically stripped via a custom CLI builder (\`ship-fg\`).
+## 1. Icon Syntax
+To render icons, use a standard element with the \`class\` prefixed with \`ph-\`.
+Example:
+\`\`\`html
+<i class="ph ph-heart"></i>
+\`\`\`
+## 2. Dynamic Weight & Style Suffixes
+You can use multiple Phosphor icon weights (bold, fill, light, regular, thin) in the exact same font file by suffixing the icon class name:
+- Bold style: \`ph-heart-bold\`
+- Fill style: \`ph-heart-fill\`
+- Light style: \`ph-heart-light\`
+- Thin style: \`ph-heart-thin\`
+- Regular style: \`ph-heart\` (or \`ph-heart-regular\`)
+Example:
+\`\`\`html
+<i class="ph ph-envelope-fill"></i>
+\`\`\`
+## 3. CLI Subsetter (ship-fg)
+The subsetting engine scans your source files (\`.html\`, \`.ts\`, etc.) for references to \`ph-\` classes, downloads the respective SVG icons, and compiles them into a custom optimized web font on-the-fly.
+Configuration options for \`ship-fg\`:
+- \`--src\`: Directory to scan for icon classes (e.g. \`./src\`).
+- \`--out\`: Directory to write generated font files (e.g. \`./src/assets\`).
+- \`--rootPath\`: Output URL root path (e.g. \`./\` or \`/\`).
+- \`--watch\`: Watch source files for changes and regenerate automatically.`
+        }
+      ]
+    };
+  }
   throw new Error(`Tool ${name} not found`);
 });
 server.setRequestHandler(ListPromptsRequestSchema, async () => {
@@ -13741,6 +14000,49 @@ server.setRequestHandler(ListPromptsRequestSchema, async () => {
             required: false
           }
         ]
+      },
+      {
+        name: "setup_project",
+        description: "Get interactive setup instructions tailored to your workspace layout",
+        arguments: [
+          {
+            name: "projectType",
+            description: "e.g., Standard Angular App, Nx Workspace (optional)",
+            required: false
+          },
+          {
+            name: "stylesFormat",
+            description: "e.g., scss, css, sass (optional)",
+            required: false
+          }
+        ]
+      },
+      {
+        name: "customize_theme",
+        description: "Generate custom CSS overrides or themes for ShipUI (colors, typography, radii)",
+        arguments: [
+          {
+            name: "brandColor",
+            description: "The hex or HSL value of your brand color (optional)",
+            required: false
+          },
+          {
+            name: "themeMode",
+            description: "light, dark, or both (optional)",
+            required: false
+          }
+        ]
+      },
+      {
+        name: "implement_layout",
+        description: "Get guidance and template code to build structured layouts using sh-sheet and CSS grids",
+        arguments: [
+          {
+            name: "layoutType",
+            description: "e.g., sidebar layout dashboard, header/footer dashboard, grid gallery (optional)",
+            required: false
+          }
+        ]
       }
     ]
   };
@@ -13803,6 +14105,50 @@ Please help me implement this in my project.`
       ]
     };
   }
+  if (name === "setup_project") {
+    const projectType = args?.projectType || "Standard Angular App";
+    const stylesFormat = args?.stylesFormat || "scss";
+    return {
+      messages: [
+        {
+          role: "user",
+          content: {
+            type: "text",
+            text: `I want to integrate ShipUI in my ${projectType} project. I'm using ${stylesFormat} for styles. Please guide me through a full customized setup. Include installation commands, asset configuration in angular.json, global imports, CLI watchers for custom phosphor icons, and how to verify everything is working.`
+          }
+        }
+      ]
+    };
+  }
+  if (name === "customize_theme") {
+    const brandColor = args?.brandColor || "hsl(217, 91%, 60%)";
+    const themeMode = args?.themeMode || "both";
+    return {
+      messages: [
+        {
+          role: "user",
+          content: {
+            type: "text",
+            text: `I want to customize the ShipUI design system theme. My target brand color is: ${brandColor}. I want to support ${themeMode} color mode(s). Please help me generate custom Radix-like 1-12 HSL scale overrides, custom theme utility rules, light-dark() CSS properties, and custom border/shape or shadow overrides. Ensure all generated classes correctly override ShipUI base styles.`
+          }
+        }
+      ]
+    };
+  }
+  if (name === "implement_layout") {
+    const layoutType = args?.layoutType || "sidebar layout dashboard";
+    return {
+      messages: [
+        {
+          role: "user",
+          content: {
+            type: "text",
+            text: `I want to build a ${layoutType} using ShipUI's layout tokens, sheet utilities (sh-sheet), and responsive structural patterns. Provide clean, modern HTML structure and CSS variables (using the correct abbreviations like po, rs, dp, btn, base-1 to base-12 scales) to achieve a beautiful, responsive, and zoneless-compatible interface.`
+          }
+        }
+      ]
+    };
+  }
   throw new Error(`Prompt ${name} not found`);
 });
 var transport = new StdioServerTransport;

package/bin/ship-fg-scanner CHANGED Viewed

Binary file

package/bin/ship-fg.mjs CHANGED Viewed

@@ -199,7 +199,7 @@ var require_compress_binding = __commonJS((exports, module) => {
     setWindowTitle = function(title) {
       document.title = title;
     };
-  } else {}
+  }
   var out = Module["print"] || console.log.bind(console);
   var err = Module["printErr"] || console.warn.bind(console);
   for (key in moduleOverrides) {
@@ -1083,7 +1083,7 @@ var require_compress_binding = __commonJS((exports, module) => {
       invokerFnBody += `var ret = retType.fromWireType(rv);
 ` + `return ret;
 `;
-    } else {}
+    }
     invokerFnBody += `}
 `;
     args1.push(invokerFnBody);
@@ -1805,7 +1805,7 @@ var require_decompress_binding = __commonJS((exports, module) => {
     setWindowTitle = function(title) {
       document.title = title;
     };
-  } else {}
+  }
   var out = Module["print"] || console.log.bind(console);
   var err = Module["printErr"] || console.warn.bind(console);
   for (key in moduleOverrides) {
@@ -2685,7 +2685,7 @@ var require_decompress_binding = __commonJS((exports, module) => {
       invokerFnBody += `var ret = retType.fromWireType(rv);
 ` + `return ret;
 `;
-    } else {}
+    }
     invokerFnBody += `}
 `;
     args1.push(invokerFnBody);

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@ship-ui/core",
   "license": "MIT",
-  "version": "0.19.4",
+  "version": "0.19.5",
   "peerDependencies": {
     "@angular/common": ">=20",
     "@angular/core": ">=20",

package/styles/components/ship-card.scss CHANGED Viewed

@@ -31,6 +31,7 @@ $shipCard: true !default;
       background-color: var(--card-bg);
       inset: 0;
       z-index: -2;
+      border-radius: inherit;
     }
     &:after {