v2.9.1

.smartconfig.json

@@ -2,6 +2,17 @@
   "@git.zone/tswatch": {
     "preset": "element"
   },
+  "@git.zone/tsbundle": {
+    "bundles": [
+      {
+        "from": "./ts_web/index.ts",
+        "to": "./dist_bundle/bundle.js",
+        "outputMode": "bundle",
+        "bundler": "esbuild",
+        "production": true
+      }
+    ]
+  },
   "@git.zone/cli": {
     "projectType": "wcc",
     "module": {

changelog.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 2026-04-02 - 2.9.1 - fix(build)
+migrate build configuration to .smartconfig and update toolchain dependencies
+
+- replace npmextra.json with .smartconfig.json and add tsbundle bundle configuration
+- simplify the build script to use the centralized tsbundle configuration
+- update build and UI package dependencies and switch TypeScript to explicit node types
+
+## 2026-03-19 - 2.9.0 - feat(app-store-view)
+add app details action to store cards
+
+- adds a new "View Details" button alongside the existing deploy action
+- dispatches a bubbling "view-app" event with the selected app payload for parent handlers
+- updates card action layout and button styling to support multiple actions
+
 ## 2026-03-18 - 2.8.0 - feat(elements)
 add app store view component for browsing and deploying app templates
 

license

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Task Venture Capital GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@serve.zone/catalog",
-  "version": "2.8.0",
+  "version": "2.9.1",
   "private": false,
   "description": "UI component catalog for serve.zone",
   "main": "dist_ts_web/index.js",
@@ -8,35 +8,34 @@
   "type": "module",
   "scripts": {
     "test": "tstest test/",
-    "build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production",
+    "build": "tsbuild tsfolders --allowimplicitany && tsbundle",
     "watch": "tswatch"
   },
   "author": "Lossless GmbH",
   "license": "MIT",
   "dependencies": {
-    "@design.estate/dees-catalog": "^3.43.0",
-    "@design.estate/dees-domtools": "^2.3.8",
-    "@design.estate/dees-element": "^2.1.6",
+    "@design.estate/dees-catalog": "^3.49.2",
+    "@design.estate/dees-domtools": "^2.5.4",
+    "@design.estate/dees-element": "^2.2.4",
     "@design.estate/dees-wcctools": "^3.8.0"
   },
   "devDependencies": {
-    "@git.zone/tsbuild": "^4.1.2",
-    "@git.zone/tsbundle": "^2.8.3",
-    "@git.zone/tsrun": "^2.0.1",
-    "@git.zone/tstest": "^3.1.8",
-    "@git.zone/tswatch": "^3.1.0",
-    "@push.rocks/projectinfo": "^5.0.2",
-    "@types/node": "^25.3.0"
+    "@git.zone/tsbuild": "^4.4.0",
+    "@git.zone/tsbundle": "^2.10.0",
+    "@git.zone/tsrun": "^2.0.2",
+    "@git.zone/tstest": "^3.6.3",
+    "@git.zone/tswatch": "^3.3.2",
+    "@push.rocks/projectinfo": "^5.1.0",
+    "@types/node": "^25.5.0"
   },
   "files": [
-    "ts/**/*",
     "ts_web/**/*",
     "dist/**/*",
     "dist_*/**/*",
     "dist_ts/**/*",
     "dist_ts_web/**/*",
     "assets/**/*",
-    "npmextra.json",
+    ".smartconfig.json",
     "readme.md"
   ],
   "browserslist": [

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@serve.zone/catalog',
-  version: '2.8.0',
+  version: '2.9.1',
   description: 'UI component catalog for serve.zone'
 }

ts_web/elements/sz-app-store-view.ts

@@ -396,6 +396,34 @@ export class SzAppStoreView extends DeesElement {
         height: 14px;
       }
 
+      .details-button {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        padding: 7px 12px;
+        border-radius: 6px;
+        font-size: 13px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 200ms ease;
+        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        background: transparent;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        white-space: nowrap;
+        flex-shrink: 0;
+      }
+
+      .details-button:hover {
+        border-color: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      .card-actions {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
       .empty-state {
         grid-column: 1 / -1;
         padding: 64px 24px;
@@ -524,16 +552,21 @@ export class SzAppStoreView extends DeesElement {
         <div class="app-description">${app.description}</div>
         <div class="card-footer">
           <span class="image-tag" title="${app.image}">${app.image}</span>
-          <button class="deploy-button" @click=${() => this.handleDeploy(app)}>
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <polyline points="20 12 20 22 4 22 4 12"></polyline>
-              <rect x="2" y="7" width="20" height="5"></rect>
-              <line x1="12" y1="22" x2="12" y2="7"></line>
-              <path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"></path>
-              <path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"></path>
-            </svg>
-            Deploy
-          </button>
+          <div class="card-actions">
+            <button class="details-button" @click=${() => this.handleViewDetails(app)}>
+              View Details
+            </button>
+            <button class="deploy-button" @click=${() => this.handleDeploy(app)}>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <polyline points="20 12 20 22 4 22 4 12"></polyline>
+                <rect x="2" y="7" width="20" height="5"></rect>
+                <line x1="12" y1="22" x2="12" y2="7"></line>
+                <path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"></path>
+                <path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"></path>
+              </svg>
+              Deploy
+            </button>
+          </div>
         </div>
       </div>
     `;
@@ -556,6 +589,16 @@ export class SzAppStoreView extends DeesElement {
     return icons[name] || html`<span class="letter-fallback">?</span>`;
   }
 
+  private handleViewDetails(app: IAppTemplate) {
+    this.dispatchEvent(
+      new CustomEvent('view-app', {
+        detail: { app },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
   private handleDeploy(app: IAppTemplate) {
     this.dispatchEvent(
       new CustomEvent('deploy-app', {

ts_web/elements/sz-route-card.ts

@@ -55,12 +55,21 @@ export interface IRouteSecurity {
   rateLimit?: { enabled: boolean; maxRequests: number; window: number };
 }
 
+export interface IRouteMetadata {
+  securityProfileRef?: string;
+  networkTargetRef?: string;
+  securityProfileName?: string;
+  networkTargetName?: string;
+  lastResolvedAt?: number;
+}
+
 export interface IRouteConfig {
   id?: string;
   match: IRouteMatch;
   action: IRouteAction;
   security?: IRouteSecurity;
   headers?: { request?: Record<string, string>; response?: Record<string, string> };
+  metadata?: IRouteMetadata;
   name?: string;
   description?: string;
   priority?: number;
@@ -127,6 +136,10 @@ export class SzRouteCard extends DeesElement {
             rateLimit: { enabled: true, maxRequests: 100, window: 60 },
             maxConnections: 1000,
           },
+          metadata: {
+            securityProfileName: 'STANDARD',
+            networkTargetName: 'LOSSLESS_INFRA',
+          },
         } satisfies IRouteConfig}
       ></sz-route-card>
     </div>
@@ -296,6 +309,21 @@ export class SzRouteCard extends DeesElement {
         border-left-color: ${cssManager.bdTheme('#f59e0b', '#f59e0b')};
       }
 
+      .section.linked {
+        border-left-color: ${cssManager.bdTheme('#8b5cf6', '#8b5cf6')};
+      }
+
+      .linked-name {
+        display: inline-flex;
+        padding: 1px 6px;
+        border-radius: 3px;
+        font-size: 12px;
+        font-weight: 600;
+        font-family: monospace;
+        background: ${cssManager.bdTheme('#ede9fe', 'rgba(139, 92, 246, 0.15)')};
+        color: ${cssManager.bdTheme('#6d28d9', '#a78bfa')};
+      }
+
       .section-label {
         font-size: 10px;
         font-weight: 600;
@@ -624,6 +652,9 @@ export class SzRouteCard extends DeesElement {
             `
           : ''}
 
+        <!-- Linked References Section -->
+        ${this.renderLinked()}
+
         <!-- Feature Icons Row -->
         ${this.renderFeatures()}
       </div>
@@ -638,12 +669,43 @@ export class SzRouteCard extends DeesElement {
     )}`;
   }
 
+  private renderLinked(): TemplateResult {
+    const meta = this.route?.metadata;
+    if (!meta) return html``;
+    const hasProfile = !!meta.securityProfileName;
+    const hasTarget = !!meta.networkTargetName;
+    if (!hasProfile && !hasTarget) return html``;
+
+    return html`
+      <div class="section linked">
+        <div class="section-label">Linked</div>
+        ${hasProfile
+          ? html`
+              <div class="field-row">
+                <span class="field-key">Profile</span>
+                <span class="field-value"><span class="linked-name">${meta.securityProfileName}</span></span>
+              </div>
+            `
+          : ''}
+        ${hasTarget
+          ? html`
+              <div class="field-row">
+                <span class="field-key">Target</span>
+                <span class="field-value"><span class="linked-name">${meta.networkTargetName}</span></span>
+              </div>
+            `
+          : ''}
+      </div>
+    `;
+  }
+
   private renderFeatures(): TemplateResult {
     if (!this.route) return html``;
     const features: TemplateResult[] = [];
     const action = this.route.action;
     const security = this.route.security;
     const headers = this.route.headers;
+    const meta = this.route.metadata;
 
     if (action.tls) {
       features.push(html`<span class="feature"><span class="feature-icon">&#x1f512;</span>TLS</span>`);
@@ -660,6 +722,9 @@ export class SzRouteCard extends DeesElement {
     if (headers) {
       features.push(html`<span class="feature"><span class="feature-icon">&#x2699;</span>Headers</span>`);
     }
+    if (meta?.securityProfileName || meta?.networkTargetName) {
+      features.push(html`<span class="feature"><span class="feature-icon">&#x1f517;</span>Linked</span>`);
+    }
 
     if (features.length === 0) return html``;
     return html`<div class="features-row">${features}</div>`;

tsconfig.json

@@ -5,7 +5,7 @@
     "moduleResolution": "NodeNext",
     "esModuleInterop": true,
     "verbatimModuleSyntax": true,
-    "skipLibCheck": true
+    "types": ["node"]
   },
   "exclude": [
     "dist_*/**/*.d.ts"