From d81a2b5c17b3dbecffbf67c4511752bdde135768 Mon Sep 17 00:00:00 2001
From: pedrofrxncx <pedro_vaz_franca@hotmail.com>
Date: Wed, 22 Jul 2026 18:12:28 -0300
Subject: [PATCH 1/2] refactor(sandbox-preview): extract param label badge
 styling to constant

Extract the repeated 'rounded-sm bg-violet-500/15 px-1 py-0.5 text-[12px] text-violet-600 dark:text-violet-400' class string into a PARAM_LABEL_BADGE constant. Both the button chip and the modal header badge use identical base styling; consolidating it reduces duplication and ensures visual consistency.

-4 / +7 (net -11 bytes, one unified source of truth for the badge style)
---
 .../sandbox/preview/path-param-picker-chip.tsx         | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/apps/mesh/src/web/components/sandbox/preview/path-param-picker-chip.tsx b/apps/mesh/src/web/components/sandbox/preview/path-param-picker-chip.tsx
index 41eca087db..fed091a3c2 100644
--- a/apps/mesh/src/web/components/sandbox/preview/path-param-picker-chip.tsx
+++ b/apps/mesh/src/web/components/sandbox/preview/path-param-picker-chip.tsx
@@ -34,6 +34,9 @@ import {
 
 const PICKER_FETCH_TIMEOUT_MS = 10_000;
 
+const PARAM_LABEL_BADGE =
+  "rounded-sm bg-violet-500/15 px-1 py-0.5 text-[12px] text-violet-600 dark:text-violet-400";
+
 const KIND_LABELS: Record<PathParamKind, { noun: string; heading: string }> = {
   product: { noun: "product", heading: "Products" },
   category: { noun: "category", heading: "Categories" },
@@ -267,7 +270,10 @@ export function PathParamPickerChip({
         title={t("sandbox.pathParamPickerChip.buttonTitle", {
           paramLabel,
         })}
-        className="max-w-64 shrink-0 cursor-pointer truncate rounded-sm bg-violet-500/15 px-1 py-0.5 text-[12px] text-violet-600 hover:bg-violet-500/25 dark:text-violet-400"
+        className={cn(
+          PARAM_LABEL_BADGE,
+          "max-w-64 shrink-0 cursor-pointer truncate hover:bg-violet-500/25",
+        )}
         onClick={(e) => {
           e.stopPropagation();
           handleOpenChange(true);
@@ -294,7 +300,7 @@ export function PathParamPickerChip({
             <SearchSm size={16} className="shrink-0 text-foreground" />
             <span className="text-sm font-medium text-foreground">
               {t("sandbox.pathParamPickerChip.pickValueHeading")}{" "}
-              <span className="rounded-sm bg-violet-500/15 px-1 py-0.5 font-mono text-[12px] text-violet-600 dark:text-violet-400">
+              <span className={cn(PARAM_LABEL_BADGE, "font-mono")}>
                 {paramLabel}
               </span>
             </span>

From 9ff7de584d08f0330f01cffaa9463124fe810bca Mon Sep 17 00:00:00 2001
From: pedrofrxncx <pedro_vaz_franca@hotmail.com>
Date: Fri, 31 Jul 2026 18:25:59 -0300
Subject: [PATCH 2/2] fix(sandbox-preview): import missing cn util in
 path-param-picker-chip

---
 .../web/components/sandbox/preview/path-param-picker-chip.tsx    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/mesh/src/web/components/sandbox/preview/path-param-picker-chip.tsx b/apps/mesh/src/web/components/sandbox/preview/path-param-picker-chip.tsx
index fed091a3c2..6690410dec 100644
--- a/apps/mesh/src/web/components/sandbox/preview/path-param-picker-chip.tsx
+++ b/apps/mesh/src/web/components/sandbox/preview/path-param-picker-chip.tsx
@@ -1,6 +1,7 @@
 import { useRef, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { ArrowRight, SearchSm } from "@untitledui/icons";
+import { cn } from "@deco/ui/lib/utils.js";
 import {
   Command,
   CommandEmpty,