🏗️ Architecture: How should the duplicated resize handle code (6+ locations, ...

Date: 2026-03-04
Time: 16:34:00 UTC
Session: gspace1-175.9
Agent: angular
Confidence: 95%
Status: ✅ Documented

📋 Decision Context

Question:

How should the duplicated resize handle code (6+ locations, ~200 lines each of identical mouse/touch handling + CSS) be consolidated into a reusable pattern?

Task: Session 175: Created @libs-ux/ux-resize library — DRY resize handle pattern

🎯 Decision Made

Chosen:

Created @libs-ux/ux-resize NX library with two exports: UxResizableDirective (behavior primitive — mouse/touch/keyboard, RAF throttling, iframe blocking, text selection prevention, ARIA separator role) and UxResizeHandleComponent (convenience wrapper with grip dots + accent line visual). Directive handles edge='start'|'end' for left/right panels, direction='horizontal'|'vertical', min/max clamping. Component has 3 variants: dots (default), line (no dots), invisible (hit area only). Library builds as ux-resize-lib via custom build-angular-library.js script. Migrated 4 locations: gograb-ai AppComponent, gograb-space MainLayoutComponent (2 handles — AI panel + Command panel), gograb-dev App, vitto-unified-shell. Removed ~200 lines of duplicated inline resize code + CSS.

Options Considered:

1. New NX library with directive + component pattern (chosen)
2. Shared SCSS mixin only (no behavior reuse)
3. Abstract base class for resize-capable components
4. Third-party library (angular-resizable-element or similar)

💭 Reasoning

The directive+component pattern follows the 'Build the UI, Buy the Engine' convention from Session 135. This IS a visual/interaction component (our competitive advantage), not a parsing engine (where we'd use a library). The directive provides the behavior primitive — any element can become a resize handle by adding [uxResizable]. The component provides the standard visual (grip dots + accent line) that matches our platform design language. Separating behavior from visuals means teams can use the directive with custom visuals or the component for the standard look. The library adds touch support, keyboard support (arrow keys with Shift for 50px jumps), ARIA accessibility, and prefers-reduced-motion — features none of the inline implementations had. NX project naming convention: ux-resize-lib (not libs-ux-ux-resize), build command uses libs-ux/ux-resize path.

📁 Files Involved

• libs/libs-ux/ux-resize/src/lib/directives/ux-resizable.directive.ts
• libs/libs-ux/ux-resize/src/lib/components/ux-resize-handle.component.ts
• libs/libs-ux/ux-resize/src/lib/components/ux-resize-handle.component.html
• libs/libs-ux/ux-resize/src/lib/components/ux-resize-handle.component.scss
• libs/libs-ux/ux-resize/src/lib/models/resize.types.ts
• libs/libs-ux/ux-resize/src/index.ts
• libs/libs-ux/ux-resize/project.json
• apps/gograb-ai/src/app/app.component.ts
• apps/gograb-space/src/app/components/layout/main-layout/main-layout.component.ts
• apps/gograb-dev/src/app/app.ts
• libs/libs-ai/vitto-hub/src/lib/components/vitto-unified-shell/vitto-unified-shell.component.ts
• tsconfig.base.json

🔗 Related

• Decision ID: dev_1772642040282_1tl3u9j
• Session: 175
• Workspace: gspace1

Auto-generated by MCP Smart Consolidation