@pudge-ui/mcp-server 0.1.0

package/spec/components/overlays/dialog.md

@@ -0,0 +1,100 @@
+---
+name: Dialog
+id: dialog
+class: .phone-dialog
+category: overlays
+index: 5
+materials: [glossy-polycarbonate]
+sizes: [default]
+interactive: true
+requires_js: true
+canvas: false
+---
+
+# Dialog
+
+## Physical Analog
+**Reference devices**: Nokia phone confirmation dialogs, iPod "delete song?" prompt, camera "format card?" dialog.
+**Mechanism**: A modal dialog box styled to match the device's design language -- rounded corners matching the phone's screen shape, soft-key button row at the bottom matching the physical soft-key buttons below the phone's screen. The elevated shadow (`shadow-deep`) makes the dialog appear to "float" above the underlying content.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Max width | 220px |
+| Padding | 16px |
+| Border radius | `--radius-lg` (14px) |
+| Content gap | 12px |
+| Title font size | 11px |
+| Body font size | 10px |
+| Action button height | 32px |
+
+## CSS Recipe
+
+### Container (`.phone-dialog`)
+```css
+.phone-dialog {
+  background: var(--bg-raised); border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg); padding: 16px;
+  box-shadow: var(--shadow-deep); max-width: 220px;
+  display: flex; flex-direction: column; gap: 12px;
+}
+```
+
+### Title (`.dialog-title`)
+```css
+.dialog-title { font-family: var(--font-ui); font-size: 11px; font-weight: 600; color: var(--text-primary); letter-spacing: 1px; text-align: center; }
+```
+
+### Body (`.dialog-body`)
+```css
+.dialog-body { font-family: var(--font-ui); font-size: 10px; color: var(--text-secondary); text-align: center; line-height: 1.6; }
+```
+
+### Actions (`.dialog-actions`)
+```css
+.dialog-actions { display: flex; gap: 8px; margin-top: 4px; }
+.dialog-actions .gel-btn { flex: 1; height: 32px; min-width: 0; font-size: 9px; }
+```
+
+## HTML Structure
+```html
+<div class="phone-dialog">
+  <div class="dialog-title">DELETE FILE?</div>
+  <div class="dialog-body">This action cannot be undone. The file will be permanently removed.</div>
+  <div class="dialog-actions">
+    <button class="gel-btn">CANCEL</button>
+    <button class="gel-btn pink">DELETE</button>
+  </div>
+</div>
+```
+
+## Size Variants
+No size variants defined.
+
+## Material Variants
+No material variants. Uses standard raised surface with elevated shadow.
+
+## Theme Behavior
+- Background swaps via `--bg-raised`
+- Shadow depth reduces in light mode via `--shadow-deep`
+- Text colors adapt via tokens
+- Action buttons (gel-btn) follow their own theme behavior
+
+## Constraints
+1. MUST use `--radius-lg` corners (matching phone screen shape)
+2. MUST center-align title and body text
+3. MUST use `flex-direction: column` with gap for consistent spacing
+4. Action buttons MUST use `flex: 1` for equal-width buttons
+5. MUST use `--shadow-deep` for floating elevation
+6. Max width MUST be 220px (phone-proportioned)
+7. Destructive action button MUST use `.pink` variant
+
+## Accessibility
+- Use `role="dialog"` and `aria-modal="true"`
+- Include `aria-labelledby` pointing to the title element
+- Include `aria-describedby` pointing to the body text
+- Focus MUST be trapped within the dialog while open
+- Escape key should dismiss (if cancellable)
+- Focus should move to the first action button when dialog opens
+- On close, focus returns to the trigger element

package/spec/components/overlays/focus-brackets.md

@@ -0,0 +1,124 @@
+---
+name: Focus Brackets
+id: focus-brackets
+class: .focus-box
+category: overlays
+index: 7
+materials: []
+sizes: [default]
+interactive: false
+requires_js: true
+canvas: true
+---
+
+# Focus Brackets
+
+## Physical Analog
+**Reference devices**: Every autofocus camera since the Nikon F5 (1996) -- Sony, Canon, Nikon, Fujifilm.
+**Mechanism**: The camera's autofocus system overlays bracket indicators on the viewfinder/EVF image at the position of detected subjects. Each bracket is formed from four L-shaped corner marks that define a bounding rectangle. Three states: Searching/acquiring (brackets pulse with opacity oscillation), Locked (brackets turn solid green), and Face/Eye AF labels (text labels below brackets).
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Demo container | 200x140px |
+| Corner mark size | 12x12px |
+| Corner border width | 2px |
+| Label font size | 9px |
+| Label offset | -18px below box |
+| Pulse animation | 0.6s |
+
+## CSS Recipe
+
+### Demo container (`.focus-demo`)
+```css
+.focus-demo {
+  width: 200px; height: 140px; background: #222;
+  border-radius: var(--radius-sm); position: relative; overflow: hidden;
+  border: 1px solid #1e1e1e;
+}
+```
+
+### Focus box (`.focus-box`)
+```css
+.focus-box { position: absolute; border: none; }
+```
+
+### Corner marks (`.focus-corner`)
+```css
+.focus-corner {
+  position: absolute; width: 12px; height: 12px;
+  border-color: var(--amber); border-style: solid; opacity: 0.9;
+}
+.focus-corner.tl { top: 0; left: 0; border-width: 2px 0 0 2px; }
+.focus-corner.tr { top: 0; right: 0; border-width: 2px 2px 0 0; }
+.focus-corner.bl { bottom: 0; left: 0; border-width: 0 0 2px 2px; }
+.focus-corner.br { bottom: 0; right: 0; border-width: 0 2px 2px 0; }
+```
+
+### Acquiring (searching) animation
+```css
+@keyframes focusPulse { to{opacity:0.3} }
+.focus-box.acquiring .focus-corner { opacity: 0.7; animation: focusPulse 0.6s ease-in-out infinite alternate; }
+```
+
+### Locked state
+```css
+.focus-box.locked .focus-corner { border-color: var(--green-hi); }
+```
+
+### Label (`.focus-label`)
+```css
+.focus-label {
+  position: absolute; bottom: -18px; left: 0;
+  font-size: 9px; color: var(--amber); letter-spacing: 1px; white-space: nowrap;
+  font-family: var(--font-ui);
+}
+.focus-box.locked .focus-label { color: var(--green-hi); }
+```
+
+## HTML Structure
+```html
+<div class="focus-demo" style="background:#333">
+  <!-- Acquiring state -->
+  <div class="focus-box" style="top:20px;left:30px;width:60px;height:60px">
+    <div class="focus-corner tl"></div>
+    <div class="focus-corner tr"></div>
+    <div class="focus-corner bl"></div>
+    <div class="focus-corner br"></div>
+    <div class="focus-label">FACE</div>
+  </div>
+  <!-- Locked state -->
+  <div class="focus-box locked" style="top:40px;left:120px;width:40px;height:40px">
+    <div class="focus-corner tl"></div>
+    <div class="focus-corner tr"></div>
+    <div class="focus-corner bl"></div>
+    <div class="focus-corner br"></div>
+    <div class="focus-label">EYE AF</div>
+  </div>
+</div>
+```
+
+## Size Variants
+No size variants defined. Box size is determined by detected subject.
+
+## Material Variants
+No material variants. Pure HUD overlay element.
+
+## Theme Behavior
+- Bracket colors are fixed (amber for acquiring, green-hi for locked) regardless of theme
+- Demo container background is fixed dark (#222/#333) to simulate viewfinder
+
+## Constraints
+1. MUST use four L-shaped corner marks (not a full border)
+2. Corner marks MUST be 12x12px with 2px border
+3. Acquiring state MUST pulse between 0.7 and 0.3 opacity at 0.6s cycle
+4. Locked state MUST use `--green-hi` (#66ff66) for confirmed focus
+5. Default/acquiring color MUST be `--amber`
+6. Labels MUST appear below the bracket box
+7. Label color MUST match bracket color (amber or green)
+
+## Accessibility
+- Focus brackets are visual-only overlays (decorative in the UI context)
+- If used to convey status, add `aria-live="polite"` region with text description
+- State changes should be announced: "Focus acquired", "Focus locked on [subject]"

package/spec/components/overlays/grid-overlay.md

@@ -0,0 +1,93 @@
+---
+name: Grid Overlay
+id: grid-overlay
+class: .grid-overlay-demo
+category: overlays
+index: 8
+materials: []
+sizes: [default]
+interactive: false
+requires_js: false
+canvas: true
+---
+
+# Grid Overlay
+
+## Physical Analog
+**Reference devices**: Camera viewfinder grid display (rule-of-thirds, crosshair).
+**Mechanism**: A composition guide overlay. The rule-of-thirds grid divides the viewfinder into a 3x3 grid with two vertical and two horizontal lines. Intersection points are suggested focal points for subject placement. The center crosshair (dot) marks the exact frame center. Lines are rendered at very low opacity (12%) so they are visible but do not interfere with viewing the image.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Demo container | 240x160px |
+| Grid lines | 1px wide |
+| Line opacity | 12% white |
+| Center dot | 6x6px circle |
+| Vertical lines at | 33.3% and 66.6% |
+| Horizontal lines at | 33.3% and 66.6% |
+
+## CSS Recipe
+
+### Container (`.grid-overlay-demo`)
+```css
+.grid-overlay-demo {
+  width: 240px; height: 160px; background: #1a1a1a;
+  border: 1px solid #2a2a2a; border-radius: var(--radius-sm);
+  position: relative; overflow: hidden;
+}
+```
+
+### Vertical lines (`.grid-line-v`)
+```css
+.grid-line-v { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,0.12); }
+```
+
+### Horizontal lines (`.grid-line-h`)
+```css
+.grid-line-h { position: absolute; left: 0; right: 0; height: 1px; background: rgba(255,255,255,0.12); }
+```
+
+### Center dot (`.grid-center-dot`)
+```css
+.grid-center-dot {
+  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
+  width: 6px; height: 6px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2);
+}
+```
+
+## HTML Structure
+```html
+<div class="grid-overlay-demo">
+  <div class="grid-line-v" style="left:33.3%"></div>
+  <div class="grid-line-v" style="left:66.6%"></div>
+  <div class="grid-line-h" style="top:33.3%"></div>
+  <div class="grid-line-h" style="top:66.6%"></div>
+  <div class="grid-center-dot"></div>
+</div>
+```
+
+## Size Variants
+No size variants defined. Overlay scales to parent container.
+
+## Material Variants
+No material variants. Pure HUD overlay element.
+
+## Theme Behavior
+- Grid lines use fixed rgba values (do not change with theme)
+- Container background is fixed dark (#1a1a1a) to simulate viewfinder
+- Center dot border uses fixed 20% white opacity
+
+## Constraints
+1. Grid lines MUST be at exactly 33.3% and 66.6% positions (rule of thirds)
+2. Line opacity MUST be 12% (visible but non-interfering)
+3. Lines MUST be exactly 1px wide
+4. Center dot MUST be a circle (border-radius: 50%) with border only (no fill)
+5. Center dot MUST use 20% white opacity border
+6. Container MUST use `position: relative` and `overflow: hidden`
+
+## Accessibility
+- Grid overlay is entirely decorative
+- All elements should be hidden from assistive technology
+- Use `aria-hidden="true"` on the container

package/spec/components/overlays/modal.md

@@ -0,0 +1,89 @@
+---
+name: Modal
+id: modal
+class: .modal-overlay
+category: overlays
+index: 10
+materials: [glass, glossy-polycarbonate]
+sizes: [default]
+interactive: true
+requires_js: true
+canvas: false
+---
+
+# Modal
+
+## Physical Analog
+**Reference devices**: Device screen overlay, camera settings overlay, phone OS modal sheets.
+**Mechanism**: A full-screen backdrop with a centered content panel. The backdrop uses semi-transparent black with backdrop-filter blur to dim and defocus the underlying content, simulating a device screen that has been partially obscured by a system-level overlay.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Overlay size | 300x200px (demo) |
+| Overlay background | rgba(0,0,0,0.6) |
+| Blur | 4px |
+| Content max-width | 240px |
+| Content padding | 20px |
+| Content border radius | `--radius-lg` (14px) |
+| Content shadow | 0 8px 32px rgba(0,0,0,0.4) |
+
+## CSS Recipe
+
+### Overlay (`.modal-overlay`)
+```css
+.modal-overlay {
+  width: 300px; height: 200px; position: relative;
+  background: rgba(0,0,0,0.6); border-radius: var(--radius-lg);
+  display: flex; align-items: center; justify-content: center;
+  backdrop-filter: blur(4px);
+}
+```
+
+### Content (`.modal-content`)
+```css
+.modal-content {
+  background: var(--bg-raised); border: 1px solid var(--border-mid);
+  border-radius: var(--radius-lg); padding: 20px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
+  max-width: 240px; width: 100%;
+}
+```
+
+## HTML Structure
+```html
+<div class="modal-overlay">
+  <div class="modal-content">
+    <!-- modal content here -->
+  </div>
+</div>
+```
+
+## Size Variants
+No size variants defined. Content panel sizes to content.
+
+## Material Variants
+- Overlay: glass material (backdrop-filter blur)
+- Content panel: standard raised surface
+
+## Theme Behavior
+- Overlay background is fixed rgba(0,0,0,0.6) in both themes
+- Content panel background swaps via `--bg-raised`
+- Content shadow is stronger than standard panels (0.4 opacity)
+
+## Constraints
+1. Overlay MUST use `backdrop-filter: blur(4px)` for frosted glass effect
+2. Overlay MUST be 60% opaque black
+3. Content panel MUST use elevated shadow (0 8px 32px, stronger than standard)
+4. Content MUST be centered via flex
+5. Content MUST use `--radius-lg` corners
+6. In production, overlay should cover full viewport with `position: fixed; inset: 0`
+
+## Accessibility
+- Overlay should have `role="dialog"` and `aria-modal="true"`
+- Include `aria-labelledby` for the modal title
+- Focus MUST be trapped within the modal
+- Escape key should close the modal
+- Background content should have `aria-hidden="true"` and `inert` while modal is open
+- Focus returns to trigger element on close

package/spec/components/overlays/panel.md

@@ -0,0 +1,114 @@
+---
+name: Panel
+id: panel
+class: .panel
+category: overlays
+index: 1
+materials: [brushed-metal]
+sizes: [default]
+interactive: false
+requires_js: false
+canvas: true
+---
+
+# Panel
+
+## Physical Analog
+**Reference devices**: 19-inch rack-mount equipment modules (PreSonus, Mackie, MOTU), modular synthesizer panels (Eurorack).
+**Mechanism**: A CNC-milled aluminum or stamped steel panel that forms the front face of a rack-mount module. The panel has chamfered edges (CNC-milled 45-degree bevels around the perimeter that catch light on the top and left edges), corner registration marks (L-shaped alignment marks used during manufacturing), and a serial/revision block at the bottom.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Padding | 22px |
+| Border radius | `--radius-lg` (14px) |
+| Corner marks | 14x14px L-shapes |
+| Corner mark offset | 10px from edges |
+| Title font size | 11px |
+| Label font size | 9px |
+
+## CSS Recipe
+
+### Container (`.panel`)
+```css
+.panel {
+  position: relative;
+  background: linear-gradient(180deg, var(--bg-surface), var(--bg-panel));
+  border: 1px solid var(--border-mid); border-radius: var(--radius-lg);
+  padding: 22px;
+  box-shadow: 0 2px 0 var(--border-deep), 0 10px 28px rgba(0,0,0,0.3), inset 0 1px 0 var(--border-hi);
+  overflow: hidden;
+}
+```
+
+### Corner registration marks
+```css
+.panel::before, .panel::after {
+  content: ''; position: absolute; width: 14px; height: 14px;
+  border: 1px solid var(--border-hi); opacity: 0.35;
+}
+.panel::before { top: 10px; left: 10px; border-right: none; border-bottom: none; }
+.panel::after { right: 10px; bottom: 10px; border-left: none; border-top: none; }
+```
+
+### Title (`.panel-title`)
+```css
+.panel-title {
+  font-family: var(--font-display); letter-spacing: 2px;
+  font-size: 11px; margin-bottom: 14px; color: var(--text-primary);
+}
+```
+
+### Label (`.panel-label`)
+```css
+.panel-label {
+  color: var(--text-muted); letter-spacing: 2px;
+  font-size: 9px; margin-bottom: 10px; font-family: var(--font-ui); font-weight: 500;
+}
+```
+
+### Serial block (`.serial`)
+```css
+.serial { margin-top: 16px; color: var(--text-muted); font-size: 9px; letter-spacing: 2px; display: flex; justify-content: space-between; font-family: var(--font-ui); }
+```
+
+## HTML Structure
+```html
+<div class="panel" style="width:240px">
+  <div class="panel-title">CONTROL CLUSTER</div>
+  <div class="panel-label">SYSTEM STATUS</div>
+  <div class="flex-row" style="gap:8px">
+    <button class="push-btn xs active">MODE</button>
+    <button class="push-btn xs">SYS</button>
+    <button class="push-btn xs">NAV</button>
+  </div>
+  <div class="serial"><span>REV-B</span><span>UNIT-04</span></div>
+</div>
+```
+
+## Size Variants
+No size variants defined. Width is set by content or parent container.
+
+## Material Variants
+No material variants. Uses machined panel surface gradient.
+
+## Theme Behavior
+- Background gradient swaps via `--bg-surface` / `--bg-panel` tokens
+- Corner marks use `--border-hi` (adapts to theme)
+- Shadow stack reduces in light mode (0.3 ambient shadow becomes 0.08)
+- Top highlight (`inset 0 1px 0 var(--border-hi)`) adapts automatically
+
+## Constraints
+1. MUST use `position: relative` for corner mark positioning
+2. MUST include L-shaped corner registration marks via `::before` and `::after`
+3. Corner marks MUST be at 35% opacity
+4. MUST use Tier 3 (elevated) shadow model: 2px hard edge + 10px ambient + inset highlight
+5. MUST use `overflow: hidden` to prevent content from overlapping corners
+6. Title MUST use `--font-display` (Michroma) for equipment branding feel
+7. Serial/revision block SHOULD appear at the bottom
+
+## Accessibility
+- Use `role="region"` with `aria-label` describing the panel's purpose
+- Panel title should use appropriate heading level
+- Corner marks are decorative (handled by pseudo-elements, inherently hidden from AT)

package/spec/components/overlays/plastic-card.md

@@ -0,0 +1,92 @@
+---
+name: Plastic Card
+id: plastic-card
+class: .plastic-card
+category: overlays
+index: 3
+materials: [glossy-polycarbonate]
+sizes: [default]
+interactive: false
+requires_js: false
+canvas: false
+---
+
+# Plastic Card
+
+## Physical Analog
+**Reference devices**: CompactFlash card, memory stick, ID badge.
+**Mechanism**: A credit-card-sized or smaller component -- injection-molded polycarbonate with a thickness of 1-2mm. The glossy catch-light highlight and subtle depth shadow simulate the material properties of a thin plastic card.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Padding | 14px |
+| Border radius | `--radius-md` (8px) |
+| Label font size | 8px |
+| Value font size | 20px |
+| Sub font size | 9px |
+
+## CSS Recipe
+
+### Container (`.plastic-card`)
+```css
+.plastic-card {
+  background: linear-gradient(180deg, var(--bg-raised), var(--bg-surface));
+  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
+  padding: 14px;
+  box-shadow: 0 2px 0 var(--border-deep), 0 2px 8px rgba(0,0,0,0.1), inset 0 1px 0 var(--glossy-hi);
+}
+```
+
+### Label (`.card-label`)
+```css
+.plastic-card .card-label {
+  font-family: var(--font-ui); font-size: 8px; font-weight: 500;
+  letter-spacing: 2px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px;
+}
+```
+
+### Value (`.card-value`)
+```css
+.plastic-card .card-value { font-family: var(--font-mono); font-size: 20px; color: var(--text-primary); letter-spacing: 1px; }
+```
+
+### Sub-text (`.card-sub`)
+```css
+.plastic-card .card-sub { font-family: var(--font-ui); font-size: 9px; color: var(--text-secondary); margin-top: 2px; }
+```
+
+## HTML Structure
+```html
+<div class="plastic-card" style="width:160px">
+  <div class="card-label">STORAGE</div>
+  <div class="card-value">32<span style="font-size:12px;color:var(--text-muted)">GB</span></div>
+  <div class="card-sub">CF Card -- Slot 1</div>
+</div>
+```
+
+## Size Variants
+No size variants defined. Width set by parent or inline style.
+
+## Material Variants
+No material variants. Uses glossy polycarbonate depth model (2px edge + glossy inset highlight).
+
+## Theme Behavior
+- Background gradient adapts via `--bg-raised` / `--bg-surface`
+- Glossy highlight (`--glossy-hi`) adapts to theme
+- Shadow ambient component (0.1 opacity) is subtle in both themes
+- Text colors swap via tokens
+
+## Constraints
+1. MUST use `--glossy-hi` inset highlight (polycarbonate catch-light)
+2. MUST use `--radius-md` (not lg -- card is smaller than a panel)
+3. Shadow MUST be lighter than Panel -- 2px hard edge + 2px 8px ambient (not 10px 28px)
+4. Value MUST use monospace font at 20px for prominent data display
+5. Label MUST be uppercase with 2px letter-spacing
+6. Units should be smaller font size and muted color
+
+## Accessibility
+- Use appropriate semantic elements for label/value pairs
+- Consider `role="group"` with `aria-label` for the card
+- Value should be readable by screen readers (include units in text)

package/spec/components/overlays/popover.md

@@ -0,0 +1,75 @@
+---
+name: Popover
+id: popover
+class: .popover
+category: overlays
+index: 11
+materials: [glossy-polycarbonate]
+sizes: [default]
+interactive: true
+requires_js: true
+canvas: false
+---
+
+# Popover
+
+## Physical Analog
+**Reference devices**: Equipment info panels, camera setting detail popups, expanded parameter displays.
+**Mechanism**: A floating content panel that appears near a trigger element to show additional information or controls. Unlike tooltips (read-only, small), popovers can contain interactive content and are larger. Distinguished from dialogs by not requiring a backdrop overlay.
+
+## Geometry
+
+| Property | Value |
+|----------|-------|
+| Padding | 10px 14px |
+| Border radius | `--radius-md` (8px) |
+| Max width | 180px |
+| Font size | 10px |
+| Line height | 1.6 |
+| Shadow | 0 4px 16px rgba(0,0,0,0.3) |
+
+## CSS Recipe
+
+### Container (`.popover`)
+```css
+.popover {
+  padding: 10px 14px; background: var(--bg-raised);
+  border: 1px solid var(--border-mid); border-radius: var(--radius-md);
+  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
+  font-family: var(--font-ui); font-size: 10px; color: var(--text-secondary);
+  max-width: 180px; line-height: 1.6;
+}
+```
+
+## HTML Structure
+```html
+<div class="popover">
+  Additional details and controls appear here. This panel can contain interactive elements.
+</div>
+```
+
+## Size Variants
+No size variants defined.
+
+## Material Variants
+No material variants. Uses standard raised surface with floating shadow.
+
+## Theme Behavior
+- Background swaps via `--bg-raised`
+- Border adapts via `--border-mid`
+- Text uses `--text-secondary` (slightly muted, secondary reading)
+- Shadow reduces in light mode
+
+## Constraints
+1. MUST use `--radius-md` (between tooltip's sm and panel's lg)
+2. Max width MUST be 180px (compact, not a full panel)
+3. Shadow MUST be 0 4px 16px (floating above surface, between tooltip and modal depth)
+4. Text MUST use `--text-secondary` (secondary information context)
+5. MUST NOT use backdrop overlay (popovers are non-modal)
+
+## Accessibility
+- Trigger should have `aria-haspopup="true"` and `aria-expanded="true/false"`
+- Popover should have `role="dialog"` (if interactive) or an appropriate role
+- Popover should be dismissible with Escape key
+- If interactive, focus should move to popover content
+- Clicking outside should dismiss the popover