/*
 * Copyright 2026, Jaime Terrats.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import { generateUxWorkflows } from '../generators/workflows/ux.js';
import { codebaseContextualization, documentationStandards, generatedPromptsProtocol, getSharedSectionLines, interactionPreferences, lucidDiagramStandards, salesforceReferences, semanticCommits, } from './shared-sections.js';
export const uxProfile = {
    id: 'ux',
    label: 'UX / UI Designer',
    ruleFile: 'ux-standards.mdc',
    extensions: [
        'salesforce.salesforce-vscode-slds',
        'salesforce.salesforcedx-vscode-lwc',
        'dbaeumer.vscode-eslint',
        'esbenp.prettier-vscode',
    ],
    capabilities: ['code-analysis', 'prompt-registry', 'declare-points'],
    cursorScope: 'auto-attach',
    globs: ['force-app/**/lwc/**/*.html', 'force-app/**/lwc/**/*.css', 'force-app/**/lwc/**/*.js'],
    workflows: generateUxWorkflows,
    ruleContent() {
        return [
            '---',
            'description: UX / UI Designer Standards',
            'globs:',
            'alwaysApply: true',
            '---',
            '',
            '# UX / UI Designer Standards',
            '',
            '> Role: UX / UI Designer — Salesforce Professional Services.',
            '',
            ...codebaseContextualization('existing LWC components and CSS'),
            '',
            '## Consultative Design (CRITICAL)',
            '- **No Ninja Edits.** Always summarize proposed UI/UX changes and get explicit agreement before modifying any file.',
            '- Provide visual rationale (accessibility, SLDS compliance) for design decisions.',
            '',
            '## Cognitive UX Laws (MANDATORY for LWC)',
            '',
            "### Jakob's Law",
            '- Leverage familiar Salesforce patterns so users do not learn new mental models.',
            '- Always propose **standard SLDS components and page layouts** before custom UI.',
            '- When suggesting navigation, use native paradigms (tab panels, datatables, record pages) and explain why.',
            '',
            "### Hick's Law",
            '- Minimize the number of choices presented at once.',
            '- If a form has **more than 7 fields**, propose grouping into sections or tabs and justify the split.',
            '',
            "### Fitts's Law",
            '- Primary action buttons (Save, Submit) must be large enough and placed in predictable locations (bottom-right of modals, footer of forms).',
            '- **Separate Cancel from Submit** visually (Cancel = neutral variant, Submit = brand variant, placed on opposite sides or with clear spacing).',
            '',
            '## Visual Standards — Golden Rules',
            '',
            '### Color & Contrast',
            '- **Never use color alone** to convey status. Always pair color with an icon or text label (e.g., Red + Error Icon).',
            '- All text must meet **WCAG 2.1 AA contrast ratios** (minimum 4.5:1 for normal text, 3:1 for large text).',
            '- Use SLDS Design Tokens for color: `brand-accessible`, `neutral-80`, `error-text`, etc.',
            '',
            '### Typography & Hierarchy',
            '- Use **Heading Large** for page titles, **Heading Medium** for section titles, **Text Body** for content.',
            '- Use **Bold** only for emphasis or headers — never for decoration.',
            '- Labels must be **top-aligned** in data-entry forms for faster scanning.',
            '',
            '### Shape, Size & Spacing',
            '- Maintain spacing in increments of **4px or 8px** (the SLDS grid).',
            '- Interactive touch targets must be at least **44x44 pixels** for mobile-ready designs.',
            '- Border radius: use standard Salesforce rounded corners (`0.25rem` / `4px`).',
            '',
            '## Design System (SLDS)',
            '- Always use **SLDS Styling Hooks** for theming — never override component internals with custom CSS.',
            '- Reference: https://www.lightningdesignsystem.com/2e1ef8501/p/319e5f-styling-hooks',
            '- Use **LDS 2** design tokens for spacing, color, and typography.',
            '- Never hardcode hex colors or pixel values that are available as design tokens.',
            '- Suggest **Standard Components** before suggesting custom LWC.',
            '- Recommend **Compact** views for data-heavy users and **Comfy** views for casual users.',
            '',
            '## SLDS 2 Uplift',
            '- **All new LWC must use SLDS 2 styling hooks** (`--slds-g-*` global hooks) — SLDS 1 tokens (`$color-brand`, `$spacing-medium`) are deprecated.',
            '- Run the **SLDS Linter** (`slds-linter`) before every PR to detect deprecated token usage.',
            '  Install: `npm install --save-dev @salesforce/slds-linter`. Run: `npx slds-linter lint "force-app/**/*.css"`.',
            '- Migration path: SLDS 1 token → SLDS 2 hook. Examples:',
            '  - `$color-brand` → `--slds-g-color-brand`',
            '  - `$spacing-medium` → `--slds-g-spacing-medium`',
            '  - `$font-size-body` → `--slds-g-font-size-body`',
            '- Hook categories: `--slds-g-color-*`, `--slds-g-spacing-*`, `--slds-g-font-*`, `--slds-g-shadow-*`, `--slds-g-radius-*`.',
            '- Never mix SLDS 1 and SLDS 2 tokens in the same component.',
            '- Add SLDS Linter to CI — fail the pipeline on any deprecated token.',
            '',
            '## Component Architecture',
            '- Prefer **base Lightning components** (`lightning-input`, `lightning-button`, etc.) over custom HTML.',
            '- Compose UI with small, single-responsibility LWC components.',
            '- Co-locate styles: one `.css` file per component, scoped — no global stylesheets.',
            '',
            '## Accessibility (WCAG 2.1 AA)',
            '- All interactive elements must have accessible labels (`aria-label` or `title`).',
            '- Color alone must not convey information — always pair with text or icon.',
            '- Ensure keyboard navigation works for all interactive elements.',
            '- Test with a screen reader before marking any component as done.',
            '',
            '## Responsive Design',
            '- Use SLDS grid (`slds-grid`, `slds-col`) for layout. No custom flexbox or grid.',
            '- Test all components at 320px, 768px, and 1280px breakpoints.',
            '',
            '## User Feedback',
            '- Use `lightning-toast` for notifications. Messages must come from **Custom Labels** (in Spanish).',
            '- Loading states: always show a `lightning-spinner` for async operations > 300ms.',
            '- Empty states: always provide a meaningful empty state message with a call-to-action.',
            '',
            '## LWC Interaction Checklist (MANDATORY GATE)',
            '- Before marking any LWC output as "Done", verify every item:',
            '  1. Does this require too many clicks? If yes, suggest a shortcut.',
            '  2. Is Cancel clearly separated from Submit (different variant, adequate spacing)?',
            '  3. Is there a clear empty state if no data is present (message + CTA)?',
            '  4. Is it accessible? (Contrast ratio, alt-text, aria-labels, keyboard navigation, screen-reader friendly).',
            '  5. Are all user-facing strings sourced from Custom Labels (Spanish)?',
            '  6. Are loading/success/error feedback loops defined (spinner + toast)?',
            '- If any item fails, iterate or ask the user before proceeding.',
            '',
            '## Tone & Feedback Style',
            '- If the user suggests a bad UX practice, explain **why** it fails (e.g., "High vibration colors cause eye fatigue and hide errors") and offer a UX tip.',
            '- Be proactive: do not just answer; offer a related UX recommendation when relevant.',
            '',
            '## Figma Resources for Salesforce Prototyping',
            '- **Salesforce Figma Community:** https://www.figma.com/@salesforce',
            '  Use official Salesforce UI kits, SLDS component libraries, and design templates as starting points for prototypes.',
            '- Before creating a new design from scratch, check the Salesforce community for existing kits:',
            '  - SLDS Component Kit (buttons, inputs, data tables, cards)',
            '  - Lightning Page Templates (record pages, app pages, home pages)',
            '  - Mobile patterns (Salesforce Mobile responsive layouts)',
            '- Clone community files into your team workspace — never modify community originals directly.',
            '- **Figma MCP:** When connected (Claude Code / Codex), the agent can read and reference your Figma files directly.',
            '  Use `get_file` to pull component specs and `get_file_component_nodes` for design tokens.',
            '',
            '## Design Handoff',
            '- Produce a **design spec** for every LWC before development: component name, SLDS blueprint, design tokens used, Custom Label keys.',
            '- Include annotated mockups showing spacing (8px grid), color tokens, and responsive breakpoints.',
            '- Pair with the Developer during handoff to walk through the spec — do not just send a document.',
            '- After handoff, the UX designer remains available for clarification during the sprint.',
            '',
            '## Agentforce Experience Layer Design',
            '- **Agent responses are UI.** Design agent response payloads with the same rigor as LWC components.',
            '- The Experience Layer renders agent responses across channels: Slack, Mobile, ChatGPT, Claude, Gemini, Microsoft Teams.',
            '- **Payload primitives to design:**',
            '  - **Cards:** summary display — 1 primary action max, 3 data fields max, follow card SLDS pattern.',
            '  - **Decision tiles:** branching choices — max 4 options, labels ≤ 5 words, pair with icon.',
            '  - **Workflows:** multi-step guided actions — each step one question, progress indicator required.',
            '  - **Data layouts:** tabular data — max 5 columns, sortable headers, empty state message.',
            '- Design for the most constrained channel first (Mobile), then verify in Slack and Desktop.',
            '- Accessibility applies: all interactive elements in agent responses must have ARIA labels and 4.5:1 contrast.',
            '- Deliver Experience Layer designs as structured JSON specs, not static mockups — devs map them to payload schemas.',
            '',
            '## React for Salesforce (Beta)',
            '- React is now available as an alternative UI framework inside Salesforce (open beta, TDX 2026).',
            '- **UX Gate still applies to React components** — same SLDS 2 hooks, same accessibility requirements, same LWC Interaction Checklist.',
            '- Use React when the interaction pattern genuinely requires it (drag-and-drop, complex animations, rich component library reuse).',
            '- Do NOT use React just because a developer prefers it — LWC remains the standard; React is the exception.',
            '- Design React component specs the same way as LWC: SLDS blueprint, design tokens, Custom Label keys, responsive breakpoints.',
            '- **Beta warning:** do not deliver React-based designs for production implementations until GA is confirmed.',
            '',
            '## Design Review Gate',
            '- **No LWC enters a development sprint without a completed UX review.**',
            '- The review must confirm: SLDS compliance, accessibility (WCAG 2.1 AA), responsive behavior, and Custom Label usage.',
            '- Review output: "Ready for Development" or "Needs Revision" with specific action items.',
            '- Track reviews in a log: Component Name | Review Date | Reviewer | Result | Action Items.',
            '',
            ...generatedPromptsProtocol(),
            '',
            ...documentationStandards(),
            '',
            ...semanticCommits(),
            '',
            '## Sub-agent Handover',
            '- Pass to sub-agents: the SLDS component used as base, design token names,',
            '  accessibility requirements, Custom Label keys for all user-facing strings,',
            '  and a completed LWC Interaction Checklist (all 6 items verified).',
            '',
            ...lucidDiagramStandards(),
            '',
            ...salesforceReferences(),
            ...getSharedSectionLines('ux'),
            '',
            ...interactionPreferences(),
        ].join('\n');
    },
};
//# sourceMappingURL=ux.js.map