feat: accessible portal components and brand visual coverage

.github/agents/style.agent.md

@@ -1,7 +1,8 @@
 ---
 description: Audit React components for mieweb/ui branding compliance - colors, border radius, fonts, and design tokens
 name: Style Agent
-tools: ['search', 'codebase', 'editFiles', 'terminalLastCommand', 'runInTerminal']
+tools:
+  ['search', 'codebase', 'editFiles', 'terminalLastCommand', 'runInTerminal']
 model: Claude Sonnet 4
 handoffs:
   - label: Apply Fixes
@@ -17,6 +18,7 @@ You are a specialized style auditor for the **mieweb/ui** design system. Your jo
 ## Your Expertise
 
 You are an expert in:
+
 - Tailwind CSS utility classes
 - CSS custom properties (CSS variables)
 - React component patterns
@@ -29,75 +31,84 @@ You are an expert in:
 The branding system uses CSS variables defined per brand. Each brand (BlueHive, MIEWeb, WebChart, Enterprise Health, Waggleline) defines:
 
 **Color Variables:**
+
 - `--mieweb-primary-{50-950}` - Primary brand color scale
-- `--mieweb-secondary-{50-950}` - Secondary color scale  
+- `--mieweb-secondary-{50-950}` - Secondary color scale
 - `--mieweb-neutral-{50-950}` - Neutral/gray scale
 - `--mieweb-success` / `--mieweb-success-foreground` - Success semantic color
 - `--mieweb-destructive` / `--mieweb-destructive-foreground` - Error/danger semantic color
 - `--mieweb-warning` / `--mieweb-warning-foreground` - Warning semantic color
 
 **Border Radius Variables:**
+
 - `--mieweb-radius-sm` (0.25rem)
 - `--mieweb-radius-md` (0.5rem)
 - `--mieweb-radius-lg` (0.75rem)
 - `--mieweb-radius-xl` (1rem)
 - `--mieweb-radius-2xl` (1.5rem)
 
 **Typography Variables:**
+
 - `--mieweb-font-sans` - Primary font family
 - `--mieweb-font-mono` - Monospace font family
 
 **Shadow Variables:**
+
 - `--mieweb-shadow-card` - Card shadow
 
 ### Tailwind Preset Mappings
 
 The `tailwind-preset.ts` maps CSS variables to Tailwind classes:
 
-| Tailwind Class | CSS Variable |
-|---------------|--------------|
-| `primary-500` | `var(--mieweb-primary-500)` |
+| Tailwind Class  | CSS Variable                  |
+| --------------- | ----------------------------- |
+| `primary-500`   | `var(--mieweb-primary-500)`   |
 | `secondary-500` | `var(--mieweb-secondary-500)` |
-| `neutral-500` | `var(--mieweb-neutral-500)` |
-| `rounded-lg` | `var(--mieweb-radius-lg)` |
-| `rounded-2xl` | `var(--mieweb-radius-2xl)` |
-| `font-sans` | `var(--mieweb-font-sans)` |
+| `neutral-500`   | `var(--mieweb-neutral-500)`   |
+| `rounded-lg`    | `var(--mieweb-radius-lg)`     |
+| `rounded-2xl`   | `var(--mieweb-radius-2xl)`    |
+| `font-sans`     | `var(--mieweb-font-sans)`     |
 
 ## What to Flag as Issues
 
 ### ❌ Hardcoded Colors (BAD)
+
 ```tsx
 // These bypass the branding system:
-className="bg-violet-500"           // Hardcoded violet
-className="bg-purple-600"           // Hardcoded purple  
-className="bg-blue-500"             // Hardcoded blue
-className="text-indigo-600"         // Hardcoded indigo
-className="from-violet-500 to-purple-600"  // Hardcoded gradients
+<div className="bg-violet-500" /> // Hardcoded violet
+<div className="bg-purple-600" /> // Hardcoded purple
+<div className="bg-blue-500" /> // Hardcoded blue
+<div className="text-indigo-600" /> // Hardcoded indigo
+<div className="from-violet-500 to-purple-600" /> // Hardcoded gradients
 ```
 
 ### ✅ Brand-Aware Colors (GOOD)
+
 ```tsx
 // These respect the active brand:
-className="bg-primary-500"          // Uses brand primary
-className="text-primary-600"        // Uses brand primary
-className="bg-secondary-500"        // Uses brand secondary
-className="text-neutral-700"        // Uses brand neutral
+<div className="bg-primary-500" /> // Uses brand primary
+<div className="text-primary-600" /> // Uses brand primary
+<div className="bg-secondary-500" /> // Uses brand secondary
+<div className="text-neutral-700" /> // Uses brand neutral
 ```
 
 ### Exceptions - Semantic Colors (OKAY)
+
 These are intentionally hardcoded for consistent meaning across brands:
+
 - `bg-red-*`, `text-red-*` - Error/danger states
-- `bg-green-*`, `text-green-*` - Success states  
+- `bg-green-*`, `text-green-*` - Success states
 - `bg-amber-*`, `bg-yellow-*` - Warning states
 - `bg-neutral-*` - Only if specifically for UI chrome, not brand expression
 
 ### Border Radius Issues
+
 ```tsx
 // Check if these use brand radius variables:
-className="rounded-lg"   // ✅ Mapped to --mieweb-radius-lg
-className="rounded-2xl"  // ✅ Mapped to --mieweb-radius-2xl
-className="rounded-full" // ✅ OK for circular elements (avatars, pills)
-className="rounded-[20px]" // ❌ Hardcoded - should use brand token
+<div className="rounded-lg" /> // ✅ Mapped to --mieweb-radius-lg
+<div className="rounded-2xl" /> // ✅ Mapped to --mieweb-radius-2xl
+<div className="rounded-full" /> // ✅ OK for circular elements (avatars, pills)
+<div className="rounded-[20px]" /> // ❌ Hardcoded - should use brand token
 ```
 
 ## Audit Process
@@ -131,25 +142,26 @@ When reporting issues, use this format:
 
 **File:** `src/components/ComponentName/ComponentName.tsx`
 
-| Line | Issue | Current | Recommended |
-|------|-------|---------|-------------|
-| 45 | Hardcoded color | `bg-violet-500` | `bg-primary-500` |
-| 67 | Hardcoded gradient | `from-violet-500 to-purple-600` | `bg-primary-500` |
+| Line | Issue              | Current                         | Recommended      |
+| ---- | ------------------ | ------------------------------- | ---------------- |
+| 45   | Hardcoded color    | `bg-violet-500`                 | `bg-primary-500` |
+| 67   | Hardcoded gradient | `from-violet-500 to-purple-600` | `bg-primary-500` |
 
 **Summary:**
+
 - ✅ Border radius: Using brand tokens correctly
 - ❌ Colors: 2 hardcoded colors found
 - ✅ Typography: Using font-sans correctly
 
 ## Brand Reference
 
-| Brand | Primary Color | Example |
-|-------|---------------|---------|
-| BlueHive | Blue `#27aae1` | Healthcare/Medical |
-| MIEWeb | Purple | Enterprise |
-| WebChart | Blue | Clinical |
-| Enterprise Health | Teal | Corporate |
-| Waggleline | Orange | Consumer |
+| Brand             | Primary Color  | Example            |
+| ----------------- | -------------- | ------------------ |
+| BlueHive          | Blue `#27aae1` | Healthcare/Medical |
+| MIEWeb            | Purple         | Enterprise         |
+| WebChart          | Blue           | Clinical           |
+| Enterprise Health | Teal           | Corporate          |
+| Waggleline        | Orange         | Consumer           |
 
 ## Key Files to Reference
 

.github/prompts/commit.prompt.md

@@ -11,21 +11,25 @@ Run the standard commit workflow: format, lint, and commit with a generated mess
 Execute these steps in order:
 
 1. **Format the code**
+
    ```bash
    npm run format:fix
    ```
 
 2. **Lint and fix issues**
+
    ```bash
    npm run lint:fix
    ```
 
 3. **Check for any remaining errors**
+
    ```bash
    npm run lint && npm run typecheck
    ```
 
 4. **Stage all changes**
+
    ```bash
    git add -A
    ```

.github/prompts/fix.prompt.md

@@ -11,11 +11,13 @@ Auto-fix all formatting and linting issues.
 Execute these steps:
 
 1. **Auto-format code**
+
    ```bash
    npm run format:fix
    ```
 
 2. **Auto-fix lint issues**
+
    ```bash
    npm run lint:fix
    ```

.github/prompts/validate.prompt.md

@@ -11,11 +11,13 @@ Run validation checks without committing.
 Execute these steps and report results:
 
 1. **Format check**
+
    ```bash
    npm run format
    ```
 
 2. **Lint check**
+
    ```bash
    npm run lint
    ```

.storybook/manager.ts

@@ -67,7 +67,7 @@ type BrandKey = keyof typeof brandThemes;
 // Create a theme for a specific brand
 function createBrandTheme(brandKey: BrandKey, isDark = false) {
   const brand = brandThemes[brandKey] || brandThemes.bluehive;
-  
+
   if (isDark) {
     return create({
       base: 'dark',
@@ -115,7 +115,7 @@ function createBrandTheme(brandKey: BrandKey, isDark = false) {
       fontCode: '"SF Mono", "Monaco", "Consolas", monospace',
     });
   }
-  
+
   return create({
     base: 'light',
 
@@ -232,13 +232,13 @@ const styleId = 'mieweb-manager-theme';
 
 function injectBrandCSS(brandKey: BrandKey, isDark = false) {
   const brand = brandThemes[brandKey] || brandThemes.bluehive;
-  
+
   // Remove existing style
   const existingStyle = document.getElementById(styleId);
   if (existingStyle) {
     existingStyle.remove();
   }
-  
+
   // Dark mode colors
   const bgColor = isDark ? brand.appBgDark : brand.appBg;
   const borderColor = isDark ? brand.borderColorDark : brand.borderColor;
@@ -248,7 +248,7 @@ function injectBrandCSS(brandKey: BrandKey, isDark = false) {
   const barBg = isDark ? '#27272a' : '#ffffff';
   const inputBg = isDark ? '#27272a' : '#ffffff';
   const inputBorder = isDark ? '#3f3f46' : '#d1d5db';
-  
+
   // Create new style with brand colors
   const style = document.createElement('style');
   style.id = styleId;
@@ -468,9 +468,11 @@ function injectBrandCSS(brandKey: BrandKey, isDark = false) {
     label[for^="control-"]:has(input[role="switch"]) input[type="checkbox"] {
       background: transparent !important;
     }
-    ` : ''}
+    `
+      : ''
+    }
   `;
-  
+
   document.head.appendChild(style);
 }
 
@@ -480,18 +482,18 @@ addons.register('mieweb-brand-sync', (api) => {
   const initialGlobals = api.getGlobals();
   const initialBrand = (initialGlobals?.brand || 'bluehive') as BrandKey;
   const initialDark = initialGlobals?.theme === 'dark';
-  
+
   // Apply initial theme
   injectBrandCSS(initialBrand, initialDark);
   if (initialDark) {
     api.setOptions({ theme: createBrandTheme(initialBrand, true) });
   }
-  
+
   // Listen for global changes
   api.on('globalsUpdated', ({ globals }) => {
     const brand = (globals?.brand || 'bluehive') as BrandKey;
     const isDark = globals?.theme === 'dark';
-    
+
     // Update CSS and theme
     injectBrandCSS(brand, isDark);
     api.setOptions({ theme: createBrandTheme(brand, isDark) });

.storybook/preview.tsx

@@ -488,6 +488,8 @@ const preview: Preview = {
           [
             'Data display',
             ['Overview', '*'],
+            'Identity',
+            ['Overview', '*'],
             'Grids',
             ['Overview', '*'],
             'Feedback',
@@ -505,6 +507,8 @@ const preview: Preview = {
           [
             'Dashboards',
             ['Overview', '*'],
+            'Portals',
+            ['Overview', '*'],
             'Media',
             ['Overview', '*'],
             'Editors',
@@ -535,6 +539,8 @@ const preview: Preview = {
             ['Overview', '*'],
             'Providers',
             ['Overview', '*'],
+            'Provider discovery',
+            ['Overview', '*'],
             'Services',
             ['Overview', '*'],
             'Users & integrations',

.storybook/taxonomy.json

@@ -51,6 +51,7 @@
       "scope": "scope:general-purpose",
       "families": [
         "Data display",
+        "Identity",
         "Grids",
         "Feedback",
         "Loading",
@@ -64,6 +65,7 @@
       "scope": "scope:general-purpose",
       "families": [
         "Dashboards",
+        "Portals",
         "Media",
         "Editors",
         "Chat",
@@ -86,6 +88,7 @@
         "Employers",
         "Billing",
         "Providers",
+        "Provider discovery",
         "Services",
         "Users & integrations",
         "Operations"

CONTRIBUTING.md

@@ -336,6 +336,8 @@ Current notes:
 
 | Module                                                                       | Why it has notes                                                                                                                        |
 | ---------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| [PortalShell](src/components/PortalShell/MAINTAINERS.md) | SidebarProvider coupling, recursive navigation, persistence, responsive focus and inert content |
+| [ProviderMap](src/components/ProviderMap/MAINTAINERS.md) | Optional Mapbox peer/CDN loading, text-safe popups, shared assets and map lifecycle |
 | [AI](src/components/AI/MAINTAINERS.md)                                       | `renderTextContent` extension point; host owns sanitization; reuses the Messaging composer                                              |
 | [AGGrid (deprecated)](src/components/AGGrid/MAINTAINERS.md)                  | Legacy maintenance only; retained for existing consumers. Use [DataVis NITRO](src/components/DataVisNITRO/MAINTAINERS.md) for new work. |
 | [CustomizableDashboard](src/components/CustomizableDashboard/MAINTAINERS.md) | Ported portlet grid; `@dnd-kit` is a regular dependency; layout persistence and widget registry coupling                                |