v2.6.0

changelog.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 2026-03-16 - 2.6.0 - feat(service-create-view)
+add platform service toggles for MongoDB, S3, and ClickHouse provisioning
+
+- Adds a new Platform Services section to the service creation view with dedicated toggles for managed infrastructure dependencies.
+- Includes MongoDB, S3-compatible storage, and ClickHouse selections in the emitted create-service configuration payload.
+- Resets selected platform services after form submission to keep create flow state consistent.
+
+## 2026-02-23 - 2.5.0 - feat(sz-config-section)
+add header action buttons to sz-config-section allowing configurable actions/events
+
+- Introduce IConfigSectionAction interface (label, icon, event, detail).
+- Add actions property to SzConfigSection and render header action buttons in the component template.
+- Add styles for .header-action and hover state to match design system.
+- Dispatch CustomEvent when an action is clicked, using action.event (defaults to 'action') and action.detail.
+- Update demo (sz-demo-view-config) to include a sample 'View Routes' action showing usage.
+
 ## 2026-02-23 - 2.4.0 - feat(elements)
 add configuration overview and section components with demo view and index exports
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@serve.zone/catalog",
-  "version": "2.4.0",
+  "version": "2.6.0",
   "private": false,
   "description": "UI component catalog for serve.zone",
   "main": "dist_ts_web/index.js",

ts_web/00_commitinfo_data.ts

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

ts_web/elements/sz-config-section.ts

@@ -17,6 +17,13 @@ export interface IConfigField {
   linkTo?: string;
 }
 
+export interface IConfigSectionAction {
+  label: string;
+  icon?: string;
+  event?: string;
+  detail?: any;
+}
+
 declare global {
   interface HTMLElementTagNameMap {
     'sz-config-section': SzConfigSection;
@@ -81,6 +88,9 @@ export class SzConfigSection extends DeesElement {
   @property({ type: Array })
   public accessor fields: IConfigField[] = [];
 
+  @property({ type: Array })
+  public accessor actions: IConfigSectionAction[] = [];
+
   @property({ type: Boolean })
   public accessor collapsible: boolean = false;
 
@@ -226,6 +236,32 @@ export class SzConfigSection extends DeesElement {
         background: ${cssManager.bdTheme('#f59e0b', '#fbbf24')};
       }
 
+      /* Action buttons */
+      .header-action {
+        display: inline-flex;
+        align-items: center;
+        gap: 5px;
+        padding: 4px 12px;
+        border-radius: 6px;
+        font-size: 12px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        transition: background 150ms ease;
+        white-space: nowrap;
+        font-family: inherit;
+      }
+
+      .header-action:hover {
+        background: ${cssManager.bdTheme('rgba(37,99,235,0.08)', 'rgba(96,165,250,0.1)')};
+      }
+
+      .header-action dees-icon {
+        font-size: 14px;
+      }
+
       /* Chevron */
       .chevron {
         display: flex;
@@ -439,6 +475,19 @@ export class SzConfigSection extends DeesElement {
                 ${statusLabels[this.status] || this.status}
               </span>
             ` : ''}
+            ${this.actions.map(action => html`
+              <button class="header-action" @click=${(e: Event) => {
+                e.stopPropagation();
+                this.dispatchEvent(new CustomEvent(action.event || 'action', {
+                  detail: action.detail || { label: action.label },
+                  bubbles: true,
+                  composed: true,
+                }));
+              }}>
+                ${action.icon ? html`<dees-icon .icon=${action.icon}></dees-icon>` : ''}
+                ${action.label}
+              </button>
+            `)}
             ${this.collapsible ? html`
               <span class="chevron ${this.isCollapsed ? 'collapsed' : ''}">
                 <dees-icon .icon=${'lucide:chevronDown'}></dees-icon>

ts_web/elements/sz-demo-view-config.ts

@@ -6,7 +6,7 @@ import {
   cssManager,
   type TemplateResult,
 } from '@design.estate/dees-element';
-import type { IConfigField } from './sz-config-section.js';
+import type { IConfigField, IConfigSectionAction } from './sz-config-section.js';
 import './index.js';
 
 declare global {
@@ -109,6 +109,7 @@ export class SzDemoViewConfig extends DeesElement {
           icon="lucide:network"
           status="enabled"
           .fields=${proxyFields}
+          .actions=${[{ label: 'View Routes', icon: 'lucide:arrow-right', event: 'navigate', detail: { view: 'routes' } }] as IConfigSectionAction[]}
         ></sz-config-section>
 
         <sz-config-section

ts_web/elements/sz-service-create-view.ts

@@ -48,6 +48,9 @@ export interface IServiceConfig {
   memoryLimit: string;
   restartPolicy: 'always' | 'on-failure' | 'never';
   networkMode: string;
+  enableMongoDB: boolean;
+  enableS3: boolean;
+  enableClickHouse: boolean;
 }
 
 @customElement('sz-service-create-view')
@@ -104,6 +107,15 @@ export class SzServiceCreateView extends DeesElement {
   @state()
   private accessor showAdvanced: boolean = false;
 
+  @state()
+  private accessor enableMongoDB: boolean = false;
+
+  @state()
+  private accessor enableS3: boolean = false;
+
+  @state()
+  private accessor enableClickHouse: boolean = false;
+
   public static styles = [
     cssManager.defaultStyles,
     css`
@@ -312,6 +324,105 @@ export class SzServiceCreateView extends DeesElement {
         accent-color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
       }
 
+      .platform-toggle-list {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+
+      .platform-toggle-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 12px 16px;
+        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+        border-radius: 8px;
+        transition: background 200ms ease;
+      }
+
+      .platform-toggle-item:has(input:checked) {
+        background: ${cssManager.bdTheme('#eff6ff', 'rgba(59, 130, 246, 0.1)')};
+      }
+
+      .platform-toggle-info {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+
+      .platform-toggle-icon {
+        width: 36px;
+        height: 36px;
+        border-radius: 8px;
+        background: ${cssManager.bdTheme('#ffffff', '#27272a')};
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .platform-toggle-icon svg {
+        width: 20px;
+        height: 20px;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      .platform-toggle-name {
+        font-size: 14px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      .platform-toggle-desc {
+        font-size: 12px;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        margin-top: 2px;
+      }
+
+      .toggle-switch {
+        position: relative;
+        width: 44px;
+        height: 24px;
+        flex-shrink: 0;
+      }
+
+      .toggle-switch input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+      }
+
+      .toggle-slider {
+        position: absolute;
+        cursor: pointer;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
+        border-radius: 12px;
+        transition: background 200ms ease;
+      }
+
+      .toggle-slider::before {
+        content: '';
+        position: absolute;
+        height: 18px;
+        width: 18px;
+        left: 3px;
+        bottom: 3px;
+        background: white;
+        border-radius: 50%;
+        transition: transform 200ms ease;
+      }
+
+      .toggle-switch input:checked + .toggle-slider {
+        background: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
+      }
+
+      .toggle-switch input:checked + .toggle-slider::before {
+        transform: translateX(20px);
+      }
+
       .actions {
         display: flex;
         justify-content: flex-end;
@@ -536,6 +647,81 @@ export class SzServiceCreateView extends DeesElement {
         </button>
       </div>
 
+      <!-- Platform Services -->
+      <div class="section">
+        <div class="section-title">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect>
+            <rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect>
+            <line x1="6" y1="6" x2="6.01" y2="6"></line>
+            <line x1="6" y1="18" x2="6.01" y2="18"></line>
+          </svg>
+          Platform Services
+        </div>
+        <div class="form-hint" style="margin-bottom: 12px;">
+          Enable managed infrastructure services for this deployment. Resources are automatically provisioned and connection details injected as environment variables.
+        </div>
+        <div class="platform-toggle-list">
+          <label class="platform-toggle-item">
+            <div class="platform-toggle-info">
+              <div class="platform-toggle-icon">
+                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
+              </div>
+              <div>
+                <div class="platform-toggle-name">MongoDB</div>
+                <div class="platform-toggle-desc">Document database with auto-provisioned credentials</div>
+              </div>
+            </div>
+            <div class="toggle-switch">
+              <input
+                type="checkbox"
+                ?checked=${this.enableMongoDB}
+                @change=${(e: Event) => this.enableMongoDB = (e.target as HTMLInputElement).checked}
+              >
+              <span class="toggle-slider"></span>
+            </div>
+          </label>
+          <label class="platform-toggle-item">
+            <div class="platform-toggle-info">
+              <div class="platform-toggle-icon">
+                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M21 16.5c0 .38-.21.71-.53.88l-7.9 4.44c-.16.12-.36.18-.57.18-.21 0-.41-.06-.57-.18l-7.9-4.44A.991.991 0 0 1 3 16.5v-9c0-.38.21-.71.53-.88l7.9-4.44c.16-.12.36-.18.57-.18.21 0 .41.06.57.18l7.9 4.44c.32.17.53.5.53.88v9z"/></svg>
+              </div>
+              <div>
+                <div class="platform-toggle-name">S3 Storage (MinIO)</div>
+                <div class="platform-toggle-desc">Object storage bucket with auto-provisioned access keys</div>
+              </div>
+            </div>
+            <div class="toggle-switch">
+              <input
+                type="checkbox"
+                ?checked=${this.enableS3}
+                @change=${(e: Event) => this.enableS3 = (e.target as HTMLInputElement).checked}
+              >
+              <span class="toggle-slider"></span>
+            </div>
+          </label>
+          <label class="platform-toggle-item">
+            <div class="platform-toggle-info">
+              <div class="platform-toggle-icon">
+                <svg viewBox="0 0 24 24" fill="currentColor"><rect x="2" y="2" width="6" height="20"/><rect x="9" y="7" width="6" height="15"/><rect x="16" y="12" width="6" height="10"/></svg>
+              </div>
+              <div>
+                <div class="platform-toggle-name">ClickHouse</div>
+                <div class="platform-toggle-desc">Analytics database with auto-provisioned credentials</div>
+              </div>
+            </div>
+            <div class="toggle-switch">
+              <input
+                type="checkbox"
+                ?checked=${this.enableClickHouse}
+                @change=${(e: Event) => this.enableClickHouse = (e.target as HTMLInputElement).checked}
+              >
+              <span class="toggle-slider"></span>
+            </div>
+          </label>
+        </div>
+      </div>
+
       <!-- Advanced Options Toggle -->
       <button
         class="toggle-advanced ${this.showAdvanced ? 'open' : ''}"
@@ -750,6 +936,9 @@ export class SzServiceCreateView extends DeesElement {
       memoryLimit: this.memoryLimit,
       restartPolicy: this.restartPolicy,
       networkMode: this.networkMode,
+      enableMongoDB: this.enableMongoDB,
+      enableS3: this.enableS3,
+      enableClickHouse: this.enableClickHouse,
     };
 
     this.dispatchEvent(new CustomEvent('create-service', {
@@ -771,5 +960,8 @@ export class SzServiceCreateView extends DeesElement {
     this.restartPolicy = 'always';
     this.networkMode = 'bridge';
     this.showAdvanced = false;
+    this.enableMongoDB = false;
+    this.enableS3 = false;
+    this.enableClickHouse = false;
   }
 }