Skip to content

NGXSMK 2.0.0: 24 New Components, Universal Angular 17–20+ Support & MCP AI Engine

Choose a tag to compare

View all tags
@toozuuu toozuuu released this 24 Jul 19:02
· 17 commits to main since this release
2.0.0
4624116

Release Version: v2.0.0
Release Date: July 25, 2026
License: MIT
Angular Target: Angular 17.0.0 - 20.0.0+ (Zoneless Signal APIs)

📋 Table of Contents

  1. Overview
  2. What's New in 2.0.0
  3. Breaking Changes & Enhancements
  4. Upgrade & Installation Guide

🚀 Overview

NGXSMK 2.0.0 represents a major architectural milestone in our Angular design system ecosystem. Rebuilt from the ground up for modern Angular (17 through 20+), version 2.0.0 features:

  • 150+ Standalone, Signals-Native Components: Every single primitive uses signals (input(), output(), model(), computed(), effect()) with zero zone.js runtime assumptions.
  • 24 New Components & Enterprise Primitives: Advanced tools including AI reasoning indicators, Kanban boards, rich text editors, image croppers, and data visualizers.
  • Universal Cross-Version Build Pipeline: Seamless compilation and runtime execution across Angular 17, 18, 19, and 20+.
  • Built-In MCP AI Assistant Integration: Embedded Stdio MCP server (@ngxsmk/mcp) so AI tools (Claude Code, Antigravity, Cursor) can scaffold and refactor NGXSMK UI code directly.

✨ What's New in 2.0.0

🎨 24 New Signal-Native Components

1. AI Thinking Indicator (@ngxsmk/core/ai-thinking-indicator)

Real-time animated visualizer for AI model reasoning, token generation, and streaming state.

<ngxsmk-ai-thinking-indicator [thinking]="isGenerating()" [label]="'Reasoning...'" />

2. Audio Visualizer (@ngxsmk/core/audio-visualizer)

Dynamic SVG audio frequency and wave visualization for voice agents and audio recording interfaces.

<ngxsmk-audio-visualizer [stream]="mediaStream" [barCount]="24" />

3. Code Editor (@ngxsmk/core/code-editor)

Lightweight code editor component supporting line numbers, syntax highlighting, and active tab management.

<ngxsmk-code-editor [(code)]="sourceCode" [language]="'typescript'" />

4. Compare Image (@ngxsmk/core/compare-image)

Interactive visual diff slider for side-by-side image comparison.

<ngxsmk-compare-image [beforeImage]="'img/before.png'" [afterImage]="'img/after.png'" />

5. Credit Card Input (@ngxsmk/core/credit-card-input)

Form control with real-time card brand detection, formatting, and expiration/CVC validation.

<ngxsmk-credit-card-input [(cardNumber)]="cardNumber" [(cvc)]="cvc" />

6. File Tree (@ngxsmk/core/file-tree)

Hierarchical file explorer with file-type icons, selection signals, and collapsible folders.

<ngxsmk-file-tree [nodes]="fileStructure()" (nodeSelect)="onFileOpened($event)" />

7. Filter Builder (@ngxsmk/core/filter-builder)

Dynamic condition tree builder for complex query filtering in enterprise platforms.

<ngxsmk-filter-builder [(filters)]="filterConditions" [fields]="availableFields" />

8. Gauge (@ngxsmk/core/gauge)

Configurable SVG radial gauge meter for key metrics and performance dashboards.

<ngxsmk-gauge [value]="cpuUsage()" [min]="0" [max]="100" [unit]="'%'" />

9. Image Cropper (@ngxsmk/core/image-cropper)

Client-side image aspect ratio cropping and manipulation control.

<ngxsmk-image-cropper [src]="avatarUri" (cropComplete)="onCrop($event)" />

10. Kanban Board (@ngxsmk/core/kanban-board)

Drag-and-drop task board with column signals, reordering, and item movement events.

<ngxsmk-kanban-board [(columns)]="columnsSignal" (itemDropped)="onTaskMoved($event)" />

11. Masonry Grid (@ngxsmk/core/masonry-grid)

Responsive Pinterest-style multi-column layout engine for dynamic card grids.

<ngxsmk-masonry-grid [columns]="3" [gap]="'1rem'">
  @for (item of galleryItems(); track item.id) {
    <ngxsmk-card>{{ item.title }}</ngxsmk-card>
  }
</ngxsmk-masonry-grid>

12. Notification Center (@ngxsmk/core/notification-center)

Toast notification queue drawer with unread badges, action triggers, and filter tabs.

<ngxsmk-notification-center [notifications]="notifications()" (markAsRead)="onRead($event)" />

13. OTP Input (@ngxsmk/core/otp-input)

Multi-digit security code input field with auto-focus, paste parsing, and mask configuration.

<ngxsmk-otp-input [length]="6" [(value)]="verificationCode" />

14. Password Strength Meter (@ngxsmk/core/password-strength-meter)

Entropy calculator with real-time requirement checklists and color-coded progress bars.

<ngxsmk-password-strength-meter [password]="userPassword()" />

15. Prompt Input (@ngxsmk/core/prompt-input)

AI prompt composer field with auto-resize textarea, file attachments, and prompt suggestions.

<ngxsmk-prompt-input (submitPrompt)="onSend($event)" />

16. Prompt Library (@ngxsmk/core/prompt-library)

Template prompt drawer for storing, searching, and inserting AI system prompts.

<ngxsmk-prompt-library [prompts]="savedPrompts()" (selectPrompt)="insertPrompt($event)" />

17. Range Slider (@ngxsmk/core/range-slider)

Dual-thumb numeric range selector for price, date, or threshold bounds.

<ngxsmk-range-slider [(minValue)]="minPrice" [(maxValue)]="maxPrice" [min]="0" [max]="1000" />

18. Rich Text Editor (@ngxsmk/core/rich-text-editor)

WYSIWYG HTML document editor component with floating formatting toolbar.

<ngxsmk-rich-text-editor [(content)]="htmlBody" />

19. Scroll Spy (@ngxsmk/core/scroll-spy)

Intersection-observer active section navigation watcher for documentation pages.

<ngxsmk-scroll-spy [selectors]="['#intro', '#setup', '#api']" (activeChange)="setActive($event)" />

20. Sparkline (@ngxsmk/core/sparkline)

Micro SVG inline trend chart for summary cards and tabular statistics.

<ngxsmk-sparkline [data]="[12, 18, 14, 28, 35, 42]" [color]="'#16a34a'" />

21. Stat Trend Card (@ngxsmk/core/stat-trend-card)

Analytical KPI card featuring percentage changes, icon badges, and mini sparklines.

<ngxsmk-stat-trend-card [title]="'MRR'" [value]="'$48,250'" [trend]="'+14.2%'" [isPositive]="true" />

22. Timeline Stepper (@ngxsmk/core/timeline-stepper)

Vertical/horizontal step tracker with status indicators, sub-steps, and time timestamps.

<ngxsmk-timeline-stepper [steps]="workflowSteps()" />

23. Token Counter (@ngxsmk/core/token-counter)

Real-time LLM token estimator and character counter for prompt optimization.

<ngxsmk-token-counter [text]="promptText()" [model]="'gpt-4o'" />

24. Tour (@ngxsmk/core/tour)

Interactive element walkthrough popover guide with backdrop highlighting and step controls.

<ngxsmk-tour [steps]="onboardingSteps" (complete)="onFinishTour()" />

🌐 Universal Angular 17–20+ Compatibility

  • Multi-Version Toolchain: Integrated compatibility runner (verify-compat.mjs) ensuring seamless compilation under Angular 17, 18, 19, and 20+.
  • Secondary Entry Point Path Mappings: Resolved DTS generation for sub-packages (@ngxsmk/cdk/*, @ngxsmk/theme/*, @ngxsmk/core/*) when compiling partial Ivy FESM bundles.
  • Zoneless Signal Enforcement: Validated with npm run check:zoneless to guarantee no runtime imports or coupling to zone.js.

⚡ 100% Design Token Engine Overhaul

  • Dynamic Theme CSS: All styling is driven by --ngxsmk-* CSS custom properties generated by tools/scripts/generate-theme-css.ts.
  • Pre-packaged Palette CSS: Ships with ready-to-use color schemes (ngxsmk.css, ngxsmk.violet.css, ngxsmk.emerald.css, ngxsmk.rose.css, ngxsmk.neutral.css).
  • Dark Mode Support: Native :root.dark class overrides with high contrast and WCAG AA accessible color ratios.

🤖 Model Context Protocol (MCP) AI Tooling

  • STDIO MCP Server (packages/mcp): Connect your AI IDE extensions (Claude Code, Antigravity, Cursor) directly to NGXSMK tools:
    • ngxsmk_search_components: Query component APIs and code snippets by keyword.
    • ngxsmk_explain_api: Fetch detailed signal inputs/outputs for any component.
    • ngxsmk_recommend_layout: Get layout recommendations for complex SaaS and AI interfaces.
  • Claude Code Skill: Plug-and-play skill in .claude/skills/using-ngxsmk.

🛠 Breaking Changes & Enhancements

  • Kanban Board (NgxsmkKanbanItem): Changed columnId: string to columnId?: string so items passed within column item arrays do not require explicit columnId parameters.
  • Angular Template Syntax: Escaped @ character in template text (!&#64;#$) in password-strength-meter to eliminate NG5002 control flow block syntax errors on Angular 19/20.
  • Bundle Baseline Updated: Updated baseline bundle size manifest (tools/bundle-size-baseline.json) for all 246 library entry points.

📦 Upgrade & Installation Guide

Installation

npm install @ngxsmk/core@latest @ngxsmk/cdk@latest @ngxsmk/theme@latest

Theme Setup

Include the NGXSMK theme CSS in your angular.json or main stylesheet:

@import '@ngxsmk/theme/styles/ngxsmk.css';

Or generate tailored HSL variables using the CLI:

npx ngxsmk theme:css

NGXSMK 2.0.0 is licensed under the MIT License.

Assets 2
Loading