@jay-framework/design-system-validator 0.22.0 → 0.22.2

package/dist/index.js

@@ -1106,13 +1106,16 @@ function buildColorItems(tokens, category) {
     category,
     subCategory: "Colors",
     prompt: `Use color token "${name}" with value ${value} from DESIGN.md.`,
-    html: `<div style="display:flex;align-items:center;gap:10px;font-family:sans-serif;">
+    presentation: {
+      type: "html-fragment",
+      html: `<div style="display:flex;align-items:center;gap:10px;font-family:sans-serif;">
   <div style="width:40px;height:40px;border-radius:6px;background:${esc(value)};border:1px solid rgba(0,0,0,0.1);flex-shrink:0;"></div>
   <div>
     <div style="font-size:13px;font-weight:600;">${esc(name)}</div>
     <div style="font-size:11px;color:#888;font-family:monospace;">${esc(value)}</div>
   </div>
 </div>`
+    }
   }));
 }
 function buildTypographyItems(tokens, category) {
@@ -1146,10 +1149,13 @@ function buildTypographyItems(tokens, category) {
       category,
       subCategory: "Typography",
       prompt: `Apply typography preset "${name}" from DESIGN.md: ${desc}.`,
-      html: `<div style="font-family:sans-serif;">
+      presentation: {
+        type: "html-fragment",
+        html: `<div style="font-family:sans-serif;">
   <div style="${styles.join(";")};margin:0;">The quick brown fox</div>
   <div style="font-size:10px;color:#888;margin-top:6px;font-family:monospace;">${esc(name)}: ${esc(desc)}</div>
 </div>`
+      }
     };
   });
 }
@@ -1160,7 +1166,9 @@ function buildSpacingItems(tokens, category) {
     category,
     subCategory: "Spacing",
     prompt: `Use spacing token "${name}" with value ${value} from DESIGN.md for padding, margin, or gap.`,
-    html: `<div style="display:flex;align-items:center;gap:8px;font-family:sans-serif;">
+    presentation: {
+      type: "html-fragment",
+      html: `<div style="display:flex;align-items:center;gap:8px;font-family:sans-serif;">
   <div style="display:flex;align-items:center;gap:0;">
     <div style="width:16px;height:24px;background:#cbd5e1;border-radius:2px 0 0 2px;"></div>
     <div style="width:${esc(value)};height:24px;background:repeating-linear-gradient(45deg,#e0f2fe,#e0f2fe 2px,#bae6fd 2px,#bae6fd 4px);"></div>
@@ -1171,6 +1179,7 @@ function buildSpacingItems(tokens, category) {
     <span style="font-size:11px;color:#888;font-family:monospace;margin-left:4px;">${esc(value)}</span>
   </div>
 </div>`
+    }
   }));
 }
 function buildRoundedItems(tokens, category) {
@@ -1180,13 +1189,16 @@ function buildRoundedItems(tokens, category) {
     category,
     subCategory: "Rounded",
     prompt: `Use border-radius token "${name}" with value ${value} from DESIGN.md.`,
-    html: `<div style="display:flex;align-items:center;gap:10px;font-family:sans-serif;">
+    presentation: {
+      type: "html-fragment",
+      html: `<div style="display:flex;align-items:center;gap:10px;font-family:sans-serif;">
   <div style="width:40px;height:40px;border-radius:${esc(value)};background:#e2e8f0;border:1.5px solid #94a3b8;flex-shrink:0;"></div>
   <div>
     <div style="font-size:12px;font-weight:600;">${esc(name)}</div>
     <div style="font-size:11px;color:#888;font-family:monospace;">${esc(value)}</div>
   </div>
 </div>`
+    }
   }));
 }
 function buildBreakpointItems(tokens, category) {
@@ -1214,7 +1226,9 @@ function buildAnimationItems(tokens, category) {
       category,
       subCategory: "Animations",
       prompt: `Use animation preset "${name}" from DESIGN.md: ${desc}. Apply to transition-duration and transition-timing-function.`,
-      html: `<div style="font-family:sans-serif;">
+      presentation: {
+        type: "html-fragment",
+        html: `<div style="font-family:sans-serif;">
   <style>
     @scope {
       .anim-preview { width:40px;height:40px;border-radius:6px;background:#8b5cf6;transition:transform ${esc(dur)} ${esc(ease)};cursor:pointer; }
@@ -1230,6 +1244,7 @@ function buildAnimationItems(tokens, category) {
     </div>
   </div>
 </div>`
+      }
     };
   });
 }
@@ -1264,10 +1279,13 @@ function buildComponentItems(tokens, category) {
       category,
       subCategory: "Components",
       prompt: `Apply the "${name}" component spec from DESIGN.md. Required styles: ${props}. The design-system validator will flag mismatches.`,
-      html: `<div style="font-family:sans-serif;">
+      presentation: {
+        type: "html-fragment",
+        html: `<div style="font-family:sans-serif;">
   <div style="${previewStyles.join(";")};display:inline-block;font-size:13px;min-width:80px;text-align:center;">${esc(name)}</div>
   <div style="font-size:10px;color:#888;margin-top:6px;font-family:monospace;">${esc(props)}</div>
 </div>`
+      }
     };
   });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jay-framework/design-system-validator",
-  "version": "0.22.0",
+  "version": "0.22.2",
   "type": "module",
   "description": "Design system validation plugin for Jay Framework — validates jay-html CSS against DESIGN.md tokens",
   "license": "Apache-2.0",
@@ -26,15 +26,15 @@
   },
   "dependencies": {
     "@csstools/selector-specificity": "^5.0.0",
-    "@jay-framework/compiler-shared": "^0.22.0",
-    "@jay-framework/stack-server-runtime": "^0.22.0",
+    "@jay-framework/compiler-shared": "^0.22.2",
+    "@jay-framework/stack-server-runtime": "^0.22.2",
     "js-yaml": "^4.1.0",
     "postcss": "^8.5.6",
     "postcss-selector-parser": "^7.1.0"
   },
   "devDependencies": {
-    "@jay-framework/dev-environment": "^0.22.0",
-    "@jay-framework/jay-stack-cli": "^0.22.0",
+    "@jay-framework/dev-environment": "^0.22.2",
+    "@jay-framework/jay-stack-cli": "^0.22.2",
     "@types/js-yaml": "^4.0.9",
     "@types/node": "^22.15.21",
     "node-html-parser": "^6.1.0",