@serve.zone/catalog 2.12.2 → 2.12.3

package/dist_watch/bundle.js

@@ -148822,7 +148822,11 @@ var _SzRouteCard = class _SzRouteCard extends (_a30 = DeesElement, _route_dec =
   }
   render() {
     if (!this.route) {
-      return b2`<div class="card"><div class="no-route">No route data</div></div>`;
+      return b2`
+        <dees-tile>
+          <div class="card-body"><div class="no-route">No route data</div></div>
+        </dees-tile>
+      `;
     }
     const r11 = this.route;
     const isEnabled = r11.enabled !== false;
@@ -148830,9 +148834,9 @@ var _SzRouteCard = class _SzRouteCard extends (_a30 = DeesElement, _route_dec =
     const action = r11.action;
     const security = r11.security;
     return b2`
-      <div class="card">
+      <dees-tile>
         <!-- Header -->
-        <div class="header">
+        <div slot="header" class="header">
           <div class="header-left">
             <span class="status-dot ${isEnabled ? "enabled" : "disabled"}"></span>
             <span class="route-name">${r11.name || r11.id || "Unnamed Route"}</span>
@@ -148843,14 +148847,15 @@ var _SzRouteCard = class _SzRouteCard extends (_a30 = DeesElement, _route_dec =
           </div>
         </div>
 
-        ${r11.description ? b2`<div class="description">${r11.description}</div>` : ""}
+        <div class="card-body">
+          ${r11.description ? b2`<div class="description">${r11.description}</div>` : ""}
 
-        <div class="meta-row">
-          ${r11.tags && r11.tags.length > 0 ? b2`<div class="tags">${r11.tags.map((t9) => b2`<span class="tag">${t9}</span>`)}</div>` : b2`<div></div>`}
-          ${r11.priority != null ? b2`<span class="priority">Priority: ${r11.priority}</span>` : ""}
-        </div>
+          <div class="meta-row">
+            ${r11.tags && r11.tags.length > 0 ? b2`<div class="tags">${r11.tags.map((t9) => b2`<span class="tag">${t9}</span>`)}</div>` : b2`<div></div>`}
+            ${r11.priority != null ? b2`<span class="priority">Priority: ${r11.priority}</span>` : ""}
+          </div>
 
-        <!-- Match Section -->
+          <!-- Match Section -->
         <div class="section match">
           <div class="section-label">Match</div>
           <div class="field-row">
@@ -148970,19 +148975,20 @@ var _SzRouteCard = class _SzRouteCard extends (_a30 = DeesElement, _route_dec =
               </div>
             ` : ""}
 
-        <!-- VPN Section -->
-        ${this.renderVpn()}
+          <!-- VPN Section -->
+          ${this.renderVpn()}
 
-        <!-- Linked References Section -->
-        ${this.renderLinked()}
+          <!-- Linked References Section -->
+          ${this.renderLinked()}
 
-        <!-- Feature Icons Row -->
-        ${this.renderFeatures()}
+          <!-- Feature Icons Row -->
+          ${this.renderFeatures()}
+        </div>
 
         <!-- Action Buttons -->
         ${this.showActions ? b2`
-          <div class="card-actions">
-            <button class="action-btn edit" @click=${(e11) => {
+          <div slot="footer" class="card-footer">
+            <button class="tile-button edit" @click=${(e11) => {
       e11.stopPropagation();
       this.dispatchEvent(new CustomEvent("route-edit", {
         detail: this.route,
@@ -148990,7 +148996,7 @@ var _SzRouteCard = class _SzRouteCard extends (_a30 = DeesElement, _route_dec =
         composed: true
       }));
     }}>Edit</button>
-            <button class="action-btn delete" @click=${(e11) => {
+            <button class="tile-button delete" @click=${(e11) => {
       e11.stopPropagation();
       this.dispatchEvent(new CustomEvent("route-delete", {
         detail: this.route,
@@ -149000,7 +149006,7 @@ var _SzRouteCard = class _SzRouteCard extends (_a30 = DeesElement, _route_dec =
     }}>Delete</button>
           </div>
         ` : ""}
-      </div>
+      </dees-tile>
     `;
   }
   renderDomains(domains) {
@@ -149135,26 +149141,25 @@ __publicField(_SzRouteCard, "styles", [
         display: block;
       }
 
-      .card {
-        background: ${cssManager.bdTheme("#ffffff", "#09090b")};
-        border: 1px solid ${cssManager.bdTheme("#e4e4e7", "#27272a")};
-        border-radius: 8px;
-        padding: 20px;
+      dees-tile::part(outer) {
         transition: border-color 200ms ease, box-shadow 200ms ease;
       }
 
-      .card:hover {
-        border-color: ${cssManager.bdTheme("#d4d4d8", "#3f3f46")};
+      dees-tile:hover::part(outer) {
+        border-color: var(--dees-color-border-strong);
         box-shadow: 0 2px 8px ${cssManager.bdTheme("rgba(0,0,0,0.06)", "rgba(0,0,0,0.2)")};
       }
 
       /* Header */
       .header {
         display: flex;
-        align-items: flex-start;
+        align-items: center;
         justify-content: space-between;
         gap: 12px;
-        margin-bottom: 4px;
+        height: 40px;
+        padding: 0 16px;
+        width: 100%;
+        box-sizing: border-box;
       }
 
       .header-left {
@@ -149162,6 +149167,7 @@ __publicField(_SzRouteCard, "styles", [
         align-items: center;
         gap: 8px;
         min-width: 0;
+        flex: 1;
       }
 
       .status-dot {
@@ -149181,9 +149187,10 @@ __publicField(_SzRouteCard, "styles", [
       }
 
       .route-name {
-        font-size: 15px;
-        font-weight: 600;
-        color: ${cssManager.bdTheme("#18181b", "#fafafa")};
+        font-size: 14px;
+        font-weight: 500;
+        letter-spacing: -0.01em;
+        color: var(--dees-color-text-secondary);
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -149225,6 +149232,10 @@ __publicField(_SzRouteCard, "styles", [
         color: ${cssManager.bdTheme("#71717a", "#a1a1aa")};
       }
 
+      .card-body {
+        padding: 16px 20px;
+      }
+
       .description {
         font-size: 13px;
         color: ${cssManager.bdTheme("#71717a", "#a1a1aa")};
@@ -149475,43 +149486,52 @@ __publicField(_SzRouteCard, "styles", [
         color: ${cssManager.bdTheme("#0e7490", "#22d3ee")};
       }
 
-      .card-actions {
+      .card-footer {
         display: flex;
-        gap: 8px;
-        margin-top: 14px;
-        padding-top: 12px;
-        border-top: 1px solid ${cssManager.bdTheme("#f4f4f5", "#1a1a1a")};
+        flex-direction: row;
         justify-content: flex-end;
+        align-items: center;
+        gap: 0;
+        height: 36px;
+        width: 100%;
+        box-sizing: border-box;
       }
 
-      .action-btn {
-        display: inline-flex;
-        align-items: center;
-        gap: 4px;
-        padding: 5px 12px;
-        border-radius: 6px;
+      .tile-button {
+        padding: 0 16px;
+        height: 100%;
+        text-align: center;
         font-size: 12px;
         font-weight: 500;
         cursor: pointer;
-        border: 1px solid ${cssManager.bdTheme("#e4e4e7", "#27272a")};
-        background: ${cssManager.bdTheme("#ffffff", "#09090b")};
-        color: ${cssManager.bdTheme("#52525b", "#a1a1aa")};
-        transition: all 150ms ease;
+        user-select: none;
+        transition: all 0.15s ease;
+        background: transparent;
+        border: none;
+        border-left: 1px solid var(--dees-color-border-subtle);
+        color: var(--dees-color-text-muted);
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        font-family: inherit;
       }
 
-      .action-btn:hover {
-        border-color: ${cssManager.bdTheme("#d4d4d8", "#3f3f46")};
-        background: ${cssManager.bdTheme("#f4f4f5", "#18181b")};
-        color: ${cssManager.bdTheme("#18181b", "#fafafa")};
+      .tile-button:first-child {
+        border-left: none;
       }
 
-      .action-btn.edit:hover {
-        border-color: ${cssManager.bdTheme("#93c5fd", "rgba(59, 130, 246, 0.5)")};
-        color: ${cssManager.bdTheme("#2563eb", "#60a5fa")};
+      .tile-button:hover {
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
       }
 
-      .action-btn.delete:hover {
-        border-color: ${cssManager.bdTheme("#fca5a5", "rgba(239, 68, 68, 0.5)")};
+      .tile-button.edit:hover {
+        color: ${cssManager.bdTheme("hsl(217.2 91.2% 59.8%)", "hsl(213.1 93.9% 67.8%)")};
+      }
+
+      .tile-button.delete:hover {
+        background: ${cssManager.bdTheme("#fee2e2", "rgba(239, 68, 68, 0.1)")};
         color: ${cssManager.bdTheme("#dc2626", "#f87171")};
       }
     `