Jules: Pill Badge Gradient Sweep Enhancement

.Jules/jules.md

@@ -27,3 +27,9 @@
 - [Insight 1: When release notes contain bullet points that are all filtered out as internal, falling back to raw body transformation leaks un-bulleted internal titles to visitor views.]
 - [Insight 2: Sharing `INTERNAL_CHANGELOG_ITEM` between `visitor-changelog.ts` and `whats-new-glance.ts` guarantees consistent agent name and test-only filtering across both executive glance and full release body rendering.]
 - [Delta: ~25 lines. Guardrails: All unit tests passed.]
+
+## 2026-08-27 - Pill Badge Gradient Sweep | Signal: Technical/Competitive | Lean Implementation: Flagged CSS Sweep + Reduced Motion Fallback
+
+- [Insight 1: Animating background-position (100% 50%) along with subtle translateY hover elevation on gradient pill badges enhances interactive affordance without CLS or JS runtime cost.]
+- [Insight 2: Scoping visual sweeps behind `enable_pill_sweep_v1` feature flag and `prefers-reduced-motion` ensures strict accessibility and feature flag isolation.]
+- [Delta: 25 lines. Guardrails: All passed autonomously.]

src/__tests__/content.config.test.ts

@@ -28,7 +28,9 @@
   });
 
   it('validates flags fixture against schema', async () => {
-    const { schema } = collections.flags;
+    const rawSchema = collections.flags.schema;
+    const schema =
+      typeof rawSchema === 'function' ? rawSchema({ image: () => z.string() } as any) : rawSchema;
     const result = schema.safeParse(flagsFixture);
     expect(result.success).toBe(true);
 
@@ -40,7 +42,9 @@
   });
 
   it('validates work schema with sample data', () => {
-    const { schema } = collections.work;
+    const rawSchema = collections.work.schema;
+    const schema =
+      typeof rawSchema === 'function' ? rawSchema({ image: () => z.string() } as any) : rawSchema;
     const sampleWork = {
       title: 'Sample Work',
       description: 'A sample description',

src/components/Pill.astro

@@ -1,4 +1,11 @@
-<div class="pill"><slot /></div>
+---
+import { getEntry } from 'astro:content';
+
+const flagsEntry = await getEntry('flags', 'config');
+const isSweepEnabled = flagsEntry?.data.enable_pill_sweep_v1 ?? false;
+---
+
+<div class={`pill ${isSweepEnabled ? 'sweep' : ''}`}><slot /></div>
 
 <style>
   .pill {
@@ -24,4 +31,31 @@
     background-position: 0% 50%;
     box-shadow: var(--shadow-sm);
   }
+
+  .pill.sweep {
+    transition:
+      background-position 0.4s ease,
+      transform 0.3s ease,
+      box-shadow 0.3s ease;
+  }
+
+  .pill.sweep:hover {
+    background-position: 100% 50%;
+    transform: translateY(-2px);
+    box-shadow:
+      0 6px 16px -2px hsla(210, 100%, 45%, 0.4),
+      var(--shadow-md);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .pill.sweep {
+      transition: none;
+    }
+
+    .pill.sweep:hover {
+      transform: none;
+      background-position: 0% 50%;
+      box-shadow: var(--shadow-sm);
+    }
+  }
 </style>

src/content.config.ts

@@ -29,6 +29,7 @@ export const collections = {
       enable_logo_wobble_v1: z.boolean().default(false),
       enable_cta_tactile_v1: z.boolean().default(false),
       enable_theme_toggle_tactile_v1: z.boolean().default(false),
+      enable_pill_sweep_v1: z.boolean().default(false),
     }),
   }),
 };

src/content/flags/config.json

@@ -7,5 +7,6 @@
   "enable_reading_list": true,
   "enable_logo_wobble_v1": true,
   "enable_cta_tactile_v1": true,
-  "enable_theme_toggle_tactile_v1": true
+  "enable_theme_toggle_tactile_v1": true,
+  "enable_pill_sweep_v1": true
 }