From 7738176e672ebca3307b57a556e3d72cb3eaf0b8 Mon Sep 17 00:00:00 2001
From: Kevin Brown <19914133+KB-x@users.noreply.github.com>
Date: Wed, 30 Sep 2026 11:08:18 -0500
Subject: [PATCH] fix(portal): show variant Pair with requirements

Render variant requirements alongside fixed-path dependencies so snippets with device-selected forms retain their Pair with section.

- Add variantRequires to the portal snippet type.
- Display each required variant group and its families as a device-selected form.

No snippet headers, configuration bodies, or catalog data change.
---
 portal/src/components/SnipLibrary.tsx | 13 ++++++++++++-
 portal/src/lib/snips.ts               |  1 +
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/portal/src/components/SnipLibrary.tsx b/portal/src/components/SnipLibrary.tsx
index 2bc42bda..ce0db0ed 100644
--- a/portal/src/components/SnipLibrary.tsx
+++ b/portal/src/components/SnipLibrary.tsx
@@ -539,7 +539,7 @@ function SnipDetail({
           </Section>
         )}
 
-        {snip.pairWith.length > 0 && (
+        {(snip.pairWith.length > 0 || (snip.variantRequires?.length ?? 0) > 0) && (
           <Section title="Pair with">
             <ul className="space-y-1.5 text-sm">
               {snip.pairWith.map((p, i) => {
@@ -571,6 +571,17 @@ function SnipDetail({
                   </li>
                 );
               })}
+              {snip.variantRequires?.map((requirement) => (
+                <li key={`variant-${requirement.group}`} className="break-words">
+                  <span className="font-mono text-[12px]">{requirement.group}</span>
+                  <span className="ml-2 text-[11px] text-muted-foreground">Device-selected form</span>
+                  {requirement.families.length > 0 && (
+                    <div className="mt-0.5 pl-3 text-[12px] leading-snug text-muted-foreground">
+                      Required families: {requirement.families.join(", ")}
+                    </div>
+                  )}
+                </li>
+              ))}
             </ul>
           </Section>
         )}
diff --git a/portal/src/lib/snips.ts b/portal/src/lib/snips.ts
index b11d2f7f..7f6f4850 100644
--- a/portal/src/lib/snips.ts
+++ b/portal/src/lib/snips.ts
@@ -31,6 +31,7 @@ export type SnipRecord = {
     | { state: "none" | "not-applicable" };
   highlights: string[];
   pairWith: SnipPairRef[];
+  variantRequires?: { group: string; families: string[] }[];
   variables: SnipVariable[];
   jvdServiceMapping: string[];
   body: string;